Detecting onReleaseOutside in AS3

ActionScript 2.0 has support for the onReleaseOutside event in the following manner:

myMovieClip.onRelease =
myMovieClip.onReleaseOutside = function():Void
   this._x += 300;

This directly applied event handler will trigger when the mouse is released over myMovieClip or when that clip is clicked upon then the mouse is subsequently released elsewhere.

ActionScript 3.0, however, does not define an onReleaseOutside event type, though there are plenty of other MouseEvent types.

Usually, this is not a problem. You want to detect a CLICK event, which is dispatched when the user has pressed the mouse down then released it over the same object (with any number of other possible mouse events in between). The logic for this is that the user might have changed their mind and be deliberately releasing the mouse while not over the object, not wishing to trigger any event.

But suppose we are creating a button which reacts to a MouseEvent.MOUSE_DOWN event – perhaps a fast-forward button such as we created recently in order to speed up the playback of an MP3. In this case, we want the MP3 to revert to normal playback speed even if the user releases their mouse while not exactly over the button (as is often the case). We need a releaseOutside event for this eventuality.

So how are you supposed to detect when the user has clicked on your interactive object then released the mouse outside? The solution is to temporarily apply a new event listener until the mouse is released, as follows:

private function mouseDown(e:MouseEvent = null):void
   stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp, false, 0, true);

private function mouseUp(e:MouseEvent = null):void
   stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUp);
   // do other stuff

myButton.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown, false, 0, true);

This code is minimal, but it illustrates the point. We always detect for a MOUSE_DOWN on the given object (myButton), but only when this has occurred do we then listen out for a MOUSE_UP. When this happens (regardless of where) our other listener function is triggered. Note that this then unsubscribes itself from the Stage, and then everything is cleaned up.

Cheap web hosting

Comments on this post

  1. Orland Media says:

    It is odd, however, that Adobe saw fit to remove the useful onReleaseOutside event, and in certain circumstances this can be more problematic.

  2. Thomas says:

    Great solution!
    Should be obvious but unfortunately it wasn’t (to me at least). Thanks!

  3. Nick says:

    Wanted to say a big thank you: ). Really sorted my problem out and here I was thinking that code was about to kick my ass. Thank you!

  4. Jod says:

    I detect the MOUSE_DOWN on the drag bar and MOUSE_UP on the stage really simple.

    dragger_mc.addEventListener(MouseEvent.MOUSE_DOWN, startdrag_fn);
    stage.addEventListener(MouseEvent.MOUSE_UP, stopdrag_fn);
    function startdrag_fn(Event:MouseEvent){
        dragger_mc.startDrag(false, new Rectangle(576,100,0,500));
    function stopdrag_fn(Event:MouseEvent){

Add a comment: