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
Ah man. If only I’d found this a few days ago.
Dude… _excellent_ library. And commenting out the wazoo.
One finicky suggestion is to somehow be able to modify the behaviour when you click, drag outside. At the moment, on drag outside, the button returns to mouseOver state. It would be nice to be able to set it to return to the up state, which is the way buttons work in most UIs.
In any case, great work!
[...] But as it turns out, I don’t have to anymore because Tyler of xtyler.com has released a super-groovy as3 library for making any InteractiveObject behave as a button. [...]
Aidan – thanks for your high praise! I implemented the stateUp, stateOver and stateDown to match the behavior of SimpleButton to remain consistent with Flash standards. Because the dragOver/dragOut events are available you can easily roll your own behavior.
I’m using this solution in a much larger context these days, don’t miss out on the Reflex component framework.