Анімація у Flash, Програми для роботи з графікою, Програмні керівництва, статті

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

Анімація (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-11)


Висновок

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

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


Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*