Easiest implementation of onReleaseOutside in AS3

actionscript-2actionscript-3flashmigration

I'm a long-time ActionScript 2 user, now getting started with ActionScript 3. The one thing I'm missing is an easy way to duplicate the functionality of AS2's MovieClip.onReleaseOutside. It is almost always necessary to implement this event, otherwise you get funny bugs like flash thinks your mouse is down when really it's up.

According to the AS2 to AS3 Migration Guide, I'm supposed to use flash.display.InteractiveObject.setCapture() for this, however it does not exist as far as I can tell. I guess this document is out of date or incorrect. I've found a few posts on the web about how to duplicate this functionality, but they either have their own problems:

  • This one triggers onReleaseOutside even if there was no corresponding onPress event.
  • This one seems very inefficient, you'll add and remove an event listener every time the mouse is clicked anywhere inside your app.

There has to be an easier way, don't tell me Adobe forgot about this when rewriting Actionscript?

Example AS2 code:

// Assume myMC is a simple square or something on the stage

myMC.onPress = function() {
  this._rotation = 45;
}

myMC.onRelease = myMC.onReleaseOutside = function() {
  this._rotation = 0;
}

Without the onReleaseOutside handler, if you pressed down on the squre, dragged your mouse outside of it, and released the mouse, then the square would not un-rotate, and appear to be stuck.

Best Solution

Simple and foolproof:

button.addEventListener( MouseEvent.MOUSE_DOWN, mouseDownHandler );
button.addEventListener( MouseEvent.MOUSE_UP, buttonMouseUpHandler ); // *

function mouseDownHandler( event : MouseEvent ) : void {
    trace( "onPress" );
    // this will catch the event anywhere
    event.target.stage.addEventListener( MouseEvent.MOUSE_UP, mouseUpHandler );
}

function buttonMouseUpHandler( event : MouseEvent ) : void {
    trace( "onRelease" );
    // don't bubble up, which would trigger the mouse up on the stage
    event.stopImmediatePropagation( );
}

function mouseUpHandler( event : MouseEvent ) : void {
    trace( "onReleaseOutside" );
    event.target.removeEventListener( MouseEvent.MOUSE_UP, mouseUpHandler );
}

If you don't care about the difference between onRelease and onReleaseOutside (for example with draggable items) you an skip the mouse up listener on the button itself (commented here with an asterisk).