5.4 Висновки
Загальні рекомендації з експорту звуку. Не зациклюйте потокові звуки. Коректуйте точки початку й закінчення звуків, щоб не зберігати тишу. Використовуйте той самий звук, застосовуючи до нього різні ефекти, щоб досягти ілюзії відтворення різних звуків. Використовуйте індивідуальний режим стиску для різних звукових файлів. Використовуйте Loop-фрагменти (Петлі) для коротких звуків при створенні фонової музики.
5.5 Контрольні запитання та завдання
Для чого призначена система Flash МХ?
На якій метафорі заснована система Flash МХ?
Які елементи постійно знаходяться у вікні Cast?
Для чого призначене вікно Score?
Поясніть, що бачитиме глядач під час відтворення фільму.
Які інструменти існують у системі Flash МХ для створення нової графіки і редагування графічних об’єктів, імпортованих з інших програм?
Куди автоматично міститься все, що створюється у вікні Paіnt?
Скільки фільмів одночасно можна редагувати в системі D Flash МХ?
6 Лабораторна робота № 5. Розробка інтерактивних елементів в flash мх
6.1 Мета роботи
Дотепер ми розглядали Flash-фільми, які відтворювалися без втручання глядача від початку й до кінця. Однак Flash дозволяє також створювати інтерактивні додатки, у яких користувач може управляти демонстрацією контенту. У даній роботі ми розпочнемо ознайомлення з елементами мови опису сценаріїв Action Script і розглянемо, як з його допомогою можна створити інтерактивні додатки.
6.2 Методичні вказівки для самостійної підготовки студентів
Як приклад створимо фотоальбом з елементами інтерактивного інтерфейсу. Але перш ніж приступити до опису Action Script, слід розповісти ще про один вид символів, які ми дотепер залишали без уваги, – це символи-кнопки. Для побудови інтерактивного інтерфейсу вони просто необхідні.
Створення кнопок. Кнопка являє собою чотирикадровий інтерактивний мувiкліп. Коли ми привласнюємо символу тип «Кнопка», Flash створює для нового символу монтажну лінійку з чотирьох кадрів:
Up-стан – це кадр, що відповідає ситуації, коли кнопка не натиснута і покажчик мишки розташований не над кнопкою;
Over-стан – кадр, що ілюструє вид кнопки, коли покажчик мишки розташований над кнопкою, але кнопка не натиснута;
Down-стан – даний кадр показує вид кнопки при її натисканні;
Hit-стан – визначає область, у якій кнопка реагує на клацання мишки; цю область у кліпі не видно.
Щоб створити кнопку, виконайте команду Insert => New Symbol (можна набрати поєднання клавіш Control+F8). У діалоговому вікні, що з'явилося, Create New Symbol уведіть ім'я символу-кнопки (наприклад, but1) і виберіть тип символу Button («Кнопка»).
6.3 Порядок виконання роботи
Flash переключиться у режим редагування символу, надавши кадри Up, Over, Down й Hit. Перший кадр Up стає порожнім ключовим кадром. Нарисуємо в цьому кадрі ненатиснутий вид кнопки (див. рис. 6.1).
Рисунок 6.1 – UP-кадр кнопки
Виділимо другий кадр, позначений як Over і відповідний стану, коли курсор занесений над кнопкою. Вставимо в цьому кадрі ключовий фрейм (за командою Insert => Keyframe ), у результаті чого з'явиться ключовий кадр, що повністю повторює зміст Up-кадру. Змінимо кольори кнопки.
Аналогічно додається наступний кадр (Down-кадр) де буде нарисований натиснутий стан кнопки.
Перейдемо до основної сцени, викличемо бібліотеку за командою Window => Library і створимо екземпляр символу кнопки шляхом перетаскування його на сцену. У результаті одержимо наступний фільм. Натискання кнопки відбувається не тільки тоді, коли ми натискаємо мишкою на центральну (робочу) зону кнопки, але й при натисканні на рамку навколо її. Пов'язано це з тим, що якщо Hit-кадр не нарисований, то робоча область кнопки відповідатиме Up-кадру.
Для того щоб натискання кнопки відбувалося тільки в робочій зоні, необхідно у Hit-кадрі визначити цю зону, тобто нарисувати кнопку без рамки.
Після того як ми додамо необхідний Hit-кадр, одержимо наступний фiльм, у якому при натисканні на рамку продавлення кнопки не відбувається.
Щоб зробити кнопку інтерактивною, необхідно зв'язати факт натискання кнопки з виконанням певних команд, тобто описати певний сценарій. Для задання сценаріїв у Flash існує спеціальна мова Action Script.
Поняття про Action Script. Action Script являє собою мову написання сценарію – набору інструкцій, які управляють елементами Flash-фільму. Сценарії Action Script можуть бути вбудовані у фільм або зберігатися в зовнішньому текстовому файлі з розширенням *.AS. При вбудовуванні сценарію у фільм його можна впроваджувати в різні частини фільму. Точніше, сценарії Action Script можуть містити ключові кадри, екземпляри кнопок та екземпляри мувiклiпiв. Відповідно сценарії називаються сценаріями кадру (Frame Action), сценарієм кнопки (Button Action) і сценарієм кліпу (MovieClip Action). Сценарії Action Script виконуються з настанням певних подій, ініційованих користувачем або системою. Механізм, що вказує програмі Flash, який оператор слід виконати при настанні тієї або іншої події, називається оброблювачем подій. Action Script має власний синтаксис, багато в чому схожий із синтаксисом JavaScript. Flash MX 2004 підтримує Action Script усіх попередніх версій Flash. Одним з основних понять Action Script є Actions - команди, які видають інструкції під час виконання SWF-файла. Наприклад, gotoAndStop() відсилає відтворюючу голівку (Рlayhead) на певний кадр або позначку. Від слова Actions і відбувається назва мови – Action Script (дослівно – сценарій дій).
Продемонструємо використання кнопок для керування Інтерактивним фотоальбомом – створимо набір фотографій і додамо дві кнопки, які перегортатимуть фото вперед і назад.
Помістимо на основній монтажній лінійці перше фото і додамо кнопку зі стандартного набору. Для доступу до потрібної папки слід виконати команду Windows => Сontrol Panels Common Libraries => Buttons.
У результаті виконання даної команди з'явиться панель, яка містить великий набір заздалегідь нарисованих кнопок різних типів. Виберемо, наприклад, Key Buttons (кнопки, схожі на клавіатурні клавіші), відкриємо відповідну папку, виберемо кнопку key-left (див. рис. 6.2) і створимо екземпляр даної кнопки (шляхом перетаскування її на сцену).
Рисунок 6.2 – Елементи папки Key Buttons
Зверніть увагу, що коли ви встановлюєте другу кнопку (key-right) на сцені та переміщаєте її, щоб установити на одному рівні з першою кнопкою, програма дає підказку (пунктирну лінію), яка дозволяє точно позиціювати кнопку.
Для того щоб додати сценарій, необхідно викликати редактор Action Script за командою Window =>Development Panels => Actions або натиснувши клавішу F9. Якщо ви збираєтеся часто писати скрипти, то цю клавіатурну команду слід запам'ятати. У результаті з'явиться редактор Action Script.
Редактор Action Script підказує, на який елемент можна «вішати» код. Якщо виділити на сцені кадр, то у верхньому лівому куті панелі редактора з'являється напис Actions–Frame, якщо клацнути по кнопці, то з'явиться напис Actions–Button, тобто програма підказує, що вводить код, який ставитиметься до сценарію кнопки. А якщо виділити фотографію, то в полі, призначеному для уведення скрипта, з'явиться повідомлення: „Current selection cannot have actions applied to it” („До даного виділеного об'єкта не можна застосовувати сценарій”).
Привласнимо сценарій кнопці. В останніх версіях Action Script є можливість писати централізований код, тобто код, розміщений в одному місці, і така можливість дозволяє краще розбиратися в більших програмах. Однак у простих прикладах присвоювання сценарію кнопці цілком припустиме. Отже, для кнопки зі стрілкою вліво потрібно формалізувати такий сценарій: «Якщо кнопка відпускається на деякому кадрі, то з цього кадру необхідно перейти на попередній кадр». Відповідно до синтаксису мови Action Script це матиме такий вигляд:
on (release)
{
prevFrame();
}
У першому рядку записаний оброблювач подій кнопки on( ), що має формат:
on (event)
{
текст сценарiю
}
Тут event – це назва події у розглянутому випадку release (відпускання кнопки); може також відслідковуватися така подія, як press (натискання кнопки), й інші події, які ми розглянемо пізніше.
Функція prevFrame – це функція безумовного переходу, що переміщає відтворюючу голівку в попередній кадр. Вона перебуває усередині оброблювача подій, тобто може виконуватися тільки у випадку настання описаної події.
Аналогічно на другу кнопку повісимо код, що забезпечує перехід до наступного кадру:
on (release)
{ nextFrame();
}
Тепер додамо кілька ключових кадрів так, щоб у них скопіювалися створені в першому кадрі кнопки, і помістимо у знов створені кадри потрібні фотографії. Якщо запустити на виконання створений фільм, то кадри безупинно програватимуться один за одним, а отже, насамперед нам потрібно дати команду «Стоп» на першому кадрі. Для цього першому кадру додамо відповідну команду.
Зверніть увагу: команда привласнюється вже не кнопці, а кадру. Той факт, що кадру привласнений сценарій, відзначається на основній монтажній лінійці – у позначенні кадру над жирною крапкою з'являється мала літера «a».
У результаті ми одержали наступний фільм.
Якщо у фотоальбомі всього кілька кадрів, то двох кнопок – «Вперед» і «Назад» – цілком достатньо, але якщо набір фотографій великий, то бажано мати ще й кнопки, які відсилають у початок і кінець фільму. У наступному прикладі ми додамо відповідні кнопки: «У перший кадр» та «В останній кадр». Вибрати кнопки підходящої мнемоніки можна зі стандартної бібліотеки кнопок з папки Сircle Вuttons.
На пропонованому прикладі ми ознайомимося із ще однією командою gotoAndStop ( ), яка дозволяє перейти до потрібного кадру з наступною зупинкою.
На кнопку переходу до першого кадру повісимо код. У випадку з фотоальбомом з п'яти кадрів в останню кнопку додамо сценарій переходу «В останній кадр»:
on (release)
{
gotoAndStop(5);
}
У результаті одержимо фільм. (Якщо вам необхідний вихідний FLA-файл, його можна завантажити тут).
Автоматизоване написання скрипта. Панелі редактора ActionScript надають цілий ряд сервисів для автоматизованого написання скрипта. Розглянемо ці можливості. Панель редактора Action Script дозволяє вибирати, перетаскувати, перерозподіляти і вилучати команди. Покажемо, як можна написати той самий скрипт для кнопки «Уперед» в автоматизованому режимі. Вибравши папку Movie Clip Control, можна одержати доступ до оброблювача подій on, а далі потрібно або двічі клацнути по відповідному пункті, або перетягнути вираз на поле написання скрипта в режимі Drag and Drop.
У результаті на робочому полі з'явиться необхідний вираз й підказка виду: ви вибираєте з меню потрібну команду, і вираз завершується автоматично. Як видно з меню, можна вибрати не тільки умову, пов'язану з екранними кнопками, — можна також вибрати з меню пункт keyPress “<Left>”, або keyPress “<Right>”, що відповідає натисканню клавіатурних клавіш (стрілка вліво, стрілка вправо), тобто існує можливість створити фотоальбом, що «перегортатиметься» за допомогою клавіш клавіатури.
Задіємо команду keyPress “<Right>”, потім перейдемо в папку Timeline Control, виберемо команду nextFrame і перетягнемо її на робоче поле.
Для кнопки, що переводить фільм у початок фотоальбому, як подію можна вибрати з меню натискання клавіші Home, а далі перетягнути на поле команду gotoAndStop, у результаті чого з'явиться ще одна підказка з можливого синтаксису даної команди.
Стрілки в підказці дозволяють переглянути різні варіанти синтаксису. Програма пропонує задати сцену й кадр або тільки кадр. У нашому випадку досить вказати тільки кадр (Frame). Якщо назва сцени опущена, то за замовчуванням здійснюється перехід до кадру поточної сцени.
Після того як ми призначимо всім кнопкам відповідні кнопки клавіатури, одержимо наступний фільм, де перегортання фотографій відбуватиметься з клавіатури, а натискання мишкою на екранні кнопки не викликатиме ніяких наслідків.
Чи можна забезпечити сценарій, при якому різні події можуть призвести до одних і тих самих дій? Виявляється, можна – для цього в оброблювачі подій on необхідно перелічити список найменувань подій. Якщо ви поставите кому в списку подій після першої події, то програма сама запропонує вам меню.
Додамо до першої події (натискання клавіатурної кнопки) другу подію (відпускання екранної кнопки):
on (keyPress "<Left>", release)
{
prevFrame();
}
Повторимо процедуру для інших кнопок і в результаті одержимо фотоальбом, у якому перегортання фотографій відбуватиметься як за допомогою мишки, так і за допомогою клавіатури.
У розглянутому прикладі ми використали перехід за номером кадру, але цей спосіб не завжди зручний: якщо в процесі редагування фільму нумерація кадрів зміниться, то логіка може порушитися. Більш зручно використати перехід за позначкою кадру. Розглянемо приклад, у якому буде потрібно не тільки перегортання альбому, але й перехід до різних розділів, тобто більш складна навігація.
Нехай альбом складатиметься з рисунків, комп'ютерної графіки та фотографій.
Першому кадру розділу «Рисунки» дамо позначку Pictures, аналогічно першим кадрам інших розділів привласнимо позначки graphics й photo.
Створимо шар для розміщення позначок і назвемо його Lables. Для того щоб поставити позначку кадру, у панелі Properties необхідно вибрати тип позначки Name і записати її ім'я. У нашому випадку Pictures. Аналогічно розмістимо позначки в кадрах 5 й 10.
Тепер додамо новий шар і назвемо його Actions. У першому ключовому кадрі шару Actions викличемо панель Actions Frame (шляхом натискання кнопки F9) і наберемо команду stop ( ).
Додамо ще один шар під ім'ям Subjects (тематика), у якому дамо заголовка відповідним кадрам: «Рисунки» (див. рис. 6.3), «Графіка» і «Фото».
Рисунок 6.3 – Заголовок для кадрів розділа «Рисунки»
Тепер додамо збоку кнопки меню з аналогічними іменами, які розташуємо на новому шарі за назвою Мenu.
Надрукуємо з лівого краю перший пункт меню «Рисунки» і переведемо його у кнопковий символ. За допомогою інструмента Arrow виділимо текстовий блок «Рисунки» і виконаємо команду Modify => Convert to Symbol (цю команду можна виконати й за допомогою клавіші F8), у панелі Convert to Symbol задамо тип символу Button і визначимо його ім'я як pictureButton. Створимо чотири кадри для кнопки «Рисунки»: перший являтиме просто вихідний текст, другий – той самий текст тільки синіх кольорів, третій кадр ми пропустимо (у цьому випадку Down-кадр буде такий самий, як й Over-кадр), а в Hit-кадрі нарисуємо прямокутну область, що визначить область натискання кнопки.
Тепер нам потрібно повісити сценарій на знов створену кнопку. Для цього виділимо кнопку в сцені Scene 1 і, натиснувши F9, викличемо панель Actions, а потім внесемо код, показаний на рис. 6.4.
Рисунок 6.4 – Сценарій переходу на кадр із позначкою