Порядок виконання роботи

1. Ознайомитися з інтерфейсом, основними панелями інструментів і прийомами створення, обробки та завантаження зображень і об'єктів у програмі Macromedia Flash MX.

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

3. Оформити детальний звіт про виконання лабораторної роботи з описом п. 2 та відповідями на контрольні запитання.

Контрольні питання

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

2. Що таке панель тимчасової діаграми?

3. Які особливості групування з використанням засобів Arrow, Lasso, Free Transform, Subselect?

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

5. Опишіть основні інструменти рисування.

6. Для чого застосовується оптимізація складу кривих Безьє?

7. Опишіть основні засоби роботи з кольором.

8. Які зображення можна імпортувати у створюваний фільм?

9. Як і для чого застосовується конвертування растрових зображень у векторні?

10. Як використовувати растрові зображення як заливку?

11. Опишіть основні типи тексту в Macromedia Flash.

12. Як здійснюється розбиття тексту на символи?

Література: [2, 6, 7].

Лабораторна робота № 5

Тема. Методи Створення анімації. Створення презентацій з використанням PowerPoint і Flash. Складна анімація. Практичні прийому. Використання звуку. Створення кнопок

Мета роботи: ознайомитися з основними панелями і прийомами створення та обробки анімації, керування і програмуванням кнопок і звукових ефектів у програмі Macromedia Flash MX.

Короткі теоретичні відомості

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

• покадрову анімацію (Frame-by-frame, «кадр за кадром»), коли кожен наступний кадр ви створюєте власними руками;

• автоматичну анімацію (tweened-анімацію), коли ви вибудовуєте лише ключові кадри, а всі проміжні кадри Flash формує самостійно.

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

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

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

• кількістю ключових кадрів (Keyframe);

• частотою зміни кадрів (число кадрів, показаних за одну секунду – frame per second, fps).

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

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

1. Куля у вихідному положенні.

2. Шар упав, але поки цілий.

3. Від кулі відколовся перший шматочок.

4. Від кулі відколовся друга шматочок.

5. На столі лежать осколки кулі.

З урахуванням описаного сюжету, послідовність роботи повинна бути наступною:

1. Створіть на столі чотири зображення, що відповідають зазначеним вище кадрам (для 1-го і 2-го кадрів використовується один і той же – ціла кулька).

Рисунок 1 – Приклад покадрової анімації

2. Створіть новий файл фільму із «чистим» столом, клацнувши на кнопці New (Створити) основний панелі інструментів Flash.

3. На тимчасовій діаграмі в осередку першого кадру клацніть правою кнопкою миші та в контекстному меню виберіть команду Insert Keyframe (Вставити ключовий кадр).

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

5. Клацніть правою кнопкою миші в комірці другого кадру і в контекстному меню виберіть команду Insert Keyframe; при цьому кадр буде відразу помічений як ключовий, оскільки для нього успадковується зображення з попереднього кадру; скористайтеся ним: перемістіть зображення кулі в нижню частину стола.

6. Клацніть правою кнопкою миші в комірці третього кадру і в контекстному меню знову виберіть команду Insert Keyframe; новий кадр також буде позначений як ключовий, і для нього збережеться попереднє зображення, і ви можете або відредагувати його, або просто замінити потрібне.

7. Створіть четвертий і п'ятий кадри, вибираючи в контекстному меню команду Insert Keyframe і розміщуючи на стіл відповідне зображення.

Щоб відтворити фільм, достатньо просто натиснути клавішу <Enter>.

Редагування анімації. При редагуванні анімації найзручніше працювати з панеллю тимчасової діаграми, а точніше – з контекстними меню цієї панелі. Для кожного виду кадрів тимчасової діаграми передбачено власне контекстне меню.

Flash надає наступні можливості щодо редагування анімованої послідовності:

• Корекція вмісту будь-якого ключового кадру.

• Додавання ключових кадрів.

• Додавання простих (не ключових) кадрів. В простому випадку вставка простого кадру дозволяє «продовжити життя» попереднього ключового кадру. Щоб додати простий кадр, слід натиснути правою кнопкою миші на тому ключовому кадрі, після якого ви хочете помістити новий кадр, і вибрати в контекстному меню команду Insert Frame. Простий кадр відображається на тимчасовій діаграмі світлим прямокутником.

• Перетворення ключового кадру на простий виконується за допомогою команди Clear Keyframe, що входить до контекстного меню.

• Копіювання одного або декількох кадрів виконується за допомогою команд контекстного меню Copy Frames і Paste Frames.

• Переміщення одного або декількох кадрів виконується за допомогою команд контекстного меню Cut Frames і Paste Frames.

• Для видалення кадру слід клацнути на ньому правою кнопкою миші та вибрати в контекстному меню команду Remove Frames.

• Для зміни порядку проходження кадрів на зворотний (реверс) слід вибрати послідовність кадрів (вона повинна починатися і закінчуватися ключовим кадром) і в контекстному меню вибрати команду Reverse Frames (розгорнути кадри). Спробуйте, наприклад, за допомогою цієї операції «відновити» розбиту кулю з розглянутого вище прикладу.

Властивості окремого кадру можна також змінити за допомогою панелі інспектора властивостей кадру.

Рисунок 2 – Панель інспектора властивостей кадру

Текстове поле <Frame Label> (Мітка кадру), призначене для введення назви (або мітки) кадру. Список Tween містить перелік можливих способів використання tweened-анімації. Список Sound (Звук) дозволяє вибрати і пов'язати з кадром звуковий символ, якщо ні з одним кадром фільму не пов'язаний звук, то список містить єдиний пункт – None (Ніякий). Кнопка без назви, але з довгим поясненням – Edit the action script for this object (Редагувати сценарій для цього об'єкта) забезпечує виклик панелі редактора ActionScript.

Автоматична анімація руху об'єкта

Flash може створювати два типи tweened-анімації:

• анімацію руху (motion tweening);

• анімацію трансформування об'єкта (shape tweening).

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

Припустимо, що потрібно «перекотити» кульку через стіл зліва направо.

Для анімації руху кульки за допомогою команди Create Motion Tween потрібно виконати наступні дії:

1. Клацніть правою кнопкою в комірці першого кадру і в контекстному меню виберіть команду Create Motion Tween (Створити анімацію руху).

2. Клацніть правою кнопкою в комірці кадру, який ви хочете зробити останнім в анімаційній послідовності (наприклад, 10-й) і в контекстному меню виберіть команду Insert Frame (Вставити кадр).

3. Перемістіть кулю в нову позицію (у праву частину стола).

Для кадру, що входить до tweened-анімацію руху, на панелі інспектора властивостей можуть бути встановлені наступні параметри:

• Можливість масштабування об'єкта. Щоб вирішити цей варіант автоматичної анімації, слід установити прапорець Scale (масштаб).

• Швидкість змін. Ви можете керувати нею, змінюючи значення параметра Easing (Уповільнення): негативні значення цього параметра (від -1 до -100) означають, що зміни будуть поступово прискорюватися, а позитивні значення (від 1 до 100), навпаки, означають поступове уповільнення змін.

• Можливість анімації обертання об'єкта. Вибір напряму і тривалості обертання виконується за допомогою списку Rotate (Обертати) і розташованого поруч з ним текстового поля times (тривалість).

• Можливість завдання нелінійної траєкторії руху об'єкта забезпечується установкою прапорця Orient to Path (Вказати маршрут). Додаткові параметри траєкторії коригуються за допомогою прапорців Sync і Snap.

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

Автоматична анімація трансформації об'єкта

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

Припустимо, що потрібно перемістити хвилинну стрілку з «12» на «6». При розв’язуванні зазначеної задачі потрібно виконати наступні дії:

1. Переконайтеся, що панель інспектора властивостей присутній на екрані. Якщо вона закрита, виберіть у меню Window основного вікна пункт Properties.

2. Увімкніть інструмент Oval і нарисуйте з його допомогою всі елементи «годинника».

3. Увімніть інструмент Arrow і виберіть зображення, яке хочете трансформувати.

4. Клацніть правою кнопкою в комірці того кадру, який ви хочете зробити останнім в анімації (наприклад, 10-й), і в контекстному меню виберіть команду Insert Keyframe.

5. Замініть на столі вихідне зображення тим, в яке воно має бути трансформовано за допомогою інструменту Free Transform.

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

7. У списку Tween виберіть варіант Shape. Створення анімації завершено.

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

Для розстановки вузлових точок потрібно виконати наступні дії:

1. Клацніть лівою кнопкою миші в комірці кадру відповідного вихідного зображення.

2. У меню Modify виберіть каскадне меню Shape, а в ньому – команду Add Shape Hint (Додати вузлову точку). У результаті на зображенні з'явиться «заготовка» першою вузлової точки – гурток червоного кольору з літерою а.

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

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

5. Перемістіть кружок у точку зображення, яка повинна відповідати зазначеній у вихідному кадрі.

6. Поверніться на перший кадр анімованої послідовності та переконайтеся, що колір вузлової точки змінився на жовтий.

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

Створення інтерактивних фільмів

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

Інструмент для роботи з ActionScript реалізований у вигляді діалогової панелі Actions (Дії).

ActionScript дозволяє створювати сценарій для кліпу, кнопки або кадру. Кожен такий сценарій жорстко пов'язаний з відповідним елементом фільму.

Щоб створити сценарій або додати в нього деяку компоненту, необхідно виконати наступні дії:

1. Вибрати на столі екземпляр кнопки або кліпу (або кадр на тимчасовій діаграмі), з яким повинен бути пов'язаний сценарій.

2. Відкрити у списку Action Toolbox необхідний розділ, клацнувши на ньому лівою кнопкою миші.

3. Скопіювати вибраний елемент у вікно сценарію, двічі клацнувши на назві або на значку елемента, або просто перетягнувши його мишею.

4. Увести у відповідних полях необхідні значення параметрів.

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

• Press – користувач натискає кнопку миші, коли вказівник знаходиться над зображенням кнопки (фільму);

• Release – користувач натискає і потім відпускає кнопку миші;

• Release Outside – користувач відпускає кнопку миші, коли вказівник не знаходиться над зображенням кнопки;

• Key Press – користувач натискає певну клавішу на клавіатурі;

• Roll Over – користувач переміщує вказівник на зображення кнопки;

• Roll Out – користувач переміщує вказівник за межі зображення кнопки;

• Drag Over – користувач натискає кнопку миші, коли вказівник знаходиться над кнопкою, виводить його за межі кнопки, і потім знову встановлює над кнопкою;

• Drag Out – користувач натискає кнопку миші, коли вказівник знаходиться над кнопкою, і потім виводить його за межі кнопки.

Створення сценарію для кнопки

Кнопка є найбільш зручним і простим засобом взаємодії користувача з Flash-фільмом.

Управління відтворенням фільму

Найпростішими командами керування фільмом є запуск і переривання його відтворення. Ці команди реалізуються за допомогою визначених дій Play і Stop.

Для включення у фільм інтерактивних кнопок необхідно виконати наступні дії:

1. Додайте у фільм новий прошарок, який буде використовуватися як додатковий фон. Саме у фоновий прошарок слід додати кнопки, щоб вони були присутні на сцені протягом усього фільму.

2. Клацніть мишею в комірці першого ключового кадру в «кнопковому» прошарку.

3. Перетягніть по черзі з вікна бібліотеки на стіл дві кнопки, які ви вирішили використовувати у фільмі.

4. Виберіть першу з кнопок, за допомогою якої фільм повинен припинятися.

5. За допомогою інспектора властивостей кнопки відкрийте панель Actions і клацніть у списку Actions Toolbox на значку розділу Actions.

6. Відкрийте підрозділ Movie Control, відшукайте в ньому дію Stop і двічі клацніть на ньому мишею, у результаті у вікні сценарію з'явиться текст сценарію, який містить обробник onfrelease().

7. Не закриваючи панель Actions, виберіть на столі другу кнопку і призначте їй дію play, повторивши описану вище процедуру.

Щоб перевірити, як працюють створені кнопки, слід вибрати в меню Control команду Test Movie або Test Scene. У результаті фільм буде експортований у формат SWF і потім відтворений за допомогою Flash-плеєра.

Перехід за заданим URL

Дія getURL входить до підрозділу Browser / Network. Ця дія дозволяє завантажити до браузера документ, розташований за вказаною URL, або переслати значення деяких змінних у додаток.

Щоб створити кнопку, що забезпечує перехід за заданим URL, потрібно виконати наступні дії:

1. Додайте у фільм новий «фоновий» прошарок.

2. Помістіть на нього кнопку, якою буде призначено дію getURL.

3. Відкрийте панель Actions.

4. У списку Actions Toolbox відкрийте розділ Actions, потім підрозділ Browser / Network і двічі клацніть у рядку getURL; у результаті у вікні сценарію з'явиться відповідна конструкція мовою ActionScript.

5. Уведіть необхідні значення параметрів.

6. За замовчанням дія getURL виконується за клацанням на кнопці release.

Щоб отримати URL як результат обчислення деякого виразу, установіть прапорець Expression, розташований праворуч від поля URL, і введіть вираз.

Параметр Window задає вікно або фрейм, у який повинен бути завантажений запитаний документ. Значення параметра вибирається за допомогою списку, який містить наступні варіанти:

_self – документ буде завантажений до поточного вікна, або фрейм;

_blank – документ буде завантажений до нового вікна;

_parent – документ буде завантажений до батьківського або поточного фрейма;

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

За допомогою дій loadMovie і unloadMovie можна забезпечити динамічне завантаження додаткових фільмів або їх вивантаження без повторної ініціалізації Flash-плеєра.

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

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

URL = Interact.swf

Location: Level = l Variable = Don't send.

Щоб вивантажити фільм з Flash-плеєра, необхідно призначити якій-небудь кнопці або кадру фільму дію unloadMovie. Для неї повинен бути встановлений єдиний параметр – Location, що визначає рівень фільму (Level), який слід вивантажити.

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

Тому перш ніж приступити до озвучування фільму, помістіть у нього кнопку з назвою «Вимкнути звук». Дія, яку слід пов'язати з кнопкою, входить до розділу Actions і називається Stop All Sounds (Вимкнути всі звуки).

Щоб додати звук до фільму, необхідно виконати наступні дії:

1. Імпортуйте у фільм один або декілька звукових файлів. Для цього в меню File виберіть команду Import, а за допомогою вікна Windows – файл.

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

3. Виберіть у звуковому прошарку кадр, з якого ви хочете почати відтворення звуку; якщо даний кадр не є ключовим, виконайте для нього команду Insert -> Keyframe.

4. Клацніть у комірці першого озвучуваного кадру і в панелі інспектора властивостей виберіть у списку Sound необхідний звуковий символ.

5. Якщо це потрібно, за допомогою вказаних елементів інтерфейсу скоригуйте параметри звуку.

6. У списку Sync виберіть спосіб синхронізації звуку.

7. Визначте тривалість звучання в полі Loops (Цикли).

Рисунок 3 – Панель інспектора властивостей

Щоб додати звук кнопці, виконайте наступні дії:

1. Виберіть символ кнопки у вікні бібліотеки та перетягніть його на стіл.

2. На тимчасовій діаграмі кнопки додайте звуковий прошарок.

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

4. Клацніть правою кнопкою миші в створеному ключовому кадрі та за допомогою елементів керування, установіть параметри звуку.