-Рубрики

 -Поиск по дневнику

Поиск сообщений в Т-Йоки

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 06.02.2011
Записей: 1525
Комментариев: 34
Написано: 1603


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

Пятница, 01 Ноября 2013 г. 19:04 + в цитатник
Цитата сообщения novprospekt

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


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






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






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

Векторный клипарт "Нам не страшен Halloween"Векторный клипарт "Нам не страшен 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.


Рубрики:  АНИМАЦИЯ/Уроки анимации
Метки:  

 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку