Отже, анімація. У нашому випадку це слово означає послідовність зображень, які змінюються (кадрів), в результаті чого виникає ілюзія руху. У Macromedia Flash існує два принципово різних способу анімувати що-небудь. Перший - промальовувати кожен кадр самому, використовуючи Flash тільки як засіб, що дозволяє швидко перегортати ваші зображення, і другий - змусити Flash автоматично прораховувати проміжні кадри.
Для людей незнайомих з базовими прийомами комп'ютерної анімації (або просто - щоб було зрозуміліше) поясню на прикладі. Скажімо, у вас є зелений квадрат, який потрібно перемістити з лівої частини екрану в праву. І зробити це треба протягом 25 кадрів. У разі першого "покадрового" способу анімації вам доведеться намалювати все двадцять п'ять кадрів, і в кожному наступному кадрі трохи зрушувати ваш квадрат, щоб він виявився праворуч на 25-му кадрі. А якщо вам потрібно буде зробити так, щоб квадрат потихеньку зникав, рухаючись вправо? А якщо раптом знадобиться, щоб він зникав (збільшувався атрибут прозорості) експоненціально? Що, доведеться все це вважати вручну і привласнювати потрібне значення прозорості на кожному кадрі?
Зовсім ні. Для цього існує другий спосіб анімації - за допомогою проміжних відображень (tweening animation). В цьому випадку ви тільки задаєте ключові кадри (keyframes), а проміжні Flash прораховує автоматично. Вам знадобиться тільки поставити тільки 2 кадри: початковий і кінцевий. За замовчуванням Flash розрахує проміжні кадри за лінійним законом, але можна задати зростаючу або загасаючу експоненту. Це потрібно, щоб відобразити якісь процеси, що відбуваються в реальному світі. Наприклад, руху м'яча. Ми ще повернемося до цієї теми.
Кадри, шари, символи, тимчасова шкала
Ми досконально розберемо всі способи створення анімації, але спочатку визначимося з деякими базовими поняттями. Цими поняттями є кадри (frames), символи (symbols), шари (layers) і тимчасова шкала (timeline).
тимчасова шкала
Тимчасова шкала - основний інструмент при роботі з анімацією в Flash. На ній відображається інформація про шари, про те які кадри є ключовими, а які генерує Flash. За допомогою часової шкали можна зрозуміти, які кадри містять дії чи мітки. Вона дозволяє переміщати ключові кадри і цілі шматки анімації. Ви дуже швидко звикнете з цим інструментом, завдяки добре продуманому і зручному інтерфейсу. Тимчасову шкалу дуже легко знайти, навіть якщо ви вперше працюєте в Flash:
Мал. 1 - Тимчасова шкала
Детальний розгляд всіх елементів шкали займе дуже багато часу і місця, тому я тільки перерахую її основні можливості:
- Маркер - вказує на поточний кадр, який відображається у вікні. При кліці на будь-якої кадр, маркер автоматично переміщається на нього.
- Шари - ліворуч знаходиться перелік шарів. Під ним існують кнопки, що дозволяють додавати і видаляти шари. Кожен шар можна зробити невидимим і заборонити його для редагування.
- Шкала кадрів - поле, де ви можете додавати і видаляти прості і ключові кадри. Якщо викликати контекстне меню (натиснути на праву кнопку миші) на якому-небудь кадрі, ви побачите перелік дій, які можна зробити. На шкалі відображається інформація про кадри, які є ключовими (такі кадри позначаються чорними кружечками), містять дії (буква "а" над кружечком) або мітку (червоний прапорець, після якого йде назва мітки). Колір теж говорить про тип кадрів. Сірий колір - це кадри, які в точності повторюють ключовий кадр (keyframe). Синювата або зеленувата підсвічування говорить про те, що кадри згенеровані Flash (про відмінності я розповім нижче). І, нарешті, біле або "порожній" смугасте простір говорять про те, що на цих кадрах нічого немає.
- Кнопки управління тінями - це кнопки, що дозволяють відображати сусідні кадри як би через кальку, щоб бачити різницю між попередніми і наступними кадрами. Можна задавати глибину такого відображення по обидві сторони від маркера.
Я думаю, ви дуже швидко розберетеся з усіма функціями шкали часу, якщо трошки поексперіментіруете.
У комп'ютерній графіці цей інструмент використовується дуже часто. Уявіть, що ви малюєте на прозорих аркушах, а потім накладаєте їх один на одного. Те, що знаходиться на верхніх шарах, закриває вміст нижніх шарів. Шари можна робити невидимими і / або недоступними, щоб полегшити редагування сцени в цілому.
У Flash є пара особливих типів шарів: шари, що містять траєкторії руху і шари - маски. Про перші ми поговоримо нижче, обговорення же друге виходить за рамки даної статті.
Є досить велика кількість прийомів, в яких використовуються шари, але в Flash без них просто не можна обійтися по однієї важливої причини: в один момент часу для кожного об'єкта анімації потрібен окремий шар. Об'єктом анімації вважається фігура (shape) або символ (symbol).
Наша анімація складається з послідовності кадрів. Кадр може бути як складеним вручну, так і згенерував Flash. Це відноситься до кадрів одного шару. Так як сцени Flash складаються звичайно з декількох шарів, то підсумкові "багатошарові" кадри, можуть містити, як згенеровані, так і "саморобні" шари.
У комп'ютерній анімації існує поняття - ключові кадри (keyframes). Їх назва говорить сама за себе. Це кадри, які Flash не має права змінювати в процесі створення анімації. Ви задаєте ці ключові кадри, а проміжні кадри між ними вибудовує Flash. Існує два типи проміжних кадрів - кадри, побудовані на основі зміни геометрії (shape tweening) або кадри, побудовані на зміні символів (motion tweening). І, звичайно ж, кадри можуть бути порожніми, тобто нічого не містити.
Елементарні операції з кадрами:
Символи - одне з ключових понять у Flash. Символом може бути, як найпростіша геометрія або їх об'єднання, так і ціла анімація (movie). Це дозволяє використовувати символи, як потужний механізм створення абстракцій у Flash.
Наприклад, можна зробити символи - колесо, корпус, скла, антени. Потім все це об'єднати в символ - автомобіль. А потім створити сцену, на якій цей автомобіль буде їхати. Інший приклад. Припустимо, вам потрібно намалювати падаючий сніг. Ви створюєте символ сніжинки, створюєте символ, який містить кілька анімуйте сніжинок, далі створюєте символ в вигляді стовпчика падаючих сніжинок, потім розмножується цей стовпчик - і отримуєте падаючий анімуйте сніг на всю сцену.
Існує три види символів: анімація (movie clip), кнопка (button) і зображення (graphic):
- Зображення (graphic), являє собою символ, що складається з єдиного кадру. Звідси випливає його статичне назву. Якщо символ дійсно являє собою статичний (НЕ анімуйте) об'єкт, краще зробити його зображенням (graphic).
- Кнопка (button). У Flash є спеціально пристосований під функції кнопки вид символу. У ньому є 4 кадри: Up, Over, Down, Hit, які містять такі стану кнопок:
· Up - звичайний стан кнопки.
· Over - коли курсор мишки знаходиться над кнопкою.
· Down - коли курсор знаходиться над кнопкою і натиснута клавіша миші.
· Hit - звичайний стан, для кнопки, що мiстить посилання, яку користувач вже відвідував.
- Анімація (movie clip). Це самий "повноцінний" тип символу. У ньому може бути будь-яку кількість кадрів. Символ цього типу може сприйматися як об'єкт типу Movie в ActionScript (це вбудована мова Flash).
Символи можуть бути вкладеними незалежно від типу. Це є найголовнішим їх гідністю. Наприклад, можна зробити кнопку, яка почне рухатися, коли над нею буде "пролітати" курсор миші, просто помістивши в кадр Over символ - анімацію. Або (парадокс!) На зображення помістити біжить кішку. Все інше - справа вашої фантазії.
Символи можна створювати як "з нуля" (Insert-> New Symbol, Ctrl + F8), так і використовуючи поточне виділення, помістивши його відразу в символ (Insert-> Convert to Symbol, F8). Другий прийом використовується набагато частіше, ніж перше, тому що в цьому випадку відпадає потреба його позиціонувати і змінювати під потрібний розмір.
Тепер, коли ви вже знайомі з основними поняттями, необхідними нам для створення анімації, можна приступати до розгляду безпосередньо предмета даної статті.
На початку статті ми визначили, що існує два методи анімації - покадровий і шляхом створення проміжних кадрів. Отже ...
покадрова анімація
Це анімація, повністю складена з ключових кадрів. Тобто ви самі визначаєте, як вміст кадру, так і його "тривалість" (тобто скільки таких статичних кадрів буде займати зображення).
На часовій шкалі покадрова анімація виглядає наступним чином:
Рис 2. - Покадровая анімація
· Покадровая анімація дає вам, в деякому сенсі, більший контроль над анімацією, і якщо ви досвідчений аніматор, ви можете вигідно нею користуватися.
· Це єдиний спосіб організувати зміну абсолютно незалежних зображень - слайд шоу (наприклад, створюючи звичайний банер засобами Flash).
· І все інше, що випливає з можливості промальовувати кожен кадр вручну.
· Покадрова анімація складно модифікувати. Особливо, якщо це не дискретний набір зображень, а пов'язана анімація. Доводиться модифікувати всі кадри. На ділі, у досвідчених Flasher-ів, така ситуація практично не зустрічається.
· Покадровая анімація займає досить великий обсяг, так як доводиться зберігати інформацію про кожного з них.
Анімація з побудовою проміжних кадрів (tweened motion)
При цьому способі анімації Flash автоматично будує проміжні кадри між ключовими кадрами, заданими вами. Це означає, що ви малюєте об'єкт, потім на іншому кадрі робите зміни, про які ми поговоримо нижче, і просите Flash розрахувати ті кадри, які лежать між цими двома ключовими кадрами. Він виконує цю роботу, і ви отримуєте плавну анімацію.
Швидкість і плавність анімації залежать від кількості кадрів, які ви відводите під рух і швидкості вашого Flash фільму (movie). Швидкість фільму можна змінити тут: Modify-> Movie ..., Ctrl + M - там параметр Frame Rate задає кількість кадрів в секунду. Для якісної анімації швидкість повинна бути не менше 25-30 кадрів в секунду.
Плавність і тривалість задається кількістю кадрів, відведених на анімацію (її фрагмент). Наприклад, якщо швидкість вашого фільму - 30 кадрів / сек. і вам потрібно зробити переміщення, скажімо, літачка, з одного кута картинки - в іншій за 2.5 секунди, то на це рух вам потрібно відвести 75 кадрів.
У Flash існує два варіанти побудови проміжних зображень - motion tweening (побудова анімації на основі модифікації символів) і shape tweening (побудова анімації на основі зміни форми). Ці способи відрізняються в корені. Перший використовується частіше за все, тому що за допомогою нього можна побудувати переважна більшість анімацій. Другий застосовується у випадках, коли потрібно плавну зміну форми. Поговоримо, спочатку про нього.
Shape tweening
Скажімо, вам потрібно, щоб квадрат плавно перетворився в коло, чи силует кролика плавно перетік в силует вовка. У цих випадках використовується shape tweening.
Як завжди, ви задаєте два ключових кадру на деякій відстані один від одного. У цьому варіанті анімації є жорстке обмеження: ваша анімація повинна займати окремий шар і бути єдиною намальованою фігурою (не повинно бути груп або символів).
Після того як у вас є два ключових кадру, ви робите активним перший з них (просто переходите на нього), і вибираєте на панелі Frame (Windows-> Panels-> Frame, Ctrl + F) в списку Tweening рядок Shape:
Рис 3. - Shape tweening
Кадри на часовій шкалі повинні змінити колір в зеленуватий колір і від першого кадру до другого повинна простягнутися стрілочка (див. Рис. 4).
В результаті ви отримаєте ряд проміжних кадрів, які будуть відображати перехід від першої фігури до другої. Я спеціально включив відображення тіней на протязі всього фільму, щоб відобразити ці кадри:
Мал. 4 - Анімація на основі Shape tweening
У цій маленькій анімації коло переходить в якусь подобу півмісяця. На першому ключовому кадрі я намалював коло, а на другому ключовому кадрі (це 10-й кадр сцени) перетворив його в півмісяць.
Трохи про параметри shape tweening. Ви, напевно, помітили, що з'явилася пара інших параметрів, коли ви вибрали shape tweening в панелі Frame - Easing і Blend (див. Рис. 3). Поле Label містить мітку кадру. Про мітках ми поговоримо в статті, присвяченій анімації за допомогою ActionScript.
Easing задає зворотне експоненціальне прискорення. Величина цього параметра може змінюватися від - 100 до + 100. Це означає, що якщо ви задасте негативний easing, рух буде відбуватися з позитивним прискоренням, швидкість буде збільшуватися (див. Рис. 5). І навпаки, якщо easing буде позитивним, анімація буде сповільнюватися (см Рис. 6).
Мал. 5 - Easing: -100
Мал. 6 - Easing: +100
Параметр Blend. визначає алгоритм переходу: Distributive (розподіляє, загальний) і Angular (незграбний). Перший намагається максимально пом'якшити, згладити перехід від однієї фігури до іншої. Другий же намагається зберегти пропорції кутів. Якщо перехід вас не задовольняє, можна поекспериментувати з цим параметром.
І, нарешті, останній інструмент в анімації shape tweening - контрольні точки (shape hints, дослівно - підказки для форм). Це точки, за допомогою яких ви допомагаєте Flash правильно здійснити перехід. Без них не обійтися у випадку складних форм. Користуватися ними дуже легко:
На першому ключовому кадрі (з якого починається анімація) ви додаєте контрольну точку (Modify-> Transform-> Add shape hint, Ctrl + Shift + H). На сцені з'явиться маленька червона крапка, позначена буквою латинського алфавіту. Ви прикріплюєте її до тієї частини зображення, яка рухається не так, як ви хотіли. Потім ви переходите на другий ключовий кадр, і прикріплюєте цю ж точку до частини, в яку повинна була перейти частина на початковому кадрі. Точка буде вже зеленого кольору, а на початковому кадрі вона стане жовтою. Так ви можете відрізняти початкові і кінцеві ключові точки, так як на одному кадрі можуть бути присутніми і ті і інші.
Видалити всі точки можна за допомогою Modify-> Transform-> Remove All Hints. Видалити ж єдину точку можна, натиснувши на ній праву кнопку миші, і в контекстному меню вибравши Remove Hint.
Так як контрольні точки позначаються літерами латинського алфавіту, то їх може бути максимум 27.
На малюнках (Рис.7 і Рис.8) ви можете помітити різницю між кадрами, створеними без використання контрольних точок, і з використанням таких.
Мал. 7 - Shape tweening без використання контрольних точок
Мал. 8 - Shape tweening c використанням контрольних точок
При використанні анімації на основі зміни форми (shape tweening) можуть модифікуватися наступні параметри фігури: