Навчальні заняття на прикладах створення навчальних проектів у середовищі Macromedia Flash MX

І.А. Бутеніна,школа № 510, Москва

Заняття 4. Створення анімації руху типу Mootion Tween

На цьому занятті ми нарешті займемося власне анімацією. Адже середовище Macromedia Flash здобуло найбільшу популярність саме як засіб створення "мультиків".

4.1. Концепція анімації. Види анімації. Кадри.

4.2. Приклад створення анімації руху.

Теоретична частина

4.1. Концепція анімації. Види анімації. Кадри

Анімація – це послідовна зміна стану об'єкта. З точки зору Macromedia Flash є кілька видів анімації: проста покадрова анімація, Tweening (анімація з побудовою проміжних кадрів), анімація форми та анімація з використанням ефектів шкали часу (Timeline Effects).

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

прикладах

· Tiny(Дуже маленький)

  • Short (Короткий) – зменшення висоти кадрів

Кадри бувають двох типів: ключові та статичні. Ключові кадри відіграють особливу роль - у них і можуть міститися зображення (статичні кадри програються як "марно"). На шкалі часу ключові кадри зображуються маленькими кружальцями. Якщо кружечко не зафарбовано — у ключовому кадрі нічого немає, воно порожнє. Якщо ключовий кадр містить хоча б один об'єкт, кружечок ключового кадру зафарбований (див.рис. 2).

При використанні анімації руху типуTweeningдостатньо встановити стан початкового і кінцевого ключових кадрів, проміжні кадри будуть добудовані програмою.

Нарис.2 показана анімація руху між кадрами 9 і 34. Для створення подібної анімації необхідно зробити наступне: клацнути по початковому ключовому кадру (у нашому випадку - по 9-му), вибрати командуCreate Motion Tween(Створити анімацію руху) - див.рис.3, потім клацнути по кінцевому кадру (у нашому випадку - по 34-му) і вставити в нього ключовий кадр (див.рис. 4).

навчальні

прикладах

З'явиться лінія зі стрілкою, яка свідчить про створення руху. Зрештою, необхідно в останньому ключовому кадрі вказати нове положення об'єкта.

Останнє, що потрібно зробити, - протестувати фільм або за допомогою комбінації клавіш+, або командою менюControl Test Movie(Управління - Тестування фільму).

За допомогою панеліProperties(Властивості), яка показана нарис. 5, можна встановити різні характеристики руху:

  • Ease (Уповільнення ходу), позитивне значення уповільнює хід об'єкта в кінці руху, негативне - на початку, допустимі значення вибираються в діапазоні від -100 до 100);
  • Rotate (Обертання) дозволяє встановити режими обертання:CW(За годинниковою стрілкою) таCCW(Проти годинникової стрілки), абоAuto(Автоматично), об'єкт повертається один разів у напрямку повороту на найменший кут;
  • Orient to Path (Орієнтація щодо шляху) дозволяє орієнтувати рух об'єкта заданою траєкторією.

Практична частина

4.2. Приклад створення анімації руху

Повернімося до нашого проекту, який ми розпочали створювати на минулих заняттях. Сьогодні ми попрацюємо зі сценою 2, на яку ми потрапимо, якщо натиснемо кнопку основного меню “Рафаель Санті (галерея)”. На сцені (рис. 6) розмістимо галерею картин РафаеляСанті. Зміну картин будемо здійснювати у вигляді анімації руху.

Елементи фільму розташовуються на шарах:foto- самі картини,krug-maska- надалі цей шар буде перетворено на маску,action- шар для розміщення скриптів.

прикладах

Розглянемо покроковий алгоритм створенняСцени2.

4.2.1. Створимо 3 шари, які назвемо так, як описано вище.

4.2.2. Імпортуємо кілька растрових зображень безпосередньо до бібліотеки фільму (див.рис. 7). (ПунктImportзнаходиться в менюFile.)

Бібліотека фільму набуде вигляду як нарис.8.

навчальні

Зауважимо, що растрові зображення попередньо повинні бути оброблені, зокрема розмір ілюстрації повинен бути невеликим — близько 300 пікселів завширшки. Помістимо першу ілюстрацію з бібліотеки на сцену у шарfoto.

4.2.3. На шаріkrug-maskaнамалюємо коло будь-якого кольору ліворуч від зображення. Цей шар надалі зробимо маскою. ВиглядСцени2 у першому ключовому кадрі показаний нарис.9.

прикладах

4.2.4. Задамо у всіх трьох шарах довжину фільму, що дорівнює, наприклад, 105 кадрів (усі шари можна виділити, утримуючи клавішу ).

4.2.5. На шарахfotoтаkrug-maskaстворимо через кожні 15 кадрів ключові кадри.

4.2.6. У цих ключових кадрах створимо анімацію руху наближення та видалення зображення та кола. Для цього клацнути правою клавішею миші по ключових кадрах і в контекстно-залежному меню вибиратиCreate Motion Tween(Створити Motion Tween), див.рис.11.

4.2.7. Для плавності анімації руху фотографій зробимо, починаючи з 30-го кадру, по два ключові кадри, що йдуть поруч, тобто. 30 і 31, 45 і 46 тощо, див.рис. 12.

4.2.8. Тепер розглянемо створення анімації наближення та видалення фотографії. У першому ключовому кадріСцена2 виглядає так, як показано нарис. 9.

А в 15-му кадрі — вже як на мал. 13, — коло ми накладемо на зображення.

навчальні

4.2.9. Починаючи з 30-го кадру і по 60-й відбувається спочатку плавне збільшення кола (зображення в суміжних кадрах, наприклад 30 і 31 однакові), а потім симетричне зменшення (з 75-го по 105-й кадри).

4.2.10. Починаючи зі 106-го кадру вставляємо з бібліотеки наступне растрове зображення (рис. 14) і проробляємо з ним ті самі кроки, що і з попереднім зображенням.

заняття

Заняття 5. Створення маски

5.1. Призначення масок у фільмі

5.2. Створення шару-маски.

Теоретична частина

5.1. Призначення масок у фільмі

Шар-маска призначений для того, щоб через нього побачити об'єкти нижнього шару. За допомогою масок можна створювати анімовані зображення, а також отримувати цікаві ефекти. Наприклад, можна показати, як промінь прожектора ковзає темною кімнатою, створити ілюзію спостереження в бінокль тощо.

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

Практична частина

5.2. Створення шару-маски

На попередньому занятті ми не дарма назвали другий шарkrug-maska.Ми обіцяли перетворити його на шар-маску, що зараз і зробимо.

5.2.1. Виділимо шарkrug-maskaі правоюклавішею миші виберемо командуMask. Цей шар стає шаром-маскою, а шар нижчеfotoстає маскованим. Автоматично обидва шари стають заблокованими.

5.2.2. У шаріаctionв останньому ключовому кадріСцени2 запишемо скрипт для повернення наСцену1 та зупинки фільму у другому кадрі (тобто повертаємось у головне меню) , Див.рис. 2.

5.2.3. НаСцені3 (рис. 3) є аналогічні шари, в яких розташовані лише інші зображення (описувати її ми не будемо). На цій сцені представлено галерею картин художника-імпресіоніста Клода Моне.

заняття

5.2.4. Протестуємо наш фільм. Якщо все зроблено правильно, ми побачимо відтворення фільму для кнопок “Рафаель Санті (галерея)” та “Моне (галерея)”.