ПРОГРАММНАЯ АНИМАЦИЯ В ADOBE FLASH.novprospekt

Программная анимация во Flash - это анимация сделанная с помощью скриптов.
Создавать и управлять программной анимацией можно по разному - можно просто создать линейное движение без ускорения(например движение фона по горизонтали), а можно привязать движение к какому-либо математическому закону.
Так во флеш роликах для программной анимации часто используют функцию синус, которая имеет колебательный характер и с ее помощью можно создать отличные флеш анимационные эффекты.
Вот в этой открытке вся анимация создана именно с использованием синуса.


Синусом можно менять всё что угодно:
- положение объекта(клипарта) по оси X;
- положение по оси Y;
- вращение объекта (угол поворота);
- ширину и высоту в пикселах;
- ширину и высоту в процентах от оригинального размера;
- создавать цветовые трансформации.





Все материалы используемые в этом уроке можно скачать здесь
Материалы к уроку "Программная анимация в Adobe Flash"
В материалах есть все шрифты, которые используются в флешках, исходник fla, клипарт и фоны для вашего творчества, а также текстовые файлы со скриптами.






Итак, возьмем готовый клипарт png - хэлловиновскую тыкву и паучка на паутинке и сделаем программную анимацию, используя некоторые из приемов, показанных выше.


Открываем программу Adobe Flash и создаем файл Actionscript 2
Файл - Создать


Импортируем в рабочую область клипарт "Тыква"
Файл - Импортировать - Импортировать в рабочую область.




Инструментом "Стрелка" выделяем наш клипарт и переключаемся на инструмент "Свободное преобразование", с помощью которого уменьшаем размеры картинки.




Следующим шагом превращаем нашу картинку в мувиклип (фрагмент ролика). Для этого, проверяем, чтобы картинка была выделена и нажимаем с клавиатуры клавишу F8  или с панели меню Модификация - Преобразовать в символ
В открывшемся диалоговом окне "Преобразовать в символ" выставляем следующие параметры. Имя - "tykva". Тип клипа - Фрагмент ролика. Регистрация - центральная точка в средней линии (центр).




Полученный мувиклип "tykva" снова помещаем в мувиклип "Символ 1". Для этого в рабочей (монтажной) области выделяем картинку тыквы(или смотрим что картинка выделена) и нажимаем с клавиатуры кнопку F8 или Модификация - Преобразовать в символ
В открывшемся диалоговом окне "Преобразования в символ" выставляем следующие параметры. Имя - "Символ 1". Тип клипа - Фрагмент ролика. Регистрация - центральная точка в средней линии (центр).



Теперь у нас все готово для программной анимации и осталось только ввести скрипт.
В рабочей (монтажной) области "Монтажный кадр 1" у нас изображение тыквы. Дважды щелкнув по этому изображению, мы попадем в режим редактирования "Символ 1". Над рабочей областью у нас появляются две вкладки "Монтажный кадр1"(или Сцена1 - оснавная рабочая область) и вкладка "Символ1". Между вкладками можно переключаться.



Напоминаю, что для создания анимации мы находимся на владке "Символ1", т. е. в поле редактирования этого символа.
Теперь переходим на Временную шкалу для этого символа и видим там один слой. Стоя на первом кадре этого слоя открываем вкладку "Действия" (F9) и в окне блокнота вводим скрипт для анимации.

code:



onClipEvent (load) { 

y0 = _y;

x0 = _x;

t = 0; 

onEnterFrame = function(){

 _y = y0 - Math.abs(Math.sin(t -= .2))*50;

 _x = x0 + Math.sin(t + Math.PI / 2)*30; 

 _rotation = Math.sin(t + Math.PI / 2)*10;

 _xscale = 100 + Math.sin(t*2)*10; 

 _yscale = 100 + Math.cos(t*2)*20; 

} 

}  

Иначе говоря, на сленге флешеров, вешаем скрипт на мувиклип, т. е. отдельный слой для скрипта создавать не надо.
Из скрипта видно, что мы изменяем несколько параметров анимации - смещение по оси X и Y, изменение масштаба по X и Y и изменение угла наклона.
Теперь переключитесь на основную сцену "Монтажный кадр1" протестируйте мувиклип - Ctrl+Enter.
Если картинка клипарта слишком большая или находится не в том месте, то с помощью инструментов трансформации придайте ей нужный размер и местоположение.
Сохраните работу как проект в формате FLA. Файл - Сохранить как. Если вам этого достаточно, то можете также сохранить работу как флешку. Файл - Экспорт -Экспортировать ролик.
И вот такая танцующая тыква у вас на этом этапе должна получиться.



Теперь когда мы освоили метод программной анимации, то можно создать некоторую композицию из анимированных элементов. И прежде всего, используем уже готовый элемент с анимацией "Символ1" (танцующая тыква). Работаем на основной сцене - "Монтажный кадр 1". Добавим на Временной шкале основной сцены еще два слоя и на этих дополнительных слоях разместим еще по одной тыковке. Для этого выделяем тыкву на первом слое и командами меню из вкладки "Правка" -Копирование и Вставка добавляем тыковки на новые слои. Трансформируем, изменяем маcштаб и перемещаем вставленные объекты.
Работаем все также на основной сцене - "Монтажном кадре 1".






И у нас еще есть для анимации паучок на паутинке. Его мы тоже анимируем и прикрепим к надписи "Happy Halloween". Поэтому, сначала эту надпись создадим инструментом Текст . Я использую красивый латинский шрифт "Zombie Holocaust". Скачать его можно вместе с остальными материалами к уроку по ссылке в начале этого сообщения или используйте свой шрифт. Для надписи создаем выше всех слоев новый слой - "text". Вводим текст, внедряем его.







и применяем к нему фильтры на выбор. Например фильтр "Фаска" с такими параметрами.



Текст готов. Приступим к анимации паучка. Зададим ему колебательные движения из стороны в сторону и небольшое перемещение по оси Y.
Сначала на Временной Шкале создадим слой для паучка. Слой "pauk" создаем выше слоев с тыквами и ниже слоя "text". В Библиотеку импортируем клипарт с паучком. Файл - Импорт - Импортировать в библиотеку. Выделяем слой "pauk" и из Библиотеки перетягиваем на рабочую область картинку с паучком. Устанавливаем ее на свое усмотрение, но так, чтобы паутинка как бы прикреплялась к тексту.



Превращаем картинку с паучком в мувиклип (фрагмент ролика). Для этого проверяем, что картинка выделена и нажимаем с клавиатуры клавишу F8 или Модификация - Преобразовать в символ.
В открывшемся диалоговом окне "Преобразовать в символ" выставляем следующие параметры. Имя - "pauk". Тип клипа - Фрагмент ролика. Регистрация - центральная точка в верхней линии ( верх центр). Особое внимание обратите на точку регистрации мувиклипа.



Полученный ролик "pauk" помещаем в новый мувиклип "Символ 2". Для этого в рабочей (монтажной) области выделяем картинку паучка (или проверяем, что картинка выделена) и нажимаем с клавиатуры кнопку F8 или Модификация - Преобразовать в символ.
В открывшемся диалоговом окне "Преобразовать в символ" выставляем следующие параметры. Имя - "Символ 2". Тип клипа - Фрагмент ролика. Регистрация - центральная точка в верхней линии (верх центр).



Для программной анимации паучка все готово и осталось только ввести скрипт.
В рабочей (монтажной) области у нас выделено изображение паучка. Дважды щелкнув по этому изображению, мы попадем в режим редактирования "Символ 2", т. е. в поле редактирования этого символа.
Теперь переходим на Временную шкалу для этого символа. Стоя на первом кадре этого слоя открываем вкладку "Действия" (F9) и в окне блокнота вводим скрипт для анимации паучка.

code:



onClipEvent (load)



{

y0 = _y;

    t = 0;



    onEnterFrame = function ()



    {

_y = y0 - Math.abs(Math.sin(t -= .2))*5;

   setProperty("", _rotation, Math.sin(t = t + 5.000000E-002) * 7);



    };



}

Из скрипта видно, что мы изменяем параметр анимации - угол наклона и за счет этого паучок будет раскачиваться из стороны в сторону. Также присутствует небольшое смещение по Y.
Тестируем ролик Ctrl+Enter. Если паучок качается, значит все сделано правильно. Не забывайте периодически нажимать в меню Файл команду "Сохранить", чтобы ваш сохраненный проект постоянно обновлялся.
Можно также создать еще один слой для копии паучка - "pauk1" и на него скопировать мувиклип "Символ2".



К мувиклипам - тыквам и паучкам, можно применить любые фильтры - тень, свечение и т.д. Можно также добавить на основную сцену какой-нибудь фон, самым нижним слоем, Ну и еще раз протестировать ролик и сохранить флешку. Файл - Экспорт - Экспортировать ролик.

Леночка, это известная "проблема" флешеров новичков, как мы. Что изучать - AS2 или AS3. Как я поняла надо разбираться потихоньку и в том и в этом. Дело в том, что AS3 был специально разработан в связи с развитием сайтостроения. Вся это быстро развивающаяся кухня CCS и HTML5. AS3 в контексте всех новых кодирочных технологий HTML стремится к возможностям "джавы" и у него больше возможностей для интерактивности, чем у AS2 (больше возможностей для управления параметрами мувиклипов). Но иногда в AS3 какие-то простые вещи получаются с большими заморочками чем в AS2. Притом и уроков с AS2 все еще очень много.Различия между AS3 и AS2, конечно существенны, но понять их необходимо.
Вот например здесь в AS2 мы не прописываем имя для клипа и вставляем код прямо в мувиклип. В AS3 этого делать нельзя.
Если документ создан в AS3, то в мувиклипе "Символ 1" обязательно прописываем имя экземпляра в панели "Свойства" (в нашем случае для картинки тыква "tykva") и создаем отдельный слой для скрипта.


Вот коды для AS3 некоторых колебаний для мувиклипа tykva. Соответственно если у мувика другое имя, то в скрипте тоже меняем имя мувика.

code:
var arg = 0;
addEventListener(Event.ENTER_FRAME, Update)
function Update(e:Event){
tykva.scaleX = 1 + Math.sin(arg+= 0.1)*0.1;
tykva.scaleY = 1 - Math.sin(arg+= 0.1)*0.1;
tykva.y += Math.sin(arg+= 0.4)*6;
tykva.rotation += Math.sin(arg += 0.5)*3;
}


Можно использовать все коды анимации вместе, а можно и по отдельности или выборочно. Ненужные строчки из кода удаляем. После звездочек это скорость и ее можно изменять. В скобках цифры тоже можно менять.
Например, для колебания паучка скрипт будет

code:
var arg = 0;
addEventListener(Event.ENTER_FRAME, Update)
function Update(e:Event){
pauk.y += Math.sin(arg+= 0.1)*1;
pauk.rotation -= Math.sin(arg += 0.1)*5;
pauk.rotation += Math.sin(arg += 0.3)*5;
}