Лабораторна робота №3

Тема роботи: Створення анімації з автоматичною побудовою проміжних зображень.

Мета роботи: Навчитися створювати анімації з автоматичною побудовою проміжних зображень. Вивчити додаткові параметри анімації руху з використанням панелі Properties. Розглянути анімацію форми для створення ефекту руху об'єкта з однієї точки в іншу і для зміни характеристик об'єкта. Вивчити стандартні ефекти анімації форми.

Елементи теорії

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

Існують два типи анімації з автоматичним побудовою проміжних кадрів: motion tweening (анімація руху) і shape tweening (анімація форми).

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

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

Порядок виконання роботи

1. Відкрийте програму Adobe Flash Professional cs5. У стартовому меню вибираємо ActionScript 3.0, або натискаємо File →New→ ActionScript 3.0.

2. Встановлюємо розмір робочої області 500×300 пікселів і встановлюємо білий фон.

Завдання 1: Перемістіть зірку уздовж області дії, використовуючи анімацію руху.

1.1. На монтажному столі намалюйте зображення у вигляді зірки.

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

1.3. Перетворимо об'єкт - зірка в групу. Виділіть об'єкт клацанням на ньому.

1.4. Увійдіть в меню «Modify» («Модифікація») і виберіть пункт «Group» «Згрупувати»). Об'єкт був перетворений в групу. Або перетворіть зірку в символ вибравши в меню «Modify» пункт «Convert to symbol…»

1.5. Тепер натисніть правою кнопкою миші на двадцятому кадрі. У меню виберіть команду «Insert Keyframe» («Вставити ключовий кадр »).

1.6. У цьому новому ключовому кадрі перетягнемо зірку на інше місце монтажного столу.

1.7. Клацніть лівою кнопкою миші на будь-якому ключовому кадрі від першого до двадцятого. Натисніть ПКМ і виберіть «Create Classic Tween». Зверніть увагу, на панелі «Timeline», на кадрах з'явилася стрілка. Якщо на кадрах з'являється не стрілка, а переривчаста лінія, значить, щось в анімації не вірно, наприклад, об'єкт не був згрупований чи перетворений на символ, або в кінцевому ключовому кадрі анімації об'єкт відсутній або відрізняється від того, який знаходиться в початковому ключовому кадрі.

1.8. Подивимося, як буде виглядати створена нами анімація руху натиснувши Ctrl+Enter.

1.9. Збережіть вашу роботу у своїй папці під ім'ям «ЛР3.1».

Завдання 2: Встановіть уповільнення (прискорення) руху зірки, а також обертання зірки, використовуючи анімацію руху.

2.1. Виконайте п.1-п.9 попереднього завдання

2.2. На шкалі «Timeline» виділіть перший кадр, що містить анімацію.

2.3. На панелі «Properties» («Властивості») знаходяться всі основні властивості, які можна налаштовувати у анімації руху. З допомогою випадаючого списку «Ease» («Уповільнення»), змінюючи значення, ми можемо добитися прискорення або уповільнення руху об'єкта. Допустимі значення Ease вибираються з діапазону від - 100 до 100. При значенні «Ease» більше 0 рух об'єкта буде сповільнюватися. Встановіть значення рівне 100, перегляньте результат.

2.4. При значенні «Ease» нижче 0, рух об'єкта буде прискорюватися. Встановіть значення рівне -100, перегляньте результат.

2.5. Також на панелі «Properties» ми можемо надати нашому об'єкту обертання. Відкрийте меню «Rotate» («Обертання») і виберіть один з напрямків обертання, наприклад «CW» («За годинниковою стрілкою »). Поряд у полі «Times» («Кількість раз») вибирається кількість поворотів об'єкта, тобто, скільки разів об'єкт повинен здійснити повний поворот до закінчення анімації. При значенні «1» об'єкт здійснить один повний поворот.

2.6. Плавність і швидкість анімації залежать і від такого показника, як «Frame Rate» («Частота кадрів»). Відкрийте вікно «Document Properties» («Властивості документа»). В полі «Frame Rate» змініть значення на 5.

2.7. Натисніть «ОК».

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

2.9. Встановіть частоту кадрів 12 fps. Тепер в останньому кадрі за допомогою інструменту Free Transform змініть розмір зірки. При перегляді зірка буде не тільки рухатися, але й поступово зміниться в розмірах.

2.10. Збережіть вашу роботу у своїй папці під ім'ям «ЛР3.2».

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

3.1. На монтажному столі намалюйте зображення у вигляді червоної зірки.

3.2. Створимо новий порожній ключовий кадр. Правою кнопкою миші на двадцятому кадрі тимчасової шкали, у випавшому меню виберіть команду «Insert Blank Keyframe» («Вставити порожній ключовий кадр »).

3.3. Намалюємо в новому ключовому кадрі фігуру, що відрізняється від зірки за формою і кольором, наприклад, жовтий овал.

3.4. Виділіть перший ключовий кадр.

3.5. Натисніть ПКМ і виберіть «Create Shape Tween» (Створити анімацію форми). На панелі «Timeline», на наших кадрах з'явилася стрілка, значить, анімація складена правильно. Зелений колір кадрів означає, що використовується анімація форми.

3.6. Відтворіть ролик, видно, як зірка переходить в овал. Зверніть увагу: оскільки колір овалу відрізнявся від кольору зірки, то перехід зачіпає і зміна кольору.

3.7. На панелі «Properties» можна змінити значення «Ease» («Уповільнення»), тобто, використовувати уповільнення або прискорення зміни форми. При значенні «Ease» більше 0 рух об'єкта буде сповільнюватися, при значенні «Ease» нижче 0, рух об'єкта буде прискорюватися. Встановіть значення рівне 100.

3.8. У меню «Blend» («Змішування») можна вибрати метод зміни форми: «Distributive» («Розподільний») - проміжні форми згладжені, і «Angular» («Незграбний") - проміжні форми загострені. Виберіть «Distributive» метод зміни форми.

3.9. Перегляньте ролик.

3.10. Встановіть значення «Ease» рівне -100 і метод зміни форми «Angular».

3.11. Перегляньте ролик.

3.12. Збережіть вашу роботу у своїй папці під ім'ям «ЛР3.3».

Завдання 4. Повторюючи за рисунками створіть анімацію в якій на дереві спочатку зʼявлятимуться яблука, а потім крона дерева жовтітиме.

КОНТРОЛЬНІ ЗАПИТАННЯ

1. В яких випадках використовується анімація руху, а в яких анімація форми?

2. Які переваги і недоліки анімацій з автоматичною побудовою зображень?