[RESOLVED] Is it possible to obtain the mouse position out side of flash?

**krashe1313** · 03-30-2010, 03:47 PM

i have an eye. instance name: "eye1". it follows the mouse around just great using the following code...

Actionscript Code:

stage.addEventListener(MouseEvent.MOUSE_MOVE,eyesFollow);

function eyesFollow(e:MouseEvent):void
     {

    var a1 = mouseY - eye1.y;
    var b1 = mouseX - eye1.x;
    var radians1 = Math.atan2(a1,b1);
    var degrees1 = radians1 / (Math.PI / 180);
    eye1.rotation = degrees1;
    
      }

that is, it works great as long as the mouse cursor is with in the boundaries of the stage. is there any way to pull the mouse position from the system so that the eye follows the mouse even if it's off stage?

when i try to search i just find information about the mouse position as it relates to the stage, not outside of it. i've considered a js approach, but it would be best if i could contain this all in the the swf so that the swf can be put on any webpage with out the need of the js support.

thanks!
`shields

**5TonsOfFlax** · 03-30-2010, 05:12 PM

Not without js, but you can embed the js into the flash so that as long as the user has javascript enabled and the swf is embedded correctly it'll work.

http://suckatmath.com/personal/xeyes.html

**krashe1313** · 03-31-2010, 10:24 AM

thanks 5Tons..... i think this is getting me somewhere! i was able to play with the code to get it to work with to some degree. now granted my knowledge of JS is...well, to be honest.... zip.

so really, at this point i'm about as effective as a monkey hitting the keyboard with a hammer and sees what will happen.

i understand that the following JS is being passed into flash:

Code:

var bigOlFunc:String = "function boing(){var moveFunc = function(e){\nxeyesObj.setMousePos(e.clientX, e.clientY);\n};\nvar stupid = (document.body.addEventListener == null);\nvar xeyesObj = document.getElementById('"+ExternalInterface.objectID+"');\nif (xeyesObj == null){\nxeyesObj = document.getElementsByName('"+ExternalInterface.objectID+"')[0];\n}\nif (!stupid) {//w3c standard\ndocument.body.addEventListener('mousemove', moveFunc, false);\n}else{\ndocument.body.attachEvent('onmousemove', moveFunc);  \n }\n	}()";

And i can get the eyes to follow the mouse as in moves on the satge- no problem. but once the mouse is off the stage and on html, the eyes ONLY follow if you are holding the mouse button down. In which case, if you are holding the mouse button down it works.

But i need the eyes to follow, even if the user isn't clicking on anything or holding the button down. How would i change the JS code to do this?

I'll keep googling in the mean time. Thanks- regardless this is quite helpful! Another door has been opened to a room full of opportunities. Now if i can only find the light switch...
`Shields

**5TonsOfFlax** · 03-31-2010, 10:31 AM

That's weird about holding the button down. It works for me on my demo page without holding the button down. Does it work for you on the demo page?

Oh, also there is a much better way of writing the javascript to insert. You can write it within a CDATA section of an XML variable. That way you can actually format it readably.
http://board.flashkit.com/board/show...ight=embedding

**krashe1313** · 03-31-2010, 10:40 AM

yeah, it works in the demo, but when i pull the code and run it on my own... i'll check out the new link you just gave me and see what i come up with.

**krashe1313** · 03-31-2010, 11:17 AM

i looked at the page source for the demo and i wonder if it might have something to do with how the demo is embedded into the html page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="width:100%; height:100%">
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="../javascripts/swfobject.js" ></script>
</head>
<body style="width:100%; height:100%">
  <div id="flashcontent"></div>
  <script type="text/javascript">
     var so = new SWFObject("../flash/xeyes.swf", "xeyes", "300", "300", 9, "#000000");
     so.addParam("allowScriptAccess", "always");
     so.write("flashcontent");
  </script>
  <div>This is a proof of concept for detecting mouse movement outside the flash object
  through the use of injected js via ExternalInterface.  Download the <a href="xeyes.zip">source</a> if you're interested.<br/>

  I didn't bother making this calculate the offset between page (0,0) and swf(0,0), but it's entirely do-able.
  </div>
</body>
</html>

vs mine...

Code:

<html style="width:100%; height:100%">
<head
<title>untitled</title>
</head>
<body bgcolor="Blue">
<object width="400" height="400">
<param name=wmode value=transparent>
<embed src="xeyes.swf" width="400" height="400">
</embed>
</object>
</body>
</html>

the demo seems to have some extra JS goodies. where i'm just embedding the swf straight up with nothing fancy.

**5TonsOfFlax** · 03-31-2010, 11:27 AM

Your open head tag is unclosed.

Also, you might want to try setting allowScriptAccess. Though I don't think that should matter since it does work in some circumstances.

**krashe1313** · 03-31-2010, 11:44 AM

Originally Posted by 5TonsOfFlax

Your open head tag is unclosed.

oops. typo.

Originally Posted by 5TonsOfFlax

Your open head tag is unclosed.

Also, you might want to try setting allowScriptAccess. Though I don't think that should matter since it does work in some circumstances.

so using the html from the demo and i pulling the swfobject.js file into my folder, i then plugged my swf into the demo's html code and it works fine. so it seems that in order for this to fully work i need to import my swf file into the swfobject.js and then add parameters in order for it to read the mouse position in real time? seems contradictory to what the demo is saying.

This is a proof of concept for detecting mouse movement outside the flash object through the use of injected js via ExternalInterface.

or at least half true since not all of the js needed to fully run the xeyes is in the swf. some of it is external. and the swfobject.js file is quite robust (at least for a guy like me who knows zero about js).

am i correct in my conclusion?

**5TonsOfFlax** · 03-31-2010, 11:49 AM

I doubt swfobject is strictly necessary. It's just a convenient way to embed flash. If you manually create the same end product html that swfobject builds for you, it should have the same effect.

**krashe1313** · 03-31-2010, 11:55 AM

alright. i'll give it a shot. first i think i need to grab some coffee, get up, stretch my legs and take a break.... maybe i'm sitting too close to see the solution.

thanks for your help with this. it's much appreciated.

**krashe1313** · 04-01-2010, 02:36 PM

alright. starting over, i'm trying to simplifying things. do them step by step, maybe even learn something as i go along. so i've made a new movie with some text boxes, just to get some sort of information about the mouse.
THEN i'll worry about using the info to make things move.

k, so i wrote (and by that i mean researched, copy, pasted, edited down) a js to track the mouse on the screen.

works great:

Code:

<html style="width:100%; height:100%">
<head>
<title>where is the mouse</title>
</head>
<body bgcolor="Grey">

<form name=exf1>
<table border=1>
<tr><td colspan=2>Position Of Cursor</td></tr>
<tr><td>X <input type=text name=x value="<unknown>"></td>
    <td>Y <input type=text name=y value="<unknown>"></td>
</tr>
</table>
</form>
<script type=text/javascript>

document.onmousemove = getMousePosition;
function getMousePosition(e) {
  var _x;
  var _y;
  _x = e.pageX;
  _y = e.pageY; 
  

  document.exf1.x.value=_x;
  document.exf1.y.value=_y;
  
}
</script>

</body>
</html>

so I made a swf to have something simple to work with... and added it to the above code, above the forms, like so...

Code:

...</head>
<body bgcolor="Grey">
<object width="92" height="112">
<param name=wmode value=transparent>
<embed src="whereIsTheMouse.swf" width="92" height="112">
</embed>
</object>

<form name=exf1>...

so then i worked on my whereIsTheMouse.fla file. no xeyes or anything. just text boxes for now...

Actionscript Code:

import flash.events.Event;
import flash.events.MouseEvent;
import flash.external.ExternalInterface;

var jsRevised:String

stage.addEventListener(Event.ENTER_FRAME, whereIsTheMouse);
function whereIsTheMouse(event:Event):void
{
    mouseX_txt.text = "Mouse x = " + String(mouseX);
    mouseY_txt.text = "Mouse y = " + String(mouseY);
}

if i run the html file... works fine. the javascript in the html documant tracks the mouse where ever it is. whether it's over the swf or not. the swf of course tracks the mouse while it's just over the stage. the x and y for the swf, are pretty much the same as the js outputs.... few points off, but that doesn't matter right now. i could have used a mouseEvent rather than an enter_frame event.

so here's where i get into a mess, i try adding my js from the html file to the flash file, but attaching it to the jsRevised variable...

Actionscript Code:

var jsRevised:String = "document.onmousemove = getMousePosition;function getMousePosition(e) {var _x;var _y;_x = e.pageX;_y = e.pageY; document.exf1.x.value=_x;document.exf1.y.value=_y;}";

* i'm pretty sure that document.exf1.x.value=_x;document.exf1.y.value=_y; doesn't serve a purpose anymore

and then i tried adapting my fla to work with the js and i get stuck on the ExternalInterface.addCallback part(or at least i think this is where my problem is. maybe not. maybe not the only problem.

Actionscript Code:

import flash.events.Event;
import flash.events.MouseEvent;
import flash.external.ExternalInterface;


var jsRevised:String = "document.onmousemove = getMousePosition;function getMousePosition(e) {var _x;var _y;_x = e.pageX;_y = e.pageY; document.exf1.x.value=_x;document.exf1.y.value=_y;}";

stage.addEventListener(Event.ENTER_FRAME, whereIsTheMouse);
function whereIsTheMouse(event:Event):void
{
    mouseX_txt.text = "Mouse x = " + String(mouseX);
    mouseY_txt.text = "Mouse y = " + String(mouseY);
}

init();
function init():void
{
    if (ExternalInterface.available)
    {
        ExternalInterface.addCallback("????????????", getMousePos);
        ExternalInterface.call(jsRevised);
        outsideStatus_txt.text = "ext interface called";
    }
    
    else
    {
        outsideStatus_txt.text = "no ext interface";
    }

}

function getMousePos(_where:String):void
{
    where_txt.text = _where;
}

no matter what i put in for "?????", where_txt text box doesn't produce anything. nothing. even if i didn't track, i don't even get an intial value when i load the html page.

thoughts about what i'd put in the "?????" area? am i even on the right path? or am i way off target?

thank you,
shields

**5TonsOfFlax** · 04-01-2010, 05:49 PM

1. If you use the xml/cdata way of embedding javascript, it's at least readable.
2. it doesn't matter what you put in place of ????, but you have to call that method from javascript to have it execute. The javascript in question would be the javascript you are embedding.

Let me break down the javascript embedded in the xeyes demo:

Code:

function boing(){
  var moveFunc = function(e){
    xeyesObj.setMousePos(e.clientX, e.clientY);
  };
  var stupid = (document.body.addEventListener == null);
  var xeyesObj = document.getElementById('"+ExternalInterface.objectID+"');
  if (xeyesObj == null){
    xeyesObj = document.getElementsByName('"+ExternalInterface.objectID+"')[0];
  }
  if (!stupid) {
    //w3c standard
    document.body.addEventListener('mousemove', moveFunc, false);
  }else{
    document.body.attachEvent('onmousemove', moveFunc);
  }
}();

moveFunc is the javascript function we want to call each time the mouse moves. It calls into the flash object, which has exposed setMousePos through externalInterface.
the stupid variable tells us whether the browser is stupid (doesn't support w3c event standards). We use that to determine how to add the javascript listener.
The most interesting part is this line:

Code:

  var xeyesObj = document.getElementById('"+ExternalInterface.objectID+"');

Here, we put the result of an actionscript expression into the javascript.

Code:

ExternalInterface.objectID

is actionscript, and evaluates to the ID of the object or embed tag used to embed the flash. So that javascript turns into:

Code:

  var xeyesObj = document.getElementById('whatever');

where whatever is the id used to embed the flash. If you're re-writing the javascript or using the xml/cdata method, this may be hard to do.

You might want to look into Binks, another tool I created that helps embed javascript and css from flash: http://cosmodro.me/blog/2009/may/4/jar-jawr-binks/

**krashe1313** · 04-02-2010, 12:24 PM

excellent. thanks for taking the time to explain this. now that it makes a little more sense (not completely. i mean i couldn't right this on my own!), i've gone back to working with the xeyes example and am now using it to construct what i need and it's looking lie i'll get it to work.

HUGE THANKS!!!! where should i send the beer?

one smaller question. my test file will now work if i place in on my html document if i attach the parameter allowScriptingAccess="always" as discussed earlier.

as so:

Code:

<embed src="test2.swf" width="400" height="400" name="test2" allowScriptAccess="always">

works great. so this is just small, but can the allowScriptingAccess="always" be embedded right in the flash file, much like the java script was?

**5TonsOfFlax** · 04-02-2010, 12:29 PM

No, that would be a huge security hole. If a swf could turn on its own javascript access, then allowScriptAccess would be completely useless.

**krashe1313** · 04-02-2010, 01:31 PM

gotcha. you've been a big help. thanks!

**amalaza** · 08-03-2010, 03:17 AM

Originally Posted by 5TonsOfFlax

That's weird about holding the button down. It works for me on my demo page without holding the button down. Does it work for you on the demo page?

Oh, also there is a much better way of writing the javascript to insert. You can write it within a CDATA section of an XML variable. That way you can actually format it readably.
http://board.flashkit.com/board/show...ight=embedding

I've tried this but the download does not include the original fla file, I have found a script out there that works similarly but I can't seem to replicate what you have, is it possible to look at your fla file, I am not exactly a programmer more on the design side.

this is the code that i got from riacodes but it does not allow or follow mouse movement outside of the stage

Code:

stage.addEventListener(MouseEvent.MOUSE_MOVE, followCursor);

function followCursor(event:MouseEvent):void {
	
	//var bigOlFunc:String = "function boing(){var moveFunc = function(e){\nxeyesObj.setMousePos(e.clientX, e.clientY);\n};\nvar stupid = (document.body.addEventListener == null);\nvar xeyesObj = document.getElementById('"+ExternalInterface.objectID+"');\nif (xeyesObj == null){\nxeyesObj = document.getElementsByName('"+ExternalInterface.objectID+"')[0];\n}\nif (!stupid) {//w3c standard\ndocument.body.addEventListener('mousemove', moveFunc, false);\n}else{\ndocument.body.attachEvent('onmousemove', moveFunc);  \n }\n	}()";
	var coordy1 : Number = mouseY - eye1_mc.y;
	var coordx1 : Number  = mouseX - eye1_mc.x;
	var angleRadians1 : Number  = Math.atan2(coordy1,coordx1);
	var angleDegrees1 : Number  = angleRadians1 * 180 / Math.PI;
	eye1_mc.rotation = angleDegrees1;
	
	var coordy2 : Number = mouseY - eye2_mc.y;
	var coordx2 : Number = mouseX - eye2_mc.x;
	var angleRadians2 : Number  = Math.atan2(coordy2,coordx2);
	var angleDegrees2 : Number  = angleRadians2 * 180 / Math.PI;
	eye2_mc.rotation = angleDegrees2;

}

**5TonsOfFlax** · 08-03-2010, 08:55 AM

There is no original fla file. Or fla file at all. Main.as in the source is the document class.

**amalaza** · 08-05-2010, 05:06 AM

Thanks, its working great now, I'm still trying to make it blink.

Thread: [RESOLVED] Is it possible to obtain the mouse position out side of flash?

Thread Tools

Display

[RESOLVED] Is it possible to obtain the mouse position out side of flash?

still can't replicate

Thanks

Posting Permissions