Тема. Інтерактивність

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

Кнопка має область активності (Hit) і може перебувати у 3–ох станах, що залежать від дій користувача:

1. Звичайний стан (Up). Ніяких дій з кнопкою не проводиться.

2. Курсор знаходиться у зоні активності кнопки, але ліва кнопка мишки не натиснута (Over).

3. Курсор знаходиться у зоні активності кнопки, і ліва кнопка мишки натиснута (Down).

Завдання1. Сворити кнопку у MF.

1. Відкрийте новий документ File > New і створіть символ Insert > New Symbol… (Ctrl + F8).У вікні, що розкриється, встановіть радіокнопку у позицію Button.

2. Зверніть увагу на закладки Up, Over, Down, Hit у верхній частині вікна редагування кнопки. При виборі чергової закладки ви одержите доступ до редагування чергового стану кнопки.

3. Переконайтесь, що в даний момент активна закладка Up і намалюйте з допомогою інструмента Rectangle (R) прямокутник, що утворює кнопку. Кнопку доповніть текстом «Кнопка 1».

4. Виберіть закладку Over. Щоб скопіювати стан із кадра Up виберіть Insert > KeyFrame (F6) і перетворіть об’єкт так, щоб він відповідав стану наведеної на нього мишки. Наприклад, можна залити поле прямокутника з допомогою інструмента Paint Bucket (U) більш світлим кольором.

5. Виберіть закладку Down, вставте попередній кадр через Insert > Key Frame (F6), і не знімаючи виділення, зсуньте кнопку при допомозі клавіш управління курсором на одну позицію вправо і вниз. Це створить ефект западання кнопки під час натискування.

6. Для того, щоб задати область активності кнопки, слід у вікні Hit помітити об’єкт відповідної форми. Решта атрибутів об’єкта не мають значення. Щоб зробити область відповідною кнопці, вставте у вікні Hit порожній кадр Insert > Blank KeyFrame (F7) і скопіюйте кнопку з вікна Up у вікно Hit через Edit > Paste in Place (Ctrl + Shift + V).

7. Поверніться в основну сцену, викличте палітру Library через Windows > Library (Ctrl + L) і перетягніть об’єкт button в середину робочого поля.

8. Подивіться, що вийшло. Зробити це можна двома способами:

- (Ctrl + Enter);

- включити опцію Control > Enable Buttons (Ctrl + Alt + B), яка дозволяє включати або відключати реакцію кнопок під час редагування.

Ускладнення кнопки

Насправді кнопка представляє собою Movie Clip і кадрами Up, Over, Down слід оперувати як звичайними кадрами на Timeline. Отже, базуючись на 3–ох станах, можна присвоїти кнопці будь-які анімовані ефекти.

Завдання2. Удосконалимо кнопку спливаючою підказкою. Підказка є кліпом, який повинен програватися в момент проходження курсору в зоні активності кнопки.

1. Створіть новий символ Insert > New Symbol… (Ctrl + F8). У діалоговому вікні, що розкриється встановіть радіо кнопку у позицію Graphic і задайте у полі Name унікальне ім’я button1.

Намалюйте об’єкт, який буде представляти собою спливаючу підказку. Доповніть підказку текстом.

2. Ще раз створіть новий символ. Цю операцію можна здійснити, натиснувши у нижній частині палітри Library на символі + .Але на цей раз у вікні, що розкриється, слід встановити радіокнопку у позицію Movie Clip і задати у полі Name унікальне ім’я ballon_help1.

3. Помістіть з палітри Library об’єкт ballon у 1 – й кадр кліпа ballon_help. зробіть ключовими кадри 10 і 20 (F6).

4. Двічі клацніть мишкою між 10 – м і 20 – м кадрами, виберіть у вікні, що розкриється, закладку Tweening і встановіть Motion.

5. Двічі клацніть по 20 - му кадру на Timeline. У меню, що розкриється виберіть закладку Actions. Натисніть кнопку і виберіть оператор Stop. Таким чином, ми зупинимо програвання кліпа на останньому кадрі.

6. Виберіть 10 й – кадр і двічі клацніть по об’єкту ballon 1.Увікні, що розкриється виберіть закладку Color Effect. Виберіть параметр Alpha і встановіть повзунок у крайнє ліве положення, щоб числове значення у процентах стало рівним 0. Тепер – маленька хитрість. За задумом, 1–й кадр даного кліпу нам не потрібний, але не поспішайте його вилучати: він скоро стане у пригоді.

7. Для того, щоб використати спливаючу підказку у кнопці, у палітрі Library виберіть об’єкт button 1, і клацнувши правою кнопкою мишки, ввійдіть у меню Edit.

8. Активізуйте кадр Over і перетягніть з палітри Library об’єкт ballon_help і позиціонуйте його справа від кнопки.

Ось тут нам і знадобиться та хитрість, яку ми згадували на 7 кроці. Справа у тому, що MF під час редагування відображає на місці кліпу зміст його першого кадру. Якщо цей кадр порожній, то на місці кліпу відображається крапка і точно його позиціонувати неможливо. Відредагуйте символ ballon_help так, як це було зроблено на 8–му кроці з об’єктом button 1, і вилучіть об’єкт ballon з першого кадру з допомогою клавіші Del. Запустіть ролик (Ctrl + Enter).

Організація переходів (необов’язкове завдання)

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

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

1. Виконуючи кроки 1–9 з попереднього завдання, створіть ще дві кнопки. Щоб вони розрізнялись, модифікуйте тексти на кнопках і спливаючих меню. Нові об’єкти слід назвати button2, button3, ballon2, ballon3, ballon_help2, ballon_help3 відповідно.

2. Розмістіть об’єкти button1, button2 і button3 у лівій часині робочого поля і вирівняйте їх положення з допомогою палітри Object: Window > Info (Ctrl + I), задавши координати x і y.

3. Зробіть ключовим 4–й кадр Insert > KeyFrame (F6) і застосуйте до нього команду Modify > Timeline > Clear KeyFrame (SHIFT + F6). Таким чином, кнопки будуть доступними на протязі перших чотирьох кадрів.

4. Створіть новий шар на Timeline.

5. Виділіть на Timeline 2–й кадр нового шару (у нас Layer 2) і зробіть його порожнім Insert > Blank KeyFrame (F7). З допомогою інструмента Text Tool (T) створіть текстовий коментар, що представляє собою 1–шу подію. Наприклад: «Подія 1». Повторіть ці операції для 3–го і 4–го кадрів, помістіть у коментар текст «Подія 2» і «Подія 3» відповідно.

6. Виберіть 1–й кадр нового шару (у нас Layer2) і активізуйте закладку Action. Натисніть на кнопку і, у меню, що розкриється виберіть команду Stop. Ця команда необхідна для того, щоб ролик після запуску зупинився на 1–му кадрі.

7. Тепер перейдемо безпосередньо до організації посилань від кнопок.

У сцені клацніть мишкою по об’єкту button1. У вікні, що розкриється виберіть закладку Action і, натиснувши кнопку , виберіть команду On Mouse Event. Дана команда відслідковує подію, проведену мишкою у відношенні до об’єкта, до якого вона прописана. Справа відображений список можливих дій. Виберіть Press (відслідковує натискування лівої клавіші мишки).

Тепер так само вставте команду GoTo. Встановіть радіокнопку у позицію Frame: Number і задайте значення 2.

Повторіть дії, описані у цьому кроці, для об’єктів button2 і button3, вказавши відповідно для Frame Number значення 3 і 4.

8. Запустіть ролик (Ctrl + Enter).