Создание кнопок и меню для навигации по сайту

Лабораторная работа № 2.

Создание кнопок и меню для навигации по сайту

Цели работы:

• Научиться создавать кнопки;
• Научиться добавить сценарий ActionScript. к кнопке.

ИНТЕРАКТИВНОСТЬ FLASH

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

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

СОЗДАНИЕ ПРОСТОЙ КНОПКИ

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

Четыре кадра соответствуют четырем состояниям кнопки: Up (Отжата), Over (Поверх), Down (Нажата) и Hit (Активная зона). В этих кадрах может содержаться графика, анимированные видеоклипы или звуки. Несмотря на то, что для различных состояний кнопки можно использовать разные графические изображения, очень важно сохранять единообразный внешний вид всех кнопок. Если в ответ на перемещение мыши графическое изображение кнопки будет слишком сильно изменяться, это может запутать пользователя, и он не сможет понять назначение этой кнопки.

На простых кнопках для создания различных состояний (Up, Over и Down) применяется незначительное изменение графики, например цвета. При этом пользователь получает визуальную подсказку о том, что он может выполнить какое-то действие и управлять воспроизведением фильма.

Задание.

1. Откройте созданный в предыдущей лабораторной файл lab1.fla. Сохраните под именем lab2.fla.
2. Выполните команду Insert=>New Symbol (Вставка=>Новый символ) или воспользуйтесь комбинацией клавиш <Ctrl+F8>. В результате откроется диалоговое окно Create New Symbol (Создать новый символ).
3. В поле Name (Имя) введите имя кнопки и установите переключатель Behavior (Тип) в поле опции Button (Кнопка), как показано на рис.1.

[pic 1]

Рис. 1

1. Щелкните на кнопке ОК. В результате будет создана временная шкала, в первый кадр которой будет помещен ключевой кадр, соответствующий состоянию Up(Над). Это состояние соответствует внешнему виду кнопки в рабочем поле( Рис. 2).

[pic 2]

Рис. 2

1. Воспользуйтесь инструментом Текст  и сделайте в ключевом кадре надпись Главная (Рис. 3) [pic 3]

[pic 4]

Рис. 3

1. В панели свойств укажите параметры текста как показано на рисунке 4.

[pic 5]

Рис. 4

1. Состояние Over (Над) позволяет создавать ролловеры. Щелкните в кадре, расположенном под надписью Over (Над) и вставьте ключевой кадр (F6) или выполните команду Insert=>Keyframe (Вставка=>Ключевой кадр).

[pic 6]

Рис. 5

1. Выделите графическое изображение кнопки в рабочем поле и внесите изменения, необходимые для создания состояния ролловера (Рис. 6). Т.е. измените цвет текста на черный.

[pic 7]

Рис. 6

1. Чтобы создать состояние нажатой кнопки, выделите кадр, расположенный под надписью Down (Вниз), после чего повторите шаги 5 и 6. Постарайтесь сдвинуть графическое изображение, переместив его в кадре Down на несколько пикселей (3-5) вниз и вправо. Это создаст иллюзию того, что кнопка нажата.
2. Состояние Hit определяет область кнопки, на которой производится щелчок мышью. Добавьте ключевой кадр под надписью Hit в слое, содержащем форму кнопки. Проверьте, чтобы форма охватывала всю область, фиксирующую щелчок на кнопке. Чтобы охватить всю область кнопки, может лучше нарисовать в кадре Hit отдельную форму. Нарисуйте прямоугольник с заливкой цвета фона без обводки и удалите в этом кадре надпись Главная.
3. Щелкните на кнопке Back (Назад) [pic 8], расположенной под пиктограммами вкладок, или выполните команду Edit=>Edit Document (Правка => Редактировать документ). В результате вы выйдете из режима редактирования символов и вернетесь к основной временной шкале.
4. Откройте панель Library (Библиотека), выполнив команду Window=>Library(Окно=> Библиотека) либо воспользовавшись комбинацией клавиш <Ctrl+L>.
5. 12. Перейдите в главную сцену и создайте новый слой с названием Меню (Рис. 7)

[pic 9]

Рис. 7

1. Перенесите из библиотеки созданную кнопку But1 в новый слой Меню. Расположите кнопку как показано на рисунке 8. Обратите внимание на значения, в которых расположены направляющие. Маркер в виде квадрата дорисуйте самостоятельно.

[pic 10]

Рис. 8

1. Для предварительного просмотра кнопки в рабочем поле выполните команду Control=>Enable Simple Buttons (Управление => Включить простые кнопки). Если вы наведете курсор на кнопку, то увидите состояние Over, а если щелкнете на кнопке — состояние Down. Состояние Hit при просмотре является невидимым, но оно определяет область графического изображения кнопки, откликающегося на движение мыши и инициирующего запуск состояний Over и Down.
2. В библиотеке символов переименуйте кнопку but1 в but1_main.
3. Для того, чтобы создать остальные пункты меню создайте в библиотеке копию символа but1_main. Для этого щелкните по этому символу правой кнопкой мыши и из контекстного меню выберите Duplicate. В появившемся окне введите новое имя but2_uslugi (рис. 9).

[pic 11]

Рис. 9

1. Отредактируйте символ but2_uslugi, заменив во всех состояниях кнопки слово Главная на Услуги.
2. Разместите на сцене вновь созданный символ (рис. 10).

[pic 12]

Рис. 10

1. По аналогии с первой кнопкой создайте все остальные кнопки нужные для навигации по сайту (Портфолио, Контакты, Карта). В результате у вас должно получиться как на рисунке 11.

[pic 13]

Рис. 11

1. Сверьте полученный результат с файлом lab2.swf из папки dop_material_sait.
2. Сохраните выполненную работу.