laboratornaja_rabota1

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

Up – первоначальное (пассивное) состояние кнопки. Кнопка находится в этом состоянии, когда курсор мышки находится за её пределами.

Over – это состояние соответствует виду кнопки, когда курсор находится над кнопкой. Down – состояние кнопки, когда она нажата.

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

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

Щелкнем на второй кадр (обозначен как OVER), затем выберем Insert –> Keyframe или нажмем F6 (результат будет один и тот же). Создастся новый кадр со скопированным в него изображением из предыдущего. Используя инструмент трансформации (Free Transform Tool) для изменения размер шрифта во втором кадре Аналогично добавим следующий кадр (Down-кадр) и нарисуем нажатое состояние кнопки (рисунок 21).

Рис. 21. Создание экземпляра кнопки

Перейдем к основной сцене, откроем библиотеку по команде Window => Library и создадим экземпляр символа кнопки путем перемещения его на сцену (рисунок 22).

Рис. 22. Создание кнопки на основной сцене

В результате получим клип, в котором нажатие кнопки происходит не только при щелчке курсора на центральную (рабочую) зону кнопки, но и при нажатии на рамку вокруг нее. Связано это с тем, что если Hit-кадр не прорисован, то рабочая область кнопки будет соответствовать Up-кадру. Чтобы сделать кнопку интерактивной, необходимо связать действие нажатия кнопки с выполнением определенных команд, то есть описать определенный сценарий.

Для задания сценариев во Flash существует специальный язык ActionScript. Рассмотрим лишь незначительную часть возможностей этого языка, а в дальнейшем будем возвращаться к структуре и синтаксису ActionScript по мере усложнения примеров создания интерактивных фильмов на Flash.

Откроем панель «Properties» и в поле name введем имя символа кнопки – button_1 ( рисунок 23).

Рис. 23. Ввод имени экземпляра кнопки

Откроем панель Actions и введем следующий листинг скрипта (рисунок 24), а затем выполним тестирование клипа.

Рис. 24. Панель Actions

4.2. Создание анимированной кнопки во Flash

Основная идея - использование Flash-элементов Movie Clip "вмонтированных" в элемент Button. Создадим графические элементы, из которых, в последующем, будут монтироваться клипы. В данном случае это будет круг для кнопки. Далее аналогично теме «Создание анимации движения Motion Tween», создадим анимацию увеличивающейся окружности (рисунок 25).

Рис. 25. Анимация окружности

Клип готов. Установим его в необходимый кадр четырехкадровый фрагмента кнопки (рисунок 26). Для придания требуемого размера и ориентации клипа, воспользуемся инструментами Scale и Rotate на панели инструментов пакета. Вернемся на рабочее поле клипа с кнопкой и протестируем выполнение клипа.

Рис. 26.Анимированная кнопка

5. Создание динамического меню

Цель работы: научиться создавать интерактивные элементы навигации для демонстрации контента интернет-приложения.

Задание: создать меню навигации для демонстрации контента интернет-приложения.

5.1. Создание динамического меню

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

Рис. 27. Создание динамического меню

Для создания фильмов Flash важно разделять содержимое на контролируемые части путем размещения различных элементов содержимого в отдельных слоях. Размещение содержимого по слоям является хорошим тоном технологическим приемом.

1) Начнем построение динамического меню с создания и именования следующих слоев

ирасположим их в указанном порядке (рисунок 28):

–Метки кадров – на данном слое будут расположены метки: «Company», «News», «Portfolio», «Service», «Contacts»;;

–Кнопки – на данном слое будут расположены кнопки: «Компания», «Новости», «Портфолио», «Услуги», «Контакты»;

–Контент – для расположения различных разделов.

2)Добавим по 50 кадров в каждый из этих слоев. Временная диаграмма должна иметь вид, соответствующий рисунку 29.

Рис. 28. Создание слоев

Рис. 29. Добавление кадров

3) Создадим интерактивные элементы – кнопки («Компания», «Новости», «Портфолио», «Услуги», «Контакты») аналогично предыдущей теме самостоятельно на слое «Кнопки» (рисунок 30).

Рис. 30. Создание динамического меню. Создание кнопок для навигации

4)Прежде чем заниматься сценарием, управляющим динамическим меню, необходимо создать содержание, соответствующее каждой кнопки. Для этого добавим ключевые кадры в кадр 10, кадр 20, кадр 30, кадр 40 и кадр 50.

5)Используя панель инструментов, наполним каждый кадр контентом, который соответствует каждому разделу. На рисунке 31 представлен раздел новости, который должен инициализироваться при нажатии на кнопку «Новости».

6)Когда создание разделов завершено, добавим к кнопкам определенный код, который будет перемещать пользователя по интересующим разделам. Для этого введем имя для каждого символа кнопки на панели Properties:для кнопки «Компания» - «Bt_company» (рисунок 32), «Новости» - «Bt_news» и т.д.

7)Создадим инициализирующий сценарий, при помощи которого будет происходить перемещение пользователя по интересующим разделам. Выделим первый кадр, откроем панель Actions

идобавим код, выполняющий обработку событий (рисунок 33)

Рис. 31. Создание динамического меню.	Рис. 32. Создание динамического меню.
«Раздел Новости»	Инициализация кнопок

Рис. 33. Создание динамического меню. Инициализирующий сценарий для кнопок: «Компания», «Новости», «Портфолио»,

«Услуги», «Контакты»

5.2. Добавление «Меток кадров»

После написания небольшого инициализирующего сценария для динамического меню, добавим метки для некоторых кадров, чтобы управлять воспроизведением. Мы знаем, что пункт меню «Новости» находится в десятом кадре, поэтому отобразить его можно воспользовавшись функцией gotoAndStop (): gotoAndStop (10), что вызовет перемещение в кадр 10, где находится пункт «Новости». Использование конкретного числа в функции gotoAndStop () допустимо, но это не является гибким решением. Если, например, переместить на временную диаграмму пять или шесть новых кадров перед десятым кадром, то пункт меню «Новости» сместиться на 15-й или 16 кадр, и команда gotoAndStop (10)

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

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

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

1)Добавим ключевые кадры в кадр 10, кадр 20, кадр 30, кадр 40 и кадр 50 на слое «Метки

кадров».

2)В инспекторе свойств зададим в поле Frame значение метки для каждого раздела

(рисунок 34).

Рис. 34. Добавление метки кадров для раздела «Компания»

3) Теперь можно обращаться к кадру по имени. Немного исправим инициализирующий сценарий, обращаясь теперь к кадрам по имени (рисунок 35).

Рис. 35. Инициализирующий сценарий для кнопок: «Компания», «Новости», «Портфолио», «Услуги», «Контакты»

4) Выполним тестирование динамического меню.