Release Outside in AS3 – Firefox 3 on mac trick

As you probably heard in AS3 to treat the “release_outside” event it’s a little bit tricky.
But AS3 comes with solutions for everything even for “stage_leave” event. In AS2 you couldn’t do that.
Now you can do that by treating the “Event.MOUSE_LEAVE” event.
To do that you need to use event listeners also on stage.

This is how we do it step by step:

1. Use a global variable to know every time what was the last pressed object.

// HANDLERS VARS
var currPressedObject : *;

2. Secondly add the event listeners on the object that the user will interact with.

mcTest.buttonMode = true;
mcTest.addEventListener(MouseEvent.MOUSE_DOWN, pressHandler);
mcTest.addEventListener(MouseEvent.MOUSE_UP, releaseHandler);

3. Inside the “presshandler” function you need to update every time the “currPressedObject” variable and simulate the treating of the “release_outside” event:

// set the new pressed object
currPressedObject = mc;

// add the release event on stage to simulate releaseOutside listener
stage.addEventListener(MouseEvent.MOUSE_UP, releaseOutsideHandler);

We discovered that in Firefox 3 on MAC there is a problem with treating the “release_outside_scene” event that should be the same as “release_outside”. The code above is not enough.
To fix the problem you will have to add the “releaseOutsideHandler” also for the “Event.MOUSE_LEAVE” inside the “presshandler” function:

stage.addEventListener(Event.MOUSE_LEAVE, releaseOutsideHandler);

4. Inside the “releaseOutsideHandler” write the code for those objects that need to have this event treated as below:

function releaseOutsideHandler(e : Event) : void
{
// remove stage event listeners
stage.removeEventListener(MouseEvent.MOUSE_UP, releaseOutsideHandler);
stage.removeEventListener(Event.MOUSE_LEAVE, releaseOutsideHandler);

// here release outside code only for the items that need "release outside" listener
if(currPressedObject == mcTest)
{
ttrace("OUTSIDE");
mcTest.stopDrag();
currPressedObject = null;
}

// if(currPressedObject == mcOtherClip) {}
}

5. Inside the “releaseHandler” write the code that will be executed only if the user releases the mouse on the same object where they pressed:

function releaseHandler(event : MouseEvent) : void
{
var mc : MovieClip = MovieClip(event.currentTarget);

// test if the releasse event comes from the same item that was pressed
if(mc == currPressedObject)
{
// for every item write the code here:
if(mc == mcTest)
{
mcTest.stopDrag();
currPressedObject = null;
}
// if(mc == mcOtherClip) {}
}
}

This is our final code that we used in our experience that should work on any browser and any kind of interaction between your user and your flash product.
You can download the full flash and html sample from here .
I hope it will heal your headache in just a few seconds on solving issues with the interaction.
Please let us know if it worked for you and if you could add anything else.