• Авторизация


Флеш фильтр для программной анимации «Flamme» . Action Script 2. 03-10-2014 06:22 к комментариям - к полной версии - понравилось!



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




Фильтр применяется посредством скрипта к картинке или её части, которые предварительно модифицированы в фрагмент ролика (мувиклип).
Рассмотрим работу фильтра подробнее. Откройте программу Adobe Flash или, так как используется Action Script 2, можно работать и в Sothink SWF Quicker.
Создайте документ Action Script 2 и импортируйте в Библиотеку программы картинки с которыми будите работать.
[700x449]
[680x458]



[330x]
[450x]

Сохранить созданный проект в отдельную папку под каким либо именем, например, "крылья".
Файл - Сохранить как

Смотрим на Временную шкалу основной Сцены. Там один слой - "Слой 1".
Теперь добавьте необходимое количество слоёв на Временную шкалу, так чтобы разместить свои фоновые картинки и переименуйте их в соответствии с темой этих картинок. Например, "девушка", "фон" и так далее. У меня на флешке будет девушка с крыльями и я просто переименовала имеющийся слой - "Слой 1" в слой "девушка фон".
Для крыльев, которые мы будем "оживлять" в этой флешке, необходимо создать отдельный слой - слой "крылья". Этот слой необходимо поместить в низ за слой с картинкой девушки, то есть за слой "девушка фон".
Теперь Временная шкала будет выглядеть следующим образом
[669x515]

Следующим шагом будет создание Нового символа - "крылья"
Вставка - Создать символ
[323x182]
Далее откроется диалоговое окно создания символа, которое заполняем согласно скрина.
[420x153]
После того как нажмёте "ОК", откроется окно редактирования вновь созданного Символа "крылья". И в этом окне на Временной шкале мы также видим один слой. Поработаем со слоями. "Слой 1", который мы видим, переименовываем в слой "крылья анимация". Выше слоя "крылья анимация" создаём новый слой - "скрипт".
Выделяем снова слой "крылья анимация" и из Библиотеки инструментом "Стрелка"(V) на Рабочий стол окна редактирования символа "крылья" перетаскиваем картинку с изображением крыльев.
[700x518]

Выравниваем добавленную картинку горизонтально и вертикально относительно центра Рабочего стола.
[700x518]

Всё также находясь на слое "крылья анимация", на Рабочем столе инструментом "Стрелка" выделяем картинку с изображением крыльев. Далее модифицируем картинку крылья в символ - "Фрагмент ролика". Ролику даем название "W1"
[700x518]
[436x191]

После того как мы преобразовали картинку с крыльями в Фрагмент ролика, в панели "Свойства" становиться доступной графа "Назначить имя экземпляру". Вводим в неё имя для нашего ролика -

flamme

[700x518]

Теперь пришло время анимировать крылья с помощью фильтра. Для этого переходим на слой "скрипт" и выделяем первый кадр этого слоя. Открываем вкладку - блокнот "Действие" и вставляем туда скрипт, который приведён ниже.
[700x555]


code:


function creaVag()
{
xDeplac = xDeplac + 5.000000E-001;
yDeplac = yDeplac + 10;
pt = new flash.geom.Point(xDeplac, yDeplac);
bitmapData.perlinNoise(70, 60, 1, 10, false, true, 8, true, pt);
creaDisplacementMap();
} // End of the function
function creaDisplacementMap()
{
var _loc1 = new flash.filters.DisplacementMapFilter(bitmapData, new Point(0, 0), 1, 1, 25, 5, "clamp");
flamme.filters = [blur, _loc1];
} // End of the function
var bitmapData = new flash.display.BitmapData(flamme._width + 80, flamme._height + 50, false, 255);
var clip = this.createEmptyMovieClip("clip", this.getNextHighestDepth());
clip.attachBitmap(bitmapData, this.getNextHighestDepth());
clip._visible = false;
xDeplac = 0;
yDeplac = 0;
inter = setInterval(this, "creaVag", 50);
var blur = new flash.filters.BlurFilter(0, 0);





Позднее, когда вы разберётесь с этим уроком, вы сможете поэкспериментировать с настройками этого фильтра, изменив некоторые параметры в скрипте.
Так, в строке 20 скрипта изменяя численное значение параметра "inter" можно изменить вид колебания. Если взять значения больше 50 единиц, то колебания будут более плавными и спокойными. Если же взять значения менее 50 единиц, то колебания станут более частыми и резкими. Параметр же "var blur" (строка 21 скрипта) даёт размытие картинки по шкале X и Y. Чем больше любое из значений - X или Y, тем больше размыта картинка.

И так, крылья мы "оживили". Теперь пришло время собрать флешку. Для этого переходим на основную Рабочую сцену (Монтажный кадр 1).
[501x449]

На Временной шкале основной Рабочей сцены выделяем слой "девушка фон" и из Библиотеки инструментом "Стрелка" перетягиваем картинку с девушкой. Инструментами трансформации придаем изображению нужный размер и расположение. После этого слой "девушка фон" закрываем на замочек.
[700x606]

Переходим на слой "крылья", выделяем его и из Библиотеки инструментом "Стрелка" перетягиваем Фрагмент ролика "крылья". Инструментами трансформации на Рабочем поле придаем крылышкам нужный размер и расположение.
[700x589]

К Фрагменту ролика "крылья" применяем стандартный фильтр "Тень" из набора программы. Для этого в панели "Свойства" находим вкладку "Фильтры", разворачиваем её и нажав на кнопочку "Добавить фильтр" выбираем фильтр "Тень". Устанавливаем параметры как на скрине или по своему желанию.
[324x312]

Тестируем ролик Ctrl+Enter и если все устраивает сохраняем в формате FLA, как проект
Файл - Сохранить
и экспортируем ролик как флешку
Файл - Экспорт - Экспортировать ролик









вверх^ к полной версии понравилось! в evernote
Комментарии (36): вперёд»
таила 03-10-2014-07:04 удалить
Красивая флешечка! Но для меня это такой темный лес, вчера попыталась в фотошопе сделать анимацию, дождя да так запуталась, где что а капельки у меня уже сделаны, только как их заставить капать мне еще предстоит разобратся!
Всего доброго! Отличного настроения!
Мариночка, спасибо за урок-твой труд! Посмотрела и прочитала, вроде бы понятно. А как выделить частичку изображения до меня не дошло? Возможно когда буду делать, по ходу соображу. Огромнейшее спасибо. Здоровья!!!
novprospekt 03-10-2014-09:14 удалить
Ответ на комментарий таила # Вот очень подробный урок по созданию дождика с молнией. Когда то сама училась по нему
http://www.olgabor.com/publ/animacija/liven_i_sverkanie_molnii/7-1-0-117
[600x425]
таила 03-10-2014-09:19 удалить
Ответ на комментарий novprospekt # Спасибо Маришка! Пойду попробую, хотя бы уж без молнии, с ней уж потом разбиратся буду!
Сулия 03-10-2014-09:21 удалить
С благодарностью!
LiSu 03-10-2014-10:01 удалить
Красивые эффекты получаются, спасибо, Маринка!
Марина спасибо,цитирую с благодарностью!!! Всё так просто и красиво и раздолье для фантазии! )))

novprospekt 03-10-2014-10:15 удалить
Ответ на комментарий Татьяна_Волкова_Литвинова # Танюш, ты пока попробуй сделать эффект на картинке png. А потом будем дальше с выделением частей разбираться. У этого фильтра много настроек. Для разных картинок можно подбирать разные настройки. Посмотри, вот для пламени я изменяла значения в скрипте. Сравни с оригиналом и тоже попробуй поэкспериментировать.
[348x500]

code:


function creaVag()
{
xDeplac = xDeplac + 5.000000E-001;
yDeplac = yDeplac + 10;
pt = new flash.geom.Point(xDeplac, yDeplac);
bitmapData.perlinNoise(70, 60, 1, 10, false, true, 8, true, pt);
creaDisplacementMap();
} // End of the function
function creaDisplacementMap()
{
var _loc1 = new flash.filters.DisplacementMapFilter(bitmapData, new Point(0, 0), 1, 1, 45, 5, "clamp");
flamme.filters = [blur, _loc1];
} // End of the function
var bitmapData = new flash.display.BitmapData(flamme._width + 30, flamme._height + 250, false, 255);
var clip = this.createEmptyMovieClip("clip", this.getNextHighestDepth());
clip.attachBitmap(bitmapData, this.getNextHighestDepth());
clip._visible = false;
xDeplac = 0;
yDeplac = 0;
inter = setInterval(this, "creaVag", 10);
var blur = new flash.filters.BlurFilter(2, 2);


novprospekt 03-10-2014-10:18 удалить
Ответ на комментарий LiSu # Пожалуйста. рада буду если пригодится.
novprospekt 03-10-2014-10:21 удалить
Ответ на комментарий здесь_нет_никого # Эффект действительно очень просто делается, но в нём много чего можно настроить и поэтому получается простор для фантазии.
За флешечку спасибо. Очень оригинально придумано. Надо будет где - нибудь на коллаже попробовать вуальку покрутить, думаю эффектно получится.
novprospekt 03-10-2014-10:22 удалить
Ответ на комментарий Сулия # Пожалуйста. Буду рада если пригодится.
Ответ на комментарий novprospekt # Сейчас блюра больше добавила к вуальке,вообще классно получилось,как настоящий дымок,спасибо Мариш еще раз,люблю такие "вещи"... )))
Lana-Lanochka 03-10-2014-10:39 удалить
Спасибо за прекрасный урок!!!
Благодарю... Успехов Вам, и всего самого наилучшего... С уважением, MerlinWebDesigner )
jzayka 03-10-2014-11:35 удалить
Спасибо,Мариночка,за урок..
Ты вроде давала это скрипт..Анимация свечи..
Я покрутила, разбираться не стала.
Теперь обязательно попробую...
Классные эфффекты,получаться будут.
Я люблю такие штучки.
Кстати,раздобыла скрипт Приветствия на AS3.
И для AS2 привела в надлежащий вид(обновление).
Так-то разницы нет на каком языке..
Просто я часто пользуюсь Фрагментами кода,а там же на AS3.
Вот для этого..Я долго искала ,сама же в скриптах практически ноль.
На одном форуме помогли..)
Так что ,если вдруг...)....
И еще там же, для текста за куросором и тоже на AS 3
Правда,класс +код.
Опять же все связано с Фрагментами кода.
Там есть Пользовательский курсор мыши.
Применяю к этому коду и готово ..))
Иду цитировать..разболталась..)
ВАТ 03-10-2014-11:55 удалить
Спасибо, Мариночка, за очередной урок! Цитирую с благодарностью! Буду пробовать.
Ответ на комментарий novprospekt # Марина, обязательно буду экспериментировать. Спасибо! Беру в дневник.
Jorjorych 03-10-2014-13:15 удалить
Отлично! Очень универсальный код! Спасибо!
[300x237]
Мариночка большое спасибо за урок и интересный фильтр! Цитирую с благодарностью!
Очень симпатичный эффект,Мариша,спасибо за фильтр,а особенно за урок по [400x444]
Анна_Е_Д 03-10-2014-19:12 удалить
спасибо большое за урок!!!! цитирую с благодарностью!!
Nadin_Aquarius 05-10-2014-15:11 удалить
Ответ на комментарий novprospekt # Спасибо за подсказку)))
alina1980 05-10-2014-20:59 удалить
Мариночка, у меня в программке нет такого Action Script 2 Вот скрин посмотри пожалуйста.
[344x494]
Puxovaia 05-10-2014-23:22 удалить
Спасибо, Мариночка!
novprospekt 06-10-2014-05:29 удалить
Ответ на комментарий alina1980 # Да, в новом СС нет Уже Action Script 2. Будем думать как это обойти. Я как только. что-нибудь придумаю, обязательно напишу тебе. Скрипт Action Script 3 для Приветствия, которое изменяется в течении суток, мне обещали дать, плеер, часики и календарики на Action Script 3 тоже все есть. Так, что будем для Action Script 3 собирать коллекцию скриптов.
MissKcu 14-10-2014-14:58 удалить
пасиб за урок....времени нет пока...но утащу....мне понравился эффект
Спасибо за урок! Очень всё интересно!!!
А как выделить объект?


Комментарии (36): вперёд» вверх^

Вы сейчас не можете прокомментировать это сообщение.

Дневник Флеш фильтр для программной анимации «Flamme» . Action Script 2. | novprospekt - Дневник novprospekt | Лента друзей novprospekt / Полная версия Добавить в друзья Страницы: раньше»