Aug

27

2010

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

Flash Development  Posted by on August 27th, 2010 / 0 comments
Tags: |

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!

Related posts:

  1. [AS3] Drawing Circle in Flash Using ActionScript 3.0
  2. [AS3] Load External swf into Main Flash Movie with Play, Pause, Forward, Rewind, Load and Unload Buttons
  3. [AS3] Dynamically create button MovieClips and center align container MovieClip on stage in Flash
  4. [AS3] Dynamically changing frame rate playback of Flash Movie to play flv video at different speeds
  5. External SWF Player with Play, Pause, Forward, Rewind Buttons and Seek Bar