Залежно від часу, сюжету фільму і власних художніх здібностей ви можете вибрати один з двох способів «пожвавлення» персонажів вашого фільму:

• покадрову анімацію (Frame-by-frame, кадр за кадром), коли кожен наступний кадр ви створюєте власними руками (або імпортуєте із зовнішнього джерела);
• автоматичну анімацію (tweened-анімацію), коли ви вибудовуєте лише ключові кадри, а всі проміжні кадри Flashформує самостійно.

Необхідно відзначити, що обидва механізми можуть використовуватися спільно, причому не тільки в рамках одного фільму, але і стосовно одного об'єкта. Наприклад, складніші в сюжетному плані фрагменти можуть бути засновані на покадрової анімації, а фрагменти з «передбачуваним» розвитком сюжету отримані за допомогою автоматичної.

Таке об'єднання можливе завдяки використанню для кожного об'єкта єдиної осі часу, представленої у вікні редактора часовою діаграмою - Time Line. Поєднавши на одній часовій діаграмі «лінії життя» кількох об'єктів, можна отримати сцену, в якій беруть участь кілька «персонажів».

Особливість застосування автоматичної анімації у тому, що з її допомогою можна анімувати лише одне об'єкт цьому шарі. Для створення сцени, в якій передбачається наявність кількох анімованих об'єктів, потрібно розмістити кожен із них на окремому шарі (докладніше про використання шарів див. наступну главу – «Шари»).

Незалежно від того, який механізм використовується для створення окремих кадрів, суть анімації полягає в тому, щоб відобразити зміну об'єкта в часі.

Ви можете створити фільм, в якому протягом години один і той самий шар буде нерухомо лежати на столі. У цьому випадку всі кадри фільму будуть схожі один на одного більше, ніж однояйцеві близнюки, і глядач не зможе відрізнити ваш мультик від статичного зображення. З іншого боку, можна виготовити кілька чудових кадрів і відтворити їх в той самий момент часу. Результат буде незмінним - глядач не зможе побачити те, що відбувається на сцені. Таким чином, основний принцип анімації – кожному моменту часу – свій кадр.

Відповідно, процедура створення найпростішого анімованого фільму в Flashполягає в тому, щоб підготувати зображення об'єкта, що відображають його зміну, і розставити їх по осі.

В будь-який Flash-Фільм може бути доданий текст. Подібно до роботи у звичайних текстових редакторах, для тексту може бути встановлений розмір, шрифт, стиль, інтервал, колір та спосіб вирівнювання. Ви можете трансформувати шрифт подібно до інших об'єктів - повертати, масштабувати, нахиляти. При цьому зберігається можливість редагування символів.

На основі фрагмента тексту може бути створене гіперпосилання.

Flash-Фільм може містити динамічні текстові поля, а також поля, що редагуються користувачем. Редаговані поля у Flash-фільмі мають те саме призначення, що й текстові поля, які розміщуються у форму на Web-сторінці: з їх допомогою від користувача може бути отримана та чи інша інформація, що підлягає обробці на сервері або клієнтським сценарієм. І, нарешті, у Flash MX ви можете створювати багаторядкові текстові області, що прокручуються.

При необхідності текст може бути конвертований у графічний об'єкт, і тоді з його символами дозволяється працювати як із окремими графічними фігурами.

Покадрова анімація

Отже, для створення покадрової анімації потрібно попередньо підготувати (або принаймні продумати) кожен кадр фільму. При цьому необхідно враховувати таку обставину. Плавність переходу від одного кадру до іншого і, відповідно, плавність і природність рухів персонажів залежить від того, наскільки відрізняється наступний кадр від попереднього (а чи не від швидкості зміни кадрів, як іноді вважають). Іншими словами, що більше кадрів містить «мультик», то ближче рухи персонажів до природних. Тому створення покадрової анімації є дуже копіткою справою. Її доцільно застосовувати у тих випадках, якщо об'єкти видозмінюються або взаємодіють один з одним будь-яким складним чином.

Крім того, покадрова анімація використовується в Flashпід час опису поведінки інтерактивних елементів фільму, наприклад, кнопок. Кожному стану кнопки відповідає певний ключовий кадр на часовій діаграмі. Основна відмінність опису поведінки кнопки від «звичайної» анімації у тому, що стан кнопки залежить від часу, як від дій користувача. Докладніше питання включення до фільму елементів управління розглянуті у розділі «Створення інтерактивних фільмів».

Створення послідовності ключових кадрів

Основним інструментом при створенні покадрової анімаціїє панель часової діаграми. З її допомогою можна створювати, видаляти та переміщувати кадри анімації, змінювати режими перегляду окремих кадрів та всієї сцени, виконувати інші операції.

Елементи інтерфейсу тимчасової діаграми були розглянуті в розділі «Організація інтерфейсу користувача» третього розділу (див. рис. 3.7). Тепер настав час поговорити у тому, яку роль грає кожен із цих елементів під час створення «мультика».

Зауваження

У цьому розділі всю нашу увагу буде зосереджено лише з правої частини тимчасової діаграми, оскільки питанням застосування шарів присвячена окрема глава. Відповідно, у всіх прикладах використовується тільки один шар, параметри якого встановлені за замовчуванням і нами не змінюються.

Отже, згадавши про часову діаграму, можна сказати, що мультик, створений із застосуванням покадрової анімації, є послідовністю ключових кадрів, з кожним з яких пов'язане деяке зображення (картинка) на столі.

При відтворенні мультика ефект анімації досягається завдяки тому, що картинки на столі змінюють одне одного. Кожен покадровий мультик характеризується двома основними параметрами:

• кількістю ключових кадрів (Keyframe);
• частотою зміни кадрів (у Flashвона вимірюється як число кадрів, показаних за секунду - frame per second, fps).

У загальному випадку обидва ці параметри впливають на візуальний ефект, що створюється (на плавність або, навпаки, дискретність рухів, «перетворень» і т. д.). Але все ж таки провідна роль тут належить першому параметру, а також тому, наскільки наступний ключовий кадр відрізняється від попереднього.

На часовій діаграмі ключові кадри зображуються сірими прямокутниками із чорною точкою всередині. Під час відтворення фільму зчитуюча головка переміщається від одного кадру до іншого, позначаючи поточний кадр. Щоб побачити зображення, пов'язане з конкретним кадром, клацніть мишею на значку цього кадру на часовій діаграмі. На рис. 6.1 показані як приклад два ключові кадри (перший і останній) невеликого мультика «про годинник», в якому один кадр відрізняється від іншого положенням хвилинної стрілки. Усього мультик містить 6 кадрів, частота зміни кадрів дорівнює 2.

Мал. 6.1.Два кадри з мультика «про годинник»

Наприклад з годинником ми ще повернемося, а для опису процедури створення анімації покадрової скористаємося іншим прикладом. Припустимо, що «героєм» фільму буде куля, яка падає та розбивається на три частини. Вважатимемо, що для розкриття такого складного сюжету достатньо п'яти кадрів:

1. Куля у вихідному положенні.
2. Куля впала, але поки що ціла.
3. Від кулі відколовся перший шматочок.
4. Від кулі відколовся другий шматочок.
5. На столі лежить щось, що в попередньому житті було кулькою.

З урахуванням описаного сюжету, послідовність роботи має бути такою:

1. Створіть на столі чотири зображення, які відповідають зазначеним вище кадрам, як показано на рис. 6.2 (для першого і другого кадрів використовується той самий - цілий - кулька).

Мал. 6.2.Зображення, що відповідають кадрам майбутнього фільму

1. Створіть новий файл фільму з чистим столом, клацнувши на кнопці New (Створити) основної панелі інструментів Flash.
2. На часовій діаграмі в осередку першого кадру клацніть правою кнопкою миші та в контекстному меню виберіть команду Insert Keyframe (Вставити ключовий кадр).
3. З вікна, в якому створювалися зображення кулі, скопіюйте перше зображення і помістіть його десь у верхній частині столу; при цьому перший кадр на часовій діаграмі буде позначений як ключова (чорна крапка), рис. 6.3.

Мал. 6.3.Вигляд вікна Flash після створення першого кадру

1. Клацніть правою кнопкою миші в осередку другого кадру і в контекстному меню виберіть команду Insert Keyframe; при цьому кадр буде відразу позначений як ключовий, оскільки для нього успадковується зображення попереднього кадру; скористайтеся ним: перемістіть зображення кулі у нижню частину столу.
2. Клацніть правою кнопкою миші в осередку третього кадру і в контекстному меню знову виберіть команду Insert Keyframe; новий кадр також буде позначений як ключовий і для нього збережеться попереднє зображення; ви можете або відредагувати його або просто замінити потрібним.
3. Створіть четвертий та п'ятий кадри, вибираючи в контекстному меню команду Insert Keyframe та поміщаючи на стіл відповідне зображення.

Після виконання завершального кроку вікно Flashмає виглядати приблизно так, як показано на рис. 6.4.

Мал. 6.4.Вигляд вікна Flash після створення завершального кадру анімації

Власне, на цьому створення першого мультика закінчено. Не забудьте тільки зберегти його на диску: він нам ще знадобиться щодо інших видів анімації.

Після завершення роботи корисно перевірити, чи вийшло так, як ви хотіли.

Щоб відтворити фільм, достатньо просто натиснути клавішу (альтернативний варіант – вибрати в меню Control команду Play – «відтворити»). При цьому зчитуюча головка панелі часової діаграми автоматично переміщається від поточного до останнього ключового кадру. Ви можете примусово вибрати будь-який кадр для перегляду, клацнувши у відповідному осередку тимчасової діаграми лівою кнопкою миші.

У розглянутому нами прикладі зображення, що становлять зміст кадрів, було створено заздалегідь, на столі іншого фільму. Однак для більшості нескладних фільмів зручніше створювати зображення кадру безпосередньо на столі фільму. Для цього необхідно:

1. Створити на часовій діаграмі новий ключовий кадр.
2. Змінити властивості об'єктів, які розташовані на столі (форму, положення тощо).

Редагування анімації

В результаті тестування може виявитися, що створений "мультик" не повною мірою відповідає авторському задуму, і потрібно його підправити.

Як і при створенні «мультика», при його редагуванні найзручніше працювати з панеллю тимчасової діаграми, а точніше - контекстними менюцій панелі.

Нагадаємо, що контекстне меню пов'язане з певним об'єктом та містить команди, які можуть бути застосовані до даного об'єкта в поточній ситуації (в даному контексті).

До кожного виду кадрів тимчасової діаграми передбачено власне контекстне меню. Наприклад, існує контекстне меню ключового кадру, контекстне меню «звичайного» кадру (Frame), контекстне меню кадрів tweened-анімації. Якщо на початкових етапахосвоєння у вас виникатимуть труднощі у визначенні типу кадру, то ви можете скористатися підказкою. Вона з'являється на екрані при наведенні вказівника на значок кадру (рис. 6.5).

Правда, при цьому слід мати на увазі, що всі кадри, що не належать до tweened-анімації, позначаються в даному випадку як Static (Статичні), що показано на рис. 6.5 праворуч.

Мал. 6.5.Підказки із зазначенням типу кадру

Flash надає такі можливості для редагування анімованої послідовності:

• корекція вмісту будь-якого ключового кадру;
• додавання ключових кадрів; новий кадр завжди вставляється лише після завершального кадру послідовності; можна додавати ключові кадри двох типів:
  • із успадкованим зображенням – за допомогою команди Insert Keyframe;
  • порожній кадр (без утримання) – за допомогою команди Insert Blank Keyframe (Вставити порожній ключовий кадр);
• додавання простих (не ключових) кадрів; новий кадр може бути вставлений після будь-якого ключового кадру; у найпростішому випадку вставка простого кадру дозволяє "продовжити життя" попередньому ключовому кадру; наприклад, якщо в «мультику» з кулею додати кілька простих кадрів після другого ключового кадру, то куля, що впала, деякий час полежить, і тільки потім розвалиться; щоб додати простий кадр, слід клацнути правою кнопкою миші на тому ключовому кадрі, після якого ви хочете помістити новий кадр, і вибрати в контекстному меню команду Insert Frame (Вставити кадр); простий кадр відображається на часовій діаграмі світлим прямокутником;
• перетворення ключового кадру на простий; виконується за допомогою команди Clear Keyframe (Очистити ключовий кадр), що входить у контекстне меню; зміст «очищеного» ключового кадру та всіх простих кадрів до наступного ключового кадру замінюється зміст кадру, попереднього «очищеному» ключовому кадру;
• копіювання одного чи кількох кадрів; виконується за допомогою команд контекстного меню Copy Frames (Копіювати кадри) та Paste Frames (Вставити кадри); вставку можна виконувати після будь-якого ключового кадру;
• переміщення одного чи кількох кадрів; виконується за допомогою команд контекстного меню Cut Frames (Вирізати кадри) та Paste Frames; вставку можна виконувати після будь-якого ключового кадру;
• видалення одного або кількох кадрів; для видалення кадру слід клацнути на ньому правою кнопкою миші та вибрати в контекстному меню команду Remove Frames (Видалити кадри);
• зміна порядку прямування кадрів на зворотний (реверс); Для виконання цієї операції слід вибрати послідовність кадрів (вона повинна починатися та закінчуватися ключовим кадром) та у контекстному меню вибрати команду Reverse Frames (Розгорнути кадри). Спробуйте, наприклад, за допомогою цієї операції відновити розбиту кулю з розглянутого вище прикладу.

Властивості окремого кадру також можна змінити за допомогою панелі інспектора властивостей кадру. Для будь-якого «статичного» кадру (тобто кадру, що не є частиною tweened-анімації), ця панель містить один і той же набір елементів (рис. 6.6):

• текстове поле (Мітка кадру), призначене для введення імені (або мітки) кадру; механізм міток, введений в , дозволяє реалізувати навігацію між кадрами фільму, завдяки чому відвідувач сайту може повернутися на той чи інший кадр; власне механізм переходів реалізується як сценарію на ActionScript; технологія-створення сценарію на ActionScript розглянута в одинадцятому розділі;
• список Tween (Послужливий), що містить перелік можливих способів використання tweened-анімації; таких способів три:
  • None (Ніяк) – tweened-анімація не використовується;
  • Motion (Рух) - tweened-анімація руху;
  • Shape (Форма) – tweened-анімація трансформації об'єкта;
• список Sound (Звук), що дозволяє вибрати і зв'язати з кадром звуковий символ; якщо з жодним кадром фільму не пов'язаний звук, то список містить єдиний пункт - None (Ніякий); про використання у фільмі звукового супроводу розказано в одинадцятому розділі; всі інші елементи, пов'язані із встановленням параметрів звуку, стають доступними лише після призначення кадру звукового символу;
• кнопка без назви, але з довгим поясненням - Edit the action script for this object (Редагувати сценарій цього об'єкта), клацання на якій забезпечує виклик панелі редактора ActionScript.

Мал. 6.6.Інспектор властивостей «статичного» кадру

Керування режимами перегляду кадрів

У багатьох випадках буває зручно бачити на столі одночасно зміст усіх ключових кадрів анімації. Flashзабезпечує кілька варіантів такого поєднання. Вибір варіанта здійснюється за допомогою кнопок, розташованих біля нижнього краю панелі тимчасової діарамки (рис. 6.7):

• Onion Skin (Калька) - увімкнення режиму одночасного перегляду кількох кадрів; при цьому активний кадр (на якому встановлена ​​голівка, що зчитує) відображається повнокольоровим, а інші - більш бляклими (рис. 6.8 а); за замовчуванням одночасно відображаються три кадри: активний та два сусідніх; діапазон, що відображається, позначається на шкалі тимчасової діаграми спеціальними маркерами (див. рис. 8.7); маркери є інтерактивними – переміщуючи їх за допомогою миші, можна змінювати межі діапазону; у цьому режимі доступний для редагування лише активний кадр;

Мал. 6.7.Кнопки керування відображенням кадрів анімації

• Onion Skin Outlines (Контури на кальці) - включення режиму, при якому сусідні з активними кадрами представлені лише контурами (рис. 6.8 б); у цьому режимі також доступний для редагування лише активний кадр;
• Edit Multiple Frames (Редагування кількох кадрів) - увімкнення режиму, при якому всі видимі кадри доступні для редагування; всі кадри відображаються у повнокольоровому варіанті (рис. 6.8);
• Modify Onion Markers (Змінити параметри маркерів) – клацання на кнопці відкриває меню, за допомогою якого можуть бути змінені параметри граничних маркерів (рис. 6.9):
  • Always Show Markers (Завжди показувати маркери) - маркери постійно присутні на шкалі тимчасової діаграми, незалежно від того, чи кнопки управління переглядом включені;
  • Anchor Onion Marks (Прив'язати маркери) - граничні маркери блокуються у їхній поточній позиції; вибір цього варіанта запобігає переміщенню маркерів при зміні активного кадру;
  • Onion 2 (Видні 2) - на столі відображаються по два сусідні з активним кадром (праворуч і ліворуч);
  • Onion 5 (Видно 5) - на столі відображаються по п'ять кадрів праворуч і ліворуч від активного кадру;
  • Onion All (Видно все) - на столі відображаються всі кадри анімації.

Мал. 6.8.Ефект застосування різних режимів перегляду кадрів

Мал. 6.9.Меню з командами зміни параметрів граничних маркерів

Зауваження

Зверніть увагу, що коли ви клацаєте мишею на значку ключового кадру в панелі тимчасової діаграми (і тим самим вибираєте його), то на столі з'являється зображення, що відповідає обраному кадру. При цьому всі графічні об'єкти, що утворюють кадр, також відображаються як вибрані.

Автоматична анімація руху об'єкта

Flash може створювати два типи tweened-анімації:

• анімацію руху (motion tweening);
• анімацію трансформування об'єкта (shape tweening).

Створення tweened-анімації руху

Анімація руху може бути автоматично побудована для екземпляра символу, групи чи текстового поля.

При створенні анімації руху потрібно встановити для деякого кадру такі атрибути об'єкта, як позиція на столі, розмір, кут повороту або нахилу, а потім змінити значення цих атрибутів в іншому кадрі. Flashінтерполює значення змінюваних атрибутів для проміжних кадрів, створюючи ефект послідовного переміщення чи перетворення.

Ви можете створювати анімацію руху, використовуючи один із двох методів:

• за допомогою панелі інспектора властивостей кадру;
• за допомогою команди Create Motion Tween (Створити анімацію руху).

Для опису обох варіантів скористаємося найпростішим прикладом: припустимо, що потрібно «перекотити» кульку через стіл зліва направо.

Отже, для анімації руху кульки з допомогою інспектора властивостей кадру потрібно виконати такі действия.

1. Переконайтеся, що панель інспектора властивостей є на екрані (її формат на цьому кроці значення не має). Якщо її закрито, виберіть у меню Window основного вікна пункт Properties.
2. Увімкніть інструмент Oval і намалюйте кульку в лівій частині столу; Зверніть увагу, що перший кадр на часовій діаграмі при цьому став позначений як ключовий.
3. Увімкніть інструмент Arrow, виберіть кульку та згрупуйте (об'єднайте в одне ціле) контур та заливку кулі за допомогою команди Group, що входить до меню Modify основного вікна. Flash; в результаті куля виявиться укладений в блакитну рамку, що виділяє.
4. Клацніть правою кнопкою миші в комірці кадру на часовій діаграмі, який ви хочете зробити останнім кадром анімації (наприклад, 10-й), і в контекстному меню виберіть команду Insert Keyframe (Вставити ключовий кадр); в результаті проміжок між першим і останнім ключовими кадрами буде заповнений одноколірними (світло-сірими) осередками простих кадрів, як показано на рис. 6.10.
5. Перетягніть кулю на нову позицію у правій частині столу.
6. Клацніть лівою кнопкою миші в комірці першого ключового кадру; це призведе до одночасного виконання двох дій: зображення кульки переміститься на вихідну позицію та зміниться формат панелі інспектора властивостей: на ній будуть представлені параметри обраного (першого) кадру.
7. У панелі інспектора властивостей виберіть у розкривному списку Tween пункт Motion; при цьому формат панелі зміниться і на ній з'являться елементи інтерфейсу, що дозволяють встановити параметри анімації; поки вони нас не цікавлять, значно важливіші зміни, що відбулися на часовій діаграмі: перший та останній ключові кадри тепер з'єднані стрілкою на бузковому фоні (рис. 6.11). Це свідчить, що створення анімації успішно завершено.

Мал. 6.10.Вигляд панелі тимчасової діаграми після виконання 4-го кроку

Мал. 6.11.Вигляд панелі тимчасової діаграми після створення анімації

Якщо на панелі тимчасової діаграми замість стрілки з'явилася пунктирна лінія, ви в чомусь помилилися. Погляньте на панель інспектора властивостей кадру: якщо там з'явилася кнопка із попереджувальним знаком (рис. 6.12), то Flash намагається повідомити вас про це. Клацніть на цій кнопці, щоб відкрити вікно з поясненнями щодо ситуації.

Мал. 6.12. Видпанелі інспектора властивостей кадру за наявності помилки

Можливі дві основні причини невдачі: або ви намагаєтеся анімувати не згруповані об'єкти (у прикладі - контур і заливку), або даний шар містить більше одного згрупованого об'єкта або символу.

У багатьох випадках виявляється достатньо видалити зайвий об'єкт, щоб Flashвиконав анімацію. Якщо цього не сталося, після виправлення помилки повторіть процедуру створення tweened-анімації ще раз.

Для відтворення мультика використовуються ті ж засоби, що і для покадрової анімації - можна просто натиснути клавішу (Попередньо краще зняти виділення з кульки, хоча це не обов'язково).

Для анімації руху кульки за допомогою команди Create Motion Tween потрібно виконати такі дії (вважаємо, що кулька в першому кадрі вже є).

1. Клацніть правою кнопкою в комірці першого кадру та в контекстному меню виберіть команду Create Motion Tween (Створити анімацію руху); при цьому зображення кулі буде автоматично перетворено на графічний символ з ім'ям tweenl (візуальною ознакою перетворення служить поява точки прив'язки в центрі кулі та рамки, що виділяє).
2. Клацніть правою кнопкою в комірці кадру, який ви хочете зробити останнім в анімаційній послідовності (наприклад, 10-й) і в контекстному меню виберіть команду Insert Frame (Вставити кадр); в результаті між першим та останнім кадрами з'явиться пунктирна лінія, як показано на рис. 6.14.
3. Перемістіть кулю на нову позицію (у праву частину столу); при цьому останній кадр анімації буде автоматично перетворений на ключовий (у комірці з'явиться чорна точка), а пунктирна лінія буде замінена лінією зі стрілкою (рис. 6.15).

Мал. 6.14.Вигляд панелі тимчасової діаграми після виконання команд Insert Frame

Мал. 6.15.Вигляд вікна Flash після завершення створення анімації

Створення анімації на цьому завершено. Якщо ви поглянете на панель інспектора властивостей кадру, то побачите, що у списку Tween обрано варіант Motion.

Зауваження

Зверніть увагу, що в результаті створення tweened-анімації руху за допомогою команди Create Motion Tween усі кадри на часовій діаграмі позначені як tweened-анімовані, у той час як при використанні інспектора властивостей останній кадр залишився просто ключовим (див. рис. 6.11). . Наявність такого ключового кадру забезпечує більшу гнучкість при подальшому редагуванні фільму.

Зміна параметрів tweened-анімації руху

Після того, як збудуєте за допомогою Flash tweened-анімацію, ви можете скоригувати ті чи інші її параметри. Редагування параметрів анімації найзручніше виконувати за допомогою панелі інспектора властивостей кадру. У цьому слід пам'ятати таке обставина. Незважаючи на те, що на часовій діаграмі всі кадри tweened-анімації виглядають як одне ціле, ви можете вибрати будь-який з них окремо, клацнувши мишею у відповідній позиції часової діаграми. В результаті на столі з'явиться зображення, що відноситься до цього кадру, а на панелі інспектора властивостей параметри цього кадру.

Перш ніж перейти до опису можливих способів редагування «мультика», необхідно зробити одне важливе зауваження. Усі стандартні операції трансформації об'єкта, які виконуються за допомогою інструментів панелі Tools (наприклад, нахил, зміна розміру, перетворення кола в овал тощо) при створенні автоматичної анімації не розглядаються у Flash

Отже, для кадру, що входить у tweened-анімацію руху, на панелі інспектора властивостей можуть бути такі параметри (рис. 6.16):

• можливість масштабування (зменшення чи збільшення) об'єкта; щоб дозволити цей варіант автоматичної анімації, слід встановити прапорець Scale (масштаб);

Мал. 6.16.Формат панелі інспектора властивостей для кадру tweened-анімації руху

• швидкість змін; за замовчуванням зміни протікають із постійною швидкістю, однак ви можете керувати нею, змінюючи значення параметра Easing (Уповільнення): негативні значення цього параметра (від -1 до -100) означають, що зміни поступово прискорюватимуться, а позитивні значення (від 1 до 100), навпаки, означають поступове уповільнення змін;
• можливість анімації обертання об'єкта; вибір, напрями і тривалості обертання виконується за допомогою списку Rotate (Обертати), що розкривається, і розташованого поряд з ним текстового поля times (тривалість); у списку Rotate є такі варіанти:
  • None (Без обертання) – анімація обертання не використовується (варіант встановлений за замовчуванням);
  • Auto (Автоматичне обертання) - об'єкт обертається у напрямку, що вимагає найменшої кількості руху;
  • CW (Clockwise - за годинниковою стрілкою) - об'єкт обертається за годинниковою стрілкою; число оборотів задається у полі times;
  • CCW (Counterclockwise – проти годинникової стрілки) – об'єкт обертається проти годинникової стрілки; число оборотів задається у полі times;
• можливість завдання нелінійної (довільної) траєкторії руху об'єкта; забезпечується встановленням прапорця Orient to Path (Вказати маршрут); додаткові параметри траєкторії коригуються за допомогою прапорців Sync (Synchronization – синхронізація) та Snap (Прив'язка); докладніше процедуру опису маршруту руху об'єкта буде розглянуто в наступному розділі.

Розглянемо докладніше процедуру анімації зміни розмірів об'єктів. Для цього повернемося, наприклад, з кулею. Припустимо, що, досягнувши правого краю столу, він має зменшуватись. Розв'язання задачі полягає у виконанні наступних дій:

1. Клацніть правою кнопкою в осередку останнього (10-го) кадру попередньої ділянки анімації та в контекстному меню виберіть команду Create Motion Tween.
2. Клацніть правою кнопкою у комірці кадру, який ви хочете зробити останнім у новій анімаційній послідовності (наприклад, 20-й), і в контекстному меню виберіть команду Insert Keyrame; в результаті між 10-м і 20-м кадрами з'явиться лінія зі стрілкою (як показано на рис. 6.17), а щар залишиться укладений у рамку, що виділяє.
3. Увімкніть на панелі Tools інструмент Free .Transform і зменшіть розмір кулі (можете заодно його і трохи сплющити;).

Всі. Процес завершено. Залишилось лише протестувати результат, натиснувши клавішу .

Мал. 6.17.Вид тимчасової діаграми після створення другого відрізка анімованої послідовності

Поєднання покадрової та автоматичної анімації

Покадрова та автоматична анімація можуть використовуватися в одному фільмі і навіть для одного й того самого об'єкта. Причому Flashабсолютно байдуже, в якому порядку вони чергуватимуть.

Пояснимо техніку суміщення покадрової та автоматичної анімації при описі поведінки одного об'єкта на прикладі тієї самої кульки. Сюжет фільму досить простий: кулька котиться через стіл, потім падає та розбивається. Перша частина цієї цікавої історії буде реалізована на основі tweened-анімації, друга --на основіпокадровий. Власне кажучи, обидва фрагменти вже були створені нами раніше, і тепер залишається тільки об'єднати їх в один фільм.

Отже, щоб отримати фільм, що поєднує обидва види анімації, необхідно:

1. Описати рух кульки через стіл за допомогою tweened-анімації (після виконання цієї процедури вікно тимчасової діаграми має виглядати так, як було показано на рис. 6.11).
2. Клацнути правою кнопкою в комірці кадру, наступного за останнім кадром tweened-анімації (для прикладу, що розглядається- в комірці 11-го кадру), і в контекстному меню вибрати команду Insert Keyrame; при цьому в списку Tween інспектора властивостей автоматично буде обрано пункт None (не використовувати анімацію tweened).
3. Перемістити зображення кульки до нижньої частини столу.
4. Створити решту ключових кадрів покадрової анімації, як було описано в розділі «Покадрова анімація»; після створення завершального кадру вікно редактора має виглядати приблизно так, як показано на рис. 6.18.

Мал. 6.18.Тимчасова діаграма фільму, що поєднує покадрову та tweened-анімацію

Зауваження

Якщо фільм формується на основі фільмів, створених раніше, можна просто скопіювати у новий фільм необхідні кадри за допомогою команд Соро та Paste. При цьому до нового фільму буде перенесено і зміст кадрів. Якщо в кадрах, що копіюються, використовуються символи, то вони будуть додані до бібліотеки нового фільму.

На завершення наведемо ще один невеликий приклад, що ілюструє особливості застосування tweened-анімації руху для текстових блоків. У цьому прикладі руху як такого немає - просто як заключний кадр анімації використовується дзеркальне відображення тексту, отримане за допомогою інструмента Free Transformation. А ось як виглядають проміжні кадри, створені Flash(Рис. 6.19).

Мал. 6.19.Приклад tweened-анімації руху для текстових блоків

Автоматична анімація трансформації об'єкта

Використовуючи анімацію трансформації, ви можете створювати ефект плавного перетікання об'єкта з однієї форми в іншу. Причому результуюча форма може мати абсолютно нічого спільного з вихідної. Наприклад, в електронній довідковій системі Flashнаведено приклад «перетворення» (рис. 6.20).

Мал. 6.20.Приклад трансформації об'єкта

Ще раз повторимо, що анімація стандартних операцій видозміни об'єкта, які виконуються за допомогою інструментів панелі Tools (нахил, зміна розміру тощо) не розглядаються у Flashяк операції трансформації і можуть бути додані як «супутні» зміни при створенні анімації руху об'єкта.

Порада

Як правило, найкращий візуальний ефект Flashзабезпечує у разі, якщо одночасно трансформується трохи більше одного об'єкта. Якщо ж вам потрібна одночасна трансформація кількох об'єктів, всі вони повинні розташовуватися в одному шарі.

Flash не може автоматично анімувати трансформацію символів, згрупованих об'єктів, текстових полів та растрових зображень. Щоб зробити об'єкти цих типів доступними для автоматичної трансформації, потрібно застосувати процедуру розбиття (Break Apart).

Створення tweened-анімації трансформації

Якщо ви вирішили включити у свій фільм tweened-анімацію трансформації, майте на увазі таку обставину. За замовчуванням Flashнамагається зробити перехід від однієї форми до іншої найкоротшим шляхом. Тому проміжні кадри можуть виявитися дуже несподіваними для вас. Як ілюстрацію до сказаного нижче наведено малюнок (рис. 6.21), на якому показаний проміжний кадр трансформації вже знайомих вам «годин». Тут за допомогою tweened-анімації хвилинна стрілка намагається «переповзти» з 12 на 6 «короткою дорогою».

На відміну від руху анімації, tweened-анімація трансформації може бути створена тільки одним способом - за допомогою панелі інспектора властивостей кадру.

Для пояснення технології створення такої анімації повернемося, наприклад, з «годинником»: припустимо, що потрібно перемістити хвилинну стрілку з «12» на «6».

Вирішуючи зазначену задачу потрібно виконати такі дії.

1. Переконайтеся, що панель інспектора властивостей є на екрані. Якщо її закрито, виберіть у меню Window основного вікна пункт Properties.

Мал. 6.21.Приклад проміжного кадру при tweened трансформації анімації

1. Увімкніть інструмент Oval і намалюйте з його допомогою всі елементи годинника, показані на рис. 6.21, ліворуч.
2. Увімкніть інструмент Arrow і виберіть зображення, яке потрібно трансформувати.
3. Клацніть правою кнопкою в комірці кадру, який ви хочете зробити останнім в анімації (наприклад, 10-й), і в контекстному меню виберіть команду Insert Keyframe; в результаті між першим та останнім кадрами на часовій діаграмі з'явиться послідовність простих кадрів сірого кольору, як показано на рис. 6.22, зверху.
4. Замініть на столі вихідне зображення тим, яке воно має бути трансформовано; у прикладі для цього достатньо за допомогою інструмента Free Transform повернути хвилинну стрілку і перемістити на нову позицію.
5. Клацніть правою кнопкою в комірці першого кадру анімації; це призведе до двох наслідків: на столі з'явиться вихідне зображення та зміниться формат панелі інспектора властивостей.
6. У списку Tween, що розкривається, виберіть варіант Shape (Форма); в результаті перший та останній кадри анімації на часовій діаграмі будуть з'єднані стрілкою на світло-зеленому фоні (рис. 6.22, внизу); це свідчить, що створення анімації успішно завершено.

Мал. 6.22.Вид тимчасової діаграми під час анімації трансформації об'єкта

Вибір пункту Shape у списку Tween призводить до зміни формату панелі інспектора властивостей. З її допомогою можуть бути встановлені такі додаткові параметри трансформації об'єкта (мал. 6.23):

• швидкість змін; за замовчуванням зміни протікають із постійною швидкістю, однак ви можете керувати нею, змінюючи значення параметра Ease (Уповільнення): негативні значення цього параметра (від -1 до -100) означають, що зміни поступово прискорюватимуться, а позитивні значення (від 1 до 100) ), навпаки, означають поступове уповільнення змін;
• спосіб трансформації; він визначається значенням, вибраним у списку Blend (Перехід):
  • Distributive (Розмазаний) - Flashстворює анімацію, у якій проміжні форми є більш згладженими;
  • Angular (Куглуватий) - Flashстворює анімацію, коли у проміжних формах зберігаються очевидні кути і прямі лінії.

Мал. 6.23.Параметри анімації трансформування об'єкта

Зауваження

Зверніть увагу, що для створення анімації трансформації об'єкта не потрібно (більше того - не можна)виконувати групування контуру та заливки, так само як і інших елементів зображення, що підлягають трансформуванню. Достатньо всі ці елементи просто вибрати за допомогою інструменту Arrow.

Застосування вузлових точок форми

Більш складними змінами форми використовуються так звані вузлові точки форми (shape hints), які визначають, як фрагменти первісної форми будуть перенесені в нову форму. Іншими словами, вузлові точки використовуються для ідентифікації тих точок вихідної форми, взаємне розташування яких потрібно зберегти. Найбільш характерний приклад використання вузлових точок - анімація міміки особи, за якої деякі її частини (очі, зокрема) не повинні брати участь у трансформації. На рис. 8.24 показані два варіанти трансформації - без розстановки та з розстановкою вузлових точок. У другому варіанті очі трансформації не піддаються.

Мал. 6.24.Приклад трансформації без розстановки та з розстановкою вузлових точок

Вузлові точки позначаються на зображенні невеликими кружками з літерами. Літери (від а до z) використовуються як імена (ідентифікатори) вузлових точок. Кожній вузловій точці на вихідному зображенні повинна відповідати точка з тим самим ім'ям на результуючому зображенні. Усього однієї фігури може бути використано трохи більше 26 вузлових точок (за кількістю літер алфавіту). Вузлові точки на вихідному зображенні пофарбовані в жовтий колір, на результуючому – зеленим.

Для розміщення вузлових точок потрібно виконати такі дії:

1. Клацніть лівою кнопкою миші у комірці кадру, що відповідає вихідному зображенню.
2. У меню Modify виберіть каскадне меню Shape, а у ньому - команду Add Shape Hint (Додати вузлову точку); в результаті на зображенні з'явиться "заготівля" першої вузлової точки -кружок червоного кольору з літерою а.
3. Перемістіть його на ту точку зображення, яку ви хочете позначити як вузлову.
4. Клацніть лівою кнопкою миші в комірці кадру, що відповідає результуючому зображенню; на столі буде присутній червоний кружок із тією ж літерою, що й у вихідному кадрі.
5. Перемістіть кружок у точку зображення, яка повинна відповідати зазначеній у вихідному кадрі; після переміщення гурток змінить колір на зелений.
6. Поверніться на перший кадр анімованої послідовності та переконайтеся, що колір вузлової точки змінився на жовтий.
7. Якщо потрібно продовжити розміщення вузлових точок, повторіть описану процедуру для кожної з них.

Зауваження

1. Розташування вузлових точок можливе лише після створення tweened-анімації трансформації.
2. Розташування вузлових точок слід виконувати за допомогою інструменту Arrow при увімкненому модифікаторі Snap to Objects.

Порада

Якщо ви використовуєте при трансформації кілька вузлових точок, то виконуйте їхню розстановку за годинниковою стрілкою, починаючи з лівого верхнього кута зображення. Це пов'язано з тим, що Flash обробляє вузлові точки в алфавітному порядку.

Після розміщення вузлових точок доцільно провести тестовий запуск фільму і при необхідності скоригувати розміщення точок. Щоб змінити положення вузлової точки, досить просто перетягнути її на нове місце (це можна зробити як на першому, так і на останньому послідовності кадру). Крім того, можна видалити зайві точки або додати нові. Після того, як результат задовольнить вас, ви можете сховати (приховати) вузлові точки. Перелічені операції найзручніше виконувати за допомогою контекстного меню. Щоб його відкрити, слід клацнути правою кнопкою миші на одній із вузлових точок. Меню містить чотири команди (рис. 6.25), з яких перші три доступні тільки для вузлових точок вихідного зображення:

• Add Hint (Додати вузлову точку) - під час виконання команди на столі з'являється заготівля нової вузлової точки;
• Remove Hint (Видалити вузлову точку) – вузлова точка, на якій ви клацнули правою кнопкою миші, відкриваючи меню, буде видалена;
• Remove All Hints (Видалити всі вузлові точки) – видалення всіх вузлових точок;
• Show Hints (Показати вузлові точки) - цей режим використовується за замовчуванням (поряд із ім'ям команди стоїть маркер); повторний її вибір призводить до того, що вузлові точки стануть невидимі; цей варіант слід використовувати тільки після досягнення необхідного результату, оскільки для повернення в режим показу вузлових точок вам доведеться вибрати команду Add Shape Hint у меню Modify. необхідної кількості.

Мал. 6.25.Контекстне меню вузлової точки

Здрастуйте, дорогі читачі. У своїй статті Я розповіла про застосування ліній швидкості, за допомогою яких можна створювати ілюзію руху об'єкта з прискоренням. Також у статті був показаний прийом із використанням стандартної анімації руху та градієнтної заливки під час появи об'єкта. Хто не пам'ятає чи не читав ці статті, раджу ознайомитись із ними. Сьогодні я хочу продовжити тему анімації руху у програмі Adobe Flash і показати не лінійний рух об'єктів, як це було раніше, а рух траєкторією.

Спершу продемонструю роботу цього прийому на простому прикладі.

Створіть новий документрозміром 600 на 200 пікселів. Назвіть його First_animate. Колір блакитний або будь-який інший фон. Хто не пам'ятає, спочатку потрібно створити новий документ Action Script 3.0. (Файл - Створити Ctrl + N).А потім на панелі властивостей (Ctrl + F3)встановити розмір робочого вікна і колір фону.

Перший шар перейменуйте на « Об'єкт«. Створіть на ньому овал ( O). Не знімаючи виділення з об'єкта. натисніть клавішу F8та призначте його символом. Назвіть object1.

Створіть другий шар над шаром « Об'єкт", назвіть його " Траєкторія«. На цьому шарі намалюйте олівцем траєкторію руху кулі.

Клацніть правою кнопкою миші по шару « Траєкторія» та виберіть « Напрямна«. Зліва з'явиться значок з молоточком. Тепер потягніть шар «Об'єкт»під шар « Траєкторія«Так ви зв'яжіть їх один з одним.

Тепер повернемось до робочої області. Помістіть наш об'єкт на початок траєкторії. Створіть ключові кадри для шару «Об'єкт»та шару «Траєкторія»на 30 кадрів. Покладіть кулю на кінець траєкторії. (В демонстраційному варіантівключений каркасний вид шару «Об'єкт»).

Тепер клацніть правою клавішею миші по першому кадру шару. Об'єкт» та виберіть « Створити класичну анімацію руху«. Після цього можна тестувати нашу анімацію ( ctrl + Enter).

Тепер, давайте подивимося, що можна зробити з цими знаннями. Наведу ще один простенький приклад. Припустимо. що нам потрібно намалювати повітряного змія. який летить небом.

Створимо новий документ розміром 600 на 200 px.Заллємо його градієнтом від синього до жовтого. Для цього створимо на самому початку шар, який назвемо « Фон«, намалюємо прямокутник на весь розмір робочої області (тобто 600 на 200 пікселів) і заллємо його градієнтом. Як працювати з градієнтом, я вже писала у статті.

Натисніть кнопку «Вставити — Створити символ (ctrl + F8)». Введіть ім'я kite.Намалюйте повітряний змій. Це зробити неважко, він схожий на ромб.

Щоби наш повітряний змій виглядав реалістично. Давайте поставимо його рух ще в самому символі kite. Це буде похитування вгору вниз змія та стрічки, що розвиваються. Похитування зробимо за рахунок стрічки, що розвиваються, за рахунок. Спочатку займемося стрічками. Їхня анімація буде схожа на контурну анімацію форми (стрічки до речі кажучи намальовані інструментом Пензликі підходять для цієї маніпуляції), про яку я писала у статті

Ми візьмемо як персонаж ось такого кота. Він стежитиме за появою миші в кадрі, і розмахуватиме хвостом.

Персонаж складається з наступних об'єктів, що знаходяться на різних шарах:

Анімація очей йому вже готова у окремому символі. Нині нас цікавить анімація хвоста. Так що ми сміливо можемо продовжити на них анімацію до потрібної кількості кадрів, наприклад, 20 ( використовуємо f5) і блокувати непотрібні нам шари, щоб вони не заважали.

Тепер хвіст. На першому кадрі ми маємо першу позицію хвоста, на 10 зробимо другу позицію. Я просто відобразила хвіст ліворуч – Модифікація – Перетворити – Відобразити зліва направо.

На шарі "Хвіст" на 5 кадрі створіть порожній ключовий кадр. Для цього клацніть по ньому лівою кнопкою миші і натисніть F6. Далі натисніть Delete, щоб видалити весь вміст. Тут у нас будуть розташовані лінії швидкості. Для зручності увімкніть під часовою шкалою функцію « Багатошарова структура» або як по-іншому її називають «цибулиння», налаштуйте її діапазон між двома станами нашого хвоста.

На п'ятому кадрі пензликом намалюйте лінії швидкості, при цьому майте на увазі, що реалістичнішими вони будуть у кольорі самого об'єкта, ну у нас він чорний, можна додати і трохи сірого для різноманітності. Зробіть лінії так, щоб вони не виходили за межі об'єкта.

Тепер нам треба надати більшої реалістичності. Для цього поставимо на початку невелику анімацію форми для хвоста. Зробіть 3 кадр ключовим, поміняйте форму хвоста кішки і трохи нахиліть праворуч. Потім клацніть правою клавішею миші по першому кадру і додайте анімацію форми.

Тепер зробимо те саме для другого стану хвоста. На 13 кадрі створіть ключовий кадр (F6). Перейдіть на 10 кадр, трохи змініть хвіст і нахиліть вліво. Потім для 10 кадру створіть анімацію форми.

Тепер трохи відредагуємо кадри. Видалимо зайві. Щоб зробити рух природнішим. І повторимо кадри у зворотному порядку.

Урок 4. Створення анімації

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. В результаті отримаємо наступний фільм (вихідник до цього фільму знаходиться в файлі, що додається)

При створенні мультиплікації руху можна визначити рух об'єкта за певною траєкторією - по прямій лінії, по ламаною кривою, що складається з відрізків прямої лінії, і гладкою кривою лінії.

Анімація руху по прямій

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

Анімації руху по кривій

Є кілька способів створити рух об'єкта по кривій:

Спосіб 2
Вставте на сцену червоний квадрат
Створіть анімацію руху квадрата (див. Створення анімації руху)
В результаті на сцені фігуруватиме наш квадрат та його шлях руху (у вигляді лінії з маркерами).

Ви можете скоригувати шлях руху, впливу не на сам шлях, а на об'єкт (так як показано на анімації нижче):



Використання цього методу просте: клацайте по вибраному кадру на Шкалі часу (у нас це 10, 20 і 30 кадри) і відповідно переміщуйте об'єкт по сцені (не торкаючись при цьому криву шляху) Програма автоматично створює ключові кадри у вибраних кадрах.

Створення власного шляху руху

1. Вставляємо на сцену рисунок літака.

2. Перетворимо малюнок літака на графічний символ
3. Створюємо новий шар під назвою "Шлях", на якому олівцем () малюємо траєкторію руху літака. Лінія колії не повинна бути замкненою.

4. При необхідності згладжуємо лінію колії, використовуючи інструмент "Smooth" () внизу Панелі інструментів .

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) в опції шляху.

Редактор вставляє крайні кадри для обертання вздовж плавної зміни руху так, щоб ніс літака орієнтувався шляхом руху.

Програма автоматично додає ключові кадри, розгортаючи літак траєкторією.

Тимчасова шкала виглядатиме так:

Позначте: Щоб функція орієнтації працювала правильно, літак у початковій позиції має бути встановлений правильно, тобто. його ніс має бути спрямований уздовж шляху руху.
Для цього використовуйте інструмент вільного перетворенняповертайте літак, щоб встановити його правильно.