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:

26 Comments

Add a Comment

Your email address will not be published. Required fields are marked *

WP-SpamFree by Pole Position Marketing