-Цитатник

▬ К нам в дом пришла война... - (0)

К нам в дом пришла война, А все молчали... Молчат политики, артисты и друзья. "К нам в дом при...

▬ КУРСК,МЫ С ТОБОЙ ... - (0)

Не поминайте лихом нас, ребята, И принесите в августе цветы Для нас, кто против танков с автоматом...

✨▬ ТОНКОСТИ РУССКОГО ЯЗЫКА ▬✨ - (0)

✨ Борщ пересолила, с солью переборщила. ✨ Сел в автобус. Стою. ✨ Только...

└─► Cтарею...Боже мой,старею!... - (0)

Cтарею...Боже мой, старею!... Уже не тянет на мужчин: То в каждом вижу я злодея, То каждый, м...

ЛЮБОВЬ ЛЕРОКС.ВЫСКАЗЫВАНИЯ,ЦИТАТЫ... - (0)

•••✧✧✧•✧✧✧•✧✧✧•✧✧ ...

 -Фотоальбом

Фотоальбом закрыт всем, кроме хозяина дневника.

 -Приложения

  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни
  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
  • Перейти к приложению Дешевые авиабилеты Дешевые авиабилетыВыгодные цены, удобный поиск, без комиссии, 24 часа. Бронируй сейчас – плати потом!
  • Перейти к приложению Всегда под рукой Всегда под рукойаналогов нет ^_^ Позволяет вставить в профиль панель с произвольным Html-кодом. Можно разместить там банеры, счетчики и прочее

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

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


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

Понедельник, 18 Января 2021 г. 16:07 + в цитатник
Цитата сообщения 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".

Программная анимация во флеш


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










Метки:  
Понравилось: 1 пользователю