AS2 → AS3: Button Event Handling

Download Example Files

In AS3, no longer are you able to do a simple onPress or onRelease handler to make a button (or a movie clip that acts as a button). As with pretty much everything else, all that is now event based. It may be a bit confusing at first but it's actually quite nice and tidy. Let's take a look at the AS2 version:

Actionscript:
  1. box_mc.onRollOver = function():Void
  2. {
  3.     box_mc.gotoAndStop(2);
  4. };
  5.  
  6. box_mc.onRollOut = function():Void
  7. {
  8.     box_mc.gotoAndStop(1);
  9. };
  10.  
  11. box_mc.onPress = function():Void
  12. {
  13.     trace("Mouse was pressed down.");
  14. };
  15.  
  16. box_mc.onRelease = function():Void
  17. {
  18.     trace("Clicked the button.");
  19. };

And here is the AS3 equivalent:

Actionscript:
  1. box_mc.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler); // or MouseEvent.ROLL_OVER
  2. box_mc.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler); // or MouseEvent.ROLL_OUT
  3. box_mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
  4. box_mc.addEventListener(MouseEvent.CLICK, mouseClickHandler); // or MouseEvent.MOUSE_UP
  5.  
  6. box_mc.buttonMode = true; // enables use of hand cursor
  7.  
  8. function mouseOverHandler($e:MouseEvent):void
  9. {
  10.     box_mc.gotoAndStop(2);
  11. }
  12.  
  13. function mouseOutHandler($e:MouseEvent):void
  14. {
  15.     box_mc.gotoAndStop(1);
  16. }
  17.  
  18. function mouseDownHandler($e:MouseEvent):void
  19. {
  20.     trace("Mouse was pressed down.");
  21. }
  22.  
  23. function mouseClickHandler($e:MouseEvent):void
  24. {
  25.     trace("Clicked the button.");
  26. }

A couple of things to note here that can save you some time/headaches. As you see in the example files, you can use MOUSE_OVER or ROLL_OVER interchangeably. However, this is not always the case. They will perform differently if you have buttons inside of buttons. For instance, if you use MOUSE_OVER, you will receive events that are sent from children of the containing clip while using ROLL_OVER won't do that and you will only receive the event from the parent clip.

What does this mean, you ask? Let's say that you have a square button (big_mc) and inside of that button you have another square button (small_mc). Using MOUSE_OVER, you will roll over the big_mc and get a call for that handler. Then, you will roll over small_mc and see that the MOUSE_OUT handler runs for big_mc and the MOUSE_OVER handler runs for small_mc. If you were to use ROLL_OVER, you would not see any other handler run while inside of big_mc (or small_mc for that matter) until you rolled out of big_mc at which point you'd see the ROLL_OUT handler for big_mc run. Make sense?

Also, make sure to set buttonMode = true if you want to see the hand cursor when you roll over your movie clips. Likewise, you should set mouseChildren = false if you have anything else inside of your button and don't want those things to disrupt the hand cursor. If you don't and you roll over something else in your button, your hand cursor will go away. This is another way to make MOUSE_OVER not call events for the children as well, in essence making it act like ROLL_OVER (which probably tells you that MOUSE_OVER is the way to go since you can control it either way).

It's also good to note that when I say buttons, I mean movie clips that act as buttons. I almost NEVER use button symbols as normally my buttons have some sort of roll over animation and roll out animation which gets ugly trying to do using an actual button instance.

If you found this post useful, please consider leaving a comment, subscribing to the feed, or making a small donation.

7 Comments

when clicked, how to make it change color as when we mouse out, the event listener for mouse out will activated.i try to removeEvent for mouse out, but then how to mouse over and see the effect again when the event were thrown away.

Hi,

This code seems incomplete, it didn't work for me.
I got this:
1120: Access of undefined property box_mc. box_mc.gotoAndStop(2);

@Y: make sure you have a movieclip on stage with an instance name of box_mc.

Yes, now I have. With two frames. Tx.

Thanks for this, I am struggling with the conversion to AS3 and this helps a lot. All this seems like it was a lot easier in previous versions, you could do it all without specifying the handlers, eg:
mybutton.onRelease = function() {
}

What do you do when you have a second button?

@gv32: you add the listeners to that instance and then you have a couple of options. You can 1) create new handlers for that button or 2) use the same handlers and in your handler figure out which button called the handler and react accordingly.

Leave a comment

(required)

(required)