Плавная анимация кнопки при наведении и отведении курсора (Action Script 2)

 

В этом уроке  я поделюсь еще одним методом анимации кнопок. Ранее, я уже рассказывала о схожем способе создания кнопки. Сегодняшний метод  построен на принципе программного проигрывания анимации вперед и в обратном направлении в зависимости от положения курсора на кнопке. В первом уроке я создавала 2 разные анимации – положение на и положение за пределами кнопки. Так что задача в этот раз в какой-то степени проще в плане анимации:) Так же будет использоваться Action Script 2. Для тех, кому нужна такая кнопка в as3 - читаем в новом уроке Плавная анимация кнопки при наведении в as3.

Шаг 1. Создание мувиклипа

Cоздадим  мувиклип (Cntr 8), назовем, как нравится. ice-cream 1, например:)

На 3-х  отдельных слоях разложим нашу графику и подпишем каждый слой для удобства:

 

1- слой button – кнопка. Она прозрачная, поскольку графика размещена лишь  в кадре Hit:

  

2-слой ice-cream – мороженое, мувиклип,

3-слой button menu - желтая кнопка, мувиклип.

 

Шаг 2. Анимация

По задумке, при наведении курсора наш сладкий продукт увеличится в размерах, а кнопка загорится лимонно-желтым цветом. Создаем дополнительные ключевые кадры в 9-м кадре и делаем анимацию.

В последнем кадре мороженое увеличиваем масштабированием и немного поворачиваем, а к кнопке применяем эффект  Adjust color, увеличиваем значение Contrast 30. Теперь она ярко- желтая,  какой и должна становится при наведении.

 

Создаем твиннинговую анимацию (клик правой по первому ключевому кадру - Create Motion tween), ставим замедление анимации 100.

 

 

Шаг 3. Instance name

Выделяем кнопку на самом верхнем слое и прописываем ей имя button в строке Instance на панели Properties.  

 

Очень важный пункт, хоть и короткий:) Без этого  действия наша кнопка не будет работать.

Шаг 4. Action

Теперь выходим из режима редактирования мувиклипа на главную сцену.  Выделяем его, открываем панель Action (F9).  В открывшемся окошке пишем следующий код:

 

Чтобы не набирать много текста, текст копируем отсюда:

Анимация либо проигрывается вперед, либо  назад  – в зависимости от значения переменной "go".

Тестируем, все работает, как надо! При необходимости качаем исходник и разбираем.

Также можно скачать исходник кнопки c использованием AS3  с нового урока.

Чтобы сделать кнопку кликабельной, дописываем в конце кода:
button.onRelease = function (){
 getURL('название сайта','_blank');
};
}

Комментарии
Аватар пользователя Oksana

спасибо большое)если у вас есть какие-либо пожелания на счет того, что вы хотели бы видеть среди записей блога – напишите мне - с радостью отвечу)

  • Страницы:
  • 1
  • 2
  • 3
Пожалуйста, оставьте ваш комментарий. Спасибо!
Содержимое этого поля является приватным и не будет отображаться публично.
CAPTCHA
Вопрос для проверки
Заполните поле проверки