1.6.8. Символы кнопок

Кнопки подобны видеоклипам, но имеют специальную структуру временной шкалы, свя­занную с состояниями мыши. Если создать новый символ кнопки и перейти в режим редактирования, то можно увидеть на временной шкале четыре функциональных кадра (рис.1.43).

Рисунок 1.43 – Временная шкала кнопки

• Up (Отпущено). Элементы, помещенные в этот ключевой кадр, будут ассоциировать­ся с кнопкой, расположенной на рабочем поле, только тогда, когда взаимодействия мыши с кнопкой не происходит (т.е. курсор мыши не находится над кнопкой).

• Over (Позиционировано). Помещенные в этот ключевой кадр элементы будут ассоциироваться с кнопкой только тогда, когда вы наводите на кнопку курсор мыши. Как только курсор будет удален из облас­ти кнопки, она возвратится в состояние Up.

• Down (Нажато). Элементы, помещенные в этот ключевой кадр, будут ассоцииро­ваться с кнопкой только в том случае, если вы щелкнете на символе кнопки, и буде­те удерживать кнопку мыши. Как только вы отпустите кнопку мыши, она возвра­тится в состояние Over.

• Hit (Активная зона). Этот ключевой кадр вы никогда не отображается на рабочем поле, однако он определяет область кнопки, чувствительную к воздействию мыши. Какая бы фигура ни присутствовала в этом кадре, она рассматривается как активная зона символа кнопки. Важно отметить, что активная зона не должна содержать никаких от­верстий и промежутков, если в этом нет необходимости. Например, если кнопка представляет собой текст, то для кадра Hit лучше всего использовать сплошной прямоугольник, который по ширине и высоте будет соответствовать текстовому блоку. Использование в кадре Hit обычного текста приведет к следующему: активная зона кнопки будет задана так, что при попадании курсора мыши между буквами кнопка возвратится в состояние Up, в результате чего вы не сможете щелкнуть по ней.

1.6.9. Анимированные и прозрачные кнопки

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

1. Создайте новый проект.

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

3. Двойным щелчком по кнопке зайдите в режим редактирования и добавьте нажатием клавиши F6 еще два ключевых кадра (кадры Over и Down). Переведите воспроизводящую головку на кадр Over.

4. Выделите на рабочем поле содержимое кадра Over и преобразуйте в символ клипа. Зайдите двойным щелком мыши в режим редактирования данного клипа и добавьте на его временной шкале анимацию морфинга.

5. Вернитесь на главную сцену щелчком на метке Scene1 панели Edit Bar.

6. Запустите предварительный просмотр в плеере. Убедитесь, что при наведении курсора мыши на кнопку, она автоматически переключается во второй кадр, в котором начинает воспроизводиться анимация и создается иллюзия «живой» кнопки.

Анимация 11. Анимированная кнопка.

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

1. Создайте новый проект.

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

3. Двойным щелчком по кнопке зайдите в режим редактирования.

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

5. Вернитесь на главную сцену щелчком на метке Scene1 панели Edit Bar. Поскольку внутри кнопки содержится только активная область, на рабочей области она будет показана синим полупрозрачным цветом (рис. 1.45).

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

Рисунок 1.44 – Расположение кадров на временной шкале при создании прозрачной кнопки

Рисунок 1.45 – Отображение прозрачной кнопки в проекте

Анимация 12. Прозрачная кнопка.

Контрольные вопросы.

1. Какое основное отличие символов от остальных элементов Flash?

2. Что такое символы-контейнеры, какие виды символов-контейнеров существуют?

3. Для чего служит библиотека?

4. Какие способы создания и редактирования символов вы знаете?

5. Для чего служит панель Edit Bar?

6. Что такое вложенная анимация?

7. В чем особенность использования фильтров и эффектов символов?

8. Какими особенностями обладают кнопки?

9. Как создать анимированную кнопку?

10. Что такое прозрачные кнопки и как их можно использовать?