Создайте свой собственный эффект взрыва пикселя ActionScript 3.0

В этом уроке вы узнаете, как создать эффект, который наверняка попался вам на глаза (например, в файлах, подобных этому ), Pixel Explosion. В процессе его создания мы узнаем, как извлечь BitmapData из MovieClip, как использовать механизм анимации движения и как использовать прослушиватели событий.

Тогда начнем!

Шаг 1: настройка сцены

Первое, что мы сделаем, это создадим флеш-файл AS3. Затем мы настроим нашу сцену на 400px x 400px и 30 кадров в секунду. Мы будем писать на временной шкале, чтобы упростить задачу, но те, кто знает, как программировать на ООП, могут писать этот код в классах. Вам понадобятся базовые знания AS3, чтобы понять все процессы, включенные в это руководство; однако я постараюсь сделать это очень просто. Кнопки с синими крыльями — это те, которые вам придется нажимать в вашей IDE. Поначалу это может показаться трудоемким, но на самом деле все очень просто.

Шаг 2: Рисуем наше основное изображение

Теперь нарисуем векторное изображение того, что нам нужно. Вы можете действительно настроить любое изображение с этим эффектом (.jpg, .png), но векторы круче. Как вы заметите, я не большой дизайнер. Все, что вам нужно сделать, это нарисовать ваше изображение (или импортировать JPG с вашего компьютера), выбрать его и преобразовать в MovieClip (нажмите F8 в Windows).

Шаг 3: Подготовка к коду

После того, как вы преобразовали свое изображение в мувиклип, вы можете подготовить его к коду, который на него нацелится. Мы создадим новый слой для действий (1.), а затем дадим ему имя экземпляра mcLogo (2.). Затем мы импортируем классы для использования в нашем слое действий. Для этого эффекта нам понадобится хороший анимационный движок. Лучший из найденных мной, который поддерживает скорость и стабильность, это TweenMax. Вы можете скачать его с http://blog.greensock.com/tweenmaxas3/ (пожертвуйте, если вам это нравится). Не забудьте скопировать каталог классов в тот же каталог, что и ваш .fla (как вы можете видеть в синем поле). Наконец, импортируйте класс TweenMax в вашу временную шкалу (3.).

Шаг 4: Подготовка к действию

Теперь мы настроим сцену и наши основные переменные. Мы выровняем сцену по углу TOP_LEFT и настроим ее так, чтобы она не масштабировалась. Со стороны переменных, мы создадим контейнер для хранения всех пикселей, которые будут взорваться. Мы также создадим GlowFilter, это, конечно, не обязательно, но это увеличит потрясающий эффект. «Анимация» — это переключатель, который становится истинным, когда эффект имеет место, а «pixelBMP» — это растровые данные вашего изображения.

Далее мы создадим переменные повторения и назначим положение контейнера для пикселей таким же, как у вашего изображения.

Шаг 5: Создайте держатели пикселей

Теперь мы извлечем данные растрового изображения (цвета пикселей) из изображения, которое вы настроили (1.). Запомните эти две строки, они помогут вам и в других проектах. Мы создадим новый символ из библиотеки (2.) и нажмем кнопку «Дополнительно». После нажатия выберите «Экспорт для ActionScript» (3.). Найдите текстовое поле Class и введите «myPixel».

Шаг 6: Настройте класс MyPixel

Теперь мы настроим пиксельный контейнер. Мы введем наш недавно созданный пиксельный эффект и создадим слой с именем «action».

Шаг 7: Настройка пикселей для получения цветов

На слое действий мы настроим растровое изображение. Этот небольшой фрагмент кода поможет вам каждый раз, когда вы захотите манипулировать данными bitmapData объекта (например, с другими полезными эффектами, такими как десатурация и размытие).

Я создал круг, который содержит цвет каждого пикселя, но вы можете настроить его по своему желанию; квадрат, треугольник или даже простой пиксель. Добавляем эффект свечения пикселей из параметра функции:

Шаг 8: Пересекая все пиксели

Мы создадим два оператора for для всех пикселей нашего изображения. Первое для (i) для вертикальной, а второе (j) для горизонтальной. Метод getPixel возвращает единицу, представляющую цвет пикселя в этой позиции. Если оно не равно нулю, начнутся операции, представленные на шаге 9. Мы пересечем пиксели два на два из-за управления памятью.

Шаг 9: придание цвета пикселям

Мы начнем с назначения цвета пикселя фильтру свечения. Затем мы создадим новый myPixel, который назовем «pixel_mc». Мы назовем функцию «setUpPixel», которую мы определили на шаге 7. Это передает bitmapData — 2 пикселя в ширину, 2 пикселя в высоту, цвет текущего пикселя, originalX, originalY и фильтр свечения. Наконец, мы добавляем этот пиксель в контейнер пикселей (строка 12)

Шаг 10: Тестирование того, что мы уже сделали.

Маленькие ошибки очень распространены в программировании, поэтому нам нужно время от времени проверять наш мувиклип. Это дает нам наше изображение, но и немного размытости. Размытость из-за светящегося фильтра, поэтому не стоит беспокоиться. Как вы, возможно, уже знаете, нам не нужны эти пиксели, чтобы быть видимыми, кроме случаев, когда к ним применяется наш эффект. До этого у нас есть хороший образ. Поэтому все, что вам нужно сделать на этом шаге — это раскомментировать строку 13 — pixelContainer.visible = false; и вы получите свое первоначальное изображение обратно.

Шаг 11: Настройка эффекта взрыва

У нас есть пиксели на месте, теперь все, что нам нужно сделать, это анимировать их. Это где TweenMax выходит на сцену. Мы запускаем функцию, делая исходное изображение невидимым, а пиксели видимыми. Далее мы установим исходное изображение и кнопку, которую мы создадим позже (для включения функции), в самом верхнем указателе. Запомните эту функцию — setChildIndex (yourmc, numChildren-1), она поможет вам в других проектах.

Шаг 12

Здесь пиксели оживают. «For» пересекает каждого дочернего элемента pixelContainer. Пиксель извлекается с помощью метода getChildAt (i) . Xdest и ydest — это случайные места назначения, куда будут летать наши пиксели (поскольку Math.random () возвращает число от 0 до 1, необходимо умножить его). Наконец, мы добавляем переход и тип легкости через TweenMax.

Шаг 13: Взрыв

Конечно, для взрыва нам нужно где-то хранить наши начальные значения. Мы создадим (1.) 2 массива — xArray и yArray, которые хранят эти значения. После этого (2.) мы вставим в for (j = 0; j <mcLogo.width; j + = 2) код для отправки значений в следующий индекс.

Шаг 14

Теперь мы также добавим эффект отвода. Он в основном такой же, как эффект взрыва, только он будет использовать значения, сохраненные в ранее созданном массиве.

Шаг 15: Кнопка

Давайте создадим нашу кнопку. Начните с рисования (1.). Создание мувиклипа (как вы узнали на шаге 2. Создание нового слоя действий и ввод stop (); (2.). Это предотвращает зацикливание нашего mc. Теперь мы вставим ключевой кадр, когда кнопка была нажата ( 3.). Это изменит текст и покажет, что теперь, когда вы щелкнете по нему, произойдет обратный процесс.

Шаг 16: Экспорт нашей кнопки для ActionScript

Нам нужно сделать то же самое, что мы сделали с нашим изображением, присвоив кнопке имя экземпляра.

Шаг 17: Настройка кнопки

Свойство buttonMode устанавливает обычный курсор для изменения в действии.

Свойство mouseChildren при значении false запрещает дочерним элементам украсть mouseEvents.

Метод addEventListener позволяет кнопке запускать функцию clickHandler при нажатии (MouseEvent.CLICK).

Шаг 18: Детонатор

Теперь мы настроим функцию, которая устанавливает взрыв. «анимация» — это значение, которое указывает, должны ли пиксели взорваться или взорваться.

Шаг 19: Настройка

Добавление фильтров, изменение значений фильтров и изменение типов смягчения переходов — отличные вещи для игры. Для изменения типов замедления вам необходимо импортировать классы замедления. Вы можете просмотреть типы анимации здесь .

Шаг 20: Сглаживание перехода

Если вы тестировали фильм по ходу дела, вы могли заметить, что переход между пикселями и реальным изображением довольно резкий. Мы можем добавить параметр onComplete в анимацию внедрения, чтобы вызвать функцию, которая сглаживает этот переход:

Шаг 21: Обзор

Итак, что мы покрыли сегодня?

1. Импортируем наши основные классы.
2. Выравнивание сцены.
3. Объявление основных переменных.
4. Добавление пиксельного контейнера на сцене.
5. Извлечение растровых данных из нашего изображения.
6. Создание класса MyPixel и отправка цвета каждого из пикселей изображения в эти пиксели.
7. Создание функции, которая выбирает все пиксели, а затем настраивает их на случайную позицию.
8. Создание функции, которая перемещает пиксели обратно в исходное положение.
9. Создание кнопки, которая вызывает эти функции.

Окончательный код

Я надеюсь, вам понравился этот урок. Спасибо за прочтение!