Creating, Animating Advanced Rollover Buttons in Flash CS3

[uredrum23]

I'm using flash mx. I want to click the movie clip then it goes to a different frame ? help :D

[televisionteevee]

Thank you so much for the tutorial. I followed along but created a different design. Instead of light zips, I have boxes / movie clips that expand from the center of my buttons. Being that my boxes - just like your light zips - lie over top of my buttons, and cause my cursor to become blocked from displaying the hand over button. When my boxes expand - my hand cursor turns back to an arrow as if it's not over a button. Why are my boxes blocking the buttons beneath, when your light zips don't???

[MsEnesss]

Would be great if a little more descriptive and slower

[TheFreshPeddler]

@MsEnesss - honestly not much more he could have explained, you can see every step. i feel you on the spped but its already a 25 minute vid lol.

[Jaycee1593]

LOVED IT THANKS! helped me alot with my coursework!!

[boll2k0]

THANKS

[islam1111987]

its very useful tutorial BIG THNX :)

[imfreeareyou]

This tutorial is really Great, I cant believe I have done the same too :)

[ilovethemuisic123]

This is great but you speak way too fast for me! I am a beginner trying to learn this, and I had to rewind several times to really understand what is happening.... :) thanks, really good video tho

[houro19]

Wow thankyou so much! My first flash website for college will be awesome! I'm not doing the same as you but I'm implicating the techniques into what i want to do. Thankyou so much again.. you have been such a help, i was wondering how to do this!

[lovelyritaah]

This instruction wonders too much. Stay on task..... steps 1, 2,3, etc. Not 1, but then this, step 2, but then that. I don't care about rotating gradient on each layer for this instruction. Unable to follow and perform task.

[AutoShrink]

Hello Tutvid,

Excellent tutorials overall. While this was enlightening it did not quite answer my problem. I have an existing Flash component on my web page. I would like to have it start animating only when rolled over or clicked and stop when rolled off or clicked. Thank you in advance

[ggordiep]

i've been looking for this, thanks! but for future reference when recording your video turn off whatever your using to monitor your audio.. you can hear the words comin from your mouth, why do you need to hear them out of the speakers too?

[jayc0l]

Ive been searching for this in a week!!!! You helped me a lot! THanks!!!!!!

[humanixior]

What action scripts are here? Only stop()? I can believe!

Give me on what minute and second is Action Script to play video

[FinalIcarus]

When I break apart the buttonthe first time, my letter "u" disappears

[fromm101]

Thank you so much for posting this! I used flash six years ago and haven't done much in it since- this video was so easy to follow and taught me the basic steps so that now I can adapt this method to suit my needs! Awesome!

[petkannaa]

the title is advanced, but you still explaining all the details for beginner, you can cut down those time to 15 minutes or so

[hanwenzero]

great... i gotta get another software -.- thanks adobe, u just cant put them in photoshop or dreamweaver?! >_>

[hunt0000007]

@hanwenzero lol its not just another software its FLASH!!

[brendandruff]

@hanwenzero lmao we have a noob here people, flash is vectorized animation, illustrator is vectorized illustration, and photoshop is for image manipulation, dreamweaver is for web design coding html and css, after effects is video editing software and the list goes on kid, learn them all and you understand everything you see on TV, The web, DVD, Graphic novells and cartoons, they're all specialized expensive industry software. ENJOY YOUR KNOWLEDGE =D

[Joao280885]

Thank you for this great tutorial XD!

[kmoskaos]

@ADMoxie It will require much more action script!

[ElementzUK]

Can anyone help me? As far as I know, I followed this tutorial exactly. My Down_MC Doesnt play through the whole animation, It goes straight to the Up state_MC. Does anyone know why?

[williamfmc]

Great tutorial! i was looking for this

[blakarosoe86]

How do I add a link to the Button?

[lilraster]

@blakarosoe86 This would be great help for me too... Please reply.............

[revealeddarkness]

Only one thing to say AWWWWSOMMMEEEE!!!!

[joaquinluismendieta]

very good tutorial! 

[israelichicka]

thank you!!!! youre awsome explaining!! it works perfectly for cs5 as well!

[liftedzj]

question, I am struggling to add a link to a button I designed based off this, anyone know what the proper script is and where I should place it?

[TheCoconut1000]

Great vid, just one question...

If i mouse over my button several times.. the sound starts over form the beginning but on a new one.

So everytime i mouse over it a new one starts.. sounds crasy if u mouse over it several times..

Help please

[mattgaming459]

i have 2 problems the button is hidden and when i scroll over it then it appears and the other problem is the colour tinit does not come up when i click pls help or pm me

[babypotpotable]

thanks dude!

do you know how to make a karaoke songs in flash? i hope you can help me,thanks!

[ricodesalisa]

@babypotpotable you can do it by masking the text and timing it with the song

[scottfbc]

jow, how do you safe this and import it to dreamweaver ??

[studiosvb]

tut, man...

definatly usefull stuff here, thanx a lot

however, also wheres the short version man, like the button that goes from red to blue and the new page ? :-) ? like..25min and 200 words a min..thats almost the blueprint for a space rocket!..anyway on T-break after 11:40..will resume tutoring..dont get me wrong..awesome stuff !...later.

[TheMysticTeacup]

You're meant to be teaching people not fucking confusing them with this BULLSHIT

[2uneek]

is it possible to use the same button thats been created to edit the text to something different? ive created one button that says next "next" button but how do i make another for "previous" button without having to do it from scratch again?

[lilraster]

@2uneek This is also what i really need to know please REPLY!!!!!

[pasnthru99]

great vid / how do i do this for all my buttons ? repeat process for each? thanks for any help, doesnt matter what version cs3,4,or 5 ill figure out how to navigate just need to know how to duplicate each button. thanks : i did this one in cs5 at home and cs3 at work and worked great. just need more buttons.

[lilraster]

@pasnthru99 I'm also in the same position.... any help would be great!!!

[spixelisation]

SO HOW TO ADD LINK ON THIS BUTTON ?????????? i am a kind of newbie

[MrRyubusa]

the tutorial is great, but all I really need is an image that fades into another image on roll over, anyone got a tut for that?

[eopedroza]

to slow man

[preeniks]

well when u create layer2 and delete word button and further switchover to layer1 i am not getting word button again..can u plz temme the reason ???

[Yvesyew]

Thank you bro =D

[Chicagofashndiva]

hOW ARE YOU GETTING THE WORD BUTTON IN FRONT OF THE BOX WHEN U CREATE THE BOX WHEN YOU ARE IN THE BASE_BTM AFTER U'VE ALT CLICKED THE HIT BUTTON. i DONT UNDERSTAND BECAUSE MY BOX COVERS THE FULL WORD BUTTON, IN WHICH U CANT SEE IT, AND IN ORDER FOR ME TO DELETE BUTTON, i  HAVE TO RE-ARRANGE THE BUTTON AND BOX. aFTER THAT WHEN I CLICK ON THE SECOND LAYER UP, THE WORD DOESNT EVEN APPEAR. WTH, THIS DOESNT MAKE SENSE

[mydre03]

thank you. C",)

[YoshiJumper]

thankx!! xdxdxd

[JohnsonGetDown]

PERFECT! Just what I was looking for! Thank you so much :)

[Jazza159]

The sound coming out of the left channel drove me crazy!!!! srsly dude can u use stereo other whys gr8 tut, twasa bit fast for me but im a noob to flash

[pimpnninja]

this is totally wicked and radical dude

[TheShenza]

pochemu on dolzhen govorit na ruskom? kogda na ruskom idzot video kurs, pochemu ani ne dzelaiut titri na angliskam???

[MrEdelius]

@TheShenza Ну, видать, всё потому, что скоро всё будет на русском, так сделайте и свой вклад титрами, чтоб не остаться на обочине силиконовой сиськи... пардон, долины.

[TheShenza]

@MrEdelius a ti popki ne mashi, mne pofig tvaio mnenie!! pendego xrenaf

[MrEdelius]

@TheShenza Видать, ты нигер, который в жизни не научится говорить по-русски; "pendego" - первый раз слышу такое слово. Мудила, расшифруй плизз для общего образования)) Единственное, что понятно из твоей синтеции проститутки - так это словосочетание "mne pofig". Будь умнее, не кажись пидарасом, а то страшно становится за Америкосов.

[TheShenza]

@MrEdelius slish? idzi ti naxui navsegda a? sasi xui ne psexui bliad!! mne plivat znaiu ia tvoi xrenaf iazik ili net.. tak shto idzi traxni svaiu mat! :)) please..

[MrEdelius]

@TheShenza

Ах ты оказывается Грузин! Только сейчас понял это. Только же у грузин комплекс "Трахни свою мать"... Сексуальная неудовлетворенность, повышенная волосатость, горячая кровь, нохчо в спину дышат - и всё это говорит о твоём психологическом состоянии. Саакашвили привет от меня))

[TheShenza]

@MrEdelius on ponel shto ia gruzin :D:D reshil pacan domashni zadanie, vot maladzec a, pozavi mamu svaiu, ia saskuchelsia ponei :D

[MrEdelius]

@TheShenza

Ты свою маму уже устал ебать, хочешь другую? Думаю, папа ругаться будет :D А ты если скучаешь, так ты овечку возьми, да потрахай, глядишь и поймешь, как твой папа тебя сделал)))

[TheShenza]

@MrEdelius sinok, eto ya tvoi papa bliad, cho ne uznayosh? daush, naverno ne takush silno ia imel tvaiu mat sinok, :D:D no nechevo, predziot vremia ia i tvaix dzetei po trax trax :D:D:D

[MrEdelius]

@TheShenza

Ты еще и педофил! Фу, извращенец!

[TheShenza]

@MrEdelius ladno, zakoncheli uzhe... ia dzelaiu pervi shag.. budz dobr, i ti tozhe :)))

[MrEdelius]

@TheShenza

Да мы-то всегда рады закончить то, что начинают Грузины. Раз уж ты сделал первый шаг, то последний за мной. А видео-то лучше с русскими титрами сделать, прикольнее было бы всем.

[TheShenza]

@MrEdelius a ti vso eto leco klico mozhesh skazat? suka ti, vkampiutere blatuesh.. ladno ia ne budu sravnitsa bolshe, iz za kakoeta video shtoza xren natvarili

[MrEdelius]

@TheShenza

Лицом к лицу было бы приятнее общаться - однозначно, а компьютер - он на то и компьютер, чтобы тебе можно было бы скрыться от общения со мной.

[TheShenza]

@MrEdelius ia ne gruzin, i ne nado dzelat kakiita vivadi. vso

[MrEdelius]

@TheShenza Ну вывод есть такой: 18 летний Грузин, еле говорящий по-русски, защищающий Американизм)) короче, тупак)

[TheShenza]

@MrEdelius kto zashishaet ameriku ia prosto skazal shto on amerikanec i pochemu on dolzhen govorit po ruski? vot ti naprimer ruski da? i budzesh govorit po ruski yesli sdzelaesh video urok a ne po angliskam. i ia skazal uzhe ne oskarblai menia bolshe bliad ti shto takoi tupagalovi

[MrEdelius]

@TheShenza

:D Ну ты меня честно насмешил своей наивностью... Я не знаю английский, Этот ролик дискриминирует меня! То есть автор хотел сказать, что он такой пиздатый мудила, которого попросили написать титры на русском, чтобы я тоже понял о чем речь. И имя у тебя какое-то женское "защитник".

[TheShenza]

@MrEdelius etot ti tak shetaesh svoim golavi :)) MrEdelius :D nuush da, eto uzh tochno muzhskoie imia :D:D:D:D xren setim video, ia mnenie skazal svaio prosto..

i ne nado reshat po maim vozrastam kak ia budu razsushdat moi konflikt :))

[JayGeePee1]

@MrEdelius - English Translation = Well you have fairly made laugh me the naivety... I do not know English, This roller discriminates me! That is the author wished to tell, that it such bitching pricks whom credits in Russian that I too have understood about what speech have asked to write. And? A name at you any female "defender".

[MrEdelius]

@JayGeePee1 Шо ты молвишь, лузер бассурманский? А теперь по-медленнее и по-русски.

[MrEdelius]

@TheShenza

Есть такая русская народная пословица:

"If you on to be ok, fucking Shenza everiday"

Sorry miss Shenza, i like your mind))))

Кстати, поделишься информацией откуда ты знаешь знаешь русский? (Правда очень плохо и не все поймут, но я оценил по достоинству)

[TheShenza]

@MrEdelius teper ia skazhu :)) IF YOU THINKIN FUCK IS BETT. FUCK EDELIUS AND SAY OU YEES!! :D idi naxui bliad, u tebia dzelat bolshe nechevo? suka! traxaeshsia po polni pragrami :D:D

[MrEdelius]

@TheShenza

Вот ты жирная черная сучка))) Так бы и впердолил своего друга тебе в

твою тугую жопу)

Жаль, что я ни слова не понял из твоего английского...

Я тебе могу дать отсосать свой хуй за 100 рублей, хочешь? Ты платишь и ты сосешь, ферштейн?

[TheShenza]

@MrEdelius ax ti esho pidarast? :D:D sukin ti sinok :D idzi ubei sebia :D ne xrena ti ne ponemaesh anglisi, i tak vidno shto xochesh video bilo po ruski :D mudak ti bozhenstvini :D Edelius, skazat tebe sekret? ti chlenagalovi sushestvo :D

[MrEdelius]

@TheShenza

Ну не стоило так сильно комплименты мне делать, а то такое чувство, что ты мою жопу решил облизать) Ты наверное, весь словарь по Ожегову перечитал перед каждым ответом. Ну хоть русский вспомнил... хороший пёсик. Я научу тебя великому и могучему!

[JayGeePee1]

@MrEdelius - English Translation= There is such Russian national proverb:

" If you on to? be ok, fucking Shenza everyday "

Sorry miss Shenza, i like your mind))))

By the way, you will share the information whence know know Russian? (the truth very badly and not everyone will understand, but I have appreciated)

[MrEdelius]

@JayGeePee1 Шо ты, морда басурманская, пытаешься мне сказать? Я бы тебя понял хотя б на пальцах, но ведь ты упорно не желаешь вспоминать прородителя языков наших - русский шпрахе. Ферштейн?

[JayGeePee1]

@MrEdelius - Я только сообщил каждому, что Вы говорили на русском языке. Я не пробую не начать ничто. Я люблю российских людей и путь российские языковые звуки. Я говорил, что YouTube должен иметь переводчика для всех его видео, таким образом каждый может понять их.

[MrEdelius]

@JayGeePee1

Сударь, ну вы могли бы перевести как-нибудь титрами свои видео, плизз.

[TheShenza]

@MrEdelius pover, eto ti tak xochesh.. po tamu blatuesh.. :)

[MrEdelius]

@TheShenza

Тебе с твоим извращенным педофилическим мозгом такое не понять.

[MrEdelius]

Во дятел... хоть бы титры на русском включил. Speak Russian, looser.

[Rubaka]

@MrEdelius ха-ха. Учи английский или убейся о стену, недоумок!

[MrEdelius]

@Rubaka недоумок - твоё имя и имя твоей матери, русский выучи, дятел новогодний (подсказка "...о стену"). Не найдешь тут ошибку, буду считать, что ты просто американский ушлёпок. ))

[Vb8Procoder]

Cant eany one be botherd to put the code in description???

[IsThisMy1ife]

Is it possible to make a roller over button and have a little window with text in it pop up? would you use flash or dream weaver?

[emixiak]

thanks for sharing!

[doomsdayman107]

I want to see the complex actionscript one too...

[gadgetzreview]

i cant say how amazing this tutorial is! 5***** and fav!

[BoylesWhite]

great helpful video but please stop calling you light boxes squares :P

[Ghostedwill]

i got everything working exept when i clicked still comes out white..

[LongshotUK]

perfect, cheers man keep it up

[sprucemagoo1]

top tuts.

can't believe these people.

[citrisfruits]

THANK YOU !!! this helped alot. keep doin what ur doin xxx

[MrDavidRF]

that is cool

[MysteryEggs]

nice has good effect..200th comment

[MrMADProductions]

It's a good tutorials, though you talk 2/3 of your videos xD, a bit less talking, a bit more action, in my oppinion.

but very good!

[prasadkkumar03]

Hi,

The post is awesome. You just cant understand how much of my confidence it has boosted. I almost thought i will never going to learn flash . Thank you.

[leirgauk]

can anyone please tell me what accent he's using? it's like a canadian/boston kinda groove?

[FeelingVeryLucky]

He's from Philadelphia, so I guess you can call it Northeastern?

[m1ckm0use]

@xroox

Hi xroox, I had the same problem:S but i found out what was wrong: you need to create a classic tween instead of a motion tween. I hope it'll help you, it worked for me;)

[v1ll0]

Same problem here but if you use the classic tween, the rectangle moves, but it doesn't change in size...there has to be something that we are missing here...

[pauloleitao2006]

Great,

can you show how to do the same but in a navegation bar witheat at lest 5 ottons

[artherojas]

thanksS!!

[NeighbourOFTheMoon]

ok :D ...great .... how to duplicate this COMPLICATED symbol ?

[IceCreamProdutions]

THANKS!!!!!!

[hailesj]

erm, it's all working great, but when I click on it, I have to hold the click for the 'down' state to work. Is there any way for me to make it keep playing after I've stopped clicking?

[luisitox807]

you can remove the stop() script at the end of that particular animation.

[ClaudiusMaximus23]

thank you

[andreibranescu]

you can have gradient over the text without breaking down the text, so you can change the text anytime.

just put the text on a layer and the gradient on another layer. than, just set the text layer to be the mask for the gradient.

and you're done!

[andreibranescu]

if you're thinking "how do I put gradient on a layer ?", it's simple:

create a rectangle and apply the gradient inside it.

[TheFreshPeddler]

@andreibranescu - brillian, thank you. cant believe i didnt think of that

[ClaudiusMaximus23]

great tutorial BUT what do you do if you want to change the text from Button to something else. Please don't tell me you have to start over again.

[andreibranescu]

you can keep the text, but you have to use another method for applying gradient over the text.

look at my comments, it's very simple

[luisitox807]

jejje....u won't like the answer lolz

[omaralmudaries]

thank you very much, please give me the website

[moxs4]

Dood, thank u so much for this tip! it helped me soo much with botton making and my teacher was impresed to see work like this in my pro graphics class!

on top of that, those light beams are just so cool!

Thanks from Mattrex!

[PreciousJoe]

Very nice job! Thanks a lot!

[GMZART]

THANK YOU!

[Seigu007]

Why do you sell these lame tutorials? Lame shmuck

[PrincesTomboy]

lol XD i figured this out myself and THEN found tuts for it. Dx dang!

[FlubberyGibberFlafle]

Same here. I figured it out after i got used to flash. Pretty simple.

[Unsought24]

anyone please can tell me what´s he writing in the action sript layer in th option action???

i can't see ...is stop()...what else??

[MC117db]

_x is for Actionscript 2.0

x is for Actionscript 3.0

[Unsought24]

it´s a great tutorial..thanks so much :)

[happenstancemag]

ahaha 3:40.

great tutorial!

[keduardop]

when i upload the website with the rollover when i put the mouse over the image the rollover image wount cope up only a little square showing image not found but i did upload the image

[ricfasb]

Muito bom o tutorial, gostei muito e me ajudou demais...

Very good the tutorial, i liked very very very much and

help me one hundred per cent!

Thank You!

[tsubasa757]

Well, all i can say is, shit, this is pretty hard. All i needed was Firecracker/After Effects/Photoshop CS4(64 bit), but i got the whole package, The Adobe CS4 Master Collection. So i really dont know what to do with this flash maker. :3

Songkipark

[150GB]

your my hero :3 thanks man ;D

[kingdomunleashed]

thanks for the help TheWilliam0087! ok, I guess what I meant is linking the button for navigation to pages within my site. like I said, I know how to script buttons but not mc's. if you could give me sample script for that or something that would be awesome!

[kingdomunleashed]

Please someone, anyone help! I made this button fine. What's the script to link it to pages?

[TheWilliam0087]

Simple, for SWF format - loadMovieNum("Flash.swf",0), for HTML format - getURL="Flash.html"

that's it.

[kingdomunleashed]

i guess I don't understand that at all. I'm fairly new to flash. I know how to script a button, but not a movie clip. more info please?

[kingdomunleashed]

Ok. I built the button again. Interacts perfectly with the mouse, but doesn't go to a url when I click it. what's the deal with that?

[Crastics07]

I get confused on how to add the gradient on top of the letters. What tool and how do you change it from side linear color to on top linear gradient color?

[Kopriko]

Great tutorial as always, but i was expecting for you to show how to create a roll out animation on a button as weel, ive looked on so many places on the web for that... until i eventually give up and learned how to do it myself...

[quartermane]

Great tutorial ... sometimes it's a little too fast (I had to pause and/or rewind in some spots). But overall, really good. I think we'd all benefit from an updated CS4 tutorial addressing the differences in the filters panel (It's only available from the Scene view), and the Classic Tween vs. Motion Tween.

[wongtonfui66]

thanks great lesson. does anyone know how to get the filter blurr that he gets in cs4??? i cant find the filter option to save my life in cs4 i got everything else except i just have squares that dont fade out =( lol

[fresh81steez]

when you click the little white spec on the right side of the properties if you change it from a graphic to a movie clip the filters section will become visible for you to add the blur.

[CutApplesz]

I made the button but there is a minor problem. When i click the button, I need to hold down the mouse button for the animation to play. I'm trying to make a button that when pressed, it shows a small animation and then go to another frame. How could i make it so it plays the animation before it goes to the other frame?

[TheWilliam0087]

Perhaps you could place that button into a movie clip, add the on(release){play();}into your button action, then left some frames for your animation, then, use the "gotoAndStop(?); to the frame you wanted to go, i used to do this.

[kingdomunleashed]

Sorry! You're really helping me, but it's not quite enough info for my level. Could you give me some mock script for what you just said? Like maybe the whole script for a fake button?

[distanteyesareglazed]

Hiya, I'm having the same problem. Any ideas?

[rayzero2002]

Great Tutorial!!! I have a question.. How can I hyperlink my buttons to other webpages? Could you please help me out or give me a could or something.. Please, please help

[hahahaspam]

His color properties in the bottom panel were that there was a fill but no outline.

[thatniqqasean]

thanks a lot this has really helped me.

[Gino1unknown]

awsome video, just got one question, after you made the roll over button, how or what settings you use to publish or export it to so you can use it in dreamweaver?how can you make it link to another part of the site that you made in dreamweaver?

please anyone that might know how, please reply and thank you for the video.

[12ka4tezaab]

thanks a lot.

It's really cool.

[Hug0101]

How can I make it so that when you hover your mouse over an image another image pops up? So I hover my mouse over the image and then it comes up with a little image that says Download?

[improving4eva]

1) Double click your button

2) Select "over"

3) insert a keyframe there

4) delete the current image in the "over" frame

5) insert the image you want in the over frame.

[02javis]

improving EVA IS RIGHT BUT,

you dont have to delete the current image if you dont want to,

in the button stage you can have an image stay and and a new image appear over it.

just like THIS tutorial, the NEW image can be creative.

change color, move or be transparent OVER the button itself.

[fliptricker19]

WTF 25 MINS HOW DID U PUT IT UP

[JosefHolub18]

Anyone can tell me why, when I publish the button the button start to play automatically, which I don't want to. I need it to be like this tutorial, when I click on the button it doesnt change but stays the same. Or even when I hover the mouse pointer on the button it doesn't do anything since the button starts right away when I test the movie, please any help would be appreciated greatly.

Thanks

[02javis]

check your HIT area,

if you don't select it like in the tutorial, all of the stage becames the HIT area and any part that your mouse touches, it activates in this case the ROLLOVER.

does this help?

[JosefHolub18]

going through the tutorial, in the middle where you started to create the light zips, you highlighted a portion of frames on LEFT layer and created a motion tween, but i did the same and yet when playing through animation the light zip does not play like it should like on this tutorial. It just stays the same, doesn't get bigger when it reaches the middle. Any Ideas?

[02javis]

Remember when tweening,

an object changes (or just moves), check with timeline, move it to see the process it creates,

if you want IT to change colors or to blur,

the last frame should have this change.

[MissVanessa77]

Simple, clear, helpful. Thank you!

[thebray14]

Thanks Man :D This Reall Helped... Great Tutorial :)

[PS3Crazy]

Can someone tell me how to program the actionscript so that the animation finishes it's loop when the mouse leaves the rollover state. So that the animation doesn't stop abruptly when rollout.

[NTL808]

great tutorial man ... thx allot ... was looking for a time now to see how these buttons are animated

[brjerizmo]

does anyone know how to make the down state of the button play out... the only way it plays out right now is by clicking and holding the button... help please

[digger231]

Thanks. Very helpful.

[spymercinator]

try doing this and carefully explaining what you're doing all under ten minutes.