-Рубрики

 -Метки

adobe illustrator corel paint shop corel paint shop pro corel вместе с hitter corel вместе с mademoiselle_viv gimp irini jasc animation shop krilo angela poser tubes poser-daz poser-daz-мои работы poser-программа pro программы talanat tubes-radyga анимация анимация в jasc animation shop анимированные фоны блинги все для фотошопа все от искательницы градиенты для дневника для фотошопа интересно искуство арт исходники для флешек кисти для фотошопа книги коллажи компьютер кулинарные рецепты мои награды мои работы в фш и корел мои уроки музыка плагины поздравление проверка правописания. программы рамки поздравительные скрап наборы создаем коллажи стихи урок рамочка сделанная в фотошопе уроки уроки от натали уроки adobe illustrator уроки ledy_olga уроки в corel paint shop pro уроки в corel paint shop pro? уроки для фотошопа уроки от irini уроки от krilo angela уроки от mausinka уроки от mischel7 уроки от искательницы уроки от натали уроки с ольга бор фильмы флешки фотошоп вместе с mademoiselle_viv

 -

Радио в блоге
[Этот ролик находится на заблокированном домене]

Добавить плеер в свой журнал
© Накукрыскин

 -Подписка по e-mail

 

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

Поиск сообщений в RADYGA55

 -Сообщества

Участник сообществ (Всего в списке: 4) Дом_Кукол Gala-Feya_and_Photoshop Вяжем_вместе Моя_кулинарная_книга

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 31.12.2008
Записей: 3729
Комментариев: 20792
Написано: 35666


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

Вторник, 12 Ноября 2013 г. 02:05 + в цитатник
Цитата сообщения novprospekt Программная анимация в Adobe Flash.


Программная анимация во 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.
Часть 17 - Уроки Flash. Падающий снег. Классы AS3.


Рубрики:  программы
Флешки
Метки:  
Понравилось: 1 пользователю