11. Приклади анімації

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

акваріум

Розглянемо, як на основі одного символу «Риба» можна зробити «Акваріум» з безліччю різних рибок. Для цього скористаємося бібліотекою символів, що поставляється разом з пакетом Flash 5.0 (команда Window> Common Libraries> Movie Clips). Виберемо в ній символ Fish Movie Clip (Мультфільм «Риба»). Це - не просто картинка, а мультфільм, т. Е. Риба переміщається в деякій області. Перенесемо екземпляр цього символу на робочу область редактора. Тепер виділимо його і відредагуємо. Наприклад, змінимо розміри і трохи повернемо, як показано на наступному малюнку. Можна змінити колір і зробити інші трансформації.

Можна змінити колір і зробити інші трансформації

Мал. 590. Примірник символу з бібліотеки можна модифікувати

Повторимо цю операцію кілька разів, т. Е. Створимо кілька примірників символу «Риба». Кожен екземпляр повинен «плавати» в своєму окремому шарі. Далі, створимо ще один шар, заллємо його блакитним кольором і намалюємо водорості. В результаті вийде приблизно те, що показано на наступному малюнку.

Мал. 591. У робочій області розташовані кілька примірників символу «Риба», що розрізняються розмірами, кольором і початковим становищем. «Водорості» намальовані вручну в шарі Фон

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

На наступному малюнку показаний кадр мультфільму, створеного на основі растрової графіки

Мал. 592. Кадр мультфільму, створеного шляхом композиції фрагментів растрової графіки

Обертання планет навколо Сонця

Розглянемо тепер обертання трьох планет - Меркурія, Венери і Землі - навколо Сонця. Цей вельми повчальний і красивий приклад описаний Олександром Рибниковим на сайті http://zona5.al.ru . Детально, крок за кроком, опишемо процес створення мультфільму.

Крок 1. Створимо новий файл. Виконаємо команду Modify> Movie і в діалоговому вікні вкажемо фізичні розміри області в пікселах. Не будемо себе обмежувати, Flash-мультфільми добре виглядають в повноекранному варіанті, тому поставимо розміри кадру 800x600. За замовчуванням швидкість зміни кадрів мультфільму встановлюється 12 кадрів / с. В даному випадку розумно це число збільшити до 16, так як інакше зображення помітно «смикається».
Крок 2. Намалюємо спочатку Космос. Для цього просто окреслимо робочу область прямокутником і заллємо його чорним кольором.
ШагЗ. Тепер в центрі нашого Всесвіту необхідно помістити Сонце. Постарайтеся зобразити його більш-менш правдоподібно, тобто намалювати не просто якийсь червоне коло, а ще й нанести на нього злегка несиметричний градієнт, що має надати вашому твору деяку об'ємність, а потім оточити Сонце світиться ореолом, що додасть правдоподібності. Усього перерахованого вище можна досягти як засобами самого редактора Flash, так і імпортувати вже готову картинку з будь-якого растрового графічного редактора. Але другий спосіб в нашому випадку вкрай недоцільний, оскільки Сонце є досить великим об'єктом, і якщо воно буде представлено у вигляді растрового зображення, то значно збільшиться обсяг вихідного файлу. Розглянемо, як намалювати Сонце засобами Flash.
Намалюємо коло, для заливки в списку зі зразками квітів виберемо будь-який градієнт. За допомогою команди Window> Panels> Fill (Вікно> Па-літри> 3алівка) відкриємо діалогове вікно, яке дозволить задати значення кольорів градієнта. Нехай Сонце буде залито яскраво-жовтим кольором, плавно переходить в яскраво-червоний. Ореол зробимо аналогічним чином, підклавши коло більшого розміру, пофарбований градієнтом з червоного кольору в чорний. Важливо, щоб Сонце знаходилося точно в центрі, т. Е. Координати центру повинні бути (400,300).
Крок 4. Настав час малювати три планети. Важливо зауважити, що вони досить маленькі, тому в даному випадку можна імпортувати растрове зображення у форматі прозорого GIF (точніше, малюнок з прозорим фоном). Таке зображення повинно займати не більше 500 байт дискового простору. Імпорт здійснюється наступним чином.
Спочатку треба створити новий шар командою Insert> Layer (Вставити> Шар). Для кожної з планет буде потрібно окремий шар, тому шари має сенс назвати іменами планет. Далі в цьому шарі необхідно створити новий символ (команда Insert> Symbol (Вставити> Символ)). В меню File виберемо команду Import і імпортуємо потрібне GIF-зображення.
Крок 5. Після цього створений символ потрібно помістити у відповідний шар. Для цього відкриємо бібліотеку символів (команда Window> Library (Вікно> Бібліотека)) і перетягнемо звідти символ із зображенням планети в робочу область (сцену).
Крок 6. Відзначимо, що планети повинні згодом обертатися навколо Солнца.- центру сцени. Тому треба знову повернутися до редагування символу (2 рази клацнути на планеті) і вказати в діалоговому вікні Info (команда Window> Info) віддаленість його від центру. Обрана віддаленість по горизонтальній осі (всі ці значення негативні, т. Е. Спочатку планети розташовуються зліва від Сонця):

  • для Землі: - 250 пікселів;
  • для Венери: - 180 пікселів;
  • для Меркурія: - 120 пікселів.

Стаціонарна картинка готова! Вона повинна бути якомога більш схожа на наступний малюнок:

Мал. 593. Стаціонарна сцена: Сонце і три планети, розташовані зліва від нього

Крок 7. Тепер змусимо наші планети обертатися проти годинникової стрілки навколо Сонця. Відомо, що ті планети, які розташовуються ближче до Сонця, обертаються швидше. Спробуємо кількість кадрів мультфільму розрахувати таким чином, щоб Земля за один цикл здійснювала один оборот, Венера - два, а Меркурій - три. Оптимальним числом кадрів, кратним двом, трьом і чотирьом, є число 120. Було б негарно, якби всі планети в якийсь момент часу ставали в ряд. Тому поставимо початковий кут розташування планет:

  • для Землі - 150 °;
  • для Венери - 120 °;
  • для Меркурія - 0 °.

Ці дані можна задавати і змінювати в діалоговому вікні Info.
Крок 8. Тепер створимо перший ключовий кадр для будь-якої з планет, наприклад, для Землі. Для цього клацнемо на першому кадрі відповідного шару правою кнопкою миші і в меню виберемо команду Create Motion Tween. Потім скопіюємо даний кадр в буфер обміну (Сору) і вставимо його (Paste) на місце кадру з номером 60. Потім повернемо Землю на кут 180, т. Е. Вкажемо значення кута в вікні Transform рівним -30 (див. Малюнок). Наступним ключовим кадром буде 90-й (поворот еше на 90 °) і останній ключовий кадр - 120-й (повний оберт Землі навколо Сонця завершений).

Мал. 594. Розробка анімації в мультфільмі з Сонцем і планетами

Крок 9. Аналогічним чином ми можемо поставити рух Венери і Меркурія. Щоб задати рух Венери, буде потрібно вдвічі більше опорних кадрів, для Меркурія - втричі. При цьому можна копіювати відразу кілька кадрів. Тому в діалоговому вікні досить задати кути тільки для одного обороту кожної з планет.

Крок 10. Залишається тільки опублікувати отриману сцену (команда File> Publish) і насолодитися отриманим ефектом.