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

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

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. Что такое прозрачные кнопки и как их можно использовать?