Види анімації у середовищі Flash. Покадрова анімація

Скачати 119.78 Kb.

Назва	Види анімації у середовищі Flash. Покадрова анімація
Дата	11.04.2013
Розмір	119.78 Kb.
Тип	Документи

bibl.com.ua > Право > Документи

Тема: Види анімації у середовищі Flash. Покадрова анімація

Мета: ознайомити учнів з основними принципами створення анімації та застосування прошарків.

Методичне забезпечення: конспект, дидактичний матеріал "Анімація"

Структура уроку

І. Організаційний момент

ІІ. Актуалізація опорних знань

1. Які Ви знаєте інструменти для вибору об'єктів?

2. Як виконати вибір одного об'єкту або його частини?

3. Як виконати групування об'єктів?

4. Як виконати трансформацію об'єкту?

5. Які інструменти малювання Вам відомі?

6. Як задати параметри об’єкта, що будується?

7. Як змінити колір контуру фігури?

8. Що таке “градієнтна заливка”?

9. Як ввести текстову інформацію, в програмі Flash MX?

10. Які текстові блоки ви знаєте?

ІІІ. Пояснення нового матеріалу

1. Покадрова анімація

2. Трансформаційна анімація.

3. Прошарки

1. Покадрова анімація

Програма Flash MX дозволяє створювати анімацію двома способами. Перший вид анімації - це покадрова, другий - трансформаційна.

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

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

Рис.1

Наш фільм буде містити п’ять кадрів. Задайте частоту кадрів рівну 6, для цього виберіть в меню Modify пункт Document, введіть в поле введення Frame Rate число 6 і натисніть ОК. Далі намалюємо перший кадр, він буде виглядати як показано на Рис.1.

Зверніть увагу на верхню частину вікна Flash. Там знаходиться шкала з кадрами, при допомозі якої створюється анімація, і покадрова, і трансформаційна. В ній схематично зображено послідовність намальованих нами кадрами. Якщо натиснути мишкою на потрібний кадр, то його вміст з’явиться на екрані. При створенні покадрової анімації всі кадри будуть основними. Один основний кадр у нас вже є — це перший кадр. Тепер нам потрібно просто додавати нові кадри до вже створених, формуючи таким чином послідовність кадрів. Алгоритм нашої роботи буде таким:

Малювання зображення для нового кадра;

Перехід до наступного кадра (просто натисніть на кадр лівою клавішою миші в шкалі з кадрами);

Якщо не кінець фільма, то перехід до першого пункту.

Основний кадр, який містить зображення, на шкалі з кадрами відображається темно-сірим прямокутником з чорною крапкою. Порожній основний кадр відображається білим прямокутником з чорною рамкою.

Для того, щоб створити новий основний кадр, виділіть перший порожній кадр правіше останнього основного кадра і виберіть пункт Keyframe в меню Insert, або пункт Insert Keyframe в контексному меню виділеного порожнього кадра. Новий основний кадр буде створено. При цьому вміст попереднього основного кадра копіюється в новостворений. Таким чином, вам не потрібно буде малювати кожен кадр з початку, а тільки підправити попереднє зображення. Якщо ж вам потрібно створити порожній основний кадр, виберіть пункт Blank Keyframe в меню Insert. Інколи потрібно, щоб в деякий момент часу зображення не рухалось. Для цього потрібно розтягнути відповідний основний кадр. Переглянути новостворений фільм в середовищі Flash можна натиснувши . Також ви можете вибрати пункт Play меню Control. Для зациклювання фільма ввімкніть пункт Loop Playback в меню Control. Для управління фільмом виберіть пункт Controller в підменю Toolbars меню Window. Для перегляду фільма в окремому вікні виберіть пункт Test Movie в меню Control.

Flash MX дає можливість вносити зміни в створений фільм. Розглянемо яким чином це можна зробити. Отже, якщо вам потрібно вставити основний кадр в середину послідовності кадрів, потрібно звільнити місце в послідовності кадрів. Flash розтягне попередній кадр, створивши допоміжний, який в свою чергу, можна перетворити на основний. Виділіть допоміжний кадр і виберіть пункт Insert Keyframe. Перетворити допоміжний кадр в основний можна іншим чином: виділіть потрібний кадр і виберіть підменю Frames меню Modify або в контексному меню виділеного кадра пункти Convert to Key Frames або Convert to Blank Key Frames. Перший пункт перетворює кадр в основний і копіює в нього зображення з розтягнутого. Другий пункт - перетворює кадр в порожній основний. Зворотня операція перетворення основного кадра в допоміжний (тобто, знищення основного кадра, зробивши його частиною розтягнутого) також можлива. Для цього виділіть потрібні основні кадри і виберіть пункт Clear Keyframe в меню Insert. Знищувати непотрібні кадри можна використовуючи пункт Remove Frames в меню Insert. Пункти Cut Frames і Copy Frames меню Edit дозволяють відповідно переміщувати і копіювати виділені кадри в буфер обміну. Пункт Paste Frames меню Edit вставляє кадри з буфера обміну. В меню Edit пункт Clear Frames знищує вміст виділеного кадра.

Будь-який достатньо довгий і складний фільм поділяється на окремі сцени -завершені епізоди, які в достатній мірі не залежать один від одного. Кожна сцена повинна мати унікальне ім’я. Нумерація кадрів з використанням сцен виконується таким чином: наприклад, якщо в фільмі є дві сцени по 10 кадрів кожна, то перша сцена буде містити з 1 по 10 кадр, друга - з 11 по 20.

Для управлінням сценами - створенням, зміною, знищення, впорядкування - існує панель Scene. Для вивидення її на екран, виберіть пункт Scene в меню Window. (Рис.2)

Рис.2

Для того, щоб додати нову порожню сцену, натисніть кнопку Add Scene . Для дублювання існуючих сцен виділіть потрібну сцену і натисніть кнопку Duplicate Scene . Для знищення непотрібної сцени виділіть її і натисніть кнопку Delete Scene.

Якщо переглядати створений фільм в середовищі Flash (вибраний пункт Play в меню Control), майте на увазі, що за замовчуванням демонструється зміст поточної сцени. Для перегляду всіх сцен виберіть пункт Play All Scenes в меню Control. При перегляді фільма в окремому вікні (вибраний пункт Test Movie в меню Control) завжди демонструються всі сцени фільма. Якщо ж ви бажаєте переглянути в окремому вікні тільки поточну сцену, виберіть пункт Test Scene в меню Control.

2. Трансформаційна анімація.

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

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

Відкрийте файл створеного нами фільма в середовищі Flash MX і створіть в ньому нову порожню сцену. Перемістіть її на початок списка. Назва фільма повинна з’являтись на початку фільма. Створіть текстовий блок, помістіть його в центрі робочого листа і напишіть: МІЙ ПЕРШИЙ ФІЛЬМ.

Перейдемо до створення трансформації руху. Спочатку створемо два основних кадра, а вже потім - анімацію.

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

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

Створимо другий основний кадр. Виділіть на шкалі кадрів кадр № 6. Створіть новий основний кадр, вибравши пункт Keyframe в меню Insert. Перший основний кадр відразу ж розтягнеться, заповнюючи весь вільний простір від початку послідовності до другого основного кадра. Виділіть другий основний кадр і перемістіть назву фільма в середину листка. Знову виділіть перший основний кадр. Зверніть увагу, що при цьому Flash автоматично виділила все, що знаходиться на робочому листі. Відкрийте редактор властивостей (properties). В списку Tween виберіть пункт Motion.

Увага: анімація створюється для всього листка, тому в одному прошарку може знаходитись тільки один анімований елемент.

Натисніть мишкою по робочому листі і натисніть . Анімація працює.

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

Для цього одразу після завершення першої анімації впритул потрібно додати другу. Тобто, щоб другий основний кадр першої послідовності став першим основним кадром для другої. (Рис.2.1)

Рис.2.1

Виділимо другий основний кадр першої анімації на шкалі кадрів і виберемо в меню Insert пункт Create Motion Tween. Далі вставимо в кадр № 12 новий основний кадр. Виберіть пункт Alpha в списку, який розташований в правому верхньому куті редактора властивостей. В поле введення з регулятором введем значення 0%. - повна прозорість. Натисніть - результат з’явиться на екрані.

Розглянемо редактор властивостей, коли вибрано основний кадр анімації.

В верхньому лівому куті редактора, нище напису Frame знаходиться поле введення Frame Label. За допомогою якого можна задати ім’я кадра.

Прапорець Scale відповідає за маштабування елементу анімації.

Використовуючи поле введення з регулятором Easing ви можете задати ступінь уповільнення руху елемента при завершенні анімації. Значення від 1 до 100 - рух елемента почнеться швидко, а потім уповільнеться; значення від -1 до -100 - рух елемента почнеться повільно, а потім прискориться. Значення 0 означає, що елемент завжди буде рухатись рівномірно.

Список Rotate задає напрям обертання анімованого елемента, якщо воно було задіяне. Доступні чотири пункти:

None - елемент не буде обертатися взагалі, навіть якщо було задано обертання;

Auto - елемент буде обертатися в тому напрямку, в якому було задано обертання;

CW - елемент завжди буде обертатися в напрямку за годинниковою стрілкою;

CCW - елемент завжди буде обертатися в напрямку проти годинникової стрілки.

Трансформація руху застосовується тільки для екземплярів, груп і текстових блоків.

Трансформація форми - це плавна зміна форми графічного фрагмента. На відміну від трансформації руху вона може застосовуватись до “звичайної графіки”. Для перетворення графічного фрагмента в “звичайну графіку” виберіть пункт Break Apart меню Modify. На відміну від трансформації руху, трансформація форми може застосовуватись відразу для кількох графічних фрагментів.

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

Виділіть перший основний кадр анімації і виберіть в списку Tween редактора властивостей пункт Shape. Трансформація форми буде створена.

Очевидно, трансформація руху підходить в тих випадках, коли використовуються екземпляри, групи або текстові блоки. А екземпляри потрібні, коли ваша графіка містить багато однакових елементів.

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

3. Прошарки

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

Переваги, які надають прошарки:

· Фрагменти графіки не перекриваються і не дотикаються один з одним;

· Відомо, що методом трансформації руху можна анімувати тільки один графічний елемент в прошарку. Але, якщо прошарків може бути скільки завгодно, то і кількість анімованих елементів також не обмежена;

· Створення деяких спеціальних ефектів, таких, як прошарки-направляючі і маскуючі прошарки.

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

Лівіше вже відомої шкали кадрів розміщується список прошарків (Рис.3.1).

За замовчуванням Flash створює один прошарок з назвою Layer 1. Але ви можете додати прошарок, натиснувши кнопку Insert Layer .

Створимо невеличкий фільм, який демонструє як можна анімувати відразу кілька графічних елементів. А саме: нерухомий фон і два рухомих елементи — квадрат і коло. Створимо три прошарки. Надамо їм зрозумілі імена. Наприклад, коло, квадрат і фон, розмістимо їх зверху вниз.

Спочатку створимо нерухомий фон. Колір фона задається за допомогою селектора кольору Background Color Document Properties. Якщо ж ви бажаєте для фону робочого листа створити градієнтну або графічну заливку, розмістіть в самому нижньому прошарку прямокутник розмірами, як робочий лист, і задайте для нього потрібну заливку.

Отже, створіть фон блакитного кольору. Далі виділіть прошарок “квадрат” і намалюйте на робочому листі квадрат або прямокутник. Перетворіть його в графічний символ. Для цього виділіть його (контур і заливку) і виберіть в меню Insert пункт Convert to Symbol. Ввімкніть перемикач Graphic і натисніть ОК. Після цього Flash створить новий символ і автоматично замінить виділений квадрат екземпляром цього символу. В прошарку “коло” намалюйте еліпс і, аналогічно, перетворіть його в символ.

Виділіть прошарок “квадрат”. Перемістіть квадрат в верхню точку траєкторії. Виберіть пункт Create Motion Tween в меню Insert. Створіть новий основний кадр №10 на шкалі кадрів і перемістіть квадрат в нижню точку траєкторії.

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

Виділіть прошарок “коло”. Перемістіть квадрат в ліву точку траєкторії. Виберіть пункт Create Motion Tween в меню Insert. Створіть новий основний кадр №10 на шкалі кадрів і перемістіть квадрат в праву точку траекторії.

Натисніть - анімація працює.

Список прошарків складається з чотирьох колонок:

· Ім’я прошароку;

· Видимість прошарку (помічена зображенням ока);

· Блокування прошарку (помічена зображенням замка);

· Відображення змісту прошарку різними кольорами (помічено чорним прямокутником).

Видимість прошароку — дозволяє забрати з робочого листа на деякий час прошарок разом з його змістом.

Блокування прошароку — графіка, яка знаходиться в прошарку недоступна для зміни.

Відображення змісту прошароку різними кольорами — відображає зміст прошарку схематично і розфарбовує його різними кольорами.

Для організації прошарків в ієрархічну структуру Flash пропонує папки. Використовуючи їх ви можете “розкласти” по окремим “поличкам” прошарки, в яких знаходяться різні графічні елементи.

Для створення папки, натисніть кнопку Insert Layer Folder .

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

Можна перетворювати прошарок в папку і навпаки. Для цього натисніть двічі по значку, який знаходиться лівіше імені прошарку, або виберіть пункт Layer в меню Modify. На екрані з’явиться діалогове вікно Layer Properties. Ввімкніть перемикач Folder в групі Type і натисніть ОК. Майте на увазі, що зміст прошарку при цьому зникне.

Для того, щоб перетворити папку в прошарок, виберіть перемикач Normal.

Flash містить функції для розподілу виділених графічних елементів по різних прошарках. Якщо, наприклад, потрібно “розкидати” кожну літеру деякого слова по окремим прошарках, то потрібно виконати наступне: введіть потрібне слово в перший прошарок. Розбийте його на окремі символи (виберіть пункт Break Apart в меню Modify). Після цього виберіть пункт Distribute to Layers в меню Modify.

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

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

Для того, щоб створити направляючий прошарок і прив’язати до нього об’єкт, виберіть прошарок в якому знаходиться анімований об’єкт, і виберіть пункт Motion Guide в меню Insert. Створений направляючий прошарок з’явиться над виділеним прошароком. Перейдіть на направляючий прошарок і намалюйте потрібний шлях руху об’єкта. Виділіть анімований об’єкт і перемістіть його так, щоб його точка фіксації “приклеїлась” до лінії шляху. Flash автоматично виконає “приклеювання”, якщо в редакторі властивостей ввімкнути прапорець Snap. “Сховайте” направляючий прошарок. Для цього натисніть мишкою на чорній крапці, яка знаходиться в другій колонці списку прошароків.

В редакторі властивостей знаходиться ще один прапорець — Orient to Path. Якщо він ввімкнений, то Flash буде автоматично орієнтувати графіку по лінії шляху.

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

Дуже часто на web сторінках зустрічаються зображення, по яким “ковзає” промінь — кругла світла пляма, яка висвічує зображення частинами. Прошарок, на якому знаходиться світла пляма називається прошарком маскою. А прошарок, в якому знаходиться зображення — замаскованим прошарком.

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

Створіть новий файл з будь-яким графічним зображенням. Розташуйте над цим прошарком інший і намалюйте в ньому зображення, яке буде маскою. Наприклад, коло. Перетворіть намальоване графічне зображення в символ. Анімуйте його. “Розтягніть” єдиний основний кадр прошарку, який містить замасковане зображення так, щоб він покрив всю анімацію. Виділіть прошарок-маску і виберіть в контекстному меню пункт Mask.

Таким чином можна замаскувати кілька прошарків. Головна вимога при цьому, щоб вони знаходились нижче прошарку-маски.

“Витягнути” замаскований прошарок не складно — розташуйте їх над прошарком-маскою.

IV. Закріплення вивченого матеріалу

1. Що називають по кадровою трансформацією?

2. Що називають основними і допоміжними кадрами? Як задати ключовий кадр?

3. Що називають трансформацією руху?

4. Що таке трансформація форми?

5. Які параметри дозволяє задати редактор властивостей для кадру трансформаційної анімації?

6. Що таке прошарок?

7. Перерахуйте переваги, які надають прошарки.

8. Як змінювати параметри прошарку.

V. Домашнє завдання: конспект

Схожі:

Урок художньої культури 9клас Тема: Анімація. Мультиплікація. Види анімаційного кіно Мета: Ознайомити учнів з мистецтвом анімації, історією виникнення і розвитку,видами і технологіями анімаційного кіно	КОНСПЕКТ УРОКУ ТЕМА Практична робота №10. Основні типи анімації у презентаціях Flash ЗАБЕЗПЕЧЕННЯ: інструкція по лабораторній роботі, персональний комп’ютер з програмою
КОНСПЕКТ УРОКУ ТЕМА Практична робота №10. Основні типи анімації у презентаціях Flash ЗАБЕЗПЕЧЕННЯ: інструкція по лабораторній роботі, персональний комп’ютер з програмою	Уроку: Робота зі звуком у середовищі Flash Все це було в новинку, як і перші фанерні літаки, і перші телефони, в які потрібно було кричати на все горло, як і чотири паралельні...
Уроку: Середовище та основні поняття Flash Сфера використання Flash різна, це можуть бути ігри, веб-сайти, презентації, банери і просто мультфільми. При створенні продукту...	Мета: узагальнення і систематизація теоретичних знань, формування... Обладнання та методичне забезпечення: персональні комп’ютери, програмне забезпечення Macromedia Flash MX, роздатковий дидактичний...
Тема: «Робота в середовищі текстового редактора» Мета: сформувати навички роботи в середовищі текстового редактора Microsoft Word	Реферат на тему: «Системи управління охороною праці на підприємстві» Людина та її здоров'я найбільша цінність Української держави. Держава докладає великих зусиль, створюючи умови безпечної життєдіяльності...
Реферат на тему: «Системи управління охороною праці на підприємстві» Людина та її здоров'я найбільша цінність Української держави. Держава докладає великих зусиль, створюючи умови безпечної життєдіяльності...	Уроку: Анімація в презентаціях Обладнання: ПК, прикладне програмне забезпечення Microsoft Power Point, картки із завданнями, опорний конспект, папка з малюнками...

Додайте кнопку на своєму сайті:
Портал навчання