Svoboda | Graniru | BBC Russia | Golosameriki | Facebook

 -Рубрики

 -Всегда под рукой


Флеш фильтр для программной анимации «Flamme» . Action Script 2.

Воскресенье, 19 Апреля 2015 г. 10:07 + в цитатник
Цитата сообщения novprospekt Флеш фильтр для программной анимации «Flamme» . Action Script 2.


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




Фильтр применяется посредством скрипта к картинке или её части, которые предварительно модифицированы в фрагмент ролика (мувиклип).
Рассмотрим работу фильтра подробнее. Откройте программу Adobe Flash или, так как используется Action Script 2, можно работать и в Sothink SWF Quicker.
Создайте документ Action Script 2 и импортируйте в Библиотеку программы картинки с которыми будите работать.
02-10-2014 10-03-58 (700x449, 171Kb)
02-10-2014 10-04-52 (680x458, 233Kb)



0_d5927_db005623_XL ()
2 ()

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

Смотрим на Временную шкалу основной Сцены. Там один слой - "Слой 1".
Теперь добавьте необходимое количество слоёв на Временную шкалу, так чтобы разместить свои фоновые картинки и переименуйте их в соответствии с темой этих картинок. Например, "девушка", "фон" и так далее. У меня на флешке будет девушка с крыльями и я просто переименовала имеющийся слой - "Слой 1" в слой "девушка фон".
Для крыльев, которые мы будем "оживлять" в этой флешке, необходимо создать отдельный слой - слой "крылья". Этот слой необходимо поместить в низ за слой с картинкой девушки, то есть за слой "девушка фон".
Теперь Временная шкала будет выглядеть следующим образом
02-10-2014 14-23-43 (669x515, 138Kb)

Следующим шагом будет создание Нового символа - "крылья"
Вставка - Создать символ
02-10-2014 14-29-10 (323x182, 56Kb)
Далее откроется диалоговое окно создания символа, которое заполняем согласно скрина.
02-10-2014 14-28-30 (420x153, 37Kb)
После того как нажмёте "ОК", откроется окно редактирования вновь созданного Символа "крылья". И в этом окне на Временной шкале мы также видим один слой. Поработаем со слоями. "Слой 1", который мы видим, переименовываем в слой "крылья анимация". Выше слоя "крылья анимация" создаём новый слой - "скрипт".
Выделяем снова слой "крылья анимация" и из Библиотеки инструментом "Стрелка"(V) на Рабочий стол окна редактирования символа "крылья" перетаскиваем картинку с изображением крыльев.
02-10-2014 15-43-33 (700x518, 291Kb)

Выравниваем добавленную картинку горизонтально и вертикально относительно центра Рабочего стола.
02-10-2014 15-49-28 (700x518, 251Kb)

Всё также находясь на слое "крылья анимация", на Рабочем столе инструментом "Стрелка" выделяем картинку с изображением крыльев. Далее модифицируем картинку крылья в символ - "Фрагмент ролика". Ролику даем название "W1"
02-10-2014 16-18-33 (700x518, 243Kb)
02-10-2014 16-21-11 (436x191, 77Kb)

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

flamme

02-10-2014 16-29-07 (700x518, 259Kb)

Теперь пришло время анимировать крылья с помощью фильтра. Для этого переходим на слой "скрипт" и выделяем первый кадр этого слоя. Открываем вкладку - блокнот "Действие" и вставляем туда скрипт, который приведён ниже.
02-10-2014 16-38-00 (700x555, 335Kb)


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).
02-10-2014 18-08-25 (501x449, 113Kb)

На Временной шкале основной Рабочей сцены выделяем слой "девушка фон" и из Библиотеки инструментом "Стрелка" перетягиваем картинку с девушкой. Инструментами трансформации придаем изображению нужный размер и расположение. После этого слой "девушка фон" закрываем на замочек.
02-10-2014 18-21-19 (700x606, 356Kb)

Переходим на слой "крылья", выделяем его и из Библиотеки инструментом "Стрелка" перетягиваем Фрагмент ролика "крылья". Инструментами трансформации на Рабочем поле придаем крылышкам нужный размер и расположение.
02-10-2014 18-28-40 (700x589, 280Kb)

К Фрагменту ролика "крылья" применяем стандартный фильтр "Тень" из набора программы. Для этого в панели "Свойства" находим вкладку "Фильтры", разворачиваем её и нажав на кнопочку "Добавить фильтр" выбираем фильтр "Тень". Устанавливаем параметры как на скрине или по своему желанию.
02-10-2014 18-34-21 (324x312, 79Kb)

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









Рубрики:  Флеш/Adobe Flash

Понравилось: 10 пользователям