NEW! “releaseOutside” Event in AS3

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

4 Responses to “NEW! “releaseOutside” Event in AS3”

1. Andre Michelle says:

   January 28, 2009 at 8:32 am

   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.
2. Bob says:

   January 29, 2009 at 7:31 am

   Please post the code when you get a chance, I’ll love to see it.
   Thanks
   B
3. xtyler AS3 Button Behavior Made Easy says:

   January 29, 2009 at 6:18 pm

   [...] 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 [...]
4. xtyler says:

   January 29, 2009 at 6:36 pm

   Bob, as noted by the pingback from my own blog, the code is in my newest post