Плавная анимация кнопки при наведении курсора в as3. Кнопка звука.


Аниматорам очень часто приходится работать со звуком. Некоторые из них, даже, в первую очередь подбирают мелодию, а потом под неё уже делают анимацию. Для флеш-баннеров и анимационных открыток очень важным приобретением будет кнопка, которая включает или выключает звук. Для этого нам понадобятся две кнопки – одна на включение и вторая, соответственно, на отключение. Возьмём вот такие кнопочки с плавной анимацией:

 

Они сделаны по образу и подобию  урока «Плавная анимация кнопки при наведении и отведении курсора as2», наша задача изменить код на as3.

Итак, берём нашу кнопочку и назначаем ей имя экземпляра button. Оборачиваем её ещё в один клип-контейнер.

Внутри него, на новом слое (над button) пишем следующий код:

 

{syntaxhighlighter brush: as3;fontsize: 100; first-line: 1; }var go:Boolean; button.stop(); addEventListener(Event.ENTER_FRAME, Update); button.addEventListener(MouseEvent.ROLL_OVER, onROver); button.addEventListener(MouseEvent.ROLL_OUT, onROut); function Update(e:Event) { if (go) { button.nextFrame(); } else { button.prevFrame(); } } function onROver(e:Event) { go = true; } function onROut(e:Event) { go = false; } {/syntaxhighlighter}

 

Вот так выглядят кнопочки с кодом и анимацией:

Как видим, отличия от as2 минимальные. Всё основано на тех же принципах. Для второй кнопки всё делаем аналогично. Кнопкам назначаем имена btnPlay и btnStop, распределяем их по слоям и размещаем в одной точке. Создаём выше новый слой и пишем в первом кадре код:

btnPlay.visible = false; btnStop.visible = true;  
// слушатели событий
 btnPlay.addEventListener(MouseEvent.CLICK, onClickPlay); 
btnStop.addEventListener(MouseEvent.CLICK, onClickStop); 
 function onClickPlay(e:MouseEvent){      
btnPlay.visible = false;      
btnStop.visible = true; }  function onClickStop(e:MouseEvent){      
btnPlay.visible = true;     
 btnStop.visible = false; }

 Таким образом мы поочерёдно меняем видимость (visible) этих кнопок. Вот так:

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

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

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

Меняем код на следующий:

{syntaxhighlighter brush: as3;fontsize: 100; first-line: 1; }stop(); var s:SoundTransform = newSoundTransform(); // настройки звука // Меняем видимость кнопок btnPlay.visible = false; btnStop.visible = true; btnPlay.addEventListener(MouseEvent.CLICK, onClickPlay); btnStop.addEventListener(MouseEvent.CLICK, onClickStop); functiononClickPlay(e:MouseEvent) { btnPlay.visible = false; btnStop.visible = true; s.volume = 0; // глушим звук SoundMixer.soundTransform = s; // применяем s ко всем звукам } functiononClickStop(e:MouseEvent){ btnPlay.visible = true; btnStop.visible = false; gotoAndStop(2); s.volume = 1; // звук на максимум SoundMixer.soundTransform = s; }{/syntaxhighlighter}

Так мы, благодаря классам SoundMixer и SoundTransform, меняем громкость  всей музыки на таймлайне сразу. Очень удобно, не правда ли?) Смотрим и слушаем, что получилось:

Исходник кнопки As3 (Cs5)

Автор урока: Андрей Барвинко

flash-animated.com

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

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

Аватар пользователя e.artem.volga

А как создать кнопку при нажатии на которую будут появляться несколько фигур в случайном порядке?

NiTRoEx

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

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

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

Кому как удобнее. А на самом, деле будет одно и тоже. Вы мувику просто в коде добавите свойства, которыми кнопка обладает по-умолчанию.

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

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

Вот и я про это. В даном примере кнопочные свойства вообще не используются поскольку код к мувиклипам применен. Если стереть лишние слои и символ кнопки, все будет работать правильно, но работы/размера файла - меньше.
Идея с:
btnPlay.visible = true;
btnStop.visible = false;
прикольная, я раньше для анимации состояний наводки и нажатия с addChild/removeChild-ами колдовала, а так проще вроде)

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

Ок... ещё раз пробежалась по уроку. Просто чтобы устранить непонятку (это же вроде урок, вдруг кому понадобится).
Итак... Автор тут всюду использует муви клипы, а Вы имеете ввиду тот момент, где он использует одну кнопку (папка old), с квадратиком в режиме hit. Если я правильно понимаю, это вместо того чтобы прописать в коде: primer_mc.buttonMode = true; primer_mc.useHandCursor = true; Ведь именно это меняет курсор на указательный палец при наведении на кнопку? Другой причины я не вижу... В любом случае, урок про управление звуком, и надо сказать - отличный урок, а Андрей молодец... А на счёт addChild/removeChild - это правильно если мувик грузит процессор. Ведь visible = true/false не убирает процесс, а только делает его невидимым, и он продолжает влиять на загрузку системы. Но здесь это не принципиально

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

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

Таки да, кнопка дает наводку пальца, проглядела я. Привыкла buttonMode использовать с мувиками когда это надо.

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

как сделать чтоб к примеру не при наведении а при нажатие была анимация?

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

События мыши:
MouseEvent.CLICK – сделано нажатие и отпускание лев клав мыши над мувиклипом;
MouseEvent.MOUSE_DOWN – сделано нажатие ЛКМ;
MouseEvent.MOUSE_UP – сделано отпускание ЛКМ;
MouseEvent.DOUBLE_CLICK – событие происходит после двойного щелчка ЛКМ

Для события MouseEvent.DOUBLE_CLICK предварительно надо будет написать:
имя_мувиклип.doubleClickEnabled = true;

MouseEvent.MOUSE_MOVE – событие происходит, если курсор перемещается над областью мувиклипа (ну или кнопки);
MouseEvent.MOUSE_OVER – событие происходит, если указатель перемещается на объект. Чтобы событие произошло еще раз, курсор нужно поместить за пределы мувиклипа, а потом снова навести его на мувиклип.
MouseEvent.MOUSE_OUT – событие происходит, если указатель перемещается за пределы области мувиклипа;
MouseEvent.MOUSE_WHEEL – событие происходит, если указатель расположен над мувиклипом и пользователь крутит колесо;

Ну значит просто меняем что там есть, на то что Вам надо

Урок классный и спасибо за исходник в CS5. И да, такие фишки часто появляются почти сразу после того, как были нужны. Закон подлости...

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

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

спс

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

Когда-то мне ну ооочень нужно было подобное решение.
Работал на америкосов, а они очень любили флеш-меню в сайты вставлять с эффектом OnMouseOver и onMouseOut.

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

Вау. Вот это урок, всем урокам урок. Как я когда то замучался с этими кнопками.ААА. Спасибо огромное.

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