Новогодний фейерверк во флеше с помощью As3
Используя программную анимацию, можно сделать очень красивый фейерверк для новогодней флеш-открытки или баннера. Но, в отличие от настоящего, мы сбережём массу кислорода и это совершенно безопасно!)
Шаг 1
Создадим графику, то есть нашу частичку, из которых состоит фейерверк.
Она состоит из четырёхконечной звёздочки, сделанной из двух ромбов и градиентного хвоста а так же едва заметного градиентного круга под звёздочкой, который придаёт ей эффект свечения.
Шаг 2
Оборачиваем это всё дело в клип part, а затем в ещё один клип part_anim, при этом отмечаем галочкой ExportforActionScript и назначаем класс PartClass.
Шаг 3
Внутри этого клипа делаем анимацию:
Шаг 4
Оборачиваем part_anim ещё в один клип firework, внутри него добавляем новый слой и в первом кадре пишем такой код:
Добавляем темный фон, запускаем и видим первый предварительный результат:
Шаг 5
Скопируем и вставим в то же место клип firework, немного уменьшив ему размер. И немного поиграемся с цветами, для маленького фейерверка:
и для большого:
Получим просто замечательный, двойной фейерверк:
Шаг 6
Осталось добавить ракету, которая взлетит в воздух и взорвется этим красочным фейерверком. Прописываем в последнем кадре part_anim команду stop(), чтобы наш фейерверк не проигрывался циклически.
Оборачиваем наши два клипа firework в клип launch, рисуем ракету, в нашем случае - это простой ромбик со скруглённым верхним углом. И делаем ему анимацию, вот так:
Ракета подымается снизу вверх, медленно исчезая (меняем значение alpha). Дальше, начиная с 43-го кадра идут наши фейерверки.
Трам-пам-пам, всё готово:
Используя разные частички можно получить различные вариации фейерверков:
Урок основан на реальных событиях на основе урока для as2 отсюда (на момент публикации поста сайт почему-то перестал открываться, возможно, это временно).
Автор урока: Андрей Барвинко
flash-animated.com
Спасибо за Ваше усердие, Оксана!
Многие уроки очень понадобились.
С Новым Годом!
У MovieClip нет свойства ccaleX и ccaleY
спасибо, исправила. странно, что флеш не выдает ошибку, когда так написано в коде..почему?
опять же по той причине, что класс MovieClip является динамическим. Вот здесь , в комментариях всё правильно расписал Илья. Это в одно и тоже время и радость и проклятие)))
Оксана! Благодарю за совет. Книгу скачал (с Вашего сайта )- начинаю изучать.
С наступающими праздниками! Радости, здоровья и благополучия!
Алексей, это не я советовала) вас тоже с наступающими и всего наилучшего)
У меня не комментарий. Вопрос:
Посоветуйте, где можно подробно прочитать или посмотреть следующее:
- можно ли вообще задать разные значения fps для нескольких кадров на разных слоях в одной анимации? (например: снежинки падают с 6 fps, салют 25 fps, текст появляется 12 fps и т.д.);
Если возможно - расскажите как это делается?
Разные значения fps для нескольких кадров на разных слоях в одной анимации!? Теоретически возможно с помощью кода stage.frameRate += х; (или -=х) Где х - количество кадров которые нужно добавить или отнять к исходным из свойств документа. Но это относится только ко всему документу, а не к отдельным элементам. Это если теоретически. На практике для мульта это вообще не нужно. Изучайте тайминг (книгу можно найти где-то на этом сайте). Секрет в том, что эту проблему можно "обойти", это и есть мастерство аниматора. Все вначале мучаются с этими скоростями, с опытом потихоньку проходит.
Что бы вы сделали, если бы точно знали что всё получится?...
Забавно... Есть в этом что-то завораживающее... смотреть как какие-то букоффки-циферьки творят такое... да-а. Уф, а код-то презагадочный! Чего стоит только первая строчка... ничего себе... подозреваю что это какое-то сокращение чего-то длинного - какое-то n увеличивается на единицу пока не достигнет 50...или нет? а зачем, где это n ещё используется в коде? clip.ccaleX = .5 это я думаю тоже что и clip.scaleX = 0.5 Нет?! Но ведь работает... (Я как-то неправильно написала слова height и width - ничего не работало, жуть... трое суток не спала, милион раз всё переделывала. С тех пор предпочитаю больше ручной работы делать и доверяю только проверенным и простым кодам из специально заготовленного файлика - копипаст творит чудеса, всё работает).
P.S Исходник ещё больше запутал, хорошо что есть "Выделить неиспользуемое", и Tween-ы в библиотеке меня всегда как-то напрягают.
P.P.S Из мерзкого комента выше, кто-то мог подумать что урок мне не понравился. Спешу внести ясность: Урок замечательный, всё доступно, пошагово...И результат тоже радует. А по коду - чувствую пока не прочитаю книгу Колина Мука по скрипту3 всё равно многое не буду понимать. А я её не прочитаю - размер пугает. За исходник в CS5 отдельное спасибо.
Что бы вы сделали, если бы точно знали что всё получится?...
Первая строчка - это обычный цикл. Весь код что внутри фигурных скобок выполняется 50 раз. То есть у нас фейерверк состоит из пятидесяти частичек, кажая из которых имеет свой угол поворота, прозрачность и т. д.
.5 это 0.5 - всё правильно.
Необязательно читать всю книгу =) Чтобы понять весь код урока вам достаточно будет прочитать первые 100 страниц, из которых 40 всяческие вступления
исходник взят с буржуйского сайта и переписан под ас3 (там в конце ссылочка, но сайт закрылся за день до публикации урока) твины заметили, да) но решили не заморачиваться, поскольку времени мало осталось и оставить анимацию, как в исходном уроке. главное код все-таки. если есть вопросы по работе кода - задавайте, думаю, Андрей, расскажет более подбробно, что к чему относится и как работает.
Перечитал пост и понял что у меня был глупый вопрос.
Перепутал с программной анимацией частиц от flahhi, он там рассказывал как в коде прописывать когда взрываться. Думал и тут такая же штуковина. Ан нет..
моя радость тут ))) http://leetovetz.deviantart.com/gallery/
Супер. Молодцы. Очень круто.
А такой вопрос, вот если нужно что бы фейерверк был в определенном месте ролика, мультфильм, или баннер, как сделать так чтобы он отвзрывался и потом исчез и ролик заново пошел ))) спасибо.
моя радость тут ))) http://leetovetz.deviantart.com/gallery/
хм, поставить мувиклип в определенном месте?