Новогодний фейерверк во флеше с помощью As3

Используя программную анимацию, можно сделать очень красивый фейерверк для новогодней флеш-открытки или баннера. Но, в отличие от настоящего, мы сбережём массу кислорода и это совершенно безопасно!)

Шаг 1

Создадим графику, то есть нашу частичку, из которых состоит фейерверк.

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

Шаг 2

Оборачиваем это всё дело в клип part, а затем в ещё один клип part_anim, при этом отмечаем галочкой ExportforActionScript и назначаем класс PartClass.

Шаг 3

Внутри этого клипа делаем анимацию:

Шаг 4

Оборачиваем part_anim ещё в один клип firework, внутри него добавляем новый слой и в первом кадре пишем такой код:

  1. for (var n=1; n<50; n++) {
  2.  
  3.      var clip = new PartClass();
  4.      clip.rotation = Math.random()*360;
  5.      clip.alpha = Math.random()*.3+.8;
  6.      clip.scaleX = .5+Number(Math.random()*.6);
  7.      clip.scaleY = .5+Number(Math.random()*.6);
  8.      clip.gotoAndPlay(Math.floor(Math.random()*5+1));
  9.      addChild(clip);
  10. }

Добавляем темный фон, запускаем и видим первый предварительный результат:

Шаг 5

Скопируем и вставим в то же место клип firework, немного уменьшив ему размер. И немного поиграемся с цветами, для маленького фейерверка:

и для большого:

 

Получим просто замечательный, двойной фейерверк:

 

Шаг 6

Осталось добавить ракету, которая взлетит в воздух и взорвется этим красочным фейерверком. Прописываем в последнем кадре part_anim команду stop(), чтобы наш фейерверк не проигрывался циклически.

Оборачиваем наши два клипа firework в клип launch, рисуем ракету, в нашем случае - это простой ромбик со скруглённым верхним углом. И делаем ему анимацию, вот так:

Ракета подымается снизу вверх, медленно исчезая (меняем значение alpha). Дальше, начиная с 43-го кадра идут наши фейерверки. 

Трам-пам-пам, всё готово:

 

Используя разные частички можно получить различные вариации фейерверков:

 

Урок основан на реальных событиях на основе урока для as2 отсюда (на момент публикации поста сайт почему-то перестал открываться, возможно, это временно).

Исходник (Cs5)

Автор урока: Андрей Барвинко

flash-animated.com 

Комментарии
Аватар пользователя Олег из Пскова.

Спасибо за Ваше усердие, Оксана!
Многие уроки очень понадобились.
С Новым Годом!

Аватар пользователя Nicolay Pan`kin

У MovieClip нет свойства ccaleX и ccaleY Smile

Аватар пользователя Oksana

спасибо, исправила. странно, что флеш не выдает ошибку, когда так написано в коде..почему?

Аватар пользователя flahhi

опять же по той причине, что класс MovieClip является динамическим. Вот здесь , в комментариях всё правильно расписал Илья. Это в одно и тоже время и радость и проклятие)))

Аватар пользователя Алексей

Оксана! Благодарю за совет. Книгу скачал (с Вашего сайта )- начинаю изучать.
С наступающими праздниками! Радости, здоровья и благополучия!

Аватар пользователя Oksana

Алексей, это не я советовала) вас тоже с наступающими и всего наилучшего)

Аватар пользователя Алексей

У меня не комментарий. Вопрос:
Посоветуйте, где можно подробно прочитать или посмотреть следующее:
- можно ли вообще задать разные значения fps для нескольких кадров на разных слоях в одной анимации? (например: снежинки падают с 6 fps, салют 25 fps, текст появляется 12 fps и т.д.);
Если возможно - расскажите как это делается?

Аватар пользователя Anyoneelselikeyou

Разные значения fps для нескольких кадров на разных слоях в одной анимации!? Теоретически возможно с помощью кода stage.frameRate += х; (или -=х) Где х - количество кадров которые нужно добавить или отнять к исходным из свойств документа. Но это относится только ко всему документу, а не к отдельным элементам. Это если теоретически. На практике для мульта это вообще не нужно. Изучайте тайминг (книгу можно найти где-то на этом сайте). Секрет в том, что эту проблему можно "обойти", это и есть мастерство аниматора. Все вначале мучаются с этими скоростями, с опытом потихоньку проходит.

Что бы вы сделали, если бы точно знали что всё получится?...

Аватар пользователя Anyoneelselikeyou

Забавно... Есть в этом что-то завораживающее... смотреть как какие-то букоффки-циферьки творят такое... да-а. Уф, а код-то презагадочный! Чего стоит только первая строчка... ничего себе... подозреваю что это какое-то сокращение чего-то длинного - какое-то n увеличивается на единицу пока не достигнет 50...или нет? а зачем, где это n ещё используется в коде? clip.ccaleX = .5 это я думаю тоже что и clip.scaleX = 0.5 Нет?! Но ведь работает... (Я как-то неправильно написала слова height и width - ничего не работало, жуть... трое суток не спала, милион раз всё переделывала. С тех пор предпочитаю больше ручной работы делать и доверяю только проверенным и простым кодам из специально заготовленного файлика - копипаст творит чудеса, всё работает).
P.S Исходник ещё больше запутал, хорошо что есть "Выделить неиспользуемое", и Tween-ы в библиотеке меня всегда как-то напрягают.
P.P.S Из мерзкого комента выше, кто-то мог подумать что урок мне не понравился. Спешу внести ясность: Урок замечательный, всё доступно, пошагово...И результат тоже радует. А по коду - чувствую пока не прочитаю книгу Колина Мука по скрипту3 всё равно многое не буду понимать. А я её не прочитаю - размер пугает. За исходник в CS5 отдельное спасибо.

Что бы вы сделали, если бы точно знали что всё получится?...

Аватар пользователя flahhi

Первая строчка - это обычный цикл. Весь код что внутри фигурных скобок выполняется 50 раз. То есть у нас фейерверк состоит из пятидесяти частичек, кажая из которых имеет свой угол поворота, прозрачность и т. д.
.5 это 0.5 - всё правильно.

Аватар пользователя Djaho

Необязательно читать всю книгу =) Чтобы понять весь код урока вам достаточно будет прочитать первые 100 страниц, из которых 40 всяческие вступления

Аватар пользователя Oksana

исходник взят с буржуйского сайта и переписан под ас3 (там в конце ссылочка, но сайт закрылся за день до публикации урока) твины заметили, да) но решили не заморачиваться, поскольку времени мало осталось и оставить анимацию, как в исходном уроке. главное код все-таки. если есть вопросы по работе кода - задавайте, думаю, Андрей, расскажет более подбробно, что к чему относится и как работает.

Аватар пользователя LeeTovetz

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

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

Аватар пользователя LeeTovetz

Супер. Молодцы. Очень круто.
А такой вопрос, вот если нужно что бы фейерверк был в определенном месте ролика, мультфильм, или баннер, как сделать так чтобы он отвзрывался и потом исчез и ролик заново пошел ))) спасибо.

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

Аватар пользователя Oksana

хм, поставить мувиклип в определенном месте?

Пожалуйста, оставьте ваш комментарий. Спасибо!
Содержимое этого поля является приватным и не будет отображаться публично.
CAPTCHA
Вопрос для проверки
Заполните поле проверки