A reader asked me if there is a reliable way to determine if the mouse cursor has left the Stage in Actionscript 2. I believe the best approach is to use Javascript to see which object in the DOM has the mouse over it. But it would be nice if there were a reliable way to do it in Actionscript.

Here’s what I came up with which amounts to zero:

• There are no Stage events to listen to so that doesn’t help.
• Checking the _xmouse, _ymouse on an interval doesn’t really help because the last position of the mouse cursor is reported when the cursor leaves the Stage.
• Creating a large MovieClip to cover the Stage and listening for onRollOut on it won’t help because any MovieClips above it will trigger the onRollOut when you rollOver another MovieClip.

It’s rather simple to do with Actionscript 3 but that isn’t an option for my friend.

[ download code ]

package {

  import flash.display.Sprite;
  import flash.events.Event;

  public class MouseOverStage extends Sprite {

    public function MouseOverStage() {
      stage.addEventListener( Event.MOUSE_LEAVE, mouseOutHandler );
    }

    private function mouseOutHandler( event:Event ):void {
      trace( "mouse has left the stage" );
    }
  }
}

Anyone have a suggestion?

If you would like to move a DropShadow, or just about anything else for that matter, as the user moves the Mouse around then try something like this: ( download FLA )

The code in the FLA is very well commented. Here’s the gist of what’s going on:

1 – Start by creating a dynamic DropShadow

import flash.filters.DropShadowFilter;
var ds:DropShadowFilter = new DropShadowFilter(15, 0, 0x000000, 0.8, 5, 5, 1, 3, false, false, false);
myText.filters = [ ds ]; //


This last line is a bit of a cheat because we are passing ds as an array and not pushing it on to the myText.filters collection. We can do this because we only have one filter that we’re using here.

2 – Create a Mouse Listener

import mx.utils.Delegate;
var mouseList:Object = new Object();
mouseList.onMouseMove = Delegate.create( this, updateShadow );
Mouse.addListener( mouseList );

This should look familiar if you’ve created Mouse Listeners before. What might be a little different is the use of the Delegate class. It’s an amazing class that allows you to run functions in a specified scope. Otherwise the listener would be running in the scope of the mouseList object which is pretty useless. Delegate allows us to keep the scope as this so that we can still access functions on our frame here.

Delegate shines even more when you use it with classes. Once you start using it you’ll love it. You can read a bit more about it on polyGeek.com.

3 – Create a function that is called whenever the Mouse is moved

function updateShadow():Void {
var angle:Number = getAngleBetweenPoints();
angle = (angle * 180) / Math.PI;
ds = new DropShadowFilter(15, angle, 0x000000, 0.8, 5, 5, 1, 3, false, false, false);
myText.filters = [ ds ];
}

This function is called every time the Mouse moves.

4 – Create a function that returns the angle between two points. If you don’t pass any points then it will use the position of the Mouse and the center of the Stage as the two reference points.

function getAngleBetweenPoints( x1:Number, y1:Number, x2:Number, y2:Number ):Number {
if( x1 == undefined ) {
x1 = _xmouse;
y1 = _ymouse;
x2 = Stage.width / 2;
y2 = Stage.height / 2;
}
var dx:Number = y2 - x1;
var dy:Number = x2 - y1;
var angle:Number = Math.atan2( dy, dx );
return angle;
}

You have to love atan2. For more about this read Keith Peter’s Making Things Move, page 55.