Як створити флеш анімацію (з ілюстраціями)

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

кроки

Частина 1 з 3:

Покадровая флеш-анімація

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

За замовчуванням Flash відтворює 24 кадру в секунду (FPS). Це означає, що за одну секунду будуть показані 24 кадру, але не всі з них мають бути обов`язково різними. Ви можете змінити цей параметр (якщо хочете) на 12 кадрів в секунду, але при 24 кадрах в секунду анімація буде відтворюватися більш «гладко».

2. Встановіть Flash Professional. Є безліч програм для створення флеш-анімації, але найбільш потужною є Adobe Flash Professional CC. Ви можете безкоштовно встановити пробну версію цієї програми або використовувати інший продукт (якщо ви не хочете реєструватися на Adobe Creative Cloud). Далі в цій статті описується робота з Flash Professional.

3. Так як покадрова анімація вимагає наявності кількох зображень (які трохи відрізняються один від одного), то вам потрібно створити ці зображення вручну. Для цього скористайтеся Adobe Flash Professional або намалюйте зображення в будь-якому графічному редакторі.

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

4. Створіть перший кадр. При першому запуску Adobe Flash Professional ви побачите порожній полотно (шар) і порожню тимчасову шкалу. У міру додавання кадрів тимчасова шкала буде заповнюватися автоматично. Ви можете працювати з шарами так само, як ви робите це в Photoshop.

Перш ніж додати зображення, створіть базовий фон вашої анімації. Перейменуйте «Шар 1» в «Фон», а потім закріпіть його. Створіть другий шар і назвіть його як завгодно. Це буде шар, на якому ви будете створювати анімацію.

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

Перший кадр - це «ключовий» кадр. Ключовий кадр - це кадр, який включає зображення і утворює основу ( «кістяк») анімації. Ви будете створювати новий ключовий кадр кожен раз при зміні зображення.

Ключові кадри на часовій шкалі позначаються чорною точкою.

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

5. Перетворіть зображення в символ. В цьому випадку ви зможете додати зображення в кадр кілька разів. Це особливо корисно, якщо вам потрібно швидко додати кілька однотипних картинок в один кадр (наприклад, рибки в акваріумі).

виділіть малюнок. Клацніть правою кнопкою миші по малюнку і виберіть «Convert to Symbol» (Перетворити в символ). Зображення буде додано в бібліотеку, що спростить його використання в майбутньому.

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

6. Додайте порожні кадри. Якщо ваш перший ключовий кадр готовий, вставте порожні кадри, а потім приступайте до створення другого ключового кадру. Натисніть F5 (чотири або п`ять разів), щоб додати порожні кадри після першого ключового кадру.

7. Створіть другий ключовий кадр (після того, як ви додали кілька порожніх кадрів). Є два різні способи зробити це: ви можете скопіювати існуючий ключовий кадр і внести в нього невеликі зміни, або ви можете створити порожній ключовий кадр і додати в нього нове зображення. Якщо ви використовуєте малюнок, створений в іншій програмі, скористайтеся другим способом. Якщо ви вставляєте зображення, створене за допомогою інструментів для малювання Adobe Flash Professional, скористайтеся першим методом.

Щоб створити ключовий кадр, використовуючи вміст попереднього ключового кадру, натисніть F6. Щоб створити порожній ключовий кадр, клацніть правою кнопкою миші по останнього кадру на часовій шкалі та виберіть «Insert Blank Keyframe» (Вставити порожній ключовий кадр).

Після того як ви створили другий ключовий кадр, вам потрібно внести зміни в його зображення, щоб анімація «ожила». Якщо ви користувалися інструментами для малювання Adobe Flash Professional, виберіть інструмент «Transform» (Перетворення), щоб виділити елемент вашого малюнка (наприклад, руку персонажа) і змінити його.

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

8. Повторіть процес. Після створення двох ключових кадрів повторіть процес - додайте кілька порожніх кадрів між кожними ключовими кадрами і переконайтеся, що анімація буде програватися «гладко».

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

Частина 2 з 3:

Твінінг

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

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

2. Створіть перше зображення. На відміну від покадрового методу тут не треба створювати кілька зображень для анімації. Замість цього необхідно створити одне зображення, яке буде змінено в процесі твінінгу.

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

3. Перетворіть зображення в символ. В цьому випадку Flash зможе маніпулювати зображенням. Якщо ви спробуєте виконати Твінінг із зображенням, яке не було перетворено на символ, то програма запропонує вам зробити це.

4. Створіть перший анімований твін. Анімований твін перемістить зображення з одного положення в інше. Клацніть правою кнопкою миші по символу і виберіть «Create Motion Tween» (Створити анімований твін). 24 кадру будуть додані на тимчасову шкалу, так як це стандартна довжина твін. Пам`ятайте, що за замовчуванням анімація буде відтворюватися плавно на швидкості 24 кадри в секунду, тому анімований твін триває всього 1 секунду.

Коли ви створюєте анімований твін, ви автоматично переміщується в останній кадр анімації.

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

При першому створенні траєкторії вона буде виглядати як пряма лінія (від початкової точки до кінцевої точки).

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

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

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

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

9. перетворіть малюнок. Якщо ви створили ключові кадри і траєкторію, ви можете перетворити зображення так, щоб воно плавно змінювалося при русі по траєкторії твін. Ви можете змінити форму, колір, нахил, розмір і будь-який інший параметр зображення.

Виберіть кадр, в якому малюнок буде перетворюватися.

Відкрийте панель властивостей малюнка. Для цього натисніть F3.

Змініть значення параметрів у вікні властивостей малюнка. Наприклад, ви можете змінити відтінок або колір, додати фільтри, змінити розмір.

Ви також можете використовувати інструмент «Free Transform» (Вільна перетворення), щоб змінювати малюнок так, як вам завгодно.

10. Додайте заключні штрихи. Перевірте створену анімацію, натиснувши Ctrl + Enter. Переконайтеся, що малюнок (персонаж) правильно змінюється і що анімація відтворюється з правильною швидкістю. Якщо анімація відтворюється занадто швидко, зменшіть значення FPS або збільште тривалість твін.

За замовчуванням FPS дорівнює 24, тому спробуйте зменшити це значення до 12. Змініть значення FPS на панелі властивостей. Однак при FPS = 12 анімація може відтворюватися недостатньо плавно.

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

Частина 3 з 3:

Додавання звукових ефектів і музики

1. Запишіть або скачайте звукові ефекти і музику. Ви можете додати в анімацію звукові ефекти, щоб зробити її більш ефектною. Музика зробить анімацію більш захоплюючою і може перетворити хорошу анімацію в чудову. Flash підтримує різні формати аудіофайлів, в тому числі AAC, MP3, WAV, і AU. Виберіть формат, який гарантує високу якість звуку при мінімальному розмірі файлу.

Формат MP3 гарантує високу якість звуку при мінімальному розмірі файлу. Файли формату WAV мають великий розмір.

2. Імпорт аудіофайли в бібліотеку, щоб мати можливість швидко додавати звуки і музику в анімацію. Натисніть «File» (Файл) - "Import" (Імпортувати) - «Import to Library» (Імпортувати в бібліотеку). Знайдіть аудіофайл на вашому комп`ютері. Переконайтеся, що аудіофайл має легко запам`ятовується, щоб ви могли швидко знайти його.

3. Створіть новий шар для кожного аудіофайлу. Це не обов`язково і ви можете додати звук на існуючі шари, але вставка аудіофайлу на окремий шар дозволить вам краще контролювати звукову доріжку анімації.

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

5. Додавання аудіофайлу. Натисніть «Properties» (Властивості) - «Sound» (Звук) - «Name» (Ім`я) і виберіть аудіофайл з бібліотеки.

6. Налаштуйте звуковий файл відповідно до вимог анімації. Ви можете додати ефекти, змінити параметри синхронізації і налаштувати повторне відтворення аудіофайлу (в меню «Name» (Ім`я)).

Ефекти (наприклад, загасання або відлуння). Ви можете вибрати один з попередньо встановлених параметрів в випадаючому меню, або ви можете натиснути на значок у вигляді олівця (поруч з меню), щоб створити власні призначені для користувача настройки.

Синхронізація. Визначає порядок відтворення звуку в анімації. Параметр «Event» (Подія) відтворить аудіофайл до кінця. Якщо той же аудіофайл відтворюється ще раз (поки перший відтворення не закінчилося), перше відтворення буде продовжувати грати (до кінця). Параметр «Start» працює як параметр «Event» (Подія) з тією лише різницею, що перше відтворення зупиняється при повторному відтворенні звуку. Параметр «Stop» (Стоп) зупиняє відтворення звуку в певному кадрі. Якщо ви хочете використовувати цей параметр в поєднанні з іншими параметрами аудіофайлу, створіть новий ключовий кадр, де відтворення звуку буде зупинятися. Параметр «Stream» (Потік) буде синхронізувати певний звук з кадрами на інших шарах. Цей параметр краще використовувати при вставці голосів персонажів.

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

7. Збережіть створену анімацію у форматі SWF. Цей формат відтворюється практично будь-яким веб-браузером. Також файл цього формату можна завантажити на певні сайти (Newgrounds, Albino Blacksheep, Kongregate), щоб його переглянули інші користувачі.

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

Поради

Якщо ви плануєте редагувати анімацію, то збережіть її в форматі .fla.