Символи та екземпляри, Анімація типу Motion :: Основи створення анімації в Macromedia Flash MX

1. Робота з символами. Типи символів використовуваних в Macromedia Flash
2. Кілька способів створення символів
3. Робота з екземплярами
4. Анімація типу Motion
5. Рух по дорозі. Шар Guide (направляючий)
6. Домашнє завдання: Основи створення анімації в Macromedia Flash MX

• Робота з символами. Типи символів використовуваних в Macromedia Flash
• Кілька способів створення символів
• Робота з екземплярами
• Розрахункова анімація типу Motion
• Рух по дорозі. Шар Guide (направляючий)

Робота з символами. Типи символів використовуваних в Macromedia Flash

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

Використання символів дозволяє значно прискорити процес створення ролика і зменшує розмір swf-файлу (передавати символ на комп'ютер користувача потрібно лише один раз!).

І ще, тільки на основі символів можуть бути створені інтерактивні елементи ролика.

У програмі Macromedia Flash передбачена можливість створення трьох видів символів:

• Graphic (графіка) - це статичне зображення або невеликий анімаційний кліп, прив'язаний до основної часової шкали згідно його внутрішнім правилам. Символи цього типу не забезпечують інтерактивну взаємодію з користувачем і не можуть містити звуковий супровід.
• Movie Clip (кліп) - це незалежний елемент анімації, відтворення якого не прив'язується до основної часової шкали. Кліп може включати в себе елементи інтерактивної взаємодії з користувачем, звуковий супровід і навіть інші кліпи. Кліп, інтегрований в тимчасову шкалу кнопки, дозволяє створити анімовану кнопку.
• Button (кнопка) - це інтерактивний елемент ролика, здатний реагувати на натискання клавіш і на основні події, пов'язані з рухом миші (наведення, клацання та інші). Кнопка включає в себе ряд зображень, що описують різні її стану, і дії, що визначають реакцію на активність користувача. Робота з кнопкою може супроводжуватися звуком.

Оскільки відмінна риса будь-якого символу - це зв'язок з бібліотекою, то до сімейства символів цілком можна віднести:

• імпортований в ролик звук;
• імпортовані растрові зображення;
• імпортовані відеофрагменти.

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

Бібліотеку ролика ви можете відкрити в будь-який момент, скориставшись командою Window> Library (вікно> бібліотека) і тримати вікно відкритим, поки в ньому є потреба.

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

Кілька способів створення символів

1 спосіб:
Для початку давайте звернемося до матеріалу домашньої роботи, представленому на минулому уроці і перетворимо в символ вже готову покадровую анімацію - кошеня, який ворушить вушками і махає хвостиком. Ця анімація повинна бути представлена ​​у вас на окремому шарі. Щоб виконати цю операцію, дійте наступним чином:

• Використовуючи клавішу Shift або Ctrl, виділіть в палітрі Timeline всі кадри, які повинні увійти в символ (в подальшому, коли вам потрібно буде перетворити в символ складну анімацію, захоплюючу кілька шарів, необхідно буде виділяти необхідні кадри, і всі потрібні вам шари!).
• Потім використовуйте команду Edit> Copy Frames (правка> копіювати кадри) або клацніть правою кнопкою миші і в меню оберіть Copy Frames.
• Зверніться до меню Insert> New Symbol (вставка> новий символ), виберіть тип символу Graphic.
  
• Отже, зовнішній вигляд робочого поля редактора змінився. Зараз ви перебуваєте «всередині» символу. Встаньте на перший кадр палітри Timeline і використовуйте команду Edit> Paste Frames (правка> вставити кадри) або клацніть правою кнопкою миші і в меню Paste Frames.
• Поверніться на сцену, для цього клацніть по значку Scene 1. І видаліть всі кадри анімації, яку перетворили на символ, виділивши їх, використовуйте команду Insert> Remove Frame (вставка> прибрати кадр).
  
• Тепер зробіть ключовим перший кадр цього шару і розмістіть на ньому екземпляр символу з кошеням, скориставшись бібліотекою ролика. Потім перейдіть на 15 фрейм і використовуйте команду Insert Frame, для того щоб «розгорнути» анімацію.

Виділіть необхідні вам елементи зображення (наприклад, вазу з букетом з осіннього листя) і використовуйте команду Insert> Convert to Symbol (вставка> перетворити в символ). Виберіть тип символу Graphic. Зверніть увагу на невеликий хрестик в центрі вікна. Це точка реєстрації. При обчисленні координат примірника символу визначається саме положення точки реєстрації. Загальноприйнято розташовувати точку реєстрації приблизно в центрі символу.

3 спосіб:
Якщо ви заздалегідь знаєте, що створюване зображення буде оформлено як символ, відразу звертайтеся до команди Insert> New Symbol (вставка> новий символ). До речі, якщо вікно бібліотеки відкрито, то той же самий ефект дасть клацання на кнопці New Symbol (новий символ - плюсик блакитного кольору) в нижній частині вікна бібліотеки.

Ще один спосіб створення символів полягає у використанні в якості основи вже існуючі символи. Для цього символ необхідно продублювати. Виберіть дубльований символ у вікні бібліотеки, клацніть правою кнопкою миші і в меню оберіть Duplicate (дублювати). Задавши властивості нового символу, можна перейти в режим його редагування - клацніть правою кнопкою миші, виберіть розділ Edit (редагувати) і внесіть необхідні зміни.

Тепер трішечки поекспериментуємо. Чи не закривайте бібліотеку свого ролика, в якому ви створили символ типу Graphic, що містить анімацію з кошеням. Створіть новий документ File> New і розмістіть на сцені кошеня, використовуючи відкриту бібліотеку ролика з домашнім завданням. Зверніть увагу, що символ автоматично був розміщений в бібліотеці нового документа. Тепер зі спокійною душею закрийте файл з домашньою роботою. Збережіть новий документ на диску і протестуйте ролик. Ваш кошеня, на жаль, не хоче ворушити вушками і махати хвостиком. Чому? І як в даній ситуації можна поліпшити фінансове становище?

У вашому новому документі всього один кадр, і для того, щоб забезпечити нормальну роботу символу типу Graphic, який містить анімацію, необхідно додати на палітрі Timeline стільки кадрів, скільки міститься в вашої анімації так скажемо, розгорнути анімацію. Ще раз протестуйте ваш ролик.

Ситуацію можна виправити і іншим способом. Створіть ще один новий документ, винесіть на сцену кошеня і в палітрі Properties для цього примірника перевизначите його поведінку на Movie Clip. Протестувавши ролик, ви побачите, що, не дивлячись на те, що у вашому ролику тільки один кадр кошеня і вушками ворушить і хвостиком виляє.

Можна перевизначити поведінку символу-оригіналу це можна зробити, використовуючи кнопочку Properties в нижній частині вікна бібліотеки або, клацнувши правою кнопкою миші, вибрати в меню розділ Behavior (поведінка) і перевизначити тип символу, використовуючи запропоновані варіанти.

Робота з екземплярами

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

Давайте створимо новий документ і винесемо на сцену три екземпляри анімованого символу з кошеням. Використовуючи палітру Properties, перевизначити поведінку примірників таким чином, щоб один з них був Graphic інший Movie Clip, а третій Button.

Зверніть увагу, що на палітрі Properties для кожного екземпляра будуть визначені свої властивості, а також надані можливості маніпулювання цими властивостями:

Експериментуйте з кожним екземпляром, використовуючи палітри Tools і Properties. Можна змінити забарвлення кожного окремого примірника, повернути його, отмасштабовані ... Зверніть увагу, що всі ці властивості «належать» примірнику, зберігаються разом з ним і ніяк не пов'язані з властивостями інших примірників цього символу або з властивостями самого символу.

Наприклад, можна змінити забарвлення і ступінь прозорості примірника символу. Для цього в палітрі Properties необхідно звернутися до розділу Color (колір). Цей розділ містить список, що розкривається, дозволяє вибрати один з заздалегідь налаштованих колірних ефектів:

• Щоб скасувати заданий раніше колірний ефект, слід вибрати пункт None (немає). Цей пункт вибирається за замовчуванням, коли екземпляр символу створюється вперше.
• Щоб змінити яскравість примірника, треба вибрати пункт Brightness (яскравість). Кольорові тони залишаються тими ж, але їх яскравість збільшується або зменшується в залежності від положення движка. При максимальній яскравості (100%) екземпляр перетворюється в одноколірні біла пляма, при мінімальній (-100%) - в чорне.
• Щоб задати режим забарвлення примірника стороннім кольором, слід вибрати пункт Tint (відтінок). Потрібний колір задається шляхом вказівки колірних компонентів або вибором з палітри. Щільність «підфарбовування» задається за допомогою движка Tint Amount (щільність забарвлення). При нульовому значенні екземпляр символу залишається без змін, при значенні 100% він перетворюється в однотонне пляма обраного кольору.
• Задати ступінь прозорості примірника можна, вибравши пункт Alpha (альфа). Ступінь прозорості задається у відсотках. При 100% екземпляр залишається без змін, при значенні 0% він стає повністю прозорим і, тим самим, невидимим.
• Якщо жоден з цих варіантів вас не влаштовує (наприклад, ви хочете змінити і колірної тон, і ступінь прозорості), слід вибрати пункт Advanced (прогресивний) при цьому на панелі з'явиться кнопка Settings (установки), клацання на якій відкриває додаткове діалогове вікно. З його допомогою ви можете «за один захід» встановити всі перераховані вище параметри кольору примірника.

Анімація типу Motion

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

Отже, створіть новий документ розміром 100x300 px, назвіть його ball і збережіть на диску.

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

Зробіть ключовим 50 кадр, Insert> Keyframe (F6). Потім поверніться до першого кадру, зверніться до палітри Properties і в розділі Tween встановіть значення Motion. Зверніть увагу, що простір шару на палітрі Timeline між 1 і 50 кадром залилося бузкової фарбою і від 1 до 50 кадру простяглася стрілочка. Якщо замість стрілочки на палітрі простяглася пунктирна лінія, це означає, що ви щось зробили неправильно, наприклад, забули перетворити м'ячик в символ або групу ...

Продовжуємо роботу. Зробіть ключовим 25 кадр. У цьому кадрі м'ячик повинен битися в поверхню. Для зміни координат м'ячика дуже зручно використовувати палітру Info. На малюнку, представленому трохи нижче, ви бачите палітру Info для 1 і 25 кадру. 1 і 50 кадри абсолютно однакові!

Щоб створити ілюзію «стрибаючого» - деформується в момент удару об поверхню м'ячика зробимо ключовими 20 і 30 кадр. У 25-й кадр "деформуємо» м'ячик - сплющена його по горизонталі - в палітрі Info в розділі Height of instance змініть значення на 32 px.

Так само можна додати ефект равноускоренного руху - коли м'ячик падає вниз, встановивши для першого кадру в палітрі Properties в розділі Ease (уповільнення) значення -100. І ефект равнозамедленно руху - коли м'ячик рухається вгору, встановивши для 30 кадру значення 100.

Примітка: У даній роботі частота кадрів становить 24 fps!

Рух по дорозі. Шар Guide (направляючий)

У попередній практичній роботі рух м'ячика було обумовлено зміною його координат, якими ми маніпулювали в палітрі Info. Використовуючи додаткові ключові кадри, можна створити складний рух по досить хитромудрій траєкторії, однак Flash пропонує нам використовувати для реалізації цього завдання інший спосіб - використання шару Guide (направляючого). Цей шар дозволяє визначити траєкторію руху м'яча, використовуючи інструмент Pencil.

Помістіть на сцену м'ячик, який ви створили в попередній роботі (це повинна бути або група, або символ!). Зробіть ключовим 30 кадр. Поверніться до першого кадру і в палітрі Properties в розділі Tween встановіть значення Motion. Потім клацніть на кнопці Add Motion Guide (додати шар, що керує рухом) розташованої в нижній частині палітри Timeline. Озброївшись інструментом Pencil, намалюйте на цьому шарі траєкторію руху м'яча.

Для того щоб змусити м'ячик рухатися по створеної траєкторії, слід в першому і останньому кадрі анімації «посадити» м'ячик на лінію траєкторії.

Це можна зробити вручну, а можна використовувати розділ Snap (прив'язати) в палітрі Properties там, де вами був визначений спосіб анімації - Motion.

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

Cкопіруйте вміст шару Guide в буфер обміну, потім створіть для траєкторії додатковий шар і вставте в цей шар вміст буфера, використовуючи команду Paste in Place.

І ще, не можна не звернути уваги на дуже важливі розділи в палітрі Timeline, що визначають поведінку об'єкта в процесі руху:

• Orient to Path (орієнтувати по шляху), якщо ви хочете, щоб по намальованому вами шляху була зорієнтована вісь симетрії об'єкта, то вам неодмінно потрібно поставити галочку в цьому розділі (це особливо важливо, коли в дорогу вирушає ракета, ворона, а не просто м'ячик , у якого немає ні носа, ні хвоста!).
• Rotate (обертання) якщо ви хочете, щоб рух об'єкта супроводжувалося акробатичними трюками (кульбіт, сальто-мортале ...), неодмінно потрібно буде звернути до цього розділу.

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

Примітка: У даній роботі частота кадрів становить 24 fps!

Домашнє завдання: Основи створення анімації в Macromedia Flash MX

По-перше, вам необхідно продублювати анімаційні flash-ролики, представлені в матеріалі цієї лекції.

По-друге, створити ролик, в якому по блакитному небу попливуть, завдяки вам, «баранчики» хмар. І знову в домашній роботі звучать прекрасні рядки з вірша Сергія Олександровича Єсеніна:

В'яжуть мереживо над лісом
У жовтій піні хмари.
У тихій дрімоті під навісом
Чую шепіт сосняку ...

Разом: з вас три файли в форматі fla (якщо сумарний розмір файлів перевищить 150 Кб, будь ласка, упакуйте файли в архів) і вишліть вчителю.

Бажаю Вам успіхів у самостійному вивченні Macromedia Flash MX!

Попередній модуль:
Модуль I: Основи створення анімації, Покадровая анімація
Наступний модуль:
Модуль III: Анімація типу Shape, Озвучування анімації