Over a million developers have joined DZone.

AS3 Button Behavior Made Easy

DZone's Guide to

AS3 Button Behavior Made Easy

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

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.

AS3 Button Behavior Made EasySo 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 on the screenshot to go demo the buttons and view the source code:

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.

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}