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

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

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

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

привет! as2 в новых версиях флеш уже не поддерживается,увы. ищите подобные уроки по as3, этот уже устарел(

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

Аватар пользователя Александра_AA

На счет кнопки, что бы при нажатии перемещаться на другой кадр во флеше , какой должен быть код? Я перепробовала все варианты, не хочет тыкаться:(

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

Если назначить имя экземпляру, которое используется в AS, то эта анимация не работает

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

Добрый день! Столкнулся с такой проблемой! Вроде бы сделал всё как вы сказали, но у меня выбивает ошибка ( синтаксическая ошибка: ожидается точка с запятой перед leftbrace) Подскажите пожалуйста, что нужно делать ?

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

Скачать исходник . залесть вовнутрь файла и сравнить )))

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

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

Там даже и не пахнет этим файлом...

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

А как скачать? Что-то я там разобрать не могу?

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

Синенькая надпись ИСХОДНИК в предложении
Тестируем, все работает, как надо! При необходимости качаем исходник и разбираем.
Клацаете по ней сразу же появляется окошко куда сохранить заархивированный файл.

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

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

А есть исходник с Action Script 3.0?

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

Нету. Урок же для Второго.

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

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

Спасибо за урок!) Отвечаю поздно. Но этот урок - был первой работой с флеш - сделала кнопки зверей на сайт.
Спасибо еще раз!

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

рада, что пригодилось)

Аватар пользователя Александр-pro

Добрый вечер, Оксана.
Посмотрел несколько Ваших уроком, которые имеют отношение к добавлению интерактивной кнопки (например, меню на flash для обычного html-сайта ).
Появились такие вопросы.
1. Какой размер сцены ставить? 1 px, по размеру создаваемой кнопки или всего меню, или вообще стандартный оставлять?
2. Какой код вставлять в уже ГОТОВУЮ html-страничку, что бы всего лишь работала этот swf флешка?
Для кнопки писать то, что выдает Adobe Flash или достаточно просто кода для картинки, с размерами и ссылкой на swf на сервере ?
Спасибо, если ответите.
В Сети достаточно информации по этому вопросу, но толком ничего не написано.

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

1. Размер сцены делайте хоть 1 px, но когда вы вставите флешку и будете указывать нужный размер, например блок div у вас 100х50px, а вы воткнули флешку 10x20px и при вставке указываете размер во весь блок, то ничего хорошего не выйдет.
Вывод, вам нужен качественный флеш в определенной части сайта, делайте саму флешку по размерам, равным размеру ячейки или блока, под эту флешку.
2.

Вот так вставляется флешка в html

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

здравствуйте, Александр

1) размер сцены = размеру баннера, меню пр.

2) на счет хтмл не подскажу, здесь у меня пробел

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

Добрый вечер, Оксана. У меня к Вам огрооомная просьба. Может у Вас есть урок или Вы бы смогли рассказать здесь в комментариях как выполнить следующую задачу:
При наведении на кнопку баннера рядом (не важно где, справа, слева и тд) начинает проигрываться анимация, а точнее картинка с каким-нибудь эффектом.
Чтобы было понятнее, вот пример того, что я имею в виду
http://flash-banners.ru/portfolio/#tks_300k

Если Вы ответите хоть что-нибудь я буду Вам оооочень благодарна!
Очень надеюсь на ответ

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

Этот урок как раз и позволяет создать то что вы желаете.
При наведении на банер кнопку у нас увеличивается кнопка в упражнении, но никто не запрещает сделать там кучу эффектов.
http://leetovetz.deviantart.com/art/016-solar-system-321584412
вот пример сделанный чисто по этому уроку.
может суть в том, что в символе внутри, есть 10 кадров. за эти 10 кадров он увеличивается и останавливается на 10.
То за эти 9 кадров можно сделать мигание, а в последнем 10 создать символ с зацикленной анимацией. и при наведении получится анимация 9 кадров (увеличение, мигание) и 10 кадр зацикленная анимация, эффект. При убирании курсора, все проиграется обратно. так что тот пример что у вас есть как раз можно по этому уроку и реализовать.

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

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

Оксана, большое спасибо за урок!! очень мне помог!
Только никак не получается сделать кнопку с переходом на сайт.
Подскажите, пожалуйста, куда нужно вставлять этот код
button.onRelease = function (){
getURL('название сайта','_blank');
};
}

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

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

Уберите в коде последнюю скобку, код вставьте не на кнопку (не в продолжение кода), а войдите в кнопку и создайте новый слой, выделяете первый кадр жмёте ф9 и впечатайте код. Это странные штучки второй версии action script...
Ну и на всякий случай: зайдите в file-publish settings- вкладка flash- внизу поищите local playback security должно стоять как accesse network only - это загадочные грабли на которые часто наступают - файл может работать на вашем компе, а при публикации в нете - нет...
Ну и чтобы наверняка: Указывайте в вопросе что компилятор (compiler errors) пишет при ошибке - там же пол-ответа и содержится

Что бы вы сделали, если бы точно знали что всё получится?...

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

Наталья, после основного кода...затрудняюсь сказать,почему не получается  у вас(

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

Оксана, спасибо за урок!!! очень мне помог!
Не подскажите, куда нужно вставлять
button.onRelease = function (){
getURL('название сайта','_blank');
};
}
чтобы кнопка была кликабельной? я вставляю в самый конец после предыдущего когда - кнопка не работает, начинает мигать( сделала также в вашем исходнике, получилось то же.

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

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

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

Бля а не судьба дать код для кнопки чтобы при наведение она меняла цвет. Нормальный код автор дай а дальше я сам выберу картинки ну и т.д.
А то бля где не посмотри, везде одно и тоже. Вот только того, чего надо нет. Будьте так любездны. Выложите пожалуйста код, который надо вписывать в блокноте. Я сайт пишу на блокноте.

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

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

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

По as3 я тоже не разобрался, как несколько кнопок делать.
Расскажи как ты это сделал?

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

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

http://flash-animated.com/as3-plavnaya-knopka-kratkoe-poyasnenie написал быстренько пояснение-=)вроде понято

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

Сергей, уже почти готов урок по этой кнопке, только в ас 3) исходник, который прикреплен здесь по ас3 не мой, его оставил один из пользователей, потому что часто спрашивали именно кнопку  с наведением на ас3. подождите несколько дней урок и все будет)

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

Спасибочки.

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

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

это урок для нубов.

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

проблема в том что я урок не смотрел а сразу скачал исходник as3 и лазел в нем -_-

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

Да действительно если делать ссылку код не правильный и анимация в цикле, возможно это из за того, что было сделано в cs4 а раньше эта программа называлась макромедия flash mx и для нее файлы с си эс 4 не подходят вот полный и правильный код

onClipEvent (enterFrame) {
if (go) {
nextFrame();
} else {
prevFrame();
}
}
onClipEvent (load) {
var go;
stop();
button.onRelease = function (){
getURL('название сайта','_blank');
};
button.onRollOver = function() {
go = true;
};
button.onRollOut = function() {
go = false;
};
}

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

Подскажите пожалуйста, а можно сделать так чтоб анимация не дублировалась при отведении мыши? В данном примере это конечно же не нужно, но я делала анимацию органов человека (вообще я нормальная, это для школы для предмета анатомии нужно =) и при наведение на сердце - оно бьется, а когда дальше наводишь на другой орган (то есть убираешь курсор с этого объекта) оно опять бьется. (Если не понятно могу выслать анимацию на почту)

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

Дария, посмотрите файлик.

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

Ой! Спасибо большое! На swf то что надо, только я не могу открыть .fla и посмотреть что вы сделали =(,...может потому что у меня флеш сS4

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

fla cs4, попробуйте теперь

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

Оксана, спасибо большое! Теперь я его открываю во флеше, но скрипт нигде не видно(. Ужасно не хочется надоедать, но если все таки не трудно напишите текст скрипта, буду оооооочень благодарна!

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

Дария, в том то и дело, что скрипта нет:) это самая обычная кнопка. зайдите вовнутрь символа кнопки button, и на 2-м кадре наведения (Over) расположена анимация бьющегося сердца(зайдите вовнутрь анимации, дважды кликнув по сердечку). вот так все просто, никакого кода.

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

=))) спасибо!

Аватар пользователя Сергий Проу

Неправильно вы клик указываете, код:

button.onRelease = function (){
getURL('название сайта','_blank');
};
}

нужно ставить не в конце общего кода а в onClipEvent после stop();
иначе если код клика поставить снизу, будет ошибка и кнопка будет в цикле.

onClipEvent (enterFrame) {
if (go) {
nextFrame();
} else {
prevFrame();
}
}
onClipEvent (load) {
var go;
stop();
button.onRollOver = function() {
go = true;
};
button.onRollOut = function() {
go = false;
};
}

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

я проверяла,у меня все работало корректно именно с таким кодом, как  я написала.

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

Оксана, не могли бы Вы помочь. Почему когда выхожу из редактирования мувиклипа на сцену - на сцене ничего нет? никаких объектов

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

Может потому что на сцене и нет никаких объектов ))))
как вариант вы редактировали мувиклип в библиотеке.
Еще один вариант в мувиклипе есть маска и из-за нее ничего не видно. Выделяешь вроде бы есть. но ничего не видно. Заходишь в мувиклип все на месте. Ан нет . Один слой маска он все и скрыл. Такое у меня было )))

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

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

объясню что я делаю возможно в этом ошибки....1 создала докум AS2
2 по уроку создаю сразу мувиклип стрл+f8, на сцене ничего нет, у меня открывается мой муви клип где я уже и выставялю объекты, все по уроку, то есть и кнопку прозрачную и проч, все это получается, как только дохожу до места в уроке "переходим на сцену" нажимаю на сцену на ней ничего нет, может изначально на ней надо рисовать объекты и потом уже преобразовывать их в мувиклипы?

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

Как вариант. Нарисуйте просто прямоугольник или круг без разницы на сцене. Выделите, превратите в мувиклип. Зайдите в него и делайте с ним что душе угодно ))))

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

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

Может пропало мое сообщение. Но повторюсь.
Таки да. Вы ответили на свой вопрос. Вы создали мувиклип в библиотеке.
Смело перетащите его на сцену и будет вам счастье )))))

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

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

спасибо! получилось) я походу не туда писала код...

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

Исходник Вам в помощь)

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

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

Оксана а подскажите кусочек кода )))
buttonZ.onRelease = function (){
getURL("http://civilization-spb.ru/", "_blank");
};
}
это правильный код, который при нажатии на кнопку открывает в новом окне браузера ссылку.
А вот как сделать, что бы при нажатии кнопки начался проигрываться ролик с третьего кадра. Первый - прелоадер. Второй - кнопка, которая туда сюда проигрывается. А с третьего- идет сам ролик и возвращается на второй кадр.
Понимаю, что нужно как то вписать вместо функции
gotoAndPlay(3);

Спасибо.
но это не работает пробовал еще вот так
on (release) {
start.gotoAndPlay(3);}

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

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

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

  • Страницы:
  • 1
  • 2
  • 3