Wow, making a simple button out of a Sprite in AS3 is not an obvious task. I mean a proper button with correct states and with dragOver, dragOut, and releaseOutside -type behavior. Those who coded much in AS2 know what I’m talking about. When a button is pressed and the mouse moves off the button (still pressed) onto a neighboring button, the second button shouldn’t dispatch the rollOver event and subsequently switch to an over state, the first button shouldn’t dispatch a rollOut but a dragOut, etc etc.
Every Flex Button component has to keep track of state and compare it against each bubbling event, running through a series of if/else’s and finally taking on the correct state despite incorrect events. And of course it’s implemented into the Button component – what if I want that behavior somewhere else?
There are the Flash CS components, though I’ve never had the opportunity to use them. Anyway I wasn’t impressed with how unresponsive the button feels (still think you should have included the updateAfterEvent() Grant) and it seems there might have been other issues but I can’t say for sure. The components are easy to skin, but sometimes you don’t want the whole component, just the functionality.
So now I’ve implemented a seemingly good solution. I’d like to test it thoroughly in a real project, but it’s working well as it stands. Here’s the gist:
“The ButtonEvent transforms InteractiveObjects into buttons by adding common mouse-related events that define a buttons behavior.” – excerpt from the ASDocs
The ButtonEvent has the static method:
makeButton(object:InteractiveObject, includeCallbacks:Boolean = false)
Throw anything you like in there: TextField, MovieClip, Sprite, etc, and it’s all set up with a new set of MouseEvent types. Notice the option to include callbacks makes a nice transition for old school Flashers … yes, it works exactly like ActionScript 2.0 (minus the part about having to run every object through a static method).
The following events are supported:
PRESS:String = “press”;
DRAG:String = “drag”; // this is essentially “mouseMove” for clicked items, refers to the mouse dragging and doesn’t actually move (or drag) the displayObject
ROLL_OVER:String = “rollOver”;
ROLL_OUT:String = “rollOut”;
DRAG_OVER:String = “dragOver”;
DRAG_OUT:String = “dragOut”;
RELEASE:String = “release”;
RELEASE_OUTSIDE:String = “releaseOutside”;
I don’t have files available for download on the site at the moment, even from my older posts, sorry. I have a “project” in the works that includes an R&D website where I’ll post useful code – I can make sure the ButtonEvent is added to the pile if there is any interest. Of course you could always ask too.
Best of luck with all your custom button-making attempts in AS3
I stumbled upon this issues some time ago:
http://blog.andre-michelle.com/2007/simplemouseevents-onreleaseoutside-ondragout
I fact, I don’t like the native event system.
Please post the code when you get a chance, I’ll love to see it.
Thanks
B
[...] Button Behavior Made Easy Posted by xtyler in General on 01 29th, 2009 | no responses ?I posted a rant on “releaseOutside” earlier this month – finally, here is the example and the code for making anything a Button in [...]
Bob, as noted by the pingback from my own blog, the code is in my newest post