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

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. Когда ролик прокрутится, закройте активное окно и удалите образцы из рабочего поля.
Рубрика: Введение

Добавить комментарий

Вам надо войти, чтобы написать комментарий.