Настав час повернутися до нашого улюбленого м’ячика, який ми навчилися малювати, а також навчили його стрибати у одній із попередніх статей. Якщо подумати, що ще може трапитися з м’ячиком, то на думку спадає лише одна ідея? Звісно – м’яч може луснути! Тому сьогодні ми навчимося створювати анімацію вибуху нашого м’яча.
Анімація вибуху з одного боку простіша, ніж попередні види анімації, які ми вчилися створювати, оскільки не потребує додаткових можливостей Flash (motion tween), а з іншого боку, набагато складніша, оскільки нам доведеться вручну малювати кожен кадр вибуху. У флеші такий вид анімації називається покадровою анімацією, оскільки кожен наступний кадр ми малюватимемо вручну.
На щастя, вибух – це досить коротка подія. У нашому випадку він триватиме всього чверть секунди. І оскільки частота кадрів (frame rate) кліпу складає 24 кадри на секунду – то намалювати доведеться всього шість кадрів.
Для роботи ви можете використати уже готовий Flash-файл з намальованим м’ячиком, або ж, користуючись покроковою інструкцією з попередньої статті, намалювати м’ячик по-новому.
- Я вибрав для анімації сіре тло сцени, тому що в сам вибух буде супроводжуватися білими хмаринками, які будуть невидимі на білому тлі. Що темнішою буде сцена – то простіше буде працювати і то контрастнішими будуть хмари повітря, які вириватимуться з м’ячика.
- Хоча покадрова анімація є однією з найпростіших видів анімації з технічної точки зору, та все ж вона вимагає значних зусиль, оскільки кожен кадр потрібно створювати вручну і при цьому – хоча б приблизно уявляти етапи події, яку ми анімуємо. Тому перш, ніж перейти до малювання, нам потрібно уявити (або знайти в інтернеті) як насправді лускає м’ячик.
- В наступному кадрі м’ячика вже немає – залишилися лише хмаринки повітря, які розлітаються навсібіч. Створіть порожній кадр у другому кадрі часової шкали (timeline). Для цього натисніть F7, або виберіть опцію Insert blank keyframe з випадаючого меню, клікнувши правою клавішою миші по другому кадрі.
- Ви створили перші два кадри вибуху. Закінчіть анімацію, фантазуючи, як могли б розлітатися хмарки. При цьому вставляйте порожній кадр і в режимі onion skin продовжуйте малювати. В результаті у вас повинно вийти шість кадрів. Час від часу ви можете перевіряти, наскільки природньо виглядає ваша анімація в режимі перегляду – ctrl+Enter.
- Втім, погодьтесь, коли м’ячик лускає, з нього не лише вилітає стиснуте повітря, але й розлітаються шматки самого м’ячика. В нашому випадку – жовті і блакитні. Для зручності я додав у кліп ще два шари – один для блакитних шматків, інший – для жовтих. Самі ж шматки я намалював з допомогою інструмента овал (oval tool), обрізавши їх у формі напівмісяця.
- Залишилося додати кілька фінальних штрихів, як от змінити колір сцени на менш контрасний (в моєму випадку світло-сірий) та додати сам м’ячик у перших кадрах анімації – і ми отримаємо досить правдоподібну анімацію лускання (вибуху м’ячика):
Перше, що необхідно зробити – це конвертувати м’ячик у символ (movie clip). Анімацію ми будемо створювати всередині цього кліпу. Тому після конвертування клікніть два рази по м’ячику, щоб перейти в режим редагування символу.
Вочевидь, перше – що відбувається – це деформація м’яча перед вибухом. Уявіть, як він роздувається перш ніж лусне. Зітріть гумкою (eraser tool) частини контуру м’ячика та намалюйте тонкі струмінці повітря, які вириваються з цих отворів. За допомогою інструмента вибору (selection tool) розтягніть лінії м’ячика (щоб створити видимість деформації), та додайте кілька перших «хмаринок повітря».
Малювати хмаринки найпростіше за допомогою інструмента пензлик (Brush tool), вибравши в опціях оптимальний розмір ліній. Спершу я спробував скористатися для цього автоматичною формою овала (oval tool), але потім вирішив, що зображення виходить занадто «правильної форми». Пензлик же дозволяє малювати більш вільно і при цьому згладжує будь-які гострі кути. Тому зображення виглядає набагато природнішим.
Підказка: не надто переймайтеся художньою якістю свого творіння. Швидка анімація згладить ваші художні огріхи. А постійна практика дозволить вдосконалюватися з кожною наступною анімацією.
Найскладніше на цьому етапі – малювати хмаринки таким чином, щоб вони практично повторювали попередні, трішки зміщуючись в різні боки. На щастя у флеші для цього є спеціальний інструмент – Onion skin. Ввімкнути його можна, клікнувши на іконку Onion skin прямо під шкалою часу:
Суть цього інструмента полягає в тому, що малюючи кожен наступний кадр, ми фоново бачимо, як виглядав попередній, а тому можемо орієнтуватися на нього. Вибравши опцію Onion skin outlines ми бачитимемо не все зображення, а тільки його контури. Особисто мені зручніше працювати саме з Onion skin outlines. Зверніть увагу також на те, що при ввімкненні режиму onion skin вгорі шкали часу (там, де нумерація кадрів) з’являється індикатор режиму. Можна розтягнути на кілька кадрів, а можна зменшити до двох (щоб бачити тільки попередній кадр і той, який ви малюєте в даний момент) – це найзручніше.
Ось як виглядає другий кадр вибуху зі ввімкненим режимом Onion Skin Outlines:
У вас повинно вийти щось таке (або набагато краще, зважаючи на те, що я практично не вмію малювати):
У першому кадрі у нас вже є роздутий м’ячик, тому шматки з’являються тільки з другого кадру. Анімувати їх легше, ніж хмаринки, тому що не потрібно перемальовувати кожного разу. Просто у кожному наступному кадрі перетягуйте їх у нове положення, уявляючи, як вони розлітатимуться навсібіч. При цьому можна зменшувати їх у розмірі.
Я покажу вам, як виглядають шматки м’ячика у моїй анімації в другому, четвертому та шостому кадрі.
Маючи цю основу, думаю, зовсім не важко уявити, як домалювати 3-тій та 5-тий кадри.
Тепер, якщо ви все зробили правильно, ваша анімація повинна виглядати приблизно ось так (я додав кілька порожніх кадрів в кінці анімації, щоб між вибухами була затримка):
Якщо у вас виникли будь-які запитання щодо процесу – не соромтесь задавати їх безпосередньо у коментарях до цього запису. Частково анімацію хмаринок я зняв у скрінкасті. Доведу її до ладу, і, можливо, також викладу у цьому блозі з коментарями.
Насправді анімацію вибуху можна робити кількома способами. Ми розглянули найбільш часовитратний – покадрову анімацію. В нього є одна велика перевага – можливість контролювати всі етапи та деталі анімації. А якщо у вас є хоча б якийсь художній досвід та відчуття ритму – тоді можна досягнути по-справжньому видатних результатів. Принаймні, перевершити мою анімацію дуже легко.
Втім, у одному з наступних уроків я обов’язково познайомлю вас ще з одним підходом до анімації вибуху, де ми створюватимемо анімацію за допомогою вбудованої у флеш мови Action Script 3. Цей підхід є дещо технічно складнішим, зате дозволяє швидко втілювати різні типи вибухів (вибух космічного корабля, вибух бомби, салют – і практично будь-який інший тип вибуху, в якому шматки розлітаються навсібіч).
Сподіваюся, даний урок допоміг вам краще зрозуміти принципи покадрової анімації у Флеш і трішки попрактикуватися в малюванні. Якщо вам сподобався цей урок – підпишіться на RSS блога про Flash, PHP та веб-програмування. Далі буде тільки цікавіше!