Анімація у Flash, Поняття - кадри, шари, символи, часова шкала - Розробка мультимедійного
Перш ніж будуть розглянуті всі способи створення анімації у Flash, потрібно розібрати деякі базові поняття. Цими поняттями є кадри (frames), символи (symbols), шари (layers) та тимчасова шкала (timeline).
1) Тимчасова шкала
Тимчасова шкала - головний інструмент при роботі з анімацією у Flash. На ній відображається інформація про шари, про те, які кадри є ключовими, а які генерує Flash. За допомогою шкали часу можна зрозуміти, які кадри містять дії або мітки. Вона дозволяє переміщати ключові кадри та цілі шматки анімації. Ви дуже швидко освоїтеся з цим інструментом завдяки добре продуманому і зручному інтерфейсу. Тимчасову шкалу дуже легко знайти, навіть якщо ви вперше працюєте у Flash:
Малюнок 2.1 - Тимчасова шкала
А. Точка відтворенняБ. Порожній ключовий кадр. Заголовок тимчасової шкалиГ. Піктограма напрямного шаруД. Спливаюче меню "Відображення кадрів"Е. Покадрова анімаціяЖ. Анімація рухуЗ. Кнопка "Прокрутити до точки відтворення"І. Кнопки "Калькування"К. Індикатор "Поточний кадр"Л. Індикатор "Частота кадрів"М. Індикатор "Витрачено часу
- Маркер – вказує на поточний кадр, що відображається у вікні. При натисканні на будь-який кадр, маркер автоматично переміщається на нього.
- Шари - зліва знаходиться перелік шарів. Під ним знаходяться кнопки, що дозволяють додавати та видаляти шари. Кожен шар можна зробити невидимим та заборонити його для редагування.
- Шкала кадрів - поле, де можна додавати та видаляти прості та ключові кадри. Якщо викликати контекстне меню (натиснути праву клавішу миші) на якомусь кадрі, ви побачите перелік дій, які можна зробити. На шкалівідображається інформація про кадри, які є ключовими (такі кадри позначаються чорними кружальцями), містять дії (літера "а" над кружечком) або мітку (червоний прапорець, після якого йде назва мітки). Колір також говорить про тип кадрів. Сірий колір - це кадри, які точно повторюють ключовий кадр (keyframe). Синя або зелена підсвічування говорить про те, що кадри згенеровані Flash (про відмінності я розповім нижче). І, нарешті, білий чи "порожній" смугастий простір говорять про те, що на цих кадрах нічого немає.
- Кнопки керування тінями - це кнопки, що дозволяють відображати сусідні кадри через кальку, щоб бачити різницю між попередніми і наступними кадрами. Можна задавати глибину такого відображення з обох боків від маркера.
У комп'ютерній графіці цей інструмент використовується дуже часто. Уявіть, що ви малюєте на прозорих листах, а потім накладаєте їх один на одного. Те, що знаходиться на верхніх шарах, закриває вміст нижніх шарів. Шари можна робити невидимими та/або недоступними, щоб полегшити редагування сцени загалом.
У Flash є кілька особливих типів верств: шари, що містять траєкторії руху і шари - маски.
Є досить велика кількість прийомів, в яких використовуються шари, але у Flash без них просто не можна обійтися з однієї важливої причини: одночасно для кожного об'єкта анімації потрібен окремий шар. Об'єктом анімації вважається фігура (shape) чи символ (symbol).
Анімація складається із послідовності кадрів. Кадр може бути складеним вручну, так і згенерованим Flash. Це стосується кадрів одного шару. Так як сцени Flash складаються зазвичай з декількох шарів, то підсумкові "багатошарові" кадри можуть містити як згенеровані, так і шари.створені самим користувачем.
У комп'ютерній анімації існує поняття – ключові кадри (keyframes). Їхня назва говорить сама за себе. Це кадри, які Flash не вправі змінювати у процесі створення анімації. Ви задаєте ці ключові кадри, а проміжні кадри між ними вибудовує Flash. Існує два типи проміжних кадрів - кадри, побудовані з урахуванням зміни геометрії (shape tweening) чи кадри, побудовані зміні символів (motion tweening). І, звісно ж, кадри може бути порожніми, тобто. нічого не утримувати.
Елементарні операції з кадрами:
Вставити порожній ключовий кадр - Insert-Blank keyframe, F7
Очистити ключовий кадр - Insert->Clear keyframe, Shift-F6
Вставити звичайний кадр - Insert->Frame, F5
Видалити кадр - Insert->Remove Frames, Shift-F5
Символи - одне з ключових понять у Flash. Символом може бути як найпростіша геометрія або їхнє об'єднання, так і ціла анімація (movie). Це дозволяє використовувати символи як потужний механізм створення абстракцій у Flash.
Наприклад, можна зробити символи – колесо, корпус, скло, антени. Потім усе це об'єднати у символ – автомобіль. А потім створити сцену, на якій цей автомобіль їхатиме. Інший приклад. Припустимо, вам потрібно намалювати падаючий сніг. Ви створюєте символ сніжинки, створюєте символ, що містить кілька сніжинок, що анімуються, далі створюєте символ у вигляді стовпчика падаючих сніжинок, потім розмножуєте цей стовпчик - і отримуєте падаючий анімований сніг на всю сцену.
Існує три види символів: анімація (movie clip), кнопка (button) та зображення (graphic):
- Зображення (graphic), є символом, що складається з єдиного кадру. Звідси випливає його статична назва. Якщо символсправді є статичний (не анімований) об'єкт, краще зробити його зображенням (graphic).
- кнопка (button). У Flash є спеціально пристосований під функції кнопки тип символу. У ньому є 4 кадри: Up, Over, Down, Hit, які містять такі стани кнопок:
Up – звичайний стан кнопки.
Over – коли курсор мишки знаходиться над кнопкою.
Down – коли курсор знаходиться над кнопкою та натиснута клавіша миші.
Hit - звичайний стан для кнопки, що містить посилання, яку користувач вже відвідував.
- анімація (movie clip). Це "повноцінний" тип символу. У ньому може бути будь-яка кількість кадрів. Символ цього типу можна сприймати як об'єкт Movie в ActionScript.
Символи можуть бути вкладені незалежно від типу. Це є найголовнішою їхньою гідністю. Наприклад, можна зробити кнопку, яка почне рухатися, коли над нею "пролітатиме" курсор миші, просто помістивши у кадр Over символ - анімацію.
Символи можна створювати як "з нуля" (Insert->New Symbol, Ctrl+F8), так і використовуючи поточне виділення, помістивши його відразу в символ (Insert->Convert to Symbol, F8). Другий прийом використовується набагато частіше, ніж перший, т.к. у разі відпадає необхідність його позиціонувати і змінювати під необхідний обсяг.
Малюнок 2.2 – Панель Library (Бібліотека)