AS3 Button Behavior Made Easy
I posted a rant on “releaseOutside” earlier this month – finally, here is the example and the code for making anything a Button in ActionScript 3. I’ve also added some really nice features since then. I realized after venting about dragOver, dragOut, and releaseOutside that, unless you built custom components in ActionScript 2, you probably have no idea what these events actually mean for a Button. So now, instead of imparting the boring details of exactly how a Button should work, I’ve implemented 3 new events: stateUp, stateOver and stateDown.
Andre Michelle wrote on this same subject almost 2 years ago and posted a similar solution. I took the opportunity to review his and it works well, even when releasing the mouse button off-stage. The only thing lacking (besides shiny buttons) is when one button is pressed but the mouse releases over the top of another – it should trigger the rollOver event (or an over state) of the second button. Otherwise his is a simple and complete solution to the shortcomings of mouse events in ActionScript 3.
So in order to make mine worth the release I added the button state events (up, over and down) that simplify the requirements for making a fully working button. The solution is nicely packaged as a single ActionScript class, ButtonEvent. The API:
ButtonEvent.makeButton(object:InteractiveObject, includeCallbacks:Boolean = false):InteractiveObject
By invoking this static method on any unsuspecting InteractiveObject that object immediately begins dispatching all ButtonEvent events in response to the mouse. These events are: press, drag, rollOver, rollOut, dragOver, dragOut, release, releaseOutside, stateUp, stateOver, stateDown)
Click the buttons to your hearts content:
The source can be viewed through the right-click menu on the demostration. The source has a copyright notice but you’re more than welcome to freely use this code anywhere you like. I appreciate linking back to my blog for redistribution of course. I just hope this helps anyone who has run into these same frustrations.
Nice button indeed.
I was wondering why you don’t subclass SimpleButton instead of Sprite?
Simple button has all the functionality built in, so it would have worked great if all I wanted was a custom shiny button. However, I wanted a general solution, not just a the shiny button. This solution is an example of composition over inheritance, allowing you more freedom to inherit from any InteractiveObject that best suites your needs.
Hi mate, I just wanted to thankyou for such a great and “easy to use” class, a possible next step could be passing attributes inside the constructor? maybe an object with all the attributes needed? I’ll bookmark this page and come back later… Back in AS2 I had this customized Delegate.create(scope,fn,param0,param2,param3…) that wordked great…
thanks anyway! cya around and happy coding