Useful: Track Mouse Position Outside of Flash Control

[Arodicus]

Track Mouse Position Outside of Flash
or Detect if Mouse is Not Over Flash
with ActionScript 2 ONLY.

I've noticed quite a few folks who want to track the position of the mouse outside of Flash's stage, or at least want to know if the mouse has left the stage area. Adobe says that it can't be done, at least with a 100% pure Flash solution, since Flash does not get mouse events outside of its focus.

Good news! It CAN be done, so long as the Flash appears in a browser that supports JavaScript, and you don't even need to add any JavaScript code to the page! We'll use ExternalInterface to do everything.

Here's proof! (IE Only, see below for other browsers)


And here's how to do it:

// Assumes you have a button called "testBtn" and a dynamic field called "testField"

import flash.external.ExternalInterface;

testBtn.onRelease = function() {
	var flashObjectName:String = "MySwf";
	var methodName:String = "ReportMouseLoc";
	var instance:Object = null;
	var method:Function = ExternalMouseLoc;
	var wasSuccessful:Boolean = ExternalInterface.addCallback(methodName, instance, method);
	function ExternalMouseLoc(MouseX, MouseY) {
		testField.text = MouseX+":"+MouseY;
	}
	var nullCall = ExternalInterface.call("function(){document.onmousemove = function(){var e = arguments[0] || event;window['"+flashObjectName+"'].ReportMouseLoc(e.clientX,e.clientY )}}");
};

What I'm doing here is packing an anonymous function into the ExternalInterface.call() method, which is an undocumented feature. This function, in turn, contains a subfunction that contains a callback reference to an ActionScript function. The callback subfunction is force-fed into the page's Event Manager, where it will persist until you leave the page.

Here's the double-packed JS code, broken out for legibility:

function(){
	document.onmousemove = function(){
		var e = arguments[0] || event;
		window['mySWF'].ReportMouseLoc(e.clientX,e.clientY )
	}
}

1. This snippet only works for IE. If there's enough interest I'll post a Netscape/Firefox version. It's easy; I'm just lazy.
   
2. Remember to set "AllowScriptAccess" to "always" for the OBJECT/EMBED tag of your swf if you are trying this without a web server.
   
3. The var flashObjectName in the example above should be set to the ID of the SWF as it appears in the OBJECT/EMBED.

If anybody knows how to make the swf aware of the OBJ/EMB ID that it's known as, please let me know.

Enjoy!

[Morg]

This is really nifty!! Nicely done.
Any chance you might have done the FireFox one?

[inhan]

Works also in Safari. Good work.

[Arodicus]

Originally Posted by Morg

This is really nifty!! Nicely done.
Any chance you might have done the FireFox one?

I'm no firefox whiz - I only started using it about a week ago... this code SHOULD work, but doesn't:

function()
{
	document.onmousemove = function()
	{
		var e = arguments[0] || event;
		document.getElementById('BrowserMouse').ReportMouseLoc(e.pageX,e.pageY )
	}
}

Part of the trick is to use e.pageX and pageY instead of IE's clientX and clientY. There's a way to get one script to work on all browsers posted here The code is below. Again, you have to flatten it (no returns) and wrap it into an unnamed function for Firefox to understand it. Sorry, but I'm exhausted, so I leave it to others to integrate the client-vs-page code!

document.onmousemove = mouseMove;

function mouseMove(ev){
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);
}

function mouseCoords(ev){
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
}

The real problem is you must use getElementByID to target the object, but getElementByID is not working for some reason, and I've got no clue why. If there are any Foxies out there who know what I'm doing wrong, help, please!

[idyllhands]

Anyone find a working solution for Firefox?

[xxneon]

I got it to work in FF using this call line for the ExternalInterface.call()..

var nullCall = ExternalInterface.call("function(){document.onmousemove = function(){var e = arguments[0] || event;window.document['"+flashObjectName+"'].ReportMouseLoc(e.clientX,e.clientY )}}");

the only thing i noticed that is funny though is it only updates when the mouse is outside the swf stage.. but at least you can detect when its outside the stage with ff now.

[Arodicus]

Yeah, I noticed that, too. I've actually got the thing working universally on all the major browsers (FF, IE, Safari, Opera) but it's a) AS3, not AS2 (but could be downgraded) and b) huge.

There were some weird idiosyncrasies to overcome, but I also managed to factor in the swfs positon on the webpage, and return results in flash-local and webpage-local coordinates.

I'll post it as an article if I ever get the time.

[asf8]

Originally Posted by Arodicus

Yeah, I noticed that, too. I've actually got the thing working universally on all the major browsers (FF, IE, Safari, Opera) but it's a) AS3, not AS2 (but could be downgraded) and b) huge.

There were some weird idiosyncrasies to overcome, but I also managed to factor in the swfs positon on the webpage, and return results in flash-local and webpage-local coordinates.

I'll post it as an article if I ever get the time.

Find the time Arodicus Share buddy. (ha, ha)

[carlpepper]

Hi! What i need to accomplish is to start a fuse action only when the mouse is moved, anywhere in the window and not only over the flash movie. if you leave the mouse, it should start another fuse action after a couple of seconds.

could somebody please help me with an example, where do i put the code you posted? is one part to be put in the HTML document and one in the actionscript or how does it work? i use the swfobject-script by the way.

thanks a lot guys

[Arodicus]

I'll if I can whip something together that does this. I've still got the base problem of calculating the offset of the Player within the browser window, as there's a gazillion factors that come into play, but perhaps if I post the basics greater minds may figure out the rest.