Анімацію руху (motion-tweened) також можна застосовувати до екземплярів, груп або текстових блоків, при цьому Flash підтримує розрахунок проміжних кадрів під час переміщення, зміни розміру, повороту та скосу об'єктів. Додатково можна змінювати колір екземплярів об'єктів або тексту, застосовуючи градієнтну зміну кольорів або змінюючи їх прозорість. Щоб виконати такі зміни для групи або текстового блоку, їх слід попередньо перетворити на символи командою Insert > Convert to Symbol(Вставка > Перетворити на символ). При цьому об'єкт, що перетворюється, стає екземпляром цього символу.
Створити анімацію руху можна двома способами:
- Створити початковий і кінцевий ключові кадри і для початкового кадру встановити значення Motion (Рух) у списку, що розкривається Tweening(Розрахунок) на панелі Frame(Кадр).
- Створити початковий ключовий кадр, потім виконати команду Insert > Create Motion Tween(Вставка > Розрахувати рух) та перемістити об'єкт у нову позицію на сцені. Flash автоматично створить заключний ключовий кадр.
Мал. 4.10. Результат розрахунку проміжних кадрів анімації
При кожній зміні положення ключових кадрів або зміні їх вмісту Flash автоматично розраховує проміжні кадри.
Розглянемо послідовність дій під час створення анімації руху за допомогою завдання параметрів на панелі Frame(Кадр):
- Виділяємо ім'я шару, щоб зробити його поточним, і виділяємо один із ключових кадрів шару, де має розпочатися анімація.
- Створюємо на робочому столі екземпляр, групу або текстовий блок або перетягуємо екземпляр з вікна бібліотеки. Мальований об'єкт слід перетворити на символ.
- Створюємо завершальний ключовий кадр, що визначає довжину послідовності кадрів.
- Щоб змінити екземпляр, групу або текстовий блок в останньому кадрі, можна виконати наступне: перемістити їх у нову позицію, змінити розмір, кут повороту чи скосу, змінити колір екземпляра чи тексту.
- Виконуємо команду Window > Panels > Frame(Вікно > Панелі > Кадр), щоб відкрити панель Frame (Кадр). У списку, що розкривається Tweening(Розрахунок) вибираємо значення Motion(Рух).
- При зміні розміру об'єкта слід встановити прапорець Scale(Масштабувати).
- Значення Easing(Плавність) задаємо в діапазоні від -100 до 100, визначаючи тим самим швидкість змін у часі. Негативні значення відповідають повільним змінам спочатку та швидким наприкінці. Позитивні - швидким спочатку і сповільнюється до кінця анімації. За замовчуванням швидкість постійна. Регулювання проводиться повзунком, що клацає на стрілці.
- Обертання можна задати вибором значення з списку, що розкривається Rotate(Поворот). За промовчанням обертання немає. Значення CW відповідає обертанню за годинниковою стрілкою, a CCW - проти, із зазначенням необхідного числа обертів. Це обертання буде додано до повороту об'єкта, заданого на кроці 4.
- Прапорець Orient to Path
- Прапорець Synchronize
- Snap(Прив'язка) фіксує на ній екземпляр, що анімується.
Мал. 4.11. Вибір параметрів анімації руху
Розглянемо послідовність дій під час створення анімації за командою Create Motion Tween(Розрахувати рух):
- Виділяємо порожній ключовий кадр і зображуємо на робочому столі об'єкт або перетягуємо на нього екземпляр з вікна бібліотеки.
- Виконуємо команду Insert > Create Motion Tween(Вставка > Розрахувати рух). Зображений на першому кроці об'єкт буде автоматично перетворено на символ, якому присвоєно ім'я tweenl. Наступним об'єктам присвоюватимуться імена tween2, tween3 і т.д.
- Клацніть вказуємо кадр, де має завершитися анімація, і виконуємо команду Insert > Frame(Вставка > Кадр).
- Переміщуємо об'єкт, екземпляр чи блок тексту у бажану позицію. Змінюємо його розмір та кут повороту, якщо це потрібно. Після всіх змін знімаємо з об'єкта виділення. Наприкінці послідовності кадрів автоматично з'являється ключовий кадр.
- Виділяємо кінцевий ключовий кадр послідовності та виконуємо команду Window > Panels > Frame(Вікно > Панелі > Кадр). На панелі, що відкрилася Frame(Кадр) автоматично має з'явитися значення Motion(Рух).
- Якщо змінено розмір, слід встановити прапорець Scale(Масштабувати).
- Значення Easing(Плавність) визначається в діапазоні від -100 до 100, визначаючи швидкість змін у часі. Негативні значення відповідають повільним змінам спочатку та швидким наприкінці. Позитивні - швидким спочатку і сповільнюється до кінця анімації. За замовчуванням швидкість постійна. Регулювання проводиться повзунком, що клацає на стрілці.
- Обертання задається вибором значення з списку, що розкривається Rotate(Поворот). За промовчанням вказується значення Auto(Автоматично), що визначається поворотом об'єкта на кроці 4. Значення CW відповідає обертанню за годинниковою стрілкою, a CCW - проти, із зазначенням необхідного числа обертів. Це обертання буде додано до повороту, заданого на кроці 4.
- Прапорець Orient to Path(Орієнтація на траєкторію) встановлюється у разі, якщо задана криволінійна траєкторія руху.
- Прапорець Synchronize(Синхронізувати) дозволяє синхронізувати число кадрів анімації з числом екземплярів графіки, якщо вони є різними.
- При заданій траєкторії руху прапорець Snap(Прив'язка) фіксує на ній екземпляр, що анімується.
Macromedia Flash MX 2004 надає кілька способів створення анімаційних послідовностей:
Анімаційні ефекти - програма сама створює послідовність кадрів, що імітує той чи інший ефект стосовно деякого об'єкта;
Покадрова анімація – користувач створює кожен кадр майбутньої анімації;
Автоматична tweened-анімація, або анімація трансформації - користувач задає початковий і кінцевий кадр, а програма сама створює проміжні кадри на основі програмної інтерполяції.
Анімаційні ефекти
Flash MX 2004 включає попередньо підготовлені анімаційні ефекти (timeline-ефекти), що дозволяють створювати складні анімації, використовуючи мінімальну кількість дій. Ви можете використовувати функцію Timeline Еffectsдо наступних об'єктів:
Графічні об'єкти, включаючи форми, згруповані об'єкти та графічні символи;
Растрові зображення;
Коли ви додаєте анімаційні ефекти до об'єкта, Flash автоматично створює відповідний шар і всі трансформації руху та форми, необхідні для цього ефекту, реалізуються у цьому шарі. Новий шар автоматично отримує те саме ім'я, що й ефект.
Як приклад створимо ефект «вибух» стосовно тексту. Для цього надрукуємо деяку фразу або слово (рис. 1), виділимо його за допомогою інструменту Arrow та виконаємо команду Insert => Timeline Effects => Effects => Explode.
Мал. 1. Виділений текстовий об'єкт
В результаті з'явиться однойменна панель (рис. 2), що надає можливість налаштування цілого ряду параметрів ефекту.
Мал. 2. Панель Explode
Наявність вікна попереднього перегляду дозволяє аналізувати різні варіації ефектів, не залишаючи панелі Explode. Після того, як ви оберете необхідні параметри, натисніть кнопку ОКі отримайте приблизно таку анімацію.
Аналогічно ефекти можна застосувати до растрового зображення. Розглянемо приклад із плавним зникненням растрової картинки. Імпортуємо растрове зображення на сцену за командою File => Import => Import до stage(рис. 3) і застосуємо ефект Вlur за командою Insert => Timeline Effects => Effects => Blurролик.
Мал. 3. Растрове зображення, імпортоване на сцену
Для того щоб відредагувати анімаційний ефект, виділіть на сцені об'єкт, асоційований з ефектом, і у вікні, що з'явиться Propertiesнатисніть кнопку Edit(рис. 4) – в результаті з'явиться панель Blur.
Мал. 4. Кнопка Editзнаходиться внизу на панелі Properties
У панелі Blurможна знову змінити параметри ефекту та зберегти нові налаштування (рис. 5).
Мал. 5. Панель Blurдозволяє змінити налаштування ефекту
Покадрова анімація
Розглянемо найпростіший приклад - листочок переміщається з однієї точки екрану до іншої з поворотом навколо своєї осі.
Мал. 6. Перший ключовий кадр анімації
Намалюємо кленовий листочок, наприклад такий, як показано на рис. 6, - відповідний кадр на панелі Timelineзабарвиться в сірий колір і всередині нього з'явиться точка, що вказує на те, що це ключовий кадр. Ключовий кадр - це кадр, у якому відбувається приміщення або його зміна.
Мал. 7. Другий кадр створимо перетягуванням та трансформацією першого
Потім клацніть правою кнопкою миші по сусідньому кадру і вставимо ще один ключовий кадр, використовуючи команду Insert Keyframe. В результаті цього кадру з'явиться копія листочка; перемістимо її вниз (користуючись інструментом Arrow) і повернемо, використовуючи команду Modify => Transform => Free Transform(Мал. 7).
Повторимо процедуру таким чином, щоб у 6-му кадрі лист займав кінцеве положення (рис. 8).
Мал. 8. Останній кадр анімації
Зверніть увагу на панель Properties(рис. 8) – у лівій її частині вказується тип об'єкта. У кожному кадрі листок є об'єктом типу Shape(Форма), про інші типи об'єктів буде розказано трохи пізніше.
Для того, щоб експортувати фільм у вигляді SEF-файлу (рідний формат Macromedia для Flash-фільмів), виконаємо команду File => Export => Export Movie. В результаті отримаємо наступний фільм (leave1.fla). Переглянути фільм можна не залишаючи програми Flash за командою Control => Test Movie. Причому щоб переглянути, який обсяг займають окремі кадри фільму, слід виконати команду . В результаті ми побачимо, що кожен із шести кадрів займає близько 600 Кбайт (рис. 9). Таким чином, обсяг всього фільму складає 3686 байт.
Мал. 9. Перегляд фільму в режимі Bandwidth Profiler
Щоб оцінити, багато це чи мало, розглянемо, як аналогічний фільм можна зробити з допомогою автоматичної анімації, чи анімації трансформації руху.
Автоматична анімація
Мал. 10. Об'єкт автоматично перетворюється на графічний символ
Розглянемо, як можна зробити ту ж анімацію і отримати компактніший результуючий файл. Виділимо на екрані намальований листок інструментом Arrow та виконаємо команду Insert => Timeline => Create Motion Tween, в результаті листочок буде поміщений у рамочку, а в панелі Propertiesз'явиться повідомлення, що виділений об'єкт має властивості Grafic(Рис. 10). Це означає, що анімований об'єкт автоматично перетворено на графічний символ. Тепер його вже неможливо довільно редагувати інструментом Arrow як об'єкт типу Shape. Використання символів є важливим поняттям у Flash. Одного разу, створивши символ, його можна використовувати кілька разів у фільмі, не збільшуючи розмір результуючого файлу. Символи поділяються на графічні (graphic), символи-кнопки (button) та символи-мувікліпи (movie clip). У цьому уроці розглянемо графічний символ, а інших типів символів повернемося пізніше. Кожен новий символ стає частиною бібліотеки поточного документа (рис. 11).
Мал. 11. Кожен новий символ стає частиною бібліотеки
Якщо виконати команду Window => Library, то можна переконатися, що в бібліотеці з'явився символ і йому за промовчанням присвоєно ім'я Tween 1. Для того, щоб присвоїти символу інше ім'я, достатньо двічі натиснути на назву і замінити його на бажане. Після того як ми сформували графічний символ, перейдемо в кінцевий кадр нашої анімації (нехай це буде 15 кадр) і вставимо ключовий кадр (за командою Insert Keyframe). У цьому кадрі з'явиться копія символу, яку ми перемістимо та повернемо навколо осі (за командою Modify Transform => Free Transform), як у попередньому прикладі. Як видно із рис. 12 всі кадри між двома ключовими пофарбувалися в блакитний колір і від першого ключового кадру до останнього простяглася стрілка, що вказує на створення анімації Motion Tween.
Мал. 12. Стрілка на блакитному тлі свідчить про створення анімації Motion Tween
Виконавши команду Control => Test Movie, Отримаємо інформацію, представлену на рис. 13.
Мал. 13. Перегляд фільму у режимі Bandwidth Profiler
Незважаючи на те, що в цьому прикладі у нас 15, а не шість кадрів, як у попередньому, і анімація вийшла більш плавна, розмір результуючого файлу виявляється меншим - всього 900 байт. Як видно з діаграми (рис. 13), інформація про об'єкт зберігається тільки в першому кадрі, а в кожному новому кадрі необхідно запам'ятовувати лише нові положення листка. На це йде в середньому лише по 20 байт.
Для того, щоб проілюструвати падіння аркуша з поворотом навколо площини аркуша, повторимо попередній приклад, тільки при модифікації останнього ключового кадру додамо команду Modify => Transform => Flip Horizontal. В результаті отримаємо наступний фільм.
Тепер розглянемо приклад, коли листочок наближається до глядача. Для цього в кінцевому кадрі замість дзеркального відображення ( Flip Horizontal) будемо збільшувати розмір листка. Щоб не виникало відчуття уповільнення руху при наближенні об'єкта до глядача, швидкість його руху необхідно збільшувати. Щоб досягти цього ефекту, необхідно клацнути по першому кадру і звернутися до розділу Easeв панелі Properties. Позитивні значення параметра Ease призводять до уповільнення руху, а негативні до прискорення. Виберемо максимальне прискорення об'єкта.
Мал. 14. Виберемо максимальне прискорення об'єкта Ease = -100
Для цього виставимо значення параметра Easeрівним -100 (рис. 14). В результаті отримаємо фільм. Зазначимо, що перший кадр можна помістити і за сценою, тоді ми отримаємо фільм, у якому листок влітатиме у кадр і рухатиметься назустріч глядачеві. Можна моделювати обертання аркуша навколо зміщеного центру симетрії. Сподіваюся, читач сам зможе поекспериментувати, ускладнюючи модифікацію кінцевого кадру та змінюючи таким чином характер руху аркуша.
З наведених прикладів очевидно, що автоматична анімація руху ефективна, коли трансформація об'єкта при його русі задається простими функціями (поворот, масштабування тощо). Якщо необхідно анімувати складні руху (наприклад, рух руки героя мультфільму), то тут анімація трансформації руху не застосовна. Кожен кадр доводиться малювати вручну, тобто застосовувати покадрову анімацію, що складається з набору ключових кадрів. Таким чином, покадрова анімація - це найбільш універсальний, але водночас і найтрудомісткіший вид анімації, крім того, він створює найбільш "важкі" файли. Завжди, коли можна замінити автоматичну покадрову анімацію, - це переважно. Розглянемо ряд прикладів, що дозволяють використовувати автоматичну анімацію руху під час імітації польоту.
Рух заданою траєкторією
Flash дозволяє встановити рух об'єкта вздовж заданої траєкторії. Для того, щоб задати цю траєкторію, виконайте команду Insert => Timeline => Motion Guide.
В результаті над поточним шаром з'явиться спеціальний шар, який за умовчанням матиме ім'я Guide Layer 1.
Клацніть мишею по шару траєкторії та за допомогою інструмента «олівець» намалюємо лінію, вздовж якої планується переміщення листка (рис. 15).
Мал. 15. Приклад завдання траєкторії руху
Тепер перейдемо в перший кадр (клацніть по ньому мишею) і в панелі, що з'явилася. Propertiesвстановимо прапорець Snap(Встановлює режим прив'язки до траєкторії руху) - рис. 16.
Мал. 16. Параметр Snapзадає режим прив'язки до траєкторії руху
Після того як ви поставите прапорець Snap, центр листа поєднається з траєкторією руху. Користуючись інструментом Arrow, можна перемістити листочок вздовж кривої руху, але якщо ви спробуєте відірвати листок від траєкторії та розташувати його поряд з нею, він притягатиметься назад і знову прилипатиме до траєкторії руху (рис. 17).
Мал. 17. Об'єкт як би прилипає до траєкторії руху своїм центром
Перейдіть на останній кадр і аналогічно прив'яжіть листок до кінцевої точки траєкторії руху. Для надання фільму об'ємності додамо трансформацію Flip Horizontal, - В результаті отримаємо фільм .
При русі листа вздовж траєкторії нам не важливо, як він буде повернутий у напрямку руху. Але якщо ми аналогічно задаємо траєкторію польоту птиці, то на деяких ділянках кривої виявиться, що птах летить хвостом вперед.
Очевидно, якщо ми хочемо анімувати політ літака чи птаха, то нам потрібно, щоб вони весь час рухалися носом уперед. У Flash такий характер руху поставити дуже просто (рис. 18).
Мал. 18. Якщо поставити прапорець Orient to Path, птиця летітиме головою вперед
Необхідно поставити прапорець Orient to Path, і рух птиці зміниться на цілком звичне (вихідник до цього ролика - політ птиці. fla).
Мал. 19. Додавання одноколірного фону
Якщо ви хочете додати одноколірний фон, клацніть мишею по фону і в панелі, що з'явиться Properties(рис. 19) у полі Backgroundвиберіть потрібний колір фону.
Якщо ми хочемо додати фоновий малюнок, нам знадобиться окремий шар. В принципі, програма Flash пропонує можливість створення системи шарів, подібної до тих, що використовуються в класичній анімації, при якій фон і різні рухомі об'єкти малюються кожен на своєму шарі прозорої плівки.
Розташувавши фонове зображення і кожен об'єкт, що анімується на своєму шарі, домогтися контролю над ними набагато простіше. Отже, щоб додати фоновий малюнок, створимо йому новий шар. Для цього клацніть правою кнопкою миші шаром, який на рис. 19 позначений як layer 1, і у меню виберемо рядок Insert layer. У доданому шарі намалюємо сонце. Щоб не заплутатися в номерах шарів, дамо шару назву тло. Для цього необхідно натиснути на поточну назву і ввести необхідне ім'я (рис. 20).
Мал. 20. На новому шарі створимо нерухомий фоновий об'єкт
Як видно із рис. 20, птах знаходиться за сонцем, що суперечить здоровому глузду. Для того, щоб поміняти місцями шари, достатньо в режимі drag-and-drop перетягнути шар з ім'ям "фон" вниз.
Підредагуємо об'єкти фільму (для того, щоб птах кружляв на тлі сонця, змінимо траєкторію її польоту і змінимо співвідношення розмірів сонця та птаха) і отримаємо наступний ролик.
Мал. 21. Для анімації хмари створимо окремий шар
Тепер додамо до нашої анімації рухливі об'єкти, наприклад, хмара. Для хмари створимо новий шар і на ньому поставимо анімацію трансформації руху. Для того, щоб хмара влітала в сцену, розташуємо її, як показано на рис. 21. В результаті отримаємо наступний фільм (вихідник до цього фільму знаходиться в файлі, що додається)
У цьому уроці розглянемо, що таке анімація руху об'єкта заданою напрямною траєкторією (guide). Створимо умовний об'єкт і намалюємо йому шлях, яким він проходитиме.
Створення нового документа ActionScript 3.0
Як завжди, створюємо новий документ «Action Script 3.0». На правій панелі інструментів вибираємо "Rectangle Tool" та розміщуємо його на сцені.
Отриманий об'єкт переводимо на символ, виділивши його інструментом «Selection tool» та натиснувши праву кнопку миші.
Тепер на панелі timeline потрібно вибрати п'ятдесятий кадр і зробити його ключовим. Натискаємо праву кнопку миші та викликаємо контекстне меню, де вибираємо «Insert Keyframe».
Створимо напрямну, шлях, яким об'єкт рухатиметься. Для цього натискаємо на шар правою кнопкою мишці і в контекстному меню вибираємо «Add Classic Motion Guide».
Повинно вийти два такі шари:
Тепер потрібно на шарі «Guide» намалювати шлях, яким рухатиметься об'єкт. За допомогою інструмента «Pencil Tool», який знаходиться на правій панелі, малюємо напрямну.
Якщо намальований шлях вийшов трохи нерівним, його можна згладити за допомогою інструмента «Smooth Tool», який також як і олівець знаходиться на правій панелі. Спочатку використовуючи інструмент "Selection Tool" двічі клацніть по напрямній, а потім натисніть "Smooth Tool" .
Розміщуємо об'єкт для створення анімації руху
Тепер розмістимо наш об'єкт на намальованому шляху. Щоб це зробити, встаньте на перший кадр шару, візьміть об'єкт за допомогою Selection Tool і піднесіть його до лівого краю лінії, він як би прилипне до нього, вірніше приєднається опорна точка об'єкта до напрямної.
Теж потрібно зробити для п'ятдесятого кадру, візьміть об'єкт і розмістіть його на правому краю лінії.
Тепер потрібно створити проміжні кадри, щоб програма сама розмістила об'єкт там, де потрібно в кожному кадрі. Щоб це зробити, просто вибираємо будь-який середній кадр на шарі, де розташований об'єкт, і натискаємо праву кнопку миші, вибираємо «Create Classic Tween».
У результаті ми маємо отримати два такі шари:
Запускаємо анімацію руху об'єкту
Побачимо, що вийшло. Переходимо до головного верхнього меню «File -> Publish Preview -> Flash» або натискаємо ctrl+enter на клавіатурі. Щоб подивитися прямо в програмі, натисніть клавішу enter.
Давайте зробимо так, щоб об'єкт «повертав», коли пробігає по дорозі. Для цього виберіть перший кадр на шарі, де розташований об'єкт, і трохи поверніть його за допомогою інструмента «Free Transform Tool», який знаходиться на правій панелі.
Тепер у властивостях об'єкта, перебуваючи першому кадрі, виберіть «Orient to path» .
Виберіть п'ятдесятий кадр на шарі, де розташований об'єкт, і як у першому кадрі трохи поверніть його.
Щоб переглянути, що сталося, натисніть ctrl+enter.
Ефект руху у фотошопіможна виконати декількома способами. Я вирішила спробувати зробити анімацію руху, використовуючи фільтр пластику. Вийшов дуже цікавий ефект.
Отже, візьмемо фотографію із чарівними собачками та почнемо створювати анімацію.
1-файл відкрити.
Тепер потрібно зробити дві копії нижнього шару.
3-Шар - створити дублікат шару. І ще створити дублікат. У вікні шарів тепер три шари.
4-Активувати середній шар (клацнути по ньому у вікні шарів). А на верхньому відключити вічко, клацнувши по вічку.
5-фільтр-пластика. У вікні фільтра вибрати інструмент "скручування за годинниковою стрілкою", розмір кисті 200. (У Вас може бути інший розмір, пензель повинен бути такий, щоб до неї входила область трансформування).
Навести кисть на морду собаки і натиснути на ліву кнопку миші, якщо результат не влаштує, клацніть по смужці "відновити все" і повторіть спробу та ок. Потім перейти до наступного шару.
6-Активувати верхній шар і включити на ньому вічко (клікнути за місцем, де було вічко). На цьому шарі робитимемо рух для іншого собаки.
7-фільтр-пластика. Вибрати інструмент "деформація", розмір пензля 80.
Навести на носа другого собаки і, натиснувши на мишку, зрушити трохи вгору. Якщо результат сподобався, натисніть ok.
Напевно, Ви помітили, що разом із поворотом голови собаки зміщується і тло біля неї.
А фон має бути нерухомим. Частину нерухомого фону візьмемо із нижнього шару.
8-Активувати нижній шар.
9- На панелі інструментів вибрати "перо" і акуратно виділити частину фону біля голови собаки. (Виділити можна і інструментом ласо, якщо добре ним володієте).
Як тільки контур з'єднається, він набуде такого вигляду:
10-У вікні шарів клацнути за словом "контур". Потім правою кнопкою миші- по області "робочий контур" і вибрати "утворити виділену область", в поставити вікні радіус розтушовки -0, і натиснути "ok"
На зображенні з'явиться виділення, яке потрібно помістити на новий шар.
11-Шар-новий-скопіювати на новий шар.
12 У вікні шарів захопити мишкою цей шар і, не відпускаючи лівої кнопки миші, перемістити його на самий верх. Тепер фон буде нерухомий.
Перейдемо до анімації.
13-У вікні анімації поставити на першому кадрі час 0,2 сек і зробити 4 копії кадру, натискаючи на піктограму копіювання.
14-У вікні анімації клацнути по першому кадру. Перейти у вікно шарів.
15-У вікні шарів у нас чотири шари. Відключити вічко (клацнути по вічку) на другому шарі та на третьому.
16-У вікні анімації клікнути по другому кадру,
а у вікні шарів включити вічко на другому шарі.
При створенні мультиплікації руху можна визначити рух об'єкта за певною траєкторією - по прямій лінії, по ламаною кривою, що складається з відрізків прямої лінії, і гладкою кривою лінії.
Анімація руху по прямій
Приклад 1:
Див Приклад 2
Створимо рух літака прямою лінією.
У монтажному кадрі вставте зображення літака на лівій стороні сцени. Векторне зображення літака можна створити в Adobe Flash (див. Малювання ) або імпортувати зображення, створене на стороні (у форматі png з прозорим фоном).
Виділіть літак на сцені. У контекстному меню літака вибираємо Перетворити на символ(Convert to Sumbol). Вибираємо графічний тип символу.
У контекстному меню зображення вибираємо Створити анімацію руху(Create Motion Tween). Програма автоматично створює 24 кадри для плавної зміни.
Переміщуємо зображення на правий бік сцени.
Можна налаштувати тривалість анімації та інше – див. Робота з кадрами .
Анімація руху літака по прямій створена, її можна переглянути, натиснувши клавішу Enter .
З цього прикладу можна зробити такі висновки:
Довжина будь-якої нової ділянки зміни (tween span), яка автоматично створюється програмою, за умовчанням відповідає встановленій швидкості мультиплікації. Якщо швидкість мультиплікації вибрано 24 кадри в сек., то буде за замовчуванням створено ділянку зміни 24 кадри (1 сек мультиплікації). Якщо вибрано швидкість 30 кадрів на сек. - ділянка зміни за замовчуванням становитиме 30 кадрів.
Щоб програма змогла створити плавну зміну, вставлений на сцену об'єкт повинен бути перетворений на символ. При цьому об'єкт може бути будь-яким – створений в Adobe Flash векторний малюнок, текст, імпортоване растрове зображення тощо. Якщо Ви намагаєтеся створити плавну зміну на несимволі, програма попросить Вас перетворювати елемент на символ ().
Тільки один символ може бути застосована плавне зміна (tweened) за один раз. Якщо Ви спробуєте застосувати зміну до рівня кількох об'єктів, програма запросить Вас перетворити графічні символи на єдиний символ.
Плавну зміну можна застосувати для зміни розмірів/масштабування, зміни кольору та застосування фільтрів.
Примітка: плавна зміна ефектів фільтрів застосовується лише до символів кліпів та кнопок, не застосовується до символів графіки.
Примітки:
1. При створенні класичної анімації руху порядок дій інший – див. Створення класичної анімації руху .
2. Створення руху об'єктів під час покадрової мультиплікації - див. Покадрова мультиплікація
3. У прикладі літак рухався у межах сцени. Але початкове положення літака (або іншого об'єкта) може бути поза сценою, при цьому літак може вискакувати "з-за лаштунків" (праворуч, ліворуч, зверху. знизу). Так само він може зникати зі сцени "за лаштунками". У принципі, і початкове і кінцеве становище об'єкта то, можливо поза сцени, тобто. об'єкт вискакує "через лаштунки", показує на сцені свої трюки і знову зникає "за лаштунками".
Анімації руху по кривій
Є кілька способів створити рух об'єкта по кривій:
5. Виділяємо створений шлях та копіюємо його в буфер обміну. Після цього шлях можна видалити.
6. Повертаємось у шар літака. Виділяємо літак на сцені, у контекстному меню вибираємо " Створити анімацію руху(Create Motion Tween).
7. Виділяємо літак на сцені, в меню Правка (Edit) вибираємо "Вставити" або "Вставити за місцем" (Paste in Place).
До зображення літака додається зображення руху.
8. Для перегляду ставимо червоний движок на 1-й кадр, клацаємо по клавіші Enter.
Редагування шляху руху
Можна перетворити шлях руху так само, як і іншого графічного об'єкта.
Виберіть інструмент вільного перетворення(Free Transform) на панелі інструментів та клацніть по шляху руху.
Маркери перетворення виникають навколо шляху руху.
Можна змінювати масштаб або повернути шлях руху. Можна створити кривизну шляху, використовуючи інструменти вибору та інструмент Перетворити вузлову точку(Convert Anchor Point) – цей інструмент прихований під інструментом Перо (Pen).
Натискають на відправну точку та переміщують маркер початку виділення, який керує викривленням шляху.
3 Щоб коригувати шлях, виберіть панель інструментів (Subselection).
4 Натисніть та перетягніть маркер, щоб редагувати криву шляху.
Примітка: шляхом руху можна безпосередньо управляти з інструментом виділення ().
Виберіть інструмент виділення () та перемістіть його близько до руху. Піктограма кривої з'являється поруч із курсором, що вказує, що ви можете редагувати шлях. Клацніть та перетягніть шлях, щоб змінити викривлення.
Можна виділити об'єкт, клацнути правою кнопкою миші, в меню вибрати Створити анімацію руху. Після цього пересувати двигун за Тимчасовою шкалою та синхронно пересувати об'єкт по створеній кривій.
Примітка:
Якщо Ви своєю тремтячою рукою намалювали занадто кострубатий шлях і одночасно для руху цим шляхом відвели занадто мало кадрів, то програма не зможе виконати завдання і повторити всі вигини шляху.
У цьому випадку з'явиться оголошення:
"Курба повинна бути simplified to fit the number of frames available in the current motion tween. Please choose one of the following methods"
Або: "Крива повинна бути спрощена, щоб відповідати числу кадрів, доступних у поточній анімації руху. Будь ласка, виберіть один з наступних методів..." і пропонується два варіанти, перший з яких - спростити шлях.
Додатково:
Створення власного анімаційного шляху
Реверс напряму руху
Щоб об'єкт рухався від кінцевої точки до початкової, у контекстному меню об'єкта виберіть Траєкторія руху ( Motion Path ) - Зворотна траєкторія(Reverse Path).
Орієнтація об'єкта під час руху
Іноді важлива орієнтація об'єкта, що рухається вздовж колії.
У нашому прикладі літак повинен рухатися не тільки своєю траєкторією, але й одночасно повертатися, щоб його ніс був у напрямку руху.
1 Натисніть на шарі плавної зміни руху (motion tween) на Тимчасовій шкалі (Графіка часу). У нашому прикладі це шар "літак".
2. Виділіть шлях руху, використовуючи інструмент виділення ()
3. Правильно встановіть об'єкт щодо шляху руху в 1-му та останньому кадрах анімації.
4 В Інспекторі властивостейВиберіть Орієнтацію з траєкторії(Orient to path) в опції шляху.
Редактор вставляє крайні кадри для обертання вздовж плавної зміни руху так, щоб ніс літака орієнтувався шляхом руху.
Програма автоматично додає ключові кадри, розгортаючи літак траєкторією.
Тимчасова шкала виглядатиме так:
Позначте: Щоб функція орієнтації працювала правильно, літак у початковій позиції має бути встановлений правильно, тобто. його ніс має бути спрямований уздовж шляху руху.
Для цього використовуйте інструмент вільного перетворенняповертайте літак, щоб встановити його правильно.
Переконайтеся, що старт і закінчення руху об'єкта зафіксовані безпосередньо на створеному шляху.
Переконайтеся, що ваш шлях руху не є об'єктом малюнок, групою або символом. Шлях руху створюється лише у режимі малювання "Merged Drawing".
Уникайте використання при створенні шляху незвичайних штрихових стилів, таких як рисочки, точки тощо. Це призводить до непередбачуваної поведінки об'єкта при русі таким шляхом.
Завантаження...
