Векторная анимация в Macromedia Flash

Призначення і структура програми Flash

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

Структура основного окна flash MX

Анімаційні ефекти

Flash MX 2004 включає попередньо підготовлені анімаційні ефекти (timeline-ефекти), які дозволяють створювати складні анімації, використовуючи мінімальну кількість дій. Ви можете застосовувати функціюTimeline Еffects до наступних об'єктах:

• текст;
• графічні об'єкти, включаючи форми, згруповані об'єкти і графічні символи;
• растрові зображення;
• кнопки.

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

Macromedia Flash MX 2004 надає кілька способів створення анімаційних послідовностей:

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

Як задати анімацію руху?

1. Намалювати об'єкт, задати кадри (Insert Frame)

2. Зробити кінцевий кадр ключовим (Insert keyframe)

3. Визначаємо стиль анімації (Create Motion Tween)

4. Перемістити на останньому кадрі об'єкт в кінцеве положення і запустити на перегляд (Enter)

Як задати траєкторію руху об'єкта?

1. Виконати анімацію руху (див. Вище).
2. Створити шар гід - лінії.

3. Намалювати на шарі гід-лінії траєкторію руху об'єкта.

4. На початковому і кінцевому кадрі анімації поєднати маркер центру об'єкта з початком і кінцем гід-лінії.

Як задати анімацію форми?

1. Намалювати об'єкт, задати кадри (Insert Frame)

2. На панелі Properties змінити вид анімації Tween на Shape

3. Поставити кінцевий ключовий кадр

4. На останньому кадрі змінити об'єкт і запустити на перегляд (Enter)

Панель інструментів редагування

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

Для зручності роботи панель інструментів розділена на чотири частини:

Tools (Інструменти), в якій зібрані кнопки вибору конкретного інструменту; ці інструменти поділяються на два види: інструменти вибору і інструменти малювання; докладніше робота з ними буде розглянута в двох наступних розділах книги; View (Вид), що містить засоби управління переглядом зображення, наявного на столі; в цьому полі розташовані дві кнопки: Hand Tool (Рука) - клацання на кнопці включає режим, при якому робочу область можна переміщати в будь-якому напрямку за допомогою миші, не користуючись смугами прокрутки; Zoom Tool (Масштаб) - клацання на кнопці включає режим швидкого збільшувати або зменшувати зображення в робочій області; при включенні цього режиму в поле Options з'являються дві додаткові кнопки, що дозволяють вибирати напрямок масштабування (збільшення або зменшення); Colors (Кольори), кнопки якої забезпечують роздільне вибір кольору контуру і заливки об'єктів; докладніше їх призначення розглянуто в розділі «Робота з кольором»; Options (Параметри), на якій представлені елементи установки додаткових параметрів обраного інструменту; для інструментів, що не мають додаткових параметрів, поле Options залишається порожнім.

Робоча область

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

• для виконання «чорнових» робіт;
• для реалізації ефекту поступового входу об'єкта в кадр (або навпаки, виходу з нього);

докладніше цей аспект використання робочої області буде розглянуто в розділі «Створення анімації».

Безпосередньо над робочою областю знаходиться відноситься до неї панель інструментів. На ній розташовані наступні елементи інтерфейсу:

Панель інструментів робочої області

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

Монтажний стіл

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

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

Монтажний стіл

Тимчасова діаграма

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

Тимчасова діаграма на монтажному столі

Розглянемо докладніше елементи тимчасової діаграми.

Почнемо зі шкали кадрів. Шкала є спільною для всіх верств сцени. На ній відображена нумерація кадрів в зростаючому порядку. Крок нумерації дорівнює 5 (він залишається незмінним при будь-якому форматі кадрів).

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

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

Формати зображення кадрів на тимчасовій діаграмі:

• Ключові кадри для tweened-анімації руху позначаються як чорні точки, з'єднані лінією зі стрілкою, на світло-синьому тлі (лінія зі стрілкою замінює всі проміжні кадри)
• Ключові кадри для tweened-анімації форми позначаються як чорні точки, з'єднані лінією зі стрілкою, на світло-зеленому тлі (лінія зі стрілкою замінює всі проміжні кадри)
• Пунктирна лінія вказує, що кінцевий (заключний) ключовий кадр відсутній
• Одиночний ключовий кадр у вигляді чорної точки, після якого йде послідовність світло-сірих кадрів, означає, що вміст ключового кадру не змінюється; заключний ключовий кадр в цьому випадку позначається порожнім прямокутником
• Маленька буква а вказує, що цього кадру за допомогою панелі Actions (Дії) було призначено деяку дію
• Червоний прапорець вказує, що кадр містить мітку або коментар
• Безперервна послідовність ключових кадрів, позначених чорними точками, означає покадровую анімацію
• Жовтий якірець говорить про те, що даний кадр містить іменовану мітку, яка використовується для навігації між кадрами фільму; якщо дозволяє місце на діаграмі, поруч з якорем виводиться ім'я мітки

Панель властивостей

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

Панель властивостей для документа в цілому

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