Без заголовка

Суббота, 23 Ноября 2013 г. 15:13 + в цитатник

Цитата сообщения novprospekt

Прочитать целиком В свой цитатник или сообщество!

Программная анимация в Adobe Flash.

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

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

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

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

Векторный клипарт "Нам не страшен Halloween"

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

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

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

Следующим шагом превращаем нашу картинку в мувиклип (фрагмент ролика). Для этого, проверяем, чтобы картинка была выделена и нажимаем с клавиатуры клавишу F8 Keyboard, клавиатура

или с панели меню Модификация - Преобразовать в символ
В открывшемся диалоговом окне "Преобразовать в символ" выставляем следующие параметры. Имя - "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".

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

Серия сообщений "Уроки Flash":
уроки в разных флешпрограммах, авторские уроки flash

Часть 1 - Делаем элементарные часики.Начинаем учиться созданию flash.
Часть 2 - Как правильно записать код флешки или видео в рамочку для кодов.
...
Часть 14 - Использование масок в программе Sothink SWF Quicker
Часть 15 - Урок «Маска текстом в программе Sothink SWF Quicker».
Часть 16 - Программная анимация в Adobe Flash.
Часть 17 - Уроки Flash. Падающий снег. Классы AS3.