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

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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.

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}