Создание обычной кнопки, реагирующей на указатель мыши

Кнопка представляет собой видеоклип, на временной шкале которого есть всего четыре кадра. Эти кадры имеют метки Up, Over, Down и Hit.

В состоянии UpВы создаете статичное графическое изображение кнопки. Так выглядит кнопка, когда указатель находится вне ее активной области.

В состоянии Overсоздается графическое изображение, которое должна принять кнопка, когда указатель мыши проходит над ней. Обычно это делается для достижения визуального эффекта, с помощью которого пользователь узнает, что указатель находится на «живой» кнопке.

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

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

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

ПРИМЕР 10.1: Создание кнопки

(см. папку Examples раздел_10 пример_10_1)

1.Создайте новый документ Flash.

2. В меню Insert → New Symbol(Ctrl+F8). Появится диалоговое окно Create New Symbol. Введите название символа, выберите пункт Buttonв меню Behaviorи нажмитеОК. Flash создаст в окне Libraryновый символ и вернется в режим редактирования фильма на временную шкалу и в область Stage. Обратите внимание на временную шкалу: она содержит 4 кадра Up, Over, Down и Hit. Чтобы кнопка выглядела «живой» нужно размесить различные графические изображения в каждом кадре кнопки.

3.Выделите на временной шкале кадрUp. В области Stageсоздайте новое графическое изображение (см. рис. 10.1.). В режиме редактирования крестик в середине области Stageслужит центральной точкой совмещения графических символов.

Рис. 10.1. Создание кнопки, кадр Up

4.Выделите кадрOver.

5.В меню Insert → Keyframe. Flash вставит ключевой кадр, дублирующий содержимое ключевого кадра Up. Преобразуйте графический объект аналогично рис. 10.2.

6.Выделите кадр Down.

7.В меню Insert → Keyframe. Flash вставит ключевой кадр, дублирующий содержимое ключевого кадра Over. Преобразуйте графический объект аналогично рис. 10.3.

Рис. 10.2. Создание кнопки, кадр Over

Рис. 10.3. Создание кнопки, кадр Down

8.После создания трех состояний кнопки нужно определить ее активную область. Выделите кадр Hit.

9.В меню Insert → Keyframe. С помощью инструмента Paint Bucket закрасьте изображение в кадре Hit одним цветом (см. рис. 10.4.). Этот графический объект пользователи не увидят в действительности. Силуэт в кадре Hit заполняйте одним и тем же цветом.

10.Вернитесь в режим редактирования фильма и из окна Libraryперетащите копию символа кнопки в область Stage.

Рис. 10.4. Создание кнопки, кадр Hit

Обратите внимание, Секрет кнопок:в Flash создавая символ и присваивая ему тип кнопки, Вы получаете саму кнопку. На самом деле кнопки – это короткие, состоящие из 4 кадров интерактивные фильмы. Когда Вы выбираете тип символа кнопки, Flash определяет временную шкалу с четырьмя ключевыми кадрами.

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

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