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

До сих пор мы рассматривали 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 cannot 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); }