Анімація руху в adobe flash по направляючої (guide)

Анімація руху в Adobe Flash по направляючої (guide)

У попередніх уроках ми розглядали малювання кнопки і просту анімацію руху окружності. У цьому уроці розглянемо, що таке анімація руху об'єкта по заданій направляючої траєкторії (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.

Якщо хочете зберегти анімацію в файл, то в головному верхньому меню виберіть "File -> Export -> Export Movie ...».

Дивіться також:

Adobe Flash: Проста анімація

ActionScript 3: Створення анімації за допомогою класу Tween

AdobeFlash: Програмні ефекти анімації руху, масштабування, обертання об'єкта і інше за допомогою функції ActionScript3 sin ()