Плавная анимация кнопки при наведении и отведении курсора (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');
};
}

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

Если это не шуточный вопрос, то вот вам и ответ Adobe Flash Professional CS4 или CS5 )))

Аватар пользователя Гость

Как при наведении курсора начать проигрывание анимации? Но при отведении курсора анимация продолжала проигрываться до последнего кадра и проигрывалась снова при следующем наведении курсора.

Аватар пользователя Oksana

не совсем понятен ваш вопрос

Аватар пользователя Гость

Все нашел решение вот здесь http://lokator-studio.ru/projects/our-proj/priklyucheniya-kotenka/item/2...

Аватар пользователя Alex80

Пригодилось)

Аватар пользователя Гость

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

Аватар пользователя lexnnov

не могли бы сохранить исходники для CS4 ?

Аватар пользователя Oksana

Обновила исходник, смотрите

Аватар пользователя Гость

Привет! Очень классный сайт и статьи просто огонь, помогли разобраться в некоторых вопросах! Хотел бы научиться пользоваться эффектами замедления в редакторе движения - в и-нете не могу найти путных уроков (ну может я мудак полный). Почему то когда выставляю нужные параметры они никак не влияют на объект. Если вам не сложно объясните как это делается или лучше статью отдельную напишите =)спасибо =)

Аватар пользователя Oksana

здравствуйте! напишу обязательно об этом (хотя редактором движения я почти не пользуюсь). Советую вам посмотреть видео-уроки на эту тему, мне кажется, информации достаточно в сети)

Аватар пользователя Maxy

Чудесный урок, спасибо огромное! Но не сможете ли подсказать, что нужно изменить, чтобы получить код на AS3? Заранее благодарю)

Аватар пользователя Oksana

прошу прощения за не оперативный ответ.Комментриями ниже человек давал исходник аналогичной кнопки на ас3. я сохранила его, но он затерялся у меня, не могу найти.Возможно, поспрашивайте у него, он поделиться:)

Аватар пользователя Саша

Спасибо за урок, очень помогло!Smile

Аватар пользователя Oksana

на здоровье)

Аватар пользователя Gala

Пожалуйста, помогите дилетанту!!!
Какой именно слой и кадр должны быть выделены для внесения указанного Вами кода?

Аватар пользователя Oksana

посмотрите, пожалуйста, в исходнике к уроку

Аватар пользователя Gala

Пардон!
Пыталась открыть исходник Flash CS3.
Всё получилось, спасибо!

Аватар пользователя Дмитрий

Добрый день. Скажите, а можно модифицировать этот скрипт таким образом, чтобы он реагировал не на конкретное действие мыши (навести/убрать), а на наличие или отсутствие её? То есть мне нужно сделать ролик, в котором действие кнопки возвращения назад было бы только на том участке, на котором есть слой button. И если убрать мышь на другом участке, то ролик бы проигрывался до конца и возвращался бы назад только когда вновь появляется слой button, который "видит", что мыши нет и начинает возвращать анимацию к первому кадру.
Вот как-то так. Буду рад узнать ответ))))

Аватар пользователя Oksana

не подскажу, к сожалению(

Аватар пользователя Стас

ЗдравствуйтеОксана спасибо огромное за уроки . Но хотел еще по интересоваться по вопросу передо мной стоит задача сделать шкаф чтоб дверки открывалист при наведении курсора . Немогли бы вы дать мне еще такой урок? заранее большое спасибо

Аватар пользователя Oksana

Стас,посмотрите этот урок и исходник к нему: http://flash-animated.com/kak-sozdat-interaktivnuyu-animirovannuyu-knopku

Аватар пользователя Стас

Оксана здравсвуйте! мнебы хотелось с ами пообщаться по поводу программы, немогли бы вы меня научить ? вот мой скайп skorpion-staska

Аватар пользователя Oksana

здравствуйте,Стас
Ваши вопросы вы можете отправить мне на почту,используя форму контактов на сайте

Аватар пользователя heagar

А как при всё при этом ещё и присвоить кнопке:
on(release){getURL(_root.link1, "_blank");} - ?

Аватар пользователя Oksana

дописываете в конце:
button.onRelease = function (){
getURL('flash-animated.com','_blank');
};
}

Аватар пользователя heagar

Laughing out loud вот за 'flash-animated.com' мне вставят.
спасибо!)

Аватар пользователя Oksana

;)вместо этого адреса вписывате свой линк

Аватар пользователя Дмитрий

Здорово! Так всё просто. Я давно хотел научиться так делать, но думал, что это будет мне не под силу. А тут с первого же раза получилось))) Спасибо огромное.
Вот только название кнопки в коде у Вас enter_btn, а не button, как предлагается в тексте.

Аватар пользователя Oksana

исправила,спасибо

Аватар пользователя Максим

с маятником может сложнее-там координаты меняются, а со снежинками на Гисметео ближе было бы...

Аватар пользователя Максим

Хороший урок!!!сразу возник вопрос почти на эту тему. Если знаете как это сделать опишите пожалуйста!!
http://www.gismeteo.ru/cards/flakes/
При наведении на снежинку, она вращается с постепенным замедлением, если в этот момент отвести курсор от нее, то анимация "доигрывается".

Например: есть анимация шарика, по принципу маятника, т.е. с затуханием. Это должна быть кнопка со ссылкой, при подведении курсора шарик начинает колебаться, постепенно останавливаясь. Если в этот момент курсор убрать с него, то движение не должно резко останавливаться, а дойти до последнего кадра и потом остановиться.

Какой скрипт позволяет анимации даже при отведенном курсоре дойти до последнего кадра?

Аватар пользователя Oksana

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

Аватар пользователя Витагон

Привет! Я так понял, что надо кнопку (заранее сделанную)загнать в мувик? Но никак не пойму, как это осуществить.Цитирую:
1- слой button – кнопка. Она прозрачная, поскольку графика размещена лишь в кадре Hit:

Аватар пользователя Oksana

создаете кнопку,1-2-3 кадрый пустые,заполнен лишь 4-й кадр hit(область наведения).в таком случае кнопка будет невидимой(при экспорте),но на рабочей сцене она полупрозрачная голубого цвета.

Аватар пользователя Ярослав

Не работает в опере Sad Нужно один раз ткнуть по ролику для активации. Обойти это как-нибудь можно?

Аватар пользователя Oksana

да,в опере нужно активировать кликом(пыталась решить этот вопрос,но ответа пока не нашла,с чем это связано.

Аватар пользователя Сашка

Связано с тем, что флэш является ActiveX объектом. Элементы управления ActiveX активизируются при щелчке по такому объекту на веб-странице.
Тут уж или флэш переписывать (а заодно уговаривать браузеры проглотить эту кашу) или тихо смириться с небольшим неудобством (или делать платформу не для браузеров, что наверное никому не нужно).

* отличный блог, спасибо! (Карлов посоветовал)

Аватар пользователя Oksana

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

Аватар пользователя Erya

Если есть интерес, могу поделиться AS3 кодом, для создания кнопок, который использую в своих проектах Smile Действует по тому-же принципу проигрывая MovieClip в одну или в другую сторону.

Аватар пользователя Leetovetz

Очень нужны кнопки с кодом для ас3. Кто может поделиться исходником плиииииз?

Аватар пользователя Oksana

было бы замечательно)

Аватар пользователя Erya

http://flasher.lv/upload/Button.zip - Пример кнопки на AS3, сохранено в CS5 флеше. Идея та же что и в статье, только не нужно в кадрах ничего писать. В папке с fla файлом должна находиться папка com, так же как в примере, затем в библиотке открыть параметры MovieClip`a, который будет служить кнопкой (Предполагается, что его уже создали), поставить галочку Export for ActionScript, и в поле Base Class прописать com.components.buttons.MovieClipSimpleButton - всё, кнопка готова!)

П.С. У вас доступней получается описывать, было бы здорово, если бы выложили у себя и добавили описание)

Аватар пользователя Leetovetz

Сылка не работает. А так кнопка нужна. ААААА. Кто может поделиться исходниками? Пожалыста )))

Аватар пользователя Erya

Перезалил, думал что никто этим не пользуется, поэтому стёр)

Аватар пользователя Leetovetz

Огромное спасибо выручили. Извиняюсь за дублирование. Очень очень нужно было. Сори. Больше не буду. Если бы мог, то подчистил бы. )))

Аватар пользователя Oksana

спасибо большое! с вашего разрешения, я размещу в конце поста этот исходник, многие спрашивают.

Аватар пользователя Oksana

пожалуйста, не дублируйте сообщения постах, которые не имеют отношения  к вашей просьбе.

Аватар пользователя Maxy

Erya, можете выложить Ваш исходник еще раз? По Вашей ссылке файл отсутствует.. Спасибо!

Аватар пользователя Oksana

спасибо)будем разбираться)

Аватар пользователя Филлип

Оксана, у вас интересный стиль, мне он очень импонирует. Нету налета совково-советской школы, которой страдают многие постсоветские иллюстраторы.
Рад что Вы завели свой блог, действительно стоящих блогов такой тематики почти нет, а ведь спрос есть!
Не забрасывайте это занятие, хотя, уверен, времени свободного у вас не так и много:)

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