56 (+1)

Падал новогодний снег

Как создать реалистичный снег на Flash
Общий алгоритм поведения снежинок
Пошаговое руководство для создания Flash-открытки

Поиск по сайтуДля желающих написать письмоПослать ссылку другуВерсия для распечатки


Однажды, для создания новогодней открытки на Flash, мне понадобилось сделать снег, и я стал смотреть, а как же это сделано у других. И обнаружил, что реалистичного снега нет практически ни у кого. Большинство либо анимируют большие снежинки по одной, либо сразу рисуют фоном снег, а потом плавно двигают его вниз. Ни то ни другое меня не устраивало, и тогда я написал свой вариант снегопада, который мне очень нравится.



Часть I

Предварительная подготовка и создание заготовки открытки на Flash

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

Ниже я буду подробно объяснять, как написать этот скрипт, используя "Flash MX 2004", но общие принципы остаются неизменными, и Вы можете достаточно легко модифицировать его для других языков, скажем для JavaScript. Для облегчения программирования и переносимости кода программа на ActionScript будет вынесена в отдельный файл и подключена к основному мультфильму при помощи директивы #include.


Рисуем новогоднюю открытку



Создайте три слоя-дорожки на временной шкале
Перед тем как переходить непосредственно к программированию, давайте нарисуем нашу открытку. Запустите Flash и создайте новый документ с размерами 640x300 пикселей. В настройках мультфильма выберите версию ActionScript 1.0. Теперь на временной шкале (Timeline) создайте следующие слои для нашего мультфильма:

  • actions - здесь будут размещаться скрипты, управляющие мультфильмом
  • snow - здесь будут размещаться объекты, участвующие в создании снегопада
  • card - и наконец, в этом слое будет размещаться сама открытка

Выделив первый кадр в слое actions и открыв панель "Actions", напишите в нем следующий код:

// Подключаем внешние скрипты
#include "snow.as"

// Инициализируем снежинки
init_snowflakes();

// Останавливаем проигрывание мультфильма
stop();

Перетащите снежинку точно в левый верхний угол мультфильма и дайте экземпляру имя "snow"
Теперь переходим в первый кадр слоя snow. Сейчас нам нужно будет нарисовать снежинку и сохранить ее в библиотеке как мувиклип с именем snowflake. Проще всего нарисовать снежинку кистью от руки - просто нарисуйте неровный круг белым цветом (снежные хлопья у нас ведь белые, правда?) и уменьшите его до размеров 10x10 пикселов. Границы у снежинки быть не должно. После того как снежинка сохранена в библиотеке, удалите ее со сцены.

Созданную снежинку нам будет нужно немножко отредактировать - поэтому щелкните два раза по объекту snowflake в библиотеке. Сейчас необходимо будет изменить точку привязки мувиклипа таким образом, чтобы она оказалась в центре объекта. Для этого нужно просто передвинуть нашу снежинку так, чтобы крестик оказался в центре снежинки.

Теперь перейдите в основную сцену и перетащите снежинку точно в левый верхний угол мультфильма. После этого дайте данному экземпляру снежинки имя "snow" и добавьте в панели "Actions" следующий код:

onClipEvent(enterFrame) {

    // Перерисовываем снежинки
    _root.draw_snowflakes();
}

Наконец, займемся последним слоем, который у нас называется card. В нем Вы можете нарисовать любой зимний сюжет или просто вставить подходящую зимнюю фотографию. Я нарисовал звездное небо, немного сугробов, елочные игрушки, веточку ели, светящееся окошко и симпатичного Деда Мороза (по крайней мере, мне так кажется :). В итоге получилась вот такая новогодняя открытка:

Вот такая вот открытка получилась у меня

Осталось ее сохранить. Так как у нас будет несколько файлов в проекте, то лучше всего создать отдельную папку "snow" и уже в ней сохранить открытку под именем snow.fla. Ура, готово! С предварительной подготовкой закончено, и в следующей части переходим к сути, т.е. к программированию и разбору алгоритма поведения снежинок.


Часть 1 - ее Вы читаете сейчасЧасть 2Часть 3Часть 4


Свои мнения, пожелания и вопросы по выпускам Вы можете присылать по адресу mike@cherry-design.ru.
Я оставляю за собой право цитировать письма, пришедшие по вышеуказанному адресу.
Copyright © 2001-2008 Михаил Мельников. Перепечатка без разрешения запрещена.