Повсюду была холодная зима, так что давайте узнаем этот факт по хорошей зимней сцене. В этом уроке мы создадим эффект падающего снега, используя Flash и ActionScript 3.0.
Конечный результат
Давайте кратко рассмотрим конечный эффект:
Шаг 1: Краткий обзор
Используя изображение в качестве фона, мы создадим эффект падающего снега. Снег будет пользовательским MovieClip, который будет экспортироваться для использования в качестве класса. Мы дублируем и анимируем этот клип с AS3.
Шаг 2: настройка
Откройте Flash и создайте новый файл Flash (ActionScript 3.0).
Установите размер сцены 500 х 375 пикселей и установите частоту кадров 24 кадра в секунду.
Шаг 3: Получение фона
Для этого эффекта потребуется снежная сцена.
Вы можете создать свой собственный или адаптировать собственный фон. В этом примере я использовал фотографию Энди Армстронга , которая имеет лицензию Creative Commons.
Шаг 4: Импорт изображения
Когда вы закончите выбирать фон, вернитесь во Flash, нажмите « Файл»> «Импорт»> «Импортировать в рабочую область» и выберите загруженное изображение.
Поместите изображение в центр сцены и перейдите к следующему шагу.
Шаг 5: Создай свою Снежинку
MovieClip будет использоваться в качестве снежинки, я использовал этот базовый растровый рисунок снежинки:
Преобразуйте растровое изображение в мувиклип, установите флажок « Экспорт для ActionScript» и назовите его « Снежинка» .
Кроме того, вы можете создать новый мувиклип под названием « Снежинка» и просто нарисовать внутри него круг с градиентной заливкой, чтобы он выглядел мягким и круглым.
Шаг 6: Создайте свой класс документов
Создайте новый документ ActionScript и сохраните его как Snow.as.
Шаг 7: Запустите свой код
Ключевое слово package позволяет вам организовать ваш код в группы, которые могут быть импортированы другими скриптами; Рекомендуется именовать их, начиная со строчной буквы, и использовать интеркапс для последующих слов, например: myClasses .
Если вы не хотите группировать свои файлы в пакет или у вас есть только один класс, вы можете использовать его прямо из исходной папки, но идея здесь в том, чтобы организовать.
|
1
2
|
package
{
|
Шаг 8: Импортируйте необходимые классы
Это обязательные классы, для более подробного описания каждого класса, пожалуйста, обратитесь к справке Flash (нажмите F1 в Flash).
|
1
2
3
4
|
import flash.display.MovieClip;
import flash.events.Event;
import flash.utils.Timer;
import flash.events.TimerEvent;
|
Шаг 9: Объявите класс
Ключевое слово extends определяет класс, который является подклассом другого класса. Подкласс наследует все методы, свойства и функции; таким образом, мы можем использовать их в нашем классе.
Наш класс документов собирается расширить класс MovieClip.
|
1
2
|
public class Snow extends MovieClip
{
|
Шаг 10: настройка переменных
Давайте посмотрим на переменные, которые мы будем использовать.
|
1
2
3
4
|
//A Vector object that will store the snowflakes movieclips
private var flakesVector:Vector.<MovieClip> = new Vector.<MovieClip>();
//Timer object that controls the horizontal movement
private var timer:Timer = new Timer(2000);
|
(Если вы используете Flash CS3, вы можете использовать массив вместо вектора.)
Шаг 11: Напишите конструктор
Конструктор — это функция, которая запускается, когда объект создается из класса; этот код выполняется первым, когда вы создаете экземпляр объекта или запускаете с использованием класса документа. В этом случае это первый код, который запускается при запуске нашего SWF.
Здесь мы указали два параметра, которые имеют значения по умолчанию: параметр скорости, который хранит пиксели, которые каждая снежинка перемещает вниз на каждый кадр, и flakesNumber, который представляет собой количество снежинок, представленных на экране.
|
1
2
|
public function Snow(speed:int = 3, flakesNumber = 150):void
{
|
Шаг 12: продублируйте снежинки
Оператор for обрабатывает это действие.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
for(var i:int = 0; i < flakesNumber; i++)
{
//Instantiates the snowflake clip
var flake:Snowflake = new Snowflake();
//Gives a unique and random falling speed to each snowflake
flake.vel = (Math.random() * speed) + 0.5;
//Picks a random value between 0.5 and -0.5, this is the horizontal movement speed
flake.xSpeed = Math.floor(Math.random() * (0.5 — -0.5 + 1)) + -0.5;
flake.scaleX = (Math.random() * 1) + 0.3;
flake.scaleY = flake.scaleX;
flake.x = Math.random() * stage.stageWidth;
flake.y = Math.random() * stage.stageHeight;
addChild(flake);
//Adds the clip to the Vector object so it can be accessed by other functions
flakesVector.push(flake);
}
//Adds a listener to the stage to execute the fall function every frame
addEventListener(Event.ENTER_FRAME, fall);
timer.addEventListener(TimerEvent.TIMER, changeMovement);
timer.start();
}
|
Шаг 13: добавь функцию падения
Падающая функция.
Это будет срабатывать каждый кадр из-за прослушивателя событий ENTER_FRAME. Он будет перемещать снежинки по горизонтали и вниз по каждому кадру в соответствии со скоростью, рассчитанной в xSpeed и vel. Это также переместит снежинки наверху, когда они пройдут внизу сцены.
|
1
2
3
4
|
private function fall(e:Event):void
{
//This for loops through the snowflakes to apply the code to every clip
for(var i:int = 0; i < flakesVector.length; i++) {
|
Шаг 14: Горизонтальное движение
Переместите каждую снежинку горизонтально. Сначала каждый будет двигаться только вправо, но обработчик события таймера изменит это.
|
1
|
flakesVector[i].x += flakesVector[i].xSpeed;
|
Шаг 15: Вертикальное движение
Снежинка будет перемещаться вниз по каждому кадру с помощью переменной vel (скорость), которая имеет различное значение для каждой чешуи.
|
1
|
flakesVector[i].y += flakesVector[i].vel;
|
Шаг 16: Сбросить позиции
Если клип со снежинкой окажется ниже сцены, он будет перемещен обратно наверх и назначен новый случайный x-postition.
|
1
2
3
4
5
|
if(flakesVector[i].y > stage.stageHeight)
{
flakesVector[i].x = Math.random() * stage.stageWidth;
flakesVector[i].y = -flakesVector[i].height;
}
|
Шаг 17: Изменить движение
Объект Timer изменит горизонтальное перемещение чешуек, умножив xSpeed каждой чешуйки на -1 каждые пару секунд. Эта функция вызывается прослушивателем событий TIMER, который мы добавили ранее.
|
1
2
3
4
5
6
7
8
9
|
private function changeMovement(e:TimerEvent):void
{
for(var i:int = 0; i < flakesVector.length; i++)
{
flakesVector[i].xSpeed *= -1;
}
}
}
}
|
Шаг 18: Установите класс документа
Вернитесь к файлу .fla и в панели свойств напишите Snow в поле Class, чтобы сделать этот класс документа.
Проверьте свой фильм, чтобы увидеть эффект в действии.
Шаг 19: попробуй нестандартные снежинки
Вы можете изменить MovieClip Snowflake, чтобы он выглядел так, как вы хотите, это пример результатов, которые вы можете получить!
Вывод
Поиграйте с параметрами класса и создайте собственные мувиклипы, чтобы создать собственный эффект снега.
Спасибо за прочтение!