Movie clip buttons in a fight: it’s AS2 vs. AS3 (again)

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:

Author Jen deHaan

Jen deHaan is a freelance graphic and web designer, fascinated with great layout and usability. She has been working in the software industry since 2001, and has held positions with Macromedia, Adobe, and Motorola. Jen has written and contributed to over 20 print publications on web design that have been published by Peachpit, Adobe Press, and Wiley. She is also a professional pet blogger at DOGthusiast, and owns a small business called Stylish Canine.

More posts by Jen deHaan

Join the discussion 26 Comments

  • Jonathan says:

    This will help a little with as3 with setting up buttons:

    function setupButton(btn:MovieClip, onClick:function, onOver:function):void {
    btn.buttonMode = true;
    btn.addEventListener(MouseEvent.CLICK, onClick);
    btn.addEventListener(MouseEvent.MOUSE_OVER, onOver);
    }
    
  • 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

  • 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/CtVgvhttp://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

Leave a Reply