Интерактивность в Flash

Результати практичної роботи "Фотоальбом":

Прізвище, ім'я	Оцінка
Панченко, Дударь	9
Ясманович	10
Цыганов, Федоренко	12
Коваль, Полухова	11
Соболь. Лебидь	8
Кузнецова, Крячун	11

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

Поняття про Action Script

Action Script являє собою мову написання сценарію - набору інструкцій, які керують елементами Flash-фільму. Сценарії Action Script можуть бути вбудовані в фільм або зберігатися в зовнішньому текстовому файлі з розширенням AS.

При встановленні сценарію до фільму його можна впроваджувати в різні частини фільму. Точніше, сценарії Action Script можуть містити ключові кадри, екземпляри кнопок і екземпляри кліпів. Відповідно сценарії називаються сценаріями кадру (Frame Action), сценарієм кнопки (Button Action) і сценарієм кліпу (MovieClip Action).

Сценарії Action Script виконуються по настанні певних подій, ініційованих користувачем або системою. Механізм, який вказує програмі Flash, який оператор слід виконати при настанні тієї чи іншої події, називається обробником подій.

Action Script має власний синтаксис, багато в чому схожий з синтаксисом JavaScript. Одним з основних понять Action Script є Actions - команди, які видають інструкції під час виконання SWF-файлу. Наприклад, gotoAndStop () відсилає б відтворювала головку (Рlayhead) на певний кадр або мітку. Від слова Actions і походить назва мови - Action Script (дослівно - сценарій дій). З більшістю понять цієї мови ми ознайомимося на конкретних прикладах.

Обробка подій кнопки миші

Кнопки в Macromedia Flash мають великий списком подій, на які вони можуть реагувати:

• press - клавіша мишки натиснута, коли курсор знаходиться в межах кнопки;
• release - клавіша мишки віджата, коли курсор знаходиться в межах кнопки;
• releaseOutside - клавіша мишки віджата, коли курсор знаходиться поза межами кнопки;
• rollOver - курсор миші входить в межі кнопки;
• rollOut - курсор виходить за межі кнопки;
• dragOver - курсор входить в межі кнопки, при цьому була натиснута кнопка, і натиснута клавіша миші;
• dragOut - курсор виходить за межі кнопки, при цьому була натиснута кнопка, і натиснута клавіша миші;
• keyPress ( "клавіша") - була натиснута "клавіша". Список клавіш можна подивитися в довідці по Flash (об'єкт Key), або використовувати панель параметрів для введення потрібної клавіші.

На жаль, Flash "розуміє" тільки ліву кнопку миші. Права використовується для виклику контекстного меню (клацніть правою клавішею на якому-небудь Flash-мультику).

Обробляються ці події за допомогою директиви on (). Синтаксис її такий:

on (событие)
  {
  ... // Наши действия
  }

Нижче ви можете самі спробувати викликати деякі події:

Дуже часто використовуваний приклад - перехід по посиланню при натисканні на кнопку:

on (release)
  {
  getURL("https://www.google.com.ua");
  }

Щоб перевірити цей сценарій, виділіть вашу кнопку, натисніть Ctrl + Alt + A і введіть програму.

Практична робота "Інтерактивний фотоальбом"

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

Помістимо на основний монтажної лінійці перше фото і додамо кнопку зі стандартного набору. Для доступу до потрібної папки слід виконати команду Windows => Сontrol Panels Common Libraries => Buttons

В результаті виконання команди з'явиться панель, що містить великий набір заздалегідь намальованих кнопок різних типів. Виберемо, наприклад, Key Buttons (кнопки, схожі на клавіатурні клавіші), відкриємо відповідну папку, виберемо кнопку key-left і створимо екземпляр цієї кнопки шляхом перетягування її на сцену:

Зверніть увагу, що, коли ви встановлюєте другу кнопку (key-right) на сцені і переміщує її, щоб встановити на одному рівні з першою кнопкою, програма дає підказку (пунктирну лінію), яка дозволяє точно позиціонувати кнопку:

Для того щоб додати сценарій, необхідно викликати редактор Action Script по команді Window => Development Panels => Actions або натиснувши клавішу F9. Якщо ви збираєтеся часто писати скрипти, то цю клавіатурну команду варто запам'ятати. В результаті з'явиться панель редактора Action Script:

Якщо ви поексперіментіруете, виділяючи різні елементи на сцені, одночасно відстежуючи повідомлення в панелях редактора Action Script, то виявите, що програма підказує, на який елемент можна «вішати» код. Якщо виділити на сцені кадр, то в верхньому лівому кутку панелі редактора з'являється напис Actions - Frame, якщо клацнути по кнопці, то з'явиться напис Actions - Button, тобто програма підказує, що вводиться код буде ставитися до сценарію кнопки. А якщо виділити фотографію, то в поле, призначеному для введення скрипта, з'явиться повідомлення: Current selection can not have actions applied to it (до даного виділеному об'єкту можна застосувати сценарію).

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

Отже, для кнопки зі стрілкою вліво нам потрібно формалізувати такий сценарій: «Якщо кнопка відпускається на деякому кадрі, то з цього кадру необхідно перейти на попередній кадр». Відповідно до синтаксисом мови Action Script це буде виглядати наступним чином:

on (release) { prevFrame(); }

У першому рядку записано обробник подій кнопки on (), що має формат:

on (event)

{

текст сценарію

} 

Задати його можна командою Global Functions- Movie Clip Control - on

  Тут event - це назва події, в розглянутому випадку release (відпускання кнопки); може також відслідковуватися така подія, як press (натискання кнопки), і інші події, які ми розглянемо пізніше.

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

Аналогічно на другу кнопку повісимо код, що забезпечує перехід до наступного кадру:

on (release) { nextFrame(); }

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

Якщо запустити на виконання створений фільм, то кадри будуть безперервно програватися один за іншим, а отже, перш за все нам потрібно дати команду «Стоп» на першому кадрі. Для цього першого кадру додамо команду Global Functions- Timeline Control - stop:

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

Якщо у нас в фотоальбомі всього кілька кадрів, то двох кнопок - «Вперед» і «Назад» - цілком достатньо, але якщо набір фотографій великий, то бажано мати ще й кнопки, що відсилають в початок і кінець фільму. Додамо відповідні кнопки: «У перший кадр» і «В останній кадр». Вибрати відповідні кнопки можна зі стандартної бібліотеки кнопок з папки Сircle Вuttons.

Познайомимося з ще однією командою gotoAndStop (), яка дозволяє перейти до потрібного кадру з подальшою зупинкою.

На кнопку переходу до першого кадру (третя зліва) повісимо код:

on (release)

{

gotoAndStop(1);

}

У випадку з фотоальбомом з п'яти кадрів в останню кнопку додамо сценарій переходу «В останній кадр»:

on (release) { gotoAndStop(5); }