Как создать интерактивную анимированную кнопку?

 

Признаюсь, как художник я мало что смыслю  во флеш-программировании. Но это не помешало мне написать урок по As:)

В этом уроке описан принцип создания кнопки с функцией roll over. Очень простой эффект, но пользуюсь я им довольно часто. Возможно, данная информация еще кому-то пригодится. Существует несколько способов добиться подобного результата. Поделюсь тем, который знаю я, используя старенький Action Script2.

Есть у нас уже готовая анимашка-заготовка для кнопки – пугливый кролик:) Наша задача сделать ее интерактивной – синхронизировать действие персонажа с положением курсора на ней. Что мы должны получить в итоге:

-roll over (при наведении) – кролик прячется  в шляпку,

-on (при положении курсора на кнопке) – кролик дрожит, из шляпки торчат лишь ушки,

-roll out (убираем курсор с кнопки) – кролик набирается смелости  и вылезает из шляпки.

 Шаг 1.

Создаем кнопку. Рисуем круг в кадре Hit, радиус = радиусу нашего мувиклипа с анимацией.

 

Шаг 2.

Объединим нашу кпопку с мувиклипом анимации, создав новый мувиклип rabbit_button.Кнопку разместим слоем выше.

Шаг 3.

1.заходим в  мувиклип rabbit и добавляем слой для кода– actions 

2.ставим команду stop  в  1-ом и в 12-ом  кадрах (Actions (F9))

3.ставим метки (Label) stop и play

Вот так это выглядит на таймлайне: 

Шаг 4.

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

- выделяем наш мувиклип и в строке Properties  Instance name даем ему имя rabbit.

 - выделяем кнопку, заходим в Actions (F9) и пишем код:

 on (rollOver)
{
      tellTarget ("rabbit2") {
                  gotoAndPlay("play")
      }
}
on (rollOut) {
      tellTarget ("rabbit2") {
                  gotoAndPlay("stop")
      }
}

Шаг 5.

Тестируем результат, изучаем при необходимости исходник.

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

По куче комментариев с непонятками пользователей, очевидно что урок не подробный, и упускает кучу нюансов, например "выделяем наш мувиклип и в строке Properties Instance name даем ему имя" неуказанно выходить из дочернего слоя или нет, люди не могут даже найти куда вы зашили сам код. Та же ситуация и на других уроках , например в уроке по созданию ссылки на баннер, с AS2 ещё всё в порядке, а вот после AS3 у всех паника и непонимание. Желаю вам более подробно организовывать свои туториалы, очень красивый и информативный сайт, хотелось бы видеть тоже самое и в обучение раз уж берёте на себя роль учителя)

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

Как сделать эффект как на самом главном флеше - рука ходит вниз и вверх, а потом когда наводишь курсор, появляется рука за курсором, отводишь опять

Аватар пользователя dmit-rev

Помогите!!!
Сделал сайт при помощи Dreamweaver, вставил мигающие кнопки сделанные в Flash, загрузил файлы на хостинг. С компьютера все отлично работает, а когда захожу с планшета или телефона просит обновить flash проигрыватель. В чем может быть проблема?? ?
Кнопки делал и AS3 и AS1, пробовал разные версии плеера ставить.
(другие аналогичные сайты с флешем открываются норм)

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

Здравствуйте) Спасибо за урок, он оказался очень полезен. Но у меня возникла проблема. Я кнопку использую для перехода по таймлайну, т.е. пишу ей следующий код:
on (release)
{
gotoAndStop (3);
}
у меня почему-то в таком случае переход на нужный кадр не осуществляется. Анимация при наведении работает как положено, а вот переход нет. Не подскажете, в чем может быть проблема?

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

Ольга, все должно работать, посмотрите флешку в аттаче

кнопка

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

Виновата, уже разобралась) Забыла, что если несколько вложенных мувиклипов, то надо указывать какой именно мне нужен.

Огромное вам спасибо за урок =)

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

как мне кролик нравится и его анимация :-DDDDDDDDDDDDD спасибо

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

:))

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

ой, случайно 2 раза коммент отправился.. удалите дубль плиз)

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

шарюсь по исходнику и никак не могу найти где в нем написан код
on (rollOver)
{
tellTarget ("rabbit2") {
gotoAndPlay("play")
}
}
on (rollOut) {
tellTarget ("rabbit2") {

gotoAndPlay("stop")
}
}
и вообще не могу найти элемент rabbit2

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

шарюсь по исходнику и никак не могу найти где в нем написан код
on (rollOver)
{
tellTarget ("rabbit2") {
gotoAndPlay("play")
}
}
on (rollOut) {
tellTarget ("rabbit2") {

gotoAndPlay("stop")
}
}
и вообще не могу найти элемент rabbit2

Аватар пользователя Мимо проходил

Скажите пожалуйста.
А как зделать так, чтобы кнопка была уже активна, т. е. для активации анимации кнопки не надо кликать по ней, а сразу при открытии страницы при наведении курсора на кнопку появлялась "рука" для нажатия, как на сайтах с флэш меню, да и просто на флэш сайтах, или на большинстве баннеров?

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

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

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

вам нужен флеш CS5, чтобы его открыть. версией ниже не получится

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

А как сделать кнопку со ссылкой? Например чтобы при нажатии она переносила на другую страничку сайта.

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

1. В button -> кадр Hit есть маленький оранжевый кружочек с белой обводкой. Зачем он там? его радиус != радиусу мувиклипа.
2. Где прописывался сам код? Не нахожу его. В rabbit (слой actions) в кадрах с кодом только stop(); прописано.
3. Маска верха тулувища/ушек просто перекрывает задний фон шляпы этими элементами, когда кролик прячется?

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

1. посмотрите как рисуется кнопка и что такoe hit, и здесь почитайте - http://flash-animated.com/faq/kak-sdelat-knopku-nevidimoi

2. на кнопке

3. маска нужна, чтобы спрятать кроля в шляпку и мы его там не видели

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

Кнопки я и до этого рисовал но не кодил, ответы больше запутали чем помогли. Трудно новичку ориентироваться в чужих работах, названиях мувиков и тп. когда пошаговые действия очень скудно расписаны и допускают двусмысленности. Урок с плавной анимацией кнопки мне легче дался чем этот. Главное что поковыряв исходник таки разобрался, спасибо.)

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

на меня частенько здесь жалуюся, что расписано плохо. я уже привыкла)

люди не понимают, что если они учат флеш вторую неделю, то не все уроки им по зубам, а там где код - тем более.

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

Аватар пользователя Домовенок

Oksana пишет:

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

Вы молодец! Я вот только по исходникам и учусь. У меня аллергия на учебники. И если бы не ваши, (ну и других хороших и не ленивых людей) уроки, я б ничему и не научилась Smile. В качестве благодарности клацаю по всем местам Smile

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

Если часто "жалуются", значит дело не только в новичках которые бегут раньше паровоза. Обратная связь помогает видеть свои "-" и улучшать свой продукт. Понимаю, не все педагоги и умеют подавать материал, но главное не забывать, что уроки делаются для новичков. И всегда лучше чуть больше пояснить шаги (могу дать ссылку где это очень хорошо реализовано). Всего 4-5 предложениями этот урок можно было сделать доступным для более широкого круга ваших же подписчиков.

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

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

Александр, это первые уроки и я там намудрила, не разжевала. наверное, надо было разжевать, но я этого не сделала, по сути не понимая еще, как надо их писать. не педагог я.

теперь я точно знаю как писать , на что обращать внимание (благодаря комментариям по улучшению по типу вашего), но вот времени нет, и желания нет) вот такая беда)

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

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

Рад что вы меня правильно поняли, мне ваш ресурс ооочень нравится и вы молодец!
P/S
Хочу вас поздравить с восьмым марта (лучше поздно чем никогда Smile ), пожелать женского счастья и новых творческих свершений.

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

благодарю)

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

точнее вставляется но, выдаётся только первый кадр символа с анимацией

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

тоже*

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

доже самое получаеться с кнопкой, ну той кнопкой, когда F8 нажимаешь и делаешь кнопку, в то место где должна находиться кнопка с наведённым курсором, анимация не вставляется(((

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

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

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

при удержании курсора  анимация находится в том кадре, где прописана пауза (stop). В этом же кадре находится мувиклип с зацикленной анимацией (дрожащий зайчик).Чтобы  в момент удержания курсора происходило какое-то дейсвие с объектом - нужно его обернуть в  мувиклип(movie clip) и внутри сделать анимацию.

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

а муви клипами вы назвали, я так понял, символы F8 ??

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

это ужас какой-то, очень сложно это сделать, мозги кипят, для чего делать какие-то метки стоп и плэй, если события другие совсем, например поставил метку плей, и тут где то нажал на кнопку плей, кнопка плэй ищет, метку и активирует её, тут же события
-roll over
-on
-roll out
ну фиг с ним пусть метки стоп и плей связаны как то с событиями, но события же три, а у вас в исходнике две метки, как это ваще работает
хотя работает же....блииин я ни чё не пойму, не могу уловить, цепочку событий, по которой нужно идти в уроке, она обрываеться на местах которые не понятны, и ппц((

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

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

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

да я так и сделал, я пока что слишком ничтожен для этого ^_^
спасибо)

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

Шаг 3.

1.заходим в мувиклип rabbit и добавляем слой для кода– actions
КААААААААК?

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

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

Здравствуйте, не могли бы Вы выслать мне исходник этого урока на email, тот исходник что я скачала со страницы, почему то не содержит слоев, которые были представлены в уроке. Спаибо

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

Здравствуйте, Инна,

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

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

а как в код добавить?
on(release)
{
getURL(http://сайт.ru»);
}

пробовала дописать вниз скрипта - не получается, баннер перестаёт работать! что делать?

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

on (release) {
getURL("http://www.flash-animated.com", "_blank");
}
скопируйте в код и замените название сайта, работает, проверила.

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

Очень и очень хороший урок!)))))

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

а я шаг два не очень поняла...как обьединить мувик и кнопку?

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

Урок хороший, но очень не понятный, хорошо бы подробнее его расписать. Помог исходник, и то с трудом разобрался. Хорошо бы если было это видео.
Непонятно зачем создавать новый мувиклип rabbit_button, его нет в исходнике.
Но всеровно спасибо, за предоставленный урок.

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

Артем, это мой первый урок , соглашусь, я немного налажала. Исправила исходник и перезалила.

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

Не могли бы вы написать название программы которую вы использовали для создания этой анимации и какие-то перво начальные действия. Вроде как похоже на (Macromedia Flash Cool но я не могу понять как открыть (и есть в нем она или нет) область рисунка. Лишь Место для написание кода который я не знаю. Заранее Благодарю.

P.S: Если не будет вам сложно не моглибы вы прислать ответ на мой Em@il.

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

это flash cs5

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

А в макромедия флэш нельзя просмотреть исходник?у меня не открывается((Скажите пожалуйста,как объединить во втором шаге кнопку и муви?

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

нет, открыть исходник  можно лишь в версии cs 5. выделяете кноgrу и мувиклип и сохраняете в символ - f8