У минулій статті ми розглянули надзвичайно цікаву тему автоматичної анімації (motion tween) у Flash. Сьогодні мені б хотілося продовжити цю тему і розповісти про ще один різновид автоматичної анімації, який дозволяє не лише рухати, змінювати колір та інші характеристики об’єкта, а фактично повністю модифікувати сам малюнок на сцені – автоматичну анімацію форми, або, як її ще називають «морфінг» (shape tween).
Чесно кажучи, особисто мені доводилося працювати з цією функцією набагато менше, ніж з функцією автоматичної анімації руху (motion tween) у Flash. Втім, перечитавши цілу гору літератури під час підготовки цієї публікації, я зрозумів, що shape tween може стати по-справжньому потужним інструментом у вмілих руках. Але про все по-порядку.
Векторна графіка і shape tween
Для того, щоб зрозуміти, яким чином працює автоматична анімація форми у флеші потрібно засвоїти кілька простих принципів роботи векторної графіки. По-перше, вона оперує не пікселями, а точками. Різниця в тому, що піксель – це квадратик, нехай навіть і зовсім маленький. Під точкою ж розуміється математична точка, яка не має ні ширини, ні довжини. Таким чином всі фігури, намальовані у векторному редакторі – це математично прораховані лінії між такими точками. Саме тому векторні малюнки можна збільшувати скільки завгодно без втрати якості (на відміну від растрових).
Навіщо все це потрібно знати? Тому, що функція shape tween працює саме з такими точками. І для того, щоб вдало її застосовувати, варто розуміти, як саме вона діє. На відміну від motion tween, яка оперує виключно символами, shape tween навпаки – може працювати тільки з елементарною векторною графікою (намальованими внутрішніми засобами флеш об’єктами, не перетвореними на символи).
Ця функція змінює форму об’єкта: не просто збільшує, зменшує чи повертає його, а здійснює саме «морфінг», за що й отримала свою назву. Вона, наприклад, здатна перетворити круг в квадрат (а по суті: будь-який об’єкт у будь-який інший). І здійснює вона це завдяки переміщенню точок об’єкта в першому кадрі таким чином, щоб вийшов об’єкт в останньому кадрі. При цьому вона намагається перемістити точки по найбільш оптимальній (короткій) траєкторії. А оскільки всі точки об’єкта для функції рівнозначні, анімація іноді виявляється не такою, як хотілося б.
Функція shape tween також може додати або видалити частину точок в процесі анімації, якщо об’єкти в першому та останньому кадрах мають різну їх кількість. З одного боку це зручно (адже процес повністю автоматизований), а з другої – функція стає менш передбачуваною: аніматорові важко вирахувати де вона додасть додаткові точки (чи прибере зайві) і як в кінцевому рахунку виглядатиме анімація.
В загальному функція автоматичної анімації форми (shape tween) працює тим краще, чим менше точок в об’єкті (найкраще, якщо їх 4-5) і чим менша різниця між першим та останнім кадрами.
Варто пам’ятати і про інші обмеження, пов’язані з shape tween:
- як і у випадку з motion tween об’єкт повинен знаходитися на окремому шарі (layer);
- об’єкт повинен бути зафарбований одним кольором чи градієнтом, але не може складатися із кількох різнокольорових елементів;
- об’єкт повинен бути намальований або «пензлем» (brush tool) або «олівцем» (pencil tool) (про принципову різницю між цими двома інструментами для векторної графіки читайте у наступних статтях), але не тим і іншим інструментом одночасно.
Створюємо кліп з використанням shape tween
Для того, щоб закріпити матеріал, спробуємо створити простий кліп з використанням функції shape tween:
- Спочатку створіть новий проект у флеші (детальніше про це написано в уроці про покадрову анімацію)
- Розмістіть будь-яку векторну фігуру (наприклад круг) у першому ключовому кадрі вашої шкали часу (timeline). Найлегше його намалювати скориставшись вбудованим інструментом Oval Tool
- Виділіть на шкалі часу віддалений кадр (наприклад, #25) і натисніть F6, тим самим створивши другий ключовий кадр. Проміжок між двома ключовими кадрами автоматично заповниться послідовністю проміжних кадрів (які повторюватимуть ваш перший ключовий кадр).
- У другому ключовому кадрі намалюйте будь-яку іншу векторну фігуру (наприклад, квадрат). Скористайтесь для цього інструментом Rectangle Tool.
- Клікніть правою клавішою миші по першому ключовому кадрі (або в будь-якому місці між двома ключовими кадрами) і виберіть пункт Create Shape Tween.
- Використайте пункт меню Control -> Test Movie (або комбінацію клавіш Ctrl+Enter) для попереднього перегляду фільму. Після цього можете зберегти файл або навіть опублікувати його для розміщення у вебі.
УВАГА: якщо ви помилитесь, і виберете пункт Create motion tween, то програма попередить вас, що не може здійснити це перетворення оскільки зображення не є символами і тут же запропонує перетворити їх на символи.
Якщо ж ви зробили все правильно і обрали автоматичну анімацію форми (shape tween), то між двома ключовими кадрами на шкалі часу з’явиться стрілка на зеленому тлі.
Результат проведених маніпуляцій ви можете спостерігати нижче:
Як бачите, функція shape tween чудово справляється із анімацією (морфінгом) простих об’єктів, які не дуже сильно відрізняються одне від одного. Давайте спробуємо ускладнити для неї задачу, змусивши трансформувати віддалені об’єкти. Для цього я використав дві цифри «1» і «2», намальовані від руки пензлем у флеші (наразі не варто перейматися якістю, головне – ілюстрація того, яким чином це працює).
Ось так виглядали мої дві цифри (оскільки йдеться про векторну графіку – вам не варто копіювати їх із блога, а краще намалювати самостійно у флеші):
А ось так спрацював алгоритм флеша для того, щоб перетворити один об’єкт в інший.
Як бачимо, результат залишає бажати кращого. Звісно, трансформація відбувається. Але протікає вона зовсім не так, як можна було б очікувати.
На щастя і тут Flash пропонує чудові інструменти, які здатні підвищити контроль над функцією shape tween і змусити протікати анімацію так, як слід. Але про них ми поговоримо у наступному уроці.
Сподіваюся, цей невеличкий посібник по роботі з функцією shape tween був для вас корисний. Залишайтеся на зв’язку!
Березень 2, 2009 о 15:15
Можна мабуть задати такі об’єкти, при яких алгоритм тупо загнеться 8)))