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

Размещено на http://www.allbest.ru/

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

Мета уроку:

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

- розвивальна: розвивати інтерес до предмета, мислення, пам'ять;

- виховна: виховувати свідоме ставлення до вибору майбутньої професії.

Методи навчання: бесіда, пояснення.

Тип уроку: засвоєння нових знань.

Навчально методичне забезпечення уроку: комп'ютери, презентація, підручник, дидактичний матеріал "Анімація".

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. Прошарки

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

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

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

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

Рис. 1

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

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

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

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

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

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

Для того, щоб створити новий основний кадр, виділіть перший порожній кадр правіше останнього основного кадра і виберіть пункт Keyframe в меню Insert, або пункт InsertKeyframe в контексному меню виділеного порожнього кадра. Новий основний кадр буде створено. При цьому вміст попереднього основного кадра копіюється в новостворений. Таким чином, вам не потрібно буде малювати кожен кадр з початку, а тільки підправити попереднє зображення. Якщо ж вам потрібно створити порожній основний кадр, виберіть пункт BlankKeyframe в меню Insert. Інколи потрібно, щоб в деякий момент часу зображення не рухалось. Для цього потрібно розтягнути відповідний основний кадр. Переглянути новостворений фільм в середовищі Flash можна натиснувши <Enter>. Також ви можете вибрати пункт Play меню Control. Для зациклюванняфільма ввімкніть пункт LoopPlayback в меню Control. Для управління фільмом виберіть пункт Controller в підменю Toolbars меню Window. Для перегляду фільма в окремому вікні виберіть пункт TestMovie в меню Control.

Flash MX дає можливість вносити зміни в створений фільм. Розглянемо яким чином це можна зробити. Отже, якщо вам потрібно вставити основний кадр в середину послідовності кадрів, потрібно звільнити місце в послідовності кадрів. Flash розтягне попередній кадр, створивши допоміжний, який в свою чергу, можна перетворити на основний. Виділіть допоміжний кадр і виберіть пункт InsertKeyframe. Перетворити допоміжний кадр в основний можна іншим чином: виділіть потрібний кадр і виберіть підменю Frames меню Modify або в контексному меню виділеного кадра пункти ConverttoKeyFrames або ConverttoBlankKeyFrames. Перший пункт перетворює кадр в основний і копіює в нього зображення з розтягнутого. Другий пункт - перетворює кадр в порожній основний. Зворотня операція перетворення основного кадра в допоміжний (тобто, знищення основного кадра, зробивши його частиною розтягнутого) також можлива. Для цього виділіть потрібні основні кадри і виберіть пункт ClearKeyframe в меню Insert. Знищувати непотрібні кадри можна використовуючи пункт RemoveFrames в меню Insert. Пункти CutFrames і CopyFrames меню Edit дозволяють відповідно переміщувати і копіювати виділені кадри в буфер обміну. Пункт PasteFrames меню Edit вставляє кадри з буфера обміну. В меню Edit пункт ClearFrames знищує вміст виділеного кадра.

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

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

Рис. 2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рис. 3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. Прошарки

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

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

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

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

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

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

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

Рис. 4

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

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

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

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

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

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

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

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

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

Ім'я прошарку;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

виховання анімація зображення кадр

Размещено на Allbest.ru