Last Updated on February 26, 2019
You might have created movie clip buttons in Flash CS3 or Flash CS4 (or Flash 8 or 7 or…) before to get those animations on your buttons. Either way, creating one would have proceeded a bit like the following if you used ActionScript 2.0.
- Create a button, and give it an instance name (in the following case, myMc).
* Along the Timeline, add frame labels _up, _over, _down, and _hit (if you want a hit area for the button).
* Put stop actions at each frame label, and change the graphics and/or add some animation at each state.
* Add this code to frame 1 in the actions panel:
myMC.onRelease = function() {
trace ("You clicked me.");
}
(For full instructions on creating a movie clip button, you can refer to something I wrote for docs waaay back in Flash 8 days here updated for CS3).
More after the jump.
So anyway, you can use frame labels to tell that playhead what to do in a movie clip, and Flash automagically turns your movie clip into a button that you just write normal button code for and everything just works. And thus it can be pretty useful – you don’t have to write any code to tell the playhead where to go on a timeline, Flash will do the work for you based on the correctly named frame labels. You may have tried the same in ActionScript 3.0, and it didn’t work (surprise! or not…)
So for AS3, you need to add an additional line of code, buttonMode = true
. Set up your button the same way as the steps above, use graphics on your _up, _over (etc) keyframes, make sure your publish settings are ActionScript 3.0, and add this code on the Timeline instead:
myMC.buttonMode = true;
myMC.addEventListener(MouseEvent.CLICK, onClick);
function onClick(evt:MouseEvent):void {
trace("you clicked me");
}
Then you have a movie clip button, AS3 style.
Note: If you use movie clips inside of your button (instead of graphics), you need to set mouseEnabled to false for the instances. For example, put your_mc.mouseEnabled = false;
on the _up, _over (etc) frames.
Another button post on this blog. Yeesh. Whatever – I’m clicking Publish.
MORE INFORMATION ON BUTTONS:
- For basic information on creating a button in ActionScript 3.0, see this post: http://flashthusiast.com/2008/02/25/making-a-button-work-in-flash-cs3-with-actionscript-30-its-not-too-bad/
- If you have MORE THAN ONE BUTTON and want to add that to your FLA file, please continue on to this post about adding multiple buttons to your file.
- For info on targeting scenes or frames within a single scene, see this post here: http://foundpixel.com/articles/creating-buttons-that-link-to-different-scenes-using-actionscript-30/
- For info on targeting different windows with your button code (such as the same window instead of a new window), see this post: http://foundpixel.com/articles/controlling-the-window-a-button-click-opens-using-actionscript-30-in-flash/
- For information on controlling the browser window target that opens when a button is clicked, see: http://flashthusiast.com/2008/10/19/movie-clip-buttons-in-a-fight-its-as2-vs-as3-again/
- For info on creating buttons that go to the next frame or previous frame on the timeline, see: http://flashthusiast.com/2010/05/05/buttons-in-flash-using-actionscript-3-0-going-to-next-frame-and-previous-frame/
Jen deHaan says
Sweet JSFL!!
Jonathan says
This will help a little with as3 with setting up buttons:
Steven Sacks says
http://www.stevensacks.net/2008/02/01/using-jsfl-to-create-auto-buttons-in-flash/
:)
wilson says
hello,
I saw your tutorial in adobe.com video section (banner). i like the tutor it was so clear. can you please make one tutorial on how to create preloader ?
thanks,
Wilson
Jen deHaan says
@Wilson. Thanks! Will see what I can do! I can certainly do a blog entry for something like that, at the very least.
Àlex says
@Wilson & Jen
In the meantime, you can check Lee Brimelow’s video tutorial ‘Preloading in ActionScript 3’:
http://www.gotoandlearn.com/play?id=85
Best regards ;)
Bojan says
I think that AS3 is overcomplicated, as far as this all action-to-button thing concerned… And by the way, it’s pain in the “behind” that you have to learn new AS in every 2 years…
Justin Roberts says
Dear Jen,
do you have a tutorial on creating a simple button menu – that when you click on a thumbnail, a larger image of the thumb appears on the stage right next to the menu?
cheers,
justin
da.Jenny says
Jeeeeeennnn!
I survive by your tutorials. BUT
importing swf file to dreamweaver makes my site load forever (15sec!) in the browser. I started with flash so my pages would load faster, better, sexier and so on. Now it takes longer than without flash. I google the problem and everyone seems to have that issue- swf file embedded in dreamweaver takes forever to load in the ultimate browser- but nobody has an answer. YET??
Thank you,
Jenny
online dizi izle says
Sweet JSFL!!
movies says
great ,i will test it,and Put stop actions at each frame label, and change the graphics and/or add some animation at each state to my site!
philip says
so if one puts your code in after following your linked directions to m aking a button is the code before or after the stop command in as2? because it isn’t working for me for some reason. thanks
kripa says
I’m a complete newbie..
I’m trying to create a shape object, convert it into a movie clip symbol. Now I want the shape to get dragged when I press the mouse button and when I release the mouse button, i want the object to be dropped, I tried multiple tutorials to get this program, but none of them are working on CS4 flash 10 with action script 3.0! Any tutorials on how to do this.
tOnic says
Hi Jen, all,
I’m having difficulty with the second half of step 4 (“Put stop actions at each frame label, and change the graphics and/or add some animation at each state.”)
I can’t wrape my mind around how to add animation at each state. for instance, I want an “over” state to gradually change its tint from the “up” state as the cursor moves over the button.
how do I do that? do I make a movie clip of the tint change and embed it within the frame of the “over” state? that hasn’t worked (the button refuses to function at all)
cheers
FlashSpec says
tOnic, just make the transition of tint in the timeline of button, name the first frame of the over state “over”, on last frame of the over state put “stop()” actionscript.
Here’s some flash of mine: http://bit.ly/CtVgv – http://bit.ly/10Th0S
Alyosha says
Hey guys, I just started to learn about flash scripting and bumped into this nice page.
I have no problems making attractive buttons by first doing the animation work in after effects and then importing and assembling it in flash.
But what I do have problems with is finding out how to make a button animation play out until it finishes and not stop immediately after mouse over even is o longer active, for example.
Or for example I would like user to click on button to start animation, but delay the link activation until animation play out.
I have scoured the web to no avail, or I maybe just dont understand scripting in as3 enough, my guess is itshould not be that hard:-)
I would be grateful is someone pointed me in the right direction, either a tut or a hint on how to script the thing to work in the described manner.
Many thanks,
matilda says
HELP!!!
PLEASE:)
Hello,
I need help with some actionscript!;)
my slideshow is almost workin but i am getting an error message saying:
1084: Syntax error: expecting rightparen before SimpleButton.
Here is what my code looks like:
stop();
//next button
SimpleButton.addEventListener(next_btn.onPress=function(){
if(studio_art1._currentframe==studio_art1._totalframes){
studio_art1.gotoAndStop(1)
}else{
studio_art1.nextFrame()
}
}
//last button
SimpleButton.addEventListener(back_btn.onPress=function(){
if(studio_art1._currentframe==1){
studio_art1.gotoAndStop(studio_art1._totalframes)
}else{
studio_art1.prevFrame()
}
}
Braddley says
Hi Jen,
Thanks for the help. When I put the _over on the frame label it works perfectly. but when i roll off, the rollover stays up. any thoughts?
Thanks!
Kurt says
I am a Noob to Flash and am having problems getting some movieclips to link to different URLs on release. I am able to get them to animate, and I am able to get them to link to an html page in the same folder, but I can’t get both functionalities to work at the same time and it is driving me crazy!! I’ve tried putting the actionscript in the instance object, in the action layer, and other things and nothing seems to work!?
Here is the link to the source file: http://www.myfavorites.com/flashtest/header_v8_122209_v2.fla
I believe that the actionscripting needs to be done in the “baners” movieclip, but it could also be the “Symbol 3” movieclip. I’m not sure and this is where I also need help.
Here is also a link to the .swf (http://www.myfavorites.com/flashtest/header_v8_122209_v2.swf). See, if you mouse over the first two clips, they animate, but they do not go to the HTML page if you click on them (http://www.myfavorites.com/flashtest/success1.html). The third clip will go to the page success1.html in the same folder if you click on it, but it does not animate on mouse over.
I’m using Flash CS3 as my editor and I’m using ActionScript 2.0 for the scripting.
Any help you can provide on this is most appreciated!! I’m normally pretty good at figuring out things on my own, but This problem is driving me crazy!!
Michael says
I would really like some help with this, cause I simply can’t get it to work. I make the keyframe “_over” (it’s the only one I need), and apply “stop();” to it in the actions panel. And at frame 1 in the timeline, I add your code.
But when I play the movie, it just plays the timeline. The over-function doesn’t work at all!
What’s going on? My MC is made in photoshop, and then put into Flash, but that can’t be it right?
Robyn says
It seems to me that AS3 is so much more complicated than AS1 or AS2 to the point where you have to do so much more to get a simple button animation.
I have a movie clip that consists of a pop up button. When the viewer clicks on the the button “Galleries” a tab pops up to show subcategories. As the view movies his cursor over the subcategories those buttons turn pink (from black) and when the viewer releases the cursor on a specific subcategory the movie loads the appropriate subcategory .swf . I can’t for the life of me figure out how I’m going to translate this in AS3. Can anyone help?
If you need a visual please visit my website at http://www.redmuse.com
Thanks,
adrian says
Jeen it-s very perverse,my excytyng your Glasses
allen says
hi,
Please i need your help if u have enough to help me with action script 3.0 ..
” I have 3 different video (video1, video2, video3)”
and ” i have 3 different buttons (btn1, btn2, btn3″
I need to make each button play one vide..
for example btn1 play video1 and btn2 play video2 …etc
when i click btn1 it will play the vide1 and all the buttons will be hidden if the video playing when video finish all the buttons will be visible again.. also when i click btn2 it will play video2 and all the buttons will be hidden when the video finish playing it will be visible again and the same thing for btn3…
Please help me in this, i need the code for that if it is possible….
santini says
thanks!!!
this is what I’m looking for!!! ^__^
Andrea says
I am working on creating my art website in flash cs4. I have created one menu page with six buttons and I have created 6 different flash files to link to those buttons. When I do actionscript on the buttons so they link together, none of the code i try seems to make it work. Could you step me through this flash file linking process?
Thank you
prostate Bone cancer survival Rate says
Regards! I like this!