Движение по заданной траектории. Урок для Adobe Flash.
 

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



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






И так, разберёмся подробнее как же создать движение объекта по заданной траектории. Будем анимировать осенние листики.
Для этого создадим новый флеш документ Action Script 3
Файл - Создать






Далее на Временной шкале Основного рабочего поля (Монтажный кадр 1) создаём 2 слоя
1. Фон
2. Листики
Временная шкала Основного рабочего поля (Монтажный кадр 1) будет выглядеть следующим образом.



Сохраняем созданный проект под каким либо названием, например "Падающий лист"

В Библиотеку программы импортируем любую картинку с осенним фоном и файл AI "Лист", который можно скачать из вложения ниже



Вложение: 4135263_list.rar

Файл - Импорт - Импортировать в библиотеку



После загрузки в Библиотеке будут следующие файлы



Инструментом "Стрелка" на слой "Фон" на основном Рабочем поле Монтажный кадр 1 из Библиотеки перетаскиваем фоновую картинку и, либо изменяем размеры Рабочего поля под размеры картинки, либо трансформируем размеры картинки под размеры Рабочего поля.



Далее создаём Новый Символ
Вставка - Создать символ




После того как в диалоговом окне создания нового символа нажмёте "ОК", то попадаем в окно редактирования символа "Лист". Переименовываем Слой 1 на Временной шкале в "Анимация лист"
Из Библиотеки инструментом "Стрелка" на Рабочее поле символа "Лист" добавляем графический символ "Лист".



На Временной шкале на слое "Анимация лист" щелкаем в кадре 140 и, вызвав контекстное меню, выбираем пункт "Вставить ключевой кадр".



Между кадрами 1 и 140 появились промежуточные кадры. Теперь щелкаем на любом кадре между первым и сто сороковым и, в появившемся контекстном меню, выбираем пункт "Создать классическую анимацию движения". После этого автоматически такая анимация будет создана.





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



Теперь пришло время создать траекторию по которой будет лететь наш объект "Падающий лист"
Для этого щелкаем по слою "Анимация лист" и, вызвав контекстное меню, выбираем пункт "Добавить направляющую классической анимации".



После этого мы увидим, что на Временной шкале появился новый слой - "Направляющая", а слой "Анимация лист" оказался в "подчинении" у этого слоя.



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


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



При этом щелкните ещё раз на первом кадре слоя "Анимация лист" и убедитесь, что он выделен. Теперь откройте вкладку "Свойства" и найдите там раздел "Анимация". Проставьте галочки в чекбоксах, как указано на картинке.



На слое "Анимация лист" щёлкните 140 (последний) ключевой кадр и Инструментом "Стрелка" поместите наш осенний листик в конец нарисованной траектории. При этом точка регистрации графического объекта листик также должна находится на линии траектории движения.
Либо если привязка к "Направляющей" у вас сработает без всяких проблем, то когда вы щелкните последний кадр анимации, листочек автоматически сам переместиться в конец направляющей.



После этого ещё раз щелкните 140 кадр, чтобы убедиться, что он выделен и открыв вкладку "Свойства" в разделе "Анимация" также проставьте галочки в чекбоксах, как указано на картинке.



Ещё раз щёлкните по выбору любой кадр на слое "Анимация лист", например 40 кадр, и убедитесь, что наш листик двигается строго по нарисованной траектории.



Если всё нормально, то анимация "Падающего листа" по заданной траектории создана и можно вернуться на Основную Рабочую сцену - Монтажный кадр 1.
Находясь на Монтажном кадре 1, выделите слой "листики" и Инструментом "Стрелка" перетащите из Библиотеки на него видеоролик "Лист", поместив его в самом верху фоновой картинки.



Видеоролику "Лист" примените фильтр "Тень" со следующими параметрами. Напоминаю, что раздел "Фильтры" можно найти на вкладке "Свойства".



Зажав клавиши Shift+Ctrl можно размножить видеоролик "Лист" и получить несколько падающих листиков. С помощью Инструмента "Свободное преобразование" можно изменить размер и угол поворота видеоролика "Лист", чтобы листочки падали не совсем одинаково.



Зажав клавиши Ctrl+Enter просматриваем полученный в результате флеш ролик. Если всё устраивает, то сохраняем флешку как проект в формате FLA
Файл - Сохранить
Экспортируем флеш ролик для дальнейшей публикации
Файл - Экспорт - Экспортировать ролик







 

Серия сообщений "Уроки Flash":

уроки в разных флешпрограммах, авторские уроки flash

Часть 1 - Делаем элементарные часики.Начинаем учиться созданию flash.
Часть 2 - Как правильно записать код флешки или видео в рамочку для кодов.
...
Часть 28 - Флеш фильтр для программной анимации «Flamme» . Action Script 2.
Часть 29 - Анимация дождя в Adobe Flash. Урок первый.
Часть 30 - Движение по заданной траектории. Урок для Adobe Flash.
Часть 31 - Урок листопада в Adobe Flash на AS3.
Часть 32 - Текст за курсором в Adobe Flash(AS3).Урок.