Coding MovieClips as Buttons in AS3

I would like to start off my posts with a simple one but really painful if you are used to AS2 - creating buttons in AS3.

I remember the good old days when you could just say, “Hey Actionscript, onRollOver = function(){ doThis!};”.

I digress… so I’m gonna keep this short and sweet.

If you want to do this:


myMc.onRollOver = function(){}
myMc.onRollOut = function(){}
myMc.onPress = function(){}
myMc.onRelease = function(){}

it looks like this:


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

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

// if you want a hand cursor
myMc.buttonMode = true;
myMc.useHandCursor = true;

function onRollOverHandler(myEvent:MouseEvent){
trace(“Over”);
}

function onRollOutHandler(myEvent:MouseEvent){
trace(“Out”);
}

function onClickHandler(myEvent:MouseEvent){
trace(“I waited for Press AND Release!!!”);
}

function onPressHandler(myEvent:MouseEvent){
trace(“Press”);
}

function onReleaseHandler(myEvent:MouseEvent){
trace(“Release”);
}

Let’s go over a few facts about the new button experience.
1) onRollOver is no longer used (which is probably why you are reading this in the first place).
2) In AS3, MovieClips do not act like buttons just because they have listeners, you have to tell them that they are buttons. (

mc.buttonMode = true

)
3) If you are getting this error:

ArgumentError: Error #1063: Argument count mismatch on… Expected 0, got 1.

You need to simply add anyEventVarYouLike:MouseEvent within the parentheses of your function - i.e. function

myRollOver(args:MouseEvent){}.

4) If you are getting this error:

1046: Type was not found or was not a compile-time constant: MouseEvent

Then you forgot

import flash.events.MouseEvent

5) If you are getting this error:

ReferenceError: Error #1056: Cannot create property buttonMode on flash.display.Bitmap.
at …

Then you need to put the bitmap inside of a MovieClip - so

var MC:MovieClip = new MovieClip();
MC.addChild(theBitmap);

That’s all for now. Please comment or email and I will update this as well as respond.

rob

About this entry

You’re currently hearting “Coding MovieClips as Buttons in AS3,” an entry on I h♥rt actionscript.

written:: 09.18.07 / 2am

category:: AS3, Tutorials

I heart actionscript.

I heart actionscript is a site devoted to the education and sharing of all things actionscript. These tutorials and articles are based on my experiences and problems I have encountered in my struggle to make the leap from designer to stellar coder. I hope iHeartActionscript finds you well.

Jake Chapa 12.11.07 / 11pm

here’s an EasyButton class I created that will let you do this much quicker. To apply it to an item on stage, give it the base class of ‘EasyButton’ and class of ‘EasyButton.instanceName’

-Jake

package
{
import flash.display.*;
import flash.events.*;
import flash.text.*;

public class EasyButton extends MovieClip
{
private var __onClick:Function;

public function EasyButton()
{
__onClick = function(){};

this.buttonMode = true;
this.useHandCursor = true;

this.addEventListener(MouseEvent.CLICK, __onClick);
this.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
this.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);

this.gotoAndStop(”up”); // initial state
}

public function set onClick(func:Function):void
{
this.removeEventListener(MouseEvent.CLICK, __onClick);
__onClick = func;
this.addEventListener(MouseEvent.CLICK, __onClick);
}

public function get onClick():Function
{
return __onClick;
}

function onMouseOver(event:Event):void
{
this.gotoAndStop(”over”);
}

function onMouseOut(event:Event):void
{
this.gotoAndStop(”up”);
}

function onMouseDown(event:Event):void
{
this.gotoAndStop(”down”);
}

function onMouseUp(event:Event):void
{
this.gotoAndStop(”up”);
}
}
}

Bachtiar Rahady 02.10.08 / 11pm

There is another think.. if You have the children inside those buttonMode MovieClip (eg: TextField, for label), You have to set it’s mouse interaction to false, otherwise, whenever the mouse over it, it will back to pointer cursor, not handcursor.

The script will look like this:

private function initMovieButton():void {
this.buttonMode = true;
this.useHandCursor = true;
this.mouseChildren = false;
}

Coding MovieClips as Buttons in AS3

About this entry

2 Comments

Have your say

I heart actionscript.

I heart recent posts.

I heart categories.

Coding MovieClips as Buttons in AS3

About this entry

2 Comments

Have your say

I heart actionscript.

I heart my friends.

I heart recent posts.

I heart categories.