Macromedia Flash 5. (частина друга) Анімація

1. Macromedia Flash 5. (частина друга) анімація
2. Вступ
3. Кадри, шари, символи, тимчасова шкала
4. анімація
6. PS

2001 р

Macromedia Flash 5. (частина друга)
анімація

Рубен Сардарян, [email protected]

Вступ

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

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

Елементарні операції з кадрами:

Вставити порожній ключовий кадр - Insert-> Blank keyframe, F7
Ключовий кадр, що повторює зміст попереднього - Insert-> Keyframe, F6
Очистити ключовий кадр - Insert-> Clear keyframe, Shift-F6
Вставити звичайний кадр - Insert-> Frame, F5
Видалити кадр - Insert-> Remove Frames, Shift-F5

символи

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

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

Я думаю, ви вловили сенс символів. Символи додають гнучкості вашої сцені. У випадку з автомобілем ви можете зробити колесо анімованим символом, так, щоб відчувалося обертання. Можете зробити двері кнопкою, щоб при натисканні мишкою вона відкривалася. Сенс в тому, що в будь-який момент ви можете змінити зміст і вид символу, що істотно скорочує витрати на модифікацію 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). Другий прийом використовується набагато частіше, ніж перше, тому що в цьому випадку відпадає потреба його позиціонувати і змінювати під потрібний розмір.

Для управління символами використовується так звана бібліотека (Library), опис якої, на жаль, не входить в рамки даної статті. Вікно бібліотеки знаходиться за адресою Window-> Library (або Ctrl-L). Я сподіваюся, ви легко розберетеся з бібліотекою символів.

анімація

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

На початку статті ми визначили, що існує два методи анімації - покадровий і шляхом створення проміжних кадрів. Отже:

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

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

На часовій шкалі покадрова анімація виглядає наступним чином:

Рис 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) можуть модифікуватися наступні параметри фігури:

• форма
• розташування
• розмір (будь-які пропорції)
• колір
• кут повороту
  

Якщо вам потрібно відключити shape tweening, в панелі Frame виберіть Tweening: None.

Motion Tweening

І, нарешті, найбільш часто використовувана техніка анімації у Flash - Motion Tweening. В цьому випадку анімація будується на основі модифікації символів, тобто об'єктом анімації є символ.

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

Ось які параметри символу можуть модифікуватися при використанні Motion Tweening:

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

Включити motion tweening можна декількома способами (а відключити, на жаль, тільки одним). Для того, щоб включити motion tweening, потрібно зробити активним початковий кадр вашого переходу, потім, натиснувши праву кнопку миші, в контекстному меню вибрати Create motion tween (це ж можна зробити, вибравши Insert-> Create motion tween). Універсальний спосіб включення / вимикання motion tweening - за допомогою панелі Frame, вибравши Motion в полі Tweening. Там же можна контролювати параметри анімації:

Мал. 9 - Motion tweening

Easing - зворотне експоненціальне прискорення, працює абсолютно так само, як і в shape tweening.

Rotate дозволяє керувати обертанням. Auto - Flash автоматично намагається визначити кількість витків. CW (Clockwise, за годинниковою стрілкою) і ССW (Counter Clockwise - проти годинникової стрілки). При цьому поряд у полі праворуч з'являється можливість ввести кількість обертів. Можна використовувати тільки цілі значення. Можна відключити обертання, вибравши None.

Orient to path - повертає символ відповідно до напрямку розрізу. Snap прив'язує символ до цієї направляє. (Див. Нижчих)

У випадках, коли кількість кадрів основної сцени не буває кратним кількості кадрів символу, прапорець Synchronize дозволяє синхронізувати ці дві анімації.

напрямні шари

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

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

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

Для того, щоб додати направляючий шар, вам потрібно вибрати шар, на якому знаходиться ваш символ, і, натиснувши праву кнопку миші, в контекстному меню вибрати Add Guide. При цьому вихідний шар стає направляються (guided layer). Це далеко не єдиний спосіб створити направляючий шар (guide layer). Будь-шар можна зробити напрямних, вказавши це в його властивостях, або направляються, перетягнувши потрібний шар мишкою, так, щоб він знаходився під напрямних.

Мал. 10 - Направляючий шар

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

Мал. 11 - Анімація, з використанням траєкторії

Тепер, щоб використовувати цей шар, вам потрібно взяти ваш символ за центральну точку (це такий маленький кружечок) і перетягнути її на траєкторію. Ви відчуєте, коли символ "зачепиться" за неї, і побачите, як він буде по ній ковзати. Далі все за знайомим сценарієм - ключові кадри, включаємо motion tweening: Якщо потрібно, щоб об'єкт повертався згідно траєкторії, а не просто рухався по ній (як на рис. 11), то на панелі Frame потрібно включити прапорець Orient to path.

кольорові ефекти

Motion tweening дозволяє використовувати різні колірні ефекти стосовно до всього символу. Ця можливість відсутня в shape tweening.

Для того, щоб застосувати ефект до символу, потрібно виділити цей символ, і на панелі ефектів (Windows-> Panels-> Effects), вибрати потрібний ефект (див. Рис 9-12).

Висновок

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

Бажаю творчих успіхів і справжніх шедеврів, зроблених за допомогою Flash!

PS

Спасибі велике всім читачам, так тепло відгукнувся про першій части статті! Дякую за конструктивну критику та мотивуючі побажання!

Я отримав дуже багато листів з питанням "a як зробити в Flash? .." Я чесно намагався допомогти всім, але за браком часу, не завжди міг це зробити, тому не судіть строго.

Наступна стаття буде присвячена основам ActionScript - подієво-керованого мови, який створює інтерактивність у Flash. Так само, я сподіваюся помістити туди систематизований каталог по Flash ресурсів.