Шар-маска, Анимированная маска, Редагування анімації :: Основи створення анімації в Macromedia Flash MX

1. Шар-маска
2. анімовані маски
3. Анімована маска: Розрахункова анімація типу Shape
4. Анімована маска: Розрахункова анімація типу Motion
5. Анімована маска. Використання символу типу Movie Clip для створення маски рухається по заданій траєкторії
6. редагування анімації
7. Застосування ефекту Onion skinning (цибулиння)
8. Домашнє завдання: Основи створення анімації в Macromedia Flash MX

• Шар-маска
• анімовані маски
• Анімована маска. Розрахункова анімація типу Shape
• Анімована маска. Розрахункова анімація типу Motion
• Анімована маска. Використання символу типу Movie Clip для створення маски рухається по заданій траєкторії
• Редагування анімації.

Шар-маска

Шар-маска не може використовуватися в поодинці, а повинен бути пов'язаний з одним або декількома звичайними верствами, щодо яких він дає ефект маски. Тобто, вміст пов'язаних шарів видно тільки через «дірки» в масці, а вся інша їх частина залишається невидимою. Більш того, маска може мати анімацію (крім анімації, що використовує направляючу для руху), що дозволить створювати дуже незвичайні ефекти.

В ході роботи на шарі маски, для створення «дірок», найчастіше використовується графічний примітив - заливка. В цьому випадку вона відіграє роль дуже отруйною фарби або кислоти роз'їдає поверхню шару. Лінії такою властивістю не володіють!

Отже, маска може бути створена на основі:

• графічного примітиву - заливки,
• текстового блоку,
• примірника символу типу Graphic або Movie Clip, звичайно ж, за умови, що в цих символах є області заливки.

При роботі з цими елементами слід враховувати, що на маскирующем шарі одночасно можна поміщати об'єкти тільки одного типу - або тільки заливки, або тільки текст, або символи типу Graphic, або символи типу Movie Clip. Причому «звичайних» заливок може бути скільки завгодно, а ось текстової блок або символ може бути тільки один! Послідовність дій при створенні маски наступна:

1. Створіть шар, вміст якого буде «просвічувати» крізь отвори в масці.
2. Дайте команду Insert> Layer, щоб створити новий шар, який надалі буде перетворений в маску. Шар-маска при формуванні повинен розташовуватися безпосередньо над тим шаром, до якого застосовується маска, так що треба простежити, щоб цей зв'язок не порушувалася.
3. Намалюйте об'єкт, який буде використаний як маска: область із заливкою, текстовий блок, екземпляр символу. На шарі-масці такі елементи оформлення, як растрові зображення, градієнтні заливки, прозорість і кольорове оформлення, а також стилі ліній ігноруються. Заповнена область можна вважати цілком прозорою, незалежно від способу заповнення, а будь-який вільний простір залишається непрозорим.
4. Клацніть правою кнопкою миші на імені шару, який повинен використовуватися в якості маски, і виберіть в контекстному меню пункт Mask (маска). Зверніть увагу на зміну значків у шару-маски і у замаскованого шару, а також на той факт, що обидва шару автоматично блокуються. Якщо пізніше виникне необхідність внести зміни на одному з цих шарів, їх доведеться розблокувати. При цьому ефект маски тимчасово відключиться, і ви зможете редагувати вміст шару як зазвичай. Щоб відновити ефект маскування, ці шари треба знову заблокувати.

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

• Перетягнути існуючий шар так, щоб він розташовувався прямо під шаром-маскою.
• Створити новий шар безпосередньо під шаром-маскою.
• Відкрити діалогове вікно властивостей шару і встановити в ньому перемикач Masked (під дією маски).

• Перетягнути маскувати шар так, щоб він розташовувався вище шару-маски.
• Відкрити діалогове вікно властивостей шару і встановити в ньому перемикач Normal (звичайний).

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

анімовані маски

Маску можна змусити переміщатися, використовуючи як покадровую, так і розрахункову анімацію.

За допомогою розрахункової анімації типу Motion можна «оживити» маску, створену на основі текстового поля, заливки представленої у вигляді групи, символу типу Graphic або Movie Clip. Причому для символу типу Movie Clip можна за допомогою провідної верстви задати довільну траєкторію руху. Але зробити це потрібно буде «всередині» самого символу!

За допомогою розрахункової анімації типу Shape можна «оживити» маску, створену на основі графічного примітиву - заливки.

Крім того, для анімації масок можна застосовувати сценарії ActionScript.

Не можна маскувати шари всередині кнопок - символів типу Button. Крім того, кнопка не може виступати в ролі маски.

Розглянемо кілька варіантів створення анімованої маски.

Анімована маска: Розрахункова анімація типу Shape

Створіть новий документ і збережіть його на диску. В ході роботи над роликом вам потрібно буде створити на палітрі Timeline три шари:

Шар text. На цьому шарі розмістіть текстової блок. Для того щоб у вас з'явилася можливість застосувати до тексту градієнтну заливку, «розбийте» текст, двічі звернувшись до команди Break Apart меню Modify.

Шар shadow. Цей шар дозволить вам створити ефект тіні для тексту. Для цього перейдіть на шар з текстом і скопіюйте його в буфер обміну. Потім, повернувшись на шар shadow, використовуйте команду Insert> Paste in Place, застосуєте для цього тексту заливку типу Solid (суцільний) темного кольору і трохи змістите цей текст, використовуючи керуючі клавіші клавіатури. Вийшла густа тінь.

Шар mask. На цьому шарі вам належить створити анімовану маску. Для цього на першому кадрі цього шару, використовуючи інструмент Oval, намалюйте коло порівняно невеликого радіусу. Розмістіть коло по центру щодо сцени (не забувайте про прекрасну палітрі Align). Потім перейдіть до 25 кадру цього шару і зробіть його ключовим. У цьому кадрі розмір кола слід збільшити таким чином, щоб він повністю закривав ваш текст. Поверніться до першого кадру і в палітрі Properties задайте тип анімації Shape. Для того щоб зафіксувати на деякий час останній кадр анімації, перейдіть на 40 кадр і використовуйте команду Insert> Frame.

Використовуючи цю ж команду, «розтягніть» до 40 кадру шар text і шар shadow.

Потім перейдіть на шар mask і, використовуючи контекстне меню Mask, перетворите його в маску.

Протестуйте свій ролик.

Якщо розірвати зв'язок із шаром-маскою і шаром shadow можна отримати ще один дуже цікавий ефект! Експериментуйте з роликом - поміняйте залежність шарів, форму маски ...

Анімована маска: Розрахункова анімація типу Motion

Створіть новий документ і збережіть його на диску. В ході роботи над цим роликом вам також потрібно буде створити на палітрі Timeline три шари.

Шар text. На цьому шарі розмістіть текстової блок. Можна використовувати текст з попередньої роботи.

Шар image. На цьому шарі також розміщений текст, при цьому, як і в попередній роботі, використана команда Insert> Paste in Place. Застосуйте для цього тексту заливку типу Solid, прозорість якої зменшіть, використовуючи палітру Color Mixer до 1% -10%. Ви повинні створити ілюзію того, що в темряві видно якийсь образ.

Шар mask. На цьому шарі вам належить створити анімовану маску - змоделювати рух променя прожектора. Роль прожектора буде «виконувати» символ типу Graphic. Отже, створіть новий символ New Symbol типу Graphic. Усередині символу намалюйте коло, діаметр якого трохи перевищує висоту букв у вашому тексті. Використовуючи палітру Align, помістіть коло в центр символу. Поверніться на сцену, відкрийте бібліотеку ролика і помістіть на неї екземпляр, створеного вами символу, таким чином, щоб він лише стосувався лівого краю сцени. Потім перейдіть до 30 кадру, Ви можете це зробити ключовим і перемістіть екземпляр-прожектор до правого краю сцени, як показано на малюнку. Поверніться до першого кадру і в палітрі Properties задайте тип анімації Motion. Для того щоб зафіксувати на деякий час останній кадр анімації і дати прожектору деякий час «погуляти» поза сценою, перейдіть на 40 кадр і використовуйте команду Insert> Frame.

Використовуючи цю ж команду, «розтягніть» до 40 кадру шар image і шар text.

Потім перейдіть на шар mask і, використовуючи контекстне меню Mask, перетворите його в маску.

Протестуйте свій ролик і помилуйтеся отриманим результатом.

Дозвольте собі сміливий експеримент. Обов'язково спробуйте використовувати в якості анімованої маски блок з текстом!

Анімована маска. Використання символу типу Movie Clip для створення маски рухається по заданій траєкторії

Створіть новий документ і збережіть його на диску. Створіть новий символ типу Movie Clip, всередині якого ви повинні будете організувати рух маски по заданій траєкторії. Для цього на палітрі Timeline вашого символу створіть тимчасовий шар interim, на якому помістіть якийсь пейзаж. Перетворіть пейзаж в групу, вирівняйте групу щодо центру сцени, використовуючи палітру Align. Цей шар в подальшому буде видалений, але на етапі розробки ролика він послужить нам добру службу, дозволивши відкоригувати рух «підзорної труби» - маски.

Створіть новий шар binoculars, в якому намалюйте коло (саме він в подальшому буде грати роль динамічної маски). Не забудьте перетворити його в групу, так як анімація типу Motion не працюватиме з графічним примітивом! Потім створіть для цього шару шар Guide, на якому визначитеся з траєкторією руху маски. Зверніть увагу на палітру Timeline цього символу. Для того щоб зменшити швидкість руху маски ключовий кадр, на якому буде визначено кінцеве положення маски, можна зрушити правіше (наприклад, в ролику, який я використав в цій лекції це не 40 як на малюнку, а 100 кадр). Визначившись з кінцевим положенням маски, поверніться до першого кадру і задайте в палітрі Properties тип анімації Motion. Не забудьте «посадити» коло на лінію траєкторії. «Розтягніть» шари Guide: binoculars і interim, використовуючи команду Insert Frame. Якщо потрібно відкоригуйте траєкторію руху, використовуючи інструменти палітри Tools - Subselection, Pen і Arrow.

Поверніться на сцену. Зверніть увагу, що на палітрі Timeline мого ролика тільки два шари і всього один кадр. У шар landscape помістіть пейзаж. А на новий шар, який в подальшому буде визначений як маска, помістіть екземпляр створеного вами символу. Відкоректуйте положення примірника символу таким чином, щоб розташування пейзажу символу повністю збігалося з розташуванням пейзажу на сцені. Тепер зверніться до бібліотеки ролика і відредагуйте символ, клацніть по ньому правою кнопкою миші і виберіть команду Edit (редагувати). Видаліть шар interim, на якому у вас розміщений пейзаж. Знову поверніться на сцену і перетворите шар mask, на якому ви розташували екземпляр символу, в маску.

Протестуйте свій ролик, помилуйтеся отриманим результатом і, якщо це необхідно, зробіть корекцію анімації.

редагування анімації

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

Щоб змінити положення рамки або послідовність кадрів, просто «перетягніть» їх мишкою.

Щоб «перетворити» ключовий кадр в звичайний кадр використовуйте команду Clear Keyframe. Очищений ключовий кадр і все кадри до наступного ключового кадру заміняться вмістом попереднього очищеного ключового кадру.

Щоб «дзеркально відобразити» анімацію в часі (початок зробити кінцем, а кінець початком, природно, на початку і в кінці повинні бути ключові кадри), виділіть необхідні вам кадри і використовуйте команду Reverse Frames.

Застосування ефекту Onion skinning (цибулиння)

Працюючи в звичайному режимі, Flash відображає на сцені вміст тільки одного кадру анімації, в даний момент часу.

Щоб краще позиціонувати відносно один одного об'єкти, розташовані на різних кадрах при створенні покадрової анімації або при корекції розрахункової анімації ви можете «вивести» на сцену зображення відразу декількох кадрів. Для того щоб перевести Flash в цей режим роботи слід звернутися до кнопочки Onion Skin, яку ви без зусиль знайдете в нижній частині палітри Timeline. В цьому режимі елементи поточного кадру будуть відображені в повному кольорі, а елементи сусідніх кадрів будуть напівпрозорими. Можна трохи трансформувати цей режим за допомогою кнопки Onion Skin Outlines дозволяє представити елементи сусідніх кадрів у вигляді силуетів. Щоб збільшити площу захвату кадрів для будь-якого з цих режимів необхідно «перемістити» маркер режиму вправо. Режим Onion Skinning дозволяє редагувати лише поточний кадр. У тому випадку якщо вам необхідно відкоригувати відразу кілька шарів включите режим Edit Multiple Frames.

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

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

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

По-друге, створити ролик, що дозволяє проілюструвати чудові рядки з вірша Сергія Олександровича Єсеніна:

Синій травень. Зарево теплінь.
Чи не прозвякнет кільце біля хвіртки.
Липким запахом віє полин.
Спить черемха у білій накидці.
У дерев'яні крила вікна
Разом з рамами в тонкі штори
В'яже навіжена місяць
На підлозі мереживні візерунки ...

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

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

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

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

Devakfealk [08.02.2017, 18:27]

Дуже навіть цікаво. Спасибі за інформацію.

Марина Петрівна [09.02.2017, 9:20]

Ефект цибулиння чудовий! Відмінний урок. Може бути Flash і вимре, але для навчання дітей основам анімації це середовище дуже підходить.