Over a million developers have joined DZone.

AS3 Button Behavior Made Easy

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Published at DZone with permission of Tyler Wright, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}