AS3 Mouse Events, No More Invisible Buttons
Here is a small tutorial on scripting and its great changes in AS3 from AS2/AS1 thinking, we are focusing on mouse events currently.
The great thing about Flash9 and specifically AS3 (Actionscript3) is that it is starting to become a real programming platform and losing many of the silly hacks that is used to have. This is a good thing.
Old hacks like tellTarget are finally gone. Pixel level manipulation is possible and even faster. Real frameworks, excellent structured animation kits and even 3d engines are being built everyday. And invisible buttons are not needed anymore!
Like when people migrated from desktop to web, or VB6 to .NET, or OO to functional, we tend to try to reimplement the same solutions in new platforms even if there are better options because it worked before.
How to make movieclip buttons without invisible buttons via AS3 script…
Anything can be clickable and a button in AS3. Link a class to an object in a movie, dynamicly drawn asset or external asset and you are ready to make it a button.
Take for instance:
package draw.logic.tests
{
import flash.display.*;
import flash.events.*;
public class GamePlayButton extends MovieClip
{
public function GamePlayButton ()
{
this.addEventListener(MouseEvent.CLICK, onMouseClickEvent);
}
function onMouseClickEvent(event:Event):void
{
trace("mouse clicked on me");
}
}
}
You will note the addition of the event to the movie clip which makes it clickable.
this.addEventListener(MouseEvent.CLICK, onMouseClickEvent);
This again makes the movieclip clickable by listenting for the MouseEvent.CLICK event. This sample class can be linked to a movieclip for instance from the FLA library by going to Library > Properties then linking the class which would be draw.logic.tests.GamePlayButton in the above sample.
Great so we have a button now, on the MouseEvent.CLICK we are going to go to trace a message. All done right? Nope if you will notice the button does not get the linkable hand.
Make the Button Show the Mouse Cursor Hand
Well in old skool AS we might just slap an invisible button on there or make it a button type. Better yet let’s just set the this.buttonMode = true; in code which makes it a clickable button, listens to the click event, and get the hand to notify the user that it is a clickable item.
Sample script for a ‘play’ button
package draw.logic.tests
{
import flash.display.*;
import flash.events.*;
public class GamePlayButton extends MovieClip
{
public function GamePlayButton ()
{
this.buttonMode = true;
this.addEventListener(MouseEvent.CLICK, onMouseClickEvent);
}
function onMouseClickEvent(event:Event):void
{
parent.gotoAndPlay("game");
}
}
}
Good Architecture and Design
In the past most items could be moved to .as files but you would have this mix of people that still put onEnterFrames or button click on(release) code in the FLA itself. AS3 I think finally makes it fully possible to remove code entirely from the FLA with only stop(); scripts for different frames.
A nice way to be is to have all script in external libraries and files removing all script from the FLA if possible. The script for buttons to the script for the main document class. The FLA is essentially just needed for library movieclips and AS3 real forces this separation. That combined with its general better structure makes this a much better platform than AS2 and Flash8, stop wasting your time developing in that and get to AS3 (take a gander at the better structured libraries in this migration link).
Best part of AS3 is the new clean event model, the basis on Javascript 2 spec and the clearer separation of code and assets for flash. More on the Mouse and Event model in AS3 and Timers, Loaders and more coming soon.
Pingback: KinRou Blog » AS3 Mouse event and buttons