Создание анимированных кнопок

В Уроке 6, "Buttons", рассказано, как создавать простейшие кнопки. Из этой части учебника вы узнаете, как создавать более сложные кнопки, которые реагируют на движение курсора мышки над ними, показывая полупрозрачное изображение пункта меню с текстом. Для создания анимированной кнопки вам нужно будет поместить символ-клип в один из кадров кнопки. Начнем с создания анимации.

1	Сделайте двойной клик на изображении сисмола-кнопки BUTTON - HOME в окне библиотеки, чтобы приступить к редактированию.
	Кликните именно на иконке-изображении символа, а не на его названии, иначе вам будет предложено отредактировать имя символа.
	Кнопка BUTTON - HOME уже частично готова, что сэкономит вам несколько шагов при работе.
2	Выберите View > Show Frame чтобы отцентрировать кнопку в окне. Кликните на инструмент Лупа (magnifier) в панели инструментов, затем кликните по кнопке в рабочем поле, чтобы увеличить ее, если в этом есть необходимость.
3	В монтажной линейке назовите первый слой "Button".
4	Вставьте ключевой кадр (keyframe) в кадр Over слоя Button.
5	Убедившись, что ключевой кадр Over активен, кликните где-нибудь в рабочем поле инструментом Стрелка (arrow), чтобы снять выделение с изображения кнопки.
6	Перетащите мышкой образец символа BUTTON - CROSS из библиотеки на символ BUTTON - HOME и точно совместите их регистрационные метки.
	BUTTON - CROSS - символ-клип, который содержит анимацию - вращающийся крест. Образец BUTTON - CROSS - абсолютная внешняя копия креста из BUTTON - HOME, расположенного в данный момент ниже. Чтобы добиться точного совмещения изображений, используйте стрелки курсора.

 
Добавление полупрозрачного пункта меню в кнопку

1	Для начала создайте в монтажной линейке новый слой и назовите его "Text Transparency".
2	Активизируйте слой Text Transparency и перетащите его мышкой ниже слоя Button.
	Таким образом вы расположите содержимое слоя Text Transparency визуально ниже содержимого слоя Button.
3	Вставьте ключевой кадр (keyframe) в кадр Over слоя Text Transparency.
4	Перетащите символ BUTTON - BACKGROUND из библиотеки в рабочее поле и разместите правее регистрационной метки кнопки, так, чтобы левая граница символа BUTTON - BACKGROUND проходила через регистрационную метку.

Теперь придадим символу BUTTON - BACKGROUND оттенок общего фона, используя настройки прозрачности.

1	Оставив BUTTON - BACKGROUND выделенным в рабочей области, выберите Modify > Instance.
2	Кликните по вкладке Color Effect в диалоговом окне Instance Properties и выберите Alpha из выпадающего меню Color Effect.
3	Введите значение прозрачности 50 и нажмите ОК.
4	Удостоверившись, что ключевой кадр Over в слое Text Transparency активен, кликните на инструменте Текст (text).
5	Задайте шрифт Arial (Windows) или Helvetica (Macintosh), размер 18 points, полужирный (bold), курсив (italic).
6	Кликните где-нибудь на символе BUTTON - BACKGROUND и напечатайте слово "Home".
	Изменять содержимое других кадров этой кнопки не нужно.

 
Дублирование анимированной кнопки

Только что созданная кнопка показывает пункт меню "Home", когда курсор мышки оказывается сверху. Нужно создать кнопку с пунктом меню "Contact". Чтобы сэкономить время, просто продублируйте уже готовую кнопку BUTTON - HOME и замените текст.

1	В библиотеке активизируйте символ BUTTON - HOME и выберите Duplicate из меню библиотеки Options.
2	Назовите сдублированный символ "BUTTON - CONTACT" и нажмите ОК.
3	Сделайте двойной клик на изображении символа BUTTON - CONTACT в библиотеке, чтобы начать редактирование.
	Если необходимо, выберите View > Show Frame чтобы отцентрировать кнопку в окне, и используйте Лупу для увеличения изображения.
4	Активизируйте кадр Over в слое Text Transparency и воспользуйтесь инструментом Текст, чтобы заменить "Home" на "Contact".
	К сожалению, вы не сможете просмотреть результат прямо во Flash-редакторе.
	Чтобы посмотреть, что у вас получилось, выберите Edit > Edit Movie, перетащите образцы BUTTON - HOME или BUTTON - CONTACT в рабочее поле и затем выберите Control > Test Movie. Когда ролик прокрутится, закройте активное окно и удалите образцы из рабочего поля.