How to Enable/Disable MovieClips as Buttons in Flash with ActionScript 3.0

While working recently on a Flash AS3 project, I had a hard time setting up MovieClips as buttons and once I got MovieClips working as buttons, it took some time to figure out how to disable them as button or actually I should call it a clickable area in Action Script 3!

In the good old days of AS2, things were quite simple, were not they? Well you can still code in AS2 but since AS3 is latest version and especially from Flex development point of view, ActionScript 3.0 is the way to go.

In AS2, making MovieClips to act as buttons was much simpler and you must be familiar with the following code:

buttonMC.onRollOver = function(){
   trace('mouse rolled over');
}
buttonMC.onRollOut = function(){
   trace('mouse rolled out');
}
buttonMC.onRelease = function(){
 trace('mouse released');
}

Enabling MovieClip as Button

Now in AS3, it becomes something like this:

import  flash.display.MovieClip;
import  flash.events.MouseEvent;

buttonMC.addEventListener(MouseEvent.CLICK, onClickHandler);
buttonMC.addEventListener(MouseEvent.ROLL_OVER, onRollOverHandler);
buttonMC.addEventListener(MouseEvent.ROLL_OUT, onRollOutHandler);
buttonMC.addEventListener(MouseEvent.MOUSE_DOWN, onPressHandler);
buttonMC.addEventListener(MouseEvent.MOUSE_UP, onReleaseHandler);


function onClickHandler(myEvent:MouseEvent){
trace('mouse clicked');
}

function onRollOverHandler(myEvent:MouseEvent){
trace('mouse rolled over');
}

function onRollOutHandler(myEvent:MouseEvent){
trace('mouse rolled out');
}

function onPressHandler(myEvent:MouseEvent){
trace('mouse pressed');
}

function onReleaseHandler(myEvent:MouseEvent){
trace('mouse released');
}

Please note that in AS3, MovieClips no longer appear or behave as buttons even when they have listeners although they would work just fine when clicked or rolled over with mouse, you have to specifically enable the button mode for MovieClips to make them change cursor to hand:

buttonMC.buttonMode = true;
buttonMC.useHandCursor = true;

Disabling MovieClip as Button

To disable the button completely, remove the listener for each event you want it to stop working and also disable the button mode for the MovieClip:

buttonMC.removeEventListener(MouseEvent.CLICK, onClickHandler);
buttonMC.removeEventListener(MouseEvent.MOUSE_DOWN, onPressHandler);
buttonMC.removeEventListener(MouseEvent.MOUSE_UP, onReleaseHandler);

buttonClip.buttonMode = false;

Hope that helps.

Cheers!