Гори, гори ясно, чтобы не погасло - программный огонь во флэше
12.05.2008, автор Stormit, рубрики: ActionScript, Flash игры, Игровые баннерыВряд ли программная анимация сравнится в прелести с нарисованной вручную, но пренебрегать ею тоже не следует. Например, программный огонь во флэше получается неплохой. Принцип здесь как и при создании взрыва: движение частицы (язык пламени) анимируется твиннингом, а duplicateMovieClip() доделывает остальное.
Сделать огонь проще, чем это может показаться. Ничего военного в этом нет. Хитрость в том, как его потом можно использовать. Посмотрите на примеры ниже: из пламени полученного в первом кадре остальные эффекты получаются за несколько минут (рисование я не считаю).
Не буду судить об оправданности применения такого подхода в играх, но в баннерах это проходит на ура (конечно, если не злоупотреблять количеством). Да и для заставок тоже пойдет.
Собственно, как это сделать:
- Создаем символ part с круглым градиентом желтого цвета, уходящего в прозрачность.
- Оборачиваем его в новый символ fire и внутри делаем анимацию как на примере. Не секрет, что самая горячая точка - самая яркая, а чем дальше от нее, тем цвет темнее (в жизни еще и оттенок меняет). Я использовал градацию от желтого к красному. К тому же, в середине анимации символ part наиболее большой по размерам и имеет оранжевый оттенок. Изменение цвета производится применением эффекта Tint (100%). Таким образом, если градиент переходит в прозрачность, символ part просто поменяет цвет. К концу анимации цвет пламени становится красным, а прозрачность сходит на нет (на примере прозрачность не показана, но она должна быть). Самый простой способ - вначале затинтовать символ красным, а затем изменить эффект на Advanced и опустить альфу до нуля. Когда частица отыграла свое, она удаляет сама себя. Для этого в последнем кадре пишется:
this.removeMovieClip();
- На той же линейке, где лежит символ fire, слоем выше на кадре пишем код:
fire._visible = false;//скрываем эталон lev = 0;//переменная для уровней this.onEnterFrame = function() { for (var i = 0; i < 2; i++) {//выполняется 2 раза чтобы увеличить плотность lev++; d = fire.duplicateMovieClip("f" + lev, lev); d._x += Math.random() * 6 - 3;//случайный разброс по координатам d._y += Math.random() * 6 - 3; d._alpha = Math.random() * 50 + 50;//реализм d._xscale = d._yscale = Math.random() * 50 + 70;//реализм } }
- Вот таким или примерно таким должен быть результат. Все что получилось оборачиваем в новый символ. Теперь у нас в руках мобильный огонь, который можно смещать, поворачивать, масштабировать, дублировать и т.д.
Пламя есть, осталось придумать что поджигать. Возвращаясь к первой флэшке с примерами, огненное кольцо сделано из 6 огоньков накиданных сверху по периметру, а огонь у ракет - поворотом на 90 градусов. Горящий БТР - все то же самое, но в символе part вместо векторного градиента используется растровая картинка (дым).
Отдельно остановлюсь на примере с горящей бомбой. Отличается от остальных, верно? Так и есть, код для шага 3 немного другой:
fire._visible = false; lev = 0; this.onEnterFrame = function() { for (var i = 0; i < 2; i++) { lev++; if(lev > 1000) { lev = 0; } d = fire.duplicateMovieClip("f" + lev, lev + 2000);//огонь d2 = fire.duplicateMovieClip("f2" + lev, lev);//контурная подложка d2._x = d._x += Math.random() * 6 - 3; d2._y = d._y += Math.random() * 6 - 3; d._alpha = Math.random() * 50 + 50; d2._xscale = d2._yscale = d._xscale = d._yscale = Math.random() * 50 + 70; var col = new Color(d2); var tr = col.getTransform(); tr.ab = tr.rb = tr.gb = tg.bb = 255;//не знаю почему, но закрашивает желтым col.setTransform(tr); } }
В этом случае частиц создается в 2 раза больше - одна половина, как и раньше, составляет огонь (уровень 2000-3000), а другая - желтую подложку с резким контуром (уровень 0-1000). Уровни не перекрываются.
Кстати, разбираясь в своем старом примере, не смог въехать, почему подложка закрашивается желтым, а не белым цветом. Ведь по логике параметры поднимаются одинаково и если задать руками, получится белый цвет. Баг?
Такой вот неподвижный огонь - хорошо, но бывает необходимость сделать его интерактивным. Для этого нужно внести небольшие изменения:
- Убираем анимацию движения языка пламени вверх - получается интересный эффект (почти как инферно в Героях).
- Но для интерактивности нужен только символ fire. Символ part в первом кадре анимации я сделал крупнее.
- Есть функция, которая создает дубликат огонька и располагает его по заданных координатам (огонек проигрывает анимацию и потом удаляет сам себя). Теперь на событие enterFrame дубликат огонька привязывается к мышке (можно поводить ею по флэшке):
fire._visible = false; lev = 0; function placeFire(x, y) { for (var i = 0; i < 2; i++) { lev++; d = fire.duplicateMovieClip("f" + lev, lev); d._x = x + Math.random() * 6 - 3; d._y = y + Math.random() * 6 - 3; d._alpha = Math.random() * 50 + 50; d._xscale = d._yscale = Math.random() * 50 + 70; } } onEnterFrame = function() { placeFire(_xmouse, _ymouse); }
- Более практичный случай.
Огоньки привязываются к шару, который двигается программно. Получается мячик из Арканоида во взрывном режиме.
Но не стоит злоупотреблять такими эффектами. Сцена с 2-3 такими огнями может подтормаживать (делайте поправку на крутые компы). Скорее это подходит, чтобы лучше выделить объект из фона - сделать на нем акцент. Если же есть необходимость в большом количестве, старайтесь уменьшать их размеры - будет перерисовываться меньшая площадь.
Интересно на 35%
Красота! )
Спасибо, очень приятно читать и видеть все посты
супер-мега респект! у мы уже даже придумали как этот код оптимизировать )
Я тоже придумал
А вообще наверное любой код можно оптимизировать (и так много раз).
“мы уже даже придумали как этот код оптимизировать”
Lerika, а почему не делимся со всеми?;) Код в студию!:)
+1, мега практичный хитрик
и никаких битмапов,фильтров!
Ну, там где БТР горит, битмап есть
Сайт просто супер! Продолжайте в том же духе. Был бы очень признателен, если бы посоветовали с чего начать изучение Флеша и Экшен Скрипта, возможно какую-нибудь книгу хорошую. Заранее спасибо.
Замечательная статья! Мне почему-то сразу захотелось сделать огонь и автомата
бум пробовать!
у меня, почему-то “<” и “>” не работает. заменил на “1000″, тогда тоже заработало. а иначе выдает ошибку “unexpected encountered”. почему так? as2, flash cs3
Это глюк движка, который меня больше всего раздражает.
Постоянно заменяет символы “< " и ">” на “<” и “>”.
Наверное после восстановления базы опять переписал.
уфф! уфф! я уже в хелпе почти нашел их, потом сообразил, что в конструкции for лишний параметр =) оказывается, все не так страшно. но, тем не менее, урок очень хороший. большое спасибо!
использовал твой огонь самым беспардонным образом http://www.deler.ru/b/Rich/Rich-media35.htm
надеюсь, не проклянешь? ))
клева
автор молодца
do you know any information about this subject in other languages?
Sorry, but my English is not so strong to write on it. May be in future.
товарисч, кажется, хочет прочитать об этом на инглише или на other languages. могу посильно помочь, если нужно
Да я понял что хочет.
Просто сейчас я не чувствую в себе силы писать на Английском. У меня это отнимает очень много времени. Позже, может начну переводить статьи - как раз и попрактикуюсь. А пока, пусть развивается отечественный производитель
Хотя, мне кажется, что код и примеры можно и без комментариев понять.
да, это понятно =)
но если у меня, вдруг, появится дикое альтруистическое желание, перевести одну (или больше) твоих статей, надеюсь, ты не будешь сильно злиться по этому поводу? =)
Только если с прямой ссылкой на оригинал и то, в пределах разумного.
Английский клон моего сайта делать нельзя =)
Клон, я, конечно-же, делать не собираюсь. мне бы со своим разобраться =)
Отлично!. Все-таки, для того, чтобы вести по-настоящему интересный блог нужно не только просто постить в него о чем-то, но и делать это выкладываясь
ннннн-да.друзья,вот вам площадочка детская-[клик по ссылку], можт кто захочт помочь оптимизировать,я на флэш ужо торкнутый,тока ни-бум-бум не въезжаю,а сайтик реально мой, хочтса чоб красиво,пробувал всяки исходники пытать-мало что получатся,да и опыту маловато,обещаю всем на спецвкладочке ссылочку и респект.
Все получилось в точности как на примере! Огромное спасибо за пошаговое разъяснение! Респект! ))
Очень интересный сайт, большое спасибо автору) Всегда приятно что то сделать самому и потом любоваться) Мой огонек, твоя заслуга=)
Полезный пост. Натыкался на сообщение, что в скором времени будет конкурс блогов. Почитываю ваши посты и есть мысль, что вам следует поучаствовать. Кто знает, во что выльется?
Я думаю эти конкурсы постоянно кем-то проводятся на разные темы и в разных масштабах, но я бы с удовольствием поучаствовал
Хорошо. Только почему огонь получается, как будто резкость не наведена?
Красивооооо…. Респект тебе аффтар =)
Добра.. я пока чайник в этом деле но полюбил флеш по ущи=)…то что я увидел порозило меня …красиво реалистично(чуть пожарных не вызвал=)…спасибо за урок буду грызть зубами землю но флеш я изучу…
Удачи
Супер!
А у меня не получается
На 3-ем шаге ничего не происходит. Не понимаю в чем проблема. Так хочется нарисовать бомбу… эээх
Может символ с огнём не назван?
Протрэйсируй все переменные - где данные теряются?
Ребят, я тока недавно начал изучать флеш и поэтому как чайник хочу спросить: “Оборачиваем его в новый символ fire и внутри делаем анимацию как на примере”, это как?
Если не затруднит, обьясните подробнее.
Это значит - F8 (Create Movie Clip), называем его fire, а внутри него делаем анимацию.
Спасибо, первую, графическую часть я осилил)), а вот по поводу скрипта, на последнем, 30 кадре, я нажав на action написал this.removeMovieClip(); на что после проигрывания клипа программа написала:
TypeError: Error #1006: removeMovieClip is not a function.
at my_fire_digger_fla::fire_1/my_fire_digger_fla::frame30()
что сие значит. Заранее спасибо.
PS. надеюсь не замучал распросами, просто очень хочеться влиться в сообщество флешеров, очень мне возможности flash и action script понравилися)
Ребята, скиньте мне кто-нибудь исходник огня в flash, у кого получилось, у меня почему-то не пашет, пожалуйста)
адресс: sergey_digger@mail.ru
Присоединяюсь к просьбе Дига : до 3 пункта все получилось, а вот 4 никак
, если не жалко киньте исходничек на мыло , пожалуйста ( tempero.m@gmail.com ), а то похоже ручки кривоваты , а очень надо …..
Здесь отчёт о моей презентации на UAFPUG в Донецке, там внизу можно скачать исходник.
В нём есть много примеров (и этот в том числе):
http://xitri.com/2008/07/01/uafpug3-flash-actionscript-animation.html
To Stormit: Огромное спасибо :). По исходнику нашел в “своем” коде ошибку.
помогите ктонить! хотел сделать, но почему то направленно струя огня не бьет…
все… разобралсо. Но че не понимаю, как сделать, чтоб огонь бил вперед?
Может я не внимательно читал комментарии, но кажется никто не обратил внимание на эти строчки (из примера про бомбу):
tr.ab = tr.rb = tr.gb = tg.bb = 255;//не знаю почему, но закрашивает желтым
col.setTransform(tr);
В коде опечатка. …= tr.bb = 255;//закрасит белым
Пользуясь случаем, хочу поблагодарить автора за интересные статьи. Отличный блог.
Да нет, ты оказался очень внимательным
просто бомба! супер!
у меня возникла небольшая проблема, а именно “lev”
1120: Access of undefined property lev. —- lev = 0;
до специалиста мне далеко, поэтому я уверен что я где-то что то не до указал от незнания. Надеюсь кто-нибудь объяснит мне что это за lev и с чем его едят
Только и успевай набивать “карманы” 
Ну, а в общем, автору сайта ++ респект. Не сайт, а сокровищница
Скиньте плз куда нить заготовку, а то у мя не выходит что-то, хоть посмореть в чем ошибаюсь
Код скопировала. Вставила в первый кадр fire, но ничего не произошло. Ошибок никаких вроде нет. В исходниках куча внетренних слоев.Причем названы непонятно. Нашла только слой ко 2 шагу. В какой кадр верхнего слоя вставлять код? И слой нужно создать новый или можно вписать в тот же где this.removeMovieClip();
Нашла ошибку. Не назвала клип. Все работает. Это круто!!!
Скиньте и мне пожалуйста исходник, а то у меня что-то не получается самому. Буду очень признателен…
Люди помогите у меня с огнем проблемы, на 2-ом шаге, не моу зделать так, что бы овал получил градиент с оранживого к прозрачному, при tint 100% помогите пожалуйста
Если при тинтовании закрашивается овал сплошным цветом, то скорее всего цвета в градиенте не прозрачные, а градиент просто переходит в цвет фона. Убедитесь что у наружного цвета в градиенте альфа равна нулю (в панели color).
Сбросьте кто-нибудь исходник, пожалуйста, а то у меня никак не выходит, вечно ошибки выбивает. Скорее всего я не достаточно хорошо знаю АС и, у меня не получается.
cerser@mail.ru
Какой версии программу используют тут? Я прописывал и в 3 и в 4 версии - эффект тот же.
Может все от того что я изучал прописывание кодов исключительно вручную, без использования екшионскрип асиста?
привет всем) сделал такой себе огонь при помощи вашего сайта в анимацию… красиво и т.д. но вот при экспорте в сиквенцию он не работает…. сделал клон…. анимацией)) но без вашего сайта бы не справился…. спасибо тем кто ведёт этот блог… движуха серьёзная и нужная) респект и уважение.
григорий
Народ, кто сделал - помогите плиз разобраться, очень буду благодарен!!!
Эффект оч понравился, но не могу сделать по приведенным шагам. (((
Кому не трудно - стукните в асю 404948169 и помогите. Оч хочется такой эффект создать….
А я постебался) Сделал огонь, а потом решил поиграть с цветом. Хотел сделать готический, волшебный огонь! И сделал ^^ Получилось очень оригинально.
DarkAngel как вариант, сохрани флешку с этой страницы и декомпилируй. Разницы почти нет, я проверял.
Всё получилось. Привязал огонь к мышке, потом к объекту. Всё окей.
А вот привязать огонь (в моем случае дым) к определенной точки движущегося программно объекта, не получается
у меня проблема возникла с созданием ещё одного источника огня, вроде переименовал, с дублировал код, изменил все переменные, но при этом первый огонь исчезает, а второй проигрывается, не подскажите что дклать?
Лучше сделать так чтобы весь эффект огня оказался “запечатанным” в отдельный символ. То есть код и графика вся внутри. Потом такой символ-эталон можно дублировать и масштабировать сколько угодно - они не будут влиять друг на друга.
Всем привет. Никак не получается огонь из бомбы. Делаю третий шаг, шар просто уходит вверх, а скрипт рандома не срабатывает, что значит Может я не туда пишу код? “На той же линейке, где лежит символ fire, слоем выше на кадре пишем код:” я так и не понимаю. Помогите пожалуйста. Спасибо.
Здорово! Спасибо! Очень щедро делиться такими находками! Еще раз спасибо.
У меня то же самое,- “Делаю третий шаг, шар просто уходит вверх, а скрипт рандома не срабатывает, что значит Может я не туда пишу код? “На той же линейке, где лежит символ fire, слоем выше на кадре пишем код:” я так и не понимаю.”
Один в один такая же проблема.
Помогите разобраться.
Спасибо.
Получилось! Instanse надо прописывать!
Большущее спасибо! Вовремя, как никогда!
Отличный урок! Только почему на этом сайте нет исходников? о_0
Отличный урок! Только почему на этом сайте нет исходников? о_0, если можно выложите плиз
Помогите!… Не получается огонь…
И исходник не пойму где скачать, может, его давно удалили?
У меня получается просто летающий вверх шарик. Я сделала вложенную анимацию, там же разместила в первом кадре код, в последнем завершение. Прописала в Инстанс имя… Все равно одиноко летающий и изчезающий шарик…
Помогите! На вас вся надежда )
А может, тут дело в версии? Я в CS4, 3.0
Спасибо всем, кто помог!
В CS4, 3.0 это не работает.
http://www.askskb.com/Examples/BurningLetters/index.html
Мужик спасибо)) очень полезная штука
те кто в cs4 - )) - блин action skript 2 поставте а код заработает
Уважаемые, Я конечно понимаю, что я хуже некоторых чайников, но КОГДА-НИБУДЬ то надо с мёртвой точки сойти! Что такое Instans и что прописывать(и где). Я вторую неделю с этим fire копаюсь.
Спасибо, уже ничего не надо. С мёртвой точки съехал.
Этот сайт лучшее, что я нашел с помощью поиска в рунете! огромное спасибо! начинаю работать в action script 2.0
У меня почему то тоже проблемы со скриптом… Все скопировал отсюда, даже пояснения удалил, но не робит =/
вот, думаю, здорово было бы, если б автор выкладывал исходник флэш документ, с готовым огнем. Чтоб можно было открыть и посмотреть как все сделано, а затем попытаться повторить
отличный урок, очень помог, даже под свои нужды переделал огонь в дым)))
Не выходит: даже с исходника код копировал, все делал пошагово, но конечный результат остается в виде повторяющегося движения заготовки(. Кто может объясните плиз, заранее спасибо.
Респект! Большое спасибо за урок=)
И все равно нужно сделать такое и в as3.0 я вот одного не пойму: как сынтерпретировать команду this.removeMovieClip();
RomECH
Держи:
stop();
if (parent) parent.removeChild(this);
http://easyflash.org/flashlearn/flatexttutorials/538-razvodim-koster-bez-spichek-i-zazhigalok-ili-kak.html - тоже самое, но под as 3.0