Эффекты во Flash на примере создания огня.
Рано или поздно, к этому моменту приходит любой разработчик под Flash, не важно, программист ли вы, аниматор или веб-дизайнер. Как сделать тот или иной эффект? То ли незнание, то ли природная лень вынуждает многих товарищей создавать такие отвратительные вещи, при взгляде на которые хочется немедленно закрыть браузер и больше никогда не заходить на ту страничку. А ведь сделать красиво не так уж и сложно! Существует три основных способа, которые должен знать каждый.
1) Самое очевидное решение — векторная анимация. Минус такого подхода очевиден: потребуется довольно много времени, чтобы красиво анимировать детальные изменения эффектов (в нашем случае, языки пламени). Двухкадровое изменение, конечно, не устроит. Мы же хорошие флэшеры, не правда ли? :) Нарисуем хотя бы 6 последовательных кадров горящего пламени, установив в качестве частоты приличные для плавной анимации 24 fps. Рядом для примера разместим тот же самый Movie Clip, с увеличенным в два раза количеством кадров (не ключевых). То есть мы фактически получим тот же эффект на скорости 12 fps.
Первый костер – слишком медленно, да и его частота не подошла бы для анимации остальной части проекта. Стандартные 12 fps — это очень мало для качественной анимации большинства объектов.
Второй костер горит слишком быстро, дергано. Если увеличить количество ключевых кадров хотя бы в два раза, получится уже вполне приятный и плавный огонь, но временные затраты с каждым кадром растут в геометрической прогрессии. Шурик, вы – профессионал? Шурик, это не наши методы. Конечно, здесь есть свои оговорки. Например, если к стилистике мультфильма подходит только векторный, «мультяшный» огонь, то деваться некуда, но в остальных случаях логичнее будет обратить внимание на другие способы создания огня.
2) Битмапный метод. Суть этого способа сводится к тому, что эффект создается в какой-нибудь серьезной программе вроде Adobe After Effects или particleIllusion, а потом экспортируется в качестве последовательности битмап-изображений или (о, ужас!) видео. Последним особенно любят баловаться иностранные коллеги, даром, что у них с шириной канала дела обстоят гораздо лучше, чем в России и СНГ. Здесь есть много плюсов: простота и скорость создания нужного эффекта, многовариантность в пару кликов, низкая нагрузка на процессор в процессе воспроизведения (особенно актуально в играх, когда кремниевый мозг и без того сильно занят скриптами). Из минусов можно отметить разве что больший (но зачастую не очень большой!) объем скомпилированного файла, чем в других методах и некоторую размытость изображения. Все-таки сглаженный вектор выглядит более достойно. Красивый огонь, кстати, попадается редко. Например, удачное сочетание статичной картинки и анимированного битмапа можно посмотреть здесь: saizenmedia.com/gracia
Жаль у меня не осталось хорошего примера в отдельном файле
3) И, наконец, страшная, ужасная, вгоняющая в священный трепет новичков, программная реализация! Идеально подходит для игр (во многих случаях просто невозможно использовать зацикленный клип), но можно использовать и в анимационных клипах, только не очень удобно. Судите сами – весь эффект будет виден только при компиляции, редактировать скрипты приходится вслепую. Зато рисовать для этого нужно по минимуму — буквально один Movie Clip, как частичку эффекта. Она будет многократно дублироваться, а ее поведение — задаваться физическими законами. В сети много подобных примеров, но я хочу продемонстрировать вам настоящее ниндзитсу в ActionScript-кодинге. Каких-то 23 строчки AS3-кода и один нарисованный градиент творят настоящие чудеса.
Вот код:
import flash.filters.*;
import flash.display.*;
var my_btm = new BitmapData(200, 200, true, 0xFFFFFF);
gradient_mc.start_offset = [];
gradient_mc.finish_offset = [];
var c = 0;
while (c<3)>
gradient_mc.start_offset[c] = {x:0, y:0};
gradient_mc.finish_offset[c] = {x:Math.random()*4-2, y:Math.random()*3+4};
c++;
}
gradient_mc.onEnterFrame = function() {
var c = 0;
while (c<3)>
this.start_offset[c].x += this.finish_offset[c].x;
this.start_offset[c].y += this.finish_offset[c].y;
c++;
}
my_btm.perlinNoise(15, 50, 3, 5, false, false, 1, true, this.start_offset);
var dmf = new DisplacementMapFilter(my_btm, new flash.geom.Point(0, 0), 1, 1, 10, 200, «clamp»);
this.filters = [dmf];
};
— Какой способ выбрать, решайте сами для каждого конкретного проекта. Я описал основные области применения каждого способа, их плюсы и минусы. Надеюсь, ваши работы станут еще немного красивее ;) Не бойтесь экспериментировать и удачи!
Рано или поздно, к этому моменту приходит любой разработчик под Flash, не важно, программист ли вы, аниматор или веб-дизайнер. Как сделать тот или иной эффект? То ли незнание, то ли природная лень вынуждает многих товарищей создавать такие отвратительные вещи, при взгляде на которые хочется немедленно закрыть браузер и больше никогда не заходить на ту страничку. А ведь сделать красиво не так уж и сложно! Существует три основных способа, которые должен знать каждый.
1) Самое очевидное решение — векторная анимация. Минус такого подхода очевиден: потребуется довольно много времени, чтобы красиво анимировать детальные изменения эффектов (в нашем случае, языки пламени). Двухкадровое изменение, конечно, не устроит. Мы же хорошие флэшеры, не правда ли? :) Нарисуем хотя бы 6 последовательных кадров горящего пламени, установив в качестве частоты приличные для плавной анимации 24 fps. Рядом для примера разместим тот же самый Movie Clip, с увеличенным в два раза количеством кадров (не ключевых). То есть мы фактически получим тот же эффект на скорости 12 fps.
Первый костер – слишком медленно, да и его частота не подошла бы для анимации остальной части проекта. Стандартные 12 fps — это очень мало для качественной анимации большинства объектов.
Второй костер горит слишком быстро, дергано. Если увеличить количество ключевых кадров хотя бы в два раза, получится уже вполне приятный и плавный огонь, но временные затраты с каждым кадром растут в геометрической прогрессии. Шурик, вы – профессионал? Шурик, это не наши методы. Конечно, здесь есть свои оговорки. Например, если к стилистике мультфильма подходит только векторный, «мультяшный» огонь, то деваться некуда, но в остальных случаях логичнее будет обратить внимание на другие способы создания огня.
2) Битмапный метод. Суть этого способа сводится к тому, что эффект создается в какой-нибудь серьезной программе вроде Adobe After Effects или particleIllusion, а потом экспортируется в качестве последовательности битмап-изображений или (о, ужас!) видео. Последним особенно любят баловаться иностранные коллеги, даром, что у них с шириной канала дела обстоят гораздо лучше, чем в России и СНГ. Здесь есть много плюсов: простота и скорость создания нужного эффекта, многовариантность в пару кликов, низкая нагрузка на процессор в процессе воспроизведения (особенно актуально в играх, когда кремниевый мозг и без того сильно занят скриптами). Из минусов можно отметить разве что больший (но зачастую не очень большой!) объем скомпилированного файла, чем в других методах и некоторую размытость изображения. Все-таки сглаженный вектор выглядит более достойно. Красивый огонь, кстати, попадается редко. Например, удачное сочетание статичной картинки и анимированного битмапа можно посмотреть здесь: saizenmedia.com/gracia
Жаль у меня не осталось хорошего примера в отдельном файле
3) И, наконец, страшная, ужасная, вгоняющая в священный трепет новичков, программная реализация! Идеально подходит для игр (во многих случаях просто невозможно использовать зацикленный клип), но можно использовать и в анимационных клипах, только не очень удобно. Судите сами – весь эффект будет виден только при компиляции, редактировать скрипты приходится вслепую. Зато рисовать для этого нужно по минимуму — буквально один Movie Clip, как частичку эффекта. Она будет многократно дублироваться, а ее поведение — задаваться физическими законами. В сети много подобных примеров, но я хочу продемонстрировать вам настоящее ниндзитсу в ActionScript-кодинге. Каких-то 23 строчки AS3-кода и один нарисованный градиент творят настоящие чудеса.
Вот код:
import flash.filters.*;
import flash.display.*;
var my_btm = new BitmapData(200, 200, true, 0xFFFFFF);
gradient_mc.start_offset = [];
gradient_mc.finish_offset = [];
var c = 0;
while (c<3)>
gradient_mc.start_offset[c] = {x:0, y:0};
gradient_mc.finish_offset[c] = {x:Math.random()*4-2, y:Math.random()*3+4};
c++;
}
gradient_mc.onEnterFrame = function() {
var c = 0;
while (c<3)>
this.start_offset[c].x += this.finish_offset[c].x;
this.start_offset[c].y += this.finish_offset[c].y;
c++;
}
my_btm.perlinNoise(15, 50, 3, 5, false, false, 1, true, this.start_offset);
var dmf = new DisplacementMapFilter(my_btm, new flash.geom.Point(0, 0), 1, 1, 10, 200, «clamp»);
this.filters = [dmf];
};
— Какой способ выбрать, решайте сами для каждого конкретного проекта. Я описал основные области применения каждого способа, их плюсы и минусы. Надеюсь, ваши работы станут еще немного красивее ;) Не бойтесь экспериментировать и удачи!