Анімація квітів, анімація відкритих квітів, анімація сакури
Анімація відкритих квітів
Сьогодні ми розглянемо один приклад, як можна зробити анімацію відкритих квітів у флеш. Ідея даної анімації квітів буде полягати в тому, що квіти будуть поступово з'являтися пелюстка за пелюсткою, тим самим буде складатися відчуття, що квіти розпускаються, а через певний час квіти також пелюстка за пелюсткою будуть обсипатися, щоб дати можливість з'явитися новим кольорам, в даному прикладі буде використовуватися анімація сакури. Для даної анімації квітів вам буде потрібно зображення цієї квітки окремо: картинка гілки без квітів, зображення квітки на прозорому тлі і картинки пелюсток і маточки (центральної частини квітки, здається вона так називається), теж з прозорим фоном, всі ці зображення можна Завантажити використовувані в цьому прикладі. або зробити свої, наприклад за допомогою PhotoShop.
Для цього уроку я використовував програму Adobe Flash CS5.
1 По-перше створюємо новий документ з потрібними параметрами.
2 Імпортуємо в бібліотеку програми зображення гілки, на якій буде здійснена анімація відкритих квітів, пелюсток і самого квітки.
3 Перейменовуємо шар в "Фон" і перебуваючи на ньому перетягуємо з бібліотеки програми зображення гілки і виставляємо його по центру сцени.
4 Створюємо новий шар і перебуваючи на ньому перетягуємо з бібліотеки на сцену зображення квітки і поміщаємо його в будь-яке місце сцени.
5 Поки зображення квітки вибрано, перетворимо його в Фрагмент ролика, натискаючи кнопку "F8" і називаємо його "Квіти".
6 Двічі натискаємо по центру створеного ролика, щоб увійти в нього.
7 Перебуваючи всередині ролика "Квіти" поки зображення квітки все ще вибрано перетворимо його знову в "Фрагмент ролика" і називаємо його "Цветок_мс".
7 Знову двічі натискаємо по створеному ролику, щоб увійти в нього. Коли ви перебуваєте всередині ролика "Цветок_mc" перейменовуємо шар в "Квітка" і створюємо ще 8 шарів, даючи їм назви пелюсток по рахунку і останньому шару "Товкач", після чого переміщаємо шар "Квітка" вище всіх шарів.
8 Тепер вибираємо шар "Лепесток_1", перебуваючи на ньому перетягуємо з бібліотеки на сцену програми зображення першого пелюстки, так як картинка пелюстки має теже розміри по ширині і висоті, що і картинка квітки, виставляємо його на ту ж саму позицію по осі "Х" та " у ", що і зображення квітки, в результаті пелюстка повинен пролностью поєднатися з картинкою всього квітки, після чого блокуємо і скасовуємо видимість шару" Квітка ".
9 Потім поки картинка першого пелюстки все ще обрана перетворимо його в Фрагмент ролика і називаємо його "Лепесток_1".
Так проробляємо з кожною картинкою пелюстки.
Після того, як всі пелюстки і товкач поміщені на свої шари, виставлені на потрібні позиції і перетворені в ролики, можна приступити безпосередньо до анімації відкритих квітів.
10 Блокуємо всі верстви, щоб розблокувати перший шар "Лепесток_1".
11 Перебуваючи на шарі "Лепесток_1" створюємо ключові кадри на 20, 300 і 400 кадрі натискаючи кнопку "F6".
12 Вибираємо перший ключовий кадр шару "Лепесток_1", вибираємо інструмент "Вільне перетворення (Q)", затискаємо кнопку "Shift" і якомога менше зменшуємо ролик "Лепесток_1", для зручності роботи можна збільшити робочу область, потім створіть "Класичну анімацію руху" між 1 і 20 кадрами.
13 Потім вибираємо 400 ключовий кадр шару "Лепесток_1" і переміщаємо ролик "Лепесток_1" трохи вниз і задаємо йому в панелі "Властивості" нульову прозорість, після чого створимо "Класичну анімацію руху" між 300 і 400 ключовими кадрами.
14 Потім натискаємо по анімованої області між 300 і 400 ключовими кадрами і в панелі властивості вибираємо наприклад "Поворот за годинниковою стрілкою -> 1 оборот", щоб в момент падіння пелюстка обертався.
15 Тепер блокуємо шар "Лепесток_1", переходимо на шар "Лепесток_2", розблокуємо його, перетягуємо його перший ключовий кадр припустимо на другий кадр, потім створюємо ключові кадри на 21, 350 і 450 кадрі, потім переходимо на 2 ключовий кадр, знову вибираємо інструмент "Вільне перетворення (Q)", вибираємо їм ролик "Лепесток_2", затискаємо кнопку "Shift" і якомога менше зменшуємо ролик "Лепесток_2", потім створіть "Класичну анімацію руху" між 2 і 21 кадрами.
14 Далі вибираємо 405 ключовий кадр шару "Лепесток_2" і переміщаємо ролик "Лепесток_2" вниз і задаємо йому в панелі "Властивості" нульову прозорість, після чого створимо "Класичну анімацію руху" між 350 і 450 ключовими кадрами і знову натискаємо по анімованої області між 350 і 450 ключовими кадрами і в панелі властивості вибираємо наприклад "Повернути проти годинникової стрілки -> 2 обороту".
Думаю суть дій зрозуміла, так робимо і з іншими пелюстками (безладне поява пелюсток по часу в межах 5-8 кадрах від появу першої пелюстки і таке-ж безладне облітання пелюсток по часу з різних кол-вом поворотів і напрямку обертання). Що стосується шару "Товкач", у нас там розміщений ролик "Товкач" (центральна частина пелюстки), треба щоб він з'явився раніше пелюсток (так як це центр квітки і з нього ростуть все пелюстки) і повинен пізніше пелюсток зникнути, знову-ж так ка це центральна частина квітки і з неї ростуть все пелюстки, для цього я створив ключові кадри на 15, 450 і 455 кадрі, на 15 ключовому кадрі шару з товкачем також як і з пелюстками зменшуємо розміри ролика "Товкач" якомога менше і створюємо анімацію руху між 1 і 15 кадрами, а на 455 кадрі зменшуємо товкач якомога ме ньше, задамо йому нульову прозорість і створимо анімацію руху між 450 і 455 кадрами, в результаті центральна частина квітки просто зникне.
В результаті у мене вийшла ось така історія на часовій шкалі з анімацією появою квітки:
І ось така картина на часовій шкалі з анімацією в'янення квітки:
15 Наприкінці всіх верств треба створити прості кадри, щоб анімація квітів переривалася на якийсь час, я створив прості кадри на 550 кадрі усіх верств. Також ви напевно вже помітили, що шар "Квітка" в анімації не бере, але він нам ще знадобиться, коли ми будемо розміщувати квіти на гілці і для різноманітності нам треба буде ставити різні розміри квітам.
16 І ось тепер в Бібліотеці рпограмми знаходимо ролик "Цветок_мс" і дублюємо його, при цьому називаючи його "Цветок_2_мс" і в результаті в Бібліотеці з'явиться новий ролик під назвою "Цветок_2_мс".
так дублюємо ролик квітки кілька разів, щоб інтервал між анімаціями квітів був різноманітнішою.
17 З анімацією і дублюванням роликів квіток закінчено, тепер нам треба приступити до загальної анімації відкритих квітів на гілці, для цього повертаємося на попередніх сцену в ролик "Квіти", натискаючи на посилання.
18 Тепер нам треба задати індивідуальний час розпускання або облітання квітів, для цього по черзі змінюємо ці параметри у кожного ролика "Цветок_мс", для цього натискаємо на кнопку "Змінити символи" і по черзі вибираємо там ролики квітів і на свій вибір додаємо або видаляємо додаткові кадри у анімації і після всіх редагувань поверніться на головну сцену "Монтажний кадр".
19 Перебуваючи на головній сцені знову двічі натискаємо по ролику "Квіти", щоб увійти в нього.
20 Пам'ятайте в 15 пункті ми залишали шар "Квітка" і говорили, що він нам ще знадобиться, ось і настав цей час, завдяки тому, що шар не був видалений відразу тепер ми можемо бачити ролики квітів і змінювати їх розміри. Перебуваючи всередині ролика "Квіти" створюємо ще 4 шари (можна і більше, як в цьому прикладі), потім на кожен з шарів ми розмістимо один з 5 варіантів ролика "Цветок_мс" і для різноманітності інструментом "Вільне перетворення (Q)" зменшимо розміри деяких кольорів.
21 Коли ролики квітів розміщені по потрібних місцях і їх розміри откорректірованни, можна нарешті видалити шар з картинкою квітки в ролику "Цветок_мс" і його дублях, щоб перед початком анімації розпускання квітки не з'являлася ця картинка, для цього знову викликаємо меню "Змінити символи", вибираємо там потрібний кліп і видаляємо в ньому шар з квіткою (так робимо з кожним роликом квітки).
На цьому урок закінчений, можна протестувати, що у нас вийшло.