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

1. Введение в интерактивность

    Под интерактивностью будем понимать возможность  создавать части флэш-ролика, изменяющиеся в зависимости от действий пользователя.

    Кнопки 

    Кнопки  – это символы, которые могут  реагировать на различные события  мыши и клавиатуры.

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

    К кнопке нельзя применить только вложенную  анимацию.

    Кнопка  создается как обычный символ, путем преобразования уже существующего графического изображения в символ (F8) либо путем создания нового символа (Ctrl + F8). Однако при создании следует выбирать тип символа Button.

    

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

    Копка может реагировать только на два  события мыши: нахождение курсора  мыши над кнопкой и нажатие левой кнопки мыши. Последнее следует отличать от щелчка мыши, состоящее из двух событий: нажатия и отпускания левой кнопки мыши.

    В режиме редактирования кнопка на каждом слое должна содержать не более четырех  кадров.

    

    Первые  три из них должны содержать графические изображения, соответствующие состояниям кнопки: Up – никаких событий не происходит;  Over – курсор мыши находится над кнопкой;  Down – пока курсор мыши находится над кнопкой, левая кнопка мыши нажата, но еще не отпущена.

    Последний кадр – Hit – обозначает ту часть кнопки, которая будет реагировать на перемещение курсора мыши над ней.

    Область Hit должна состоять только из заливок. Контуры, находящиеся в этой области, игнорируются. Если область Hit не задана, она принимается равной графическому изображению, находящемуся в Up.

    Чередование событий мыши и выведения на экран  графических изображений, соответствующих состояниям кнопки, происходит следующим образом:

• Пока не происходит никаких событий, на экран выводится графическое изображение, соответствующее состоянию Up - .
• Как только курсор мыши попадает в часть кнопки, указанную в области Hit, на экран выводится графическое изображение, соответствующее состоянию Over - . Если курсор мыши покидает область, указанную в Hit, на экран выводится изображение, соответствующее состоянию Up.
• Если кнопка находится в состоянии Over и произошло нажатие левой кнопки мыши, на экран выводится графическое изображение, соответствующее состоянию Down - .
• Если кнопка находится в состоянии Down и левая кнопка мыши была отпущена, на экран выводится графическое изображение, соответствующее состоянию Up.

 

    Пример 1. Создание кнопки

    Необходимо  создать кнопку-текст, которая подсвечивалась бы при наведении на нее курсора мыши и смещалась бы вправо-вниз при щелчке мыши по ней.

    Последовательность  действий должна быть следующая:

• Сначала необходимо создать текстовый объект – НАЖМИ МЕНЯ!
• Затем следует преобразовать его в кнопку, выделив его и нажав F8. Тип символа следует указать Button.
• Перейти в режим редактирования символа.
• Добавить ключевые кадры во всех пустых кадровых ячейках, предназначенных для хранения графических изображений, соответствующих различным состояниям кнопки.
• Затем в кадре, соответствующем состоянию Over, с помощью изменения цвета текста и инструмента Кисть необходимо создать эффект подсвеченного тектста. 
  
• После чего в кадре, соответствующем состоянию Down, необходимо сместить текстовый объект вправо и вниз.
• Далее в кадре, предназначенном для хранения области Hit, необходимо создать прямоугольник такого размера, чтобы он полностью покрывал текстовый объект. В этом случае кнопка будет переключаться в состояние Over сразу, как только курсор мыши попадет в прямоугольную область, окружающую текст. Если этого не сделать, кнопка будет реагировать на перемещение курсора только в той своей части, что занята заливками, составляющими текст.
• Выходим из режима редактирования символа, выбирает команду Control – Enable Simple Buttons, а затем Control – Test Movie.

    Кнопки  со звуком

    К состояниям кнопки Over и Down может быть привязан звук. Делается это также, как и при обычной привязке звука к анимации. Для звука рекомендуется использовать отдельный слой.

    При этом для привязки звука рекомендуется использовать команду Запуск (Event), поскольку в кнопке звука может быть отведен только один кадр.

    Воспроизведение звука, привязанного к Over, будет начато в момент входа курсора мыши в область кнопки, обозначенную Hit. Воспроизведение звука, привязанного к Down, будет начато в момент нажатия на кнопку.

    Задание 1

    К кнопке, созданной в примере привязать  различные звуки к состояниям Over и Down.

    Библиотека  стандартных кнопок

    В комплект поставки Macromedia Flash входит набор готовых кнопок. Для того, чтобы открыть библиотеку стандартных кнопок, необходимо выбрать команду Window – Other Panels – Common Libraries – Buttons. 

    Действия  и язык Action Script

    Для создания интерактивности в инструментальной среде Macromedia Flash существует встроенный язык программирования Action Script.

    Под действиями понимаются наборы команд языка Action Script, выполняющиеся по какому-либо событию: одновременно с воспроизведением соответствующего кадра, по нажатию на кнопку и т.д. Действия, привязанные к кадру, будут выполняться одновременно с воспроизведением этого кадра. Если не задано иное, действия, привязанные к кнопке, будут выполняться после щелчка мышью по этой кнопке.

    Панель  Действия

    Открывается по команде Window – Development Panels – Actions либо при нажатии F9. Панель Действия контекстная: она либо показывает команды выделенного объекта или кадра, либо ничего не показывает, если с выделенным объектом не могут быть связаны никакие команды или команды заданы не были. В первом случае возникает надпись “Current selection cannot have actions applied to it”.

    Для удобства использования панель рекомендуется  преобразовывать в окно. При этом в заголовке окна будет выведена надпись Actions – Frame, если выведены действия для кадра, и Actions Button или Actions – Movie Clip, если для кнопки или видео клипа соответственно.

    В панели Действия существует два режима редактирования: для специалистов (Expert Mode) и для начинающих (Normal Mode). Мы будем использовать более простой режим для начинающих. Для того, чтобы выбрать режим, необходимо нажать на кнопку, расположенную в правом верхнем углу панели.

    

    В верхней левой части панели Действия расположены все команды языка  Action Script, разделенные на группы (общий список команд).

    В нижней левой части панели Действия расположены наборы команд выделенного в данный момент объекта или кадра (список команд текущего объекта).

    В правой части панели Действия расположены  параметры выделенной в данный момент команды (список параметров команды).

    Перемещать  команды в списке команд текущего объекта можно при помощи операции drag’n’drop, а также с помощью кнопок, расположенных над списком команд текущего объекта.

    Группа  команд, заключенных в фигурные скобки, перемещается целиком при перемещении  первой строки, содержащей открывающую  фигурную скобку.

    Для того, чтобы добавить команду из общего списка команд в список команд текущего объекта, необходимо выполнить следующую последовательность действий:

• Если в списке команд текущего объекта уже есть команды, то следует выбрать строку, после которой должна быть добавлена команда.
• Затем необходимо раскрыть вложенные группы, щелкая по ним мышью. Эту операцию необходимо повторять до тех пор, пока не будет найдена требуемая команда. Можно пойти и иным путем: найти команду в алфавитном списке команд группы Index.
• Наконец, необходимо дважды щелкнуть по имени команды.

    Добавить  команду из общего списка команд можно  также с помощью кнопки “плюс”, расположенной над списком команд текущего объекта.

    Для того, чтобы удалить команду, необходимо выполнить такие действия:

• Сначала следует выделить команды щелчком мыши. Несколько команд, следующих друг за другом,  можно выделить при нажатой клавише Shift, указав при этом первую и последнюю команды щелчками мыши. Для выделения несвязанной совокупности команд необходимо щелкать по ним мышью, удерживая клавишу Ctrl. Если требуется удалить совокупность команд, обрамленную фигурными скобками, надо выделить первую строку последовательности, содержащую открывающуюся скобку.
• Затем необходимо щелкнуть по кнопке “минус” или нажать клавишу Delete.

    Метка (имя) кадра

    Метка (имя) кадра используется в команде  Goto для указания места, до которого следует перемотать ролик

    Для того, чтобы задать имя (метку) ключевого  кадра, необходимо выполнить следующую  последовательность действий:

• Сначала следует выбрать ключевой кадр.
• Затем в панели параметров текущего объекта под надписью Frame необходимо ввести имя (метку) кадра вместо надпись Frame Label.

    Если  все было сделано правильно, кадр, у которого задано имя (метка), будет  обозначен маленьким красным флажком, напротив которого будет выведено имя кадра.

    Для того, чтобы удалить метку, необходимо задать пустую метку (имя) кадра.

    Одинаковых  меток быть не должно, в противном  случае на экран будет выдано предупреждение о дублирующей метке. Из двух одинаковых меток всегда будет выбрана та, что находится в самом левом ключевом кадре на Временной линии (Timeline). 

    Команды управления воспроизведением анимации (Stop, Goto, Play)

    Команды остановки, перемотки и воспроизведения  ролика в общем списке команд расположены в группе Actions, подгруппе Movie Control.

    По  команде Stop воспроизведение ролика останавливается. По команде Play воспроизведение остановленного ролика возобновляется. Эти команды не содержат параметров.

    По  команде Goto производится переход в заданное место ролика. Команда Goto имеет несколько параметров, позволяющих задать место перехода и команду, выполняемую после перехода.

    Если  активирован переключатель Goto and Play, после перемотки будет дополнительно выполнена команда Play. Если активирован переключатель Goto and Stop, после перемотки будет дополнительно выполнена команда Stop.

    Параметр  Type определяет способ задания места перехода. Параметр Frame определяет место перехода. Тип значения параметра Frame зависит от значения параметра Type. Значение параметра Type можно выбрать в выпадающем списке напротив.

    Если  параметр Type равен Frame Number, то значение параметра Frame должно быть задано целым числом, определяющим номер кадра, на который должен быть осуществлен переход. Номер кадра показывается под Временной линией, если кадр выделен.

    Если  параметр Type равен Frame Label, то значение Frame должно быть равно имени (метке) ключевого кадра.

    Если  была задана метка кадра при использовании  в команде Goto перехода по метке (Type = Frame Label), имя кадра можно выбрать в выпадающем списке параметра Frame.

    Если  значение параметра Type = Expression, параметр Frame может быть задан формулой с использованием переменных и арифметических операций.

    Если  Type = Next Frame или Type = Previous Frame, задание значения параметра Frame не требуется и переход будет осуществлен на следующий или предыдущий кадр. При использовании этого способа задания точки перехода по окончании перемотки будет всегда дополнительно выполнена команда Stop.

    Если  при использовании Next Frame или Previous Frame требуется продолжить воспроизведение, рекомендуется дополнительно использовать команду Play.

    Параметр  Scene позволяет задать сцену, на которую будет осуществлен переход. По умолчанию значение параметра Scene равно Current scene, означающее, что переход будет осуществлен в рамках текущей сцены.

    Если  ролик содержит несколько сцен, в  выпадающем меню параметра Scene можно выбрать имя сцены, на которую будет осуществлен переход.