Universal Javascript to Flash Communication

*note: This article was last updated Dec. 2nd 2003. All users are encouraged to update old files to the new method for increased control and forward compatability with other soon-to-be-released articles. Thanks to Pete at editkid.com for helping drill down safari bugs in the original method*


As it currently stands, only 3 browsers support "pure" javascript to flash communication: Netscape and Internet Explorer browsers for PC, and Netscape for Mac OSX. According to Macromedia, implementing flash communication on other browsers is the responsibility of the browser vendors and so far they haven't bothered. With Flash 6 and above, we can simulate this communication on other browsers with the LocalConnection() object so nobody's left out. This method allows for setVariable functionality in IE, Netscape, Opera and Mozilla based browsers all on PC and Mac, as well as Safari.

Example:


Important Information:

This method is not protected against multiple windows accessing the same page. Therefore, if you open this example in Mozilla without leaving the page, and then open up Opera, the Opera window will not work. This is because a flash movie listening on a Local Connection will reject any attempt from another flash movie to listen on that same connection. I originally anticipated that this wouldn't be a big problem since most internet users won't be looking at the same page with two browsers, but I didn't take into account the fact that developers would be curious to check this method out in multiple browsers. I have no plans to change the functionality right now since I'm writing up a Javascript-Flash remoting article that will inadvertantly solve this issue anyway. If you need to absolutely protect against users having two windows open, you'll need to randomize the the object id in the html code below.

Usage:

Html code

Here's a quick look at the code above using only one of the "Send Vars" input buttons as an example

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="MLAB_flash_setvariables.js"></script>
</head>

<body>
<div align="center">
	<object id="sendmovie" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0" width="300" height="100">
		<param name="movie" value="movie.swf">
		<param name="FlashVars" value="movieid=sendmovie" />
		<embed name="sendmovie" src="movie.swf" FlashVars="movieid=sendmovie" width="300" height="100" type="application/x-shockwave-flash" pluginspace="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
	</object><br />
	<input type="button" onclick="setFlashVariables('sendmovie','testvar1=hello&testvar2=goodbye')" value="Send First Vars" />
</div>
</body>
</html>

*Please note that although the rest of the Mustardlab Developer Section uses only an <object> tag in all examples to maintain xhtml compatability, the above method requires the use of the embed tag in order to pass in FlashVars for Mac IE*


Whatever id you set for the object tag must be passed into the swf via FlashVars as the variable movieid. Then call setFlashVariables() anytime you need to change a variable. You can use this method on multiple flash movies inside the same html document as long as you define each movie with a unique id. Along with including MLAB_flash_setvariables.js in the html head, you must place the file gateway.swf in the same folder as MLAB_flash_setvariables.js. The file gateway.swf handles all communication between the html document and your flash movie. If the gateway.swf file doesn't reside on the same domain as the movie you are communicating with, it will fail.

Flash Code

Inside the flash movie put the following code, preferably on the first frame of the _root timeline.

// -----------------------------------------------------------
// Univeral method for javascript->flash setvariable
// -----------------------------------------------------------
if(!_level0.$jslisten_init){
	Stage.$jsvarlistener = new LocalConnection();
	Stage.$jsvarlistener.setVariables = function(query) {
		var i, values;
		var chunk = query.split("&");
		for (i in chunk) {
			values = chunk[i].split("=");
			_root[values[0]] = values[1];
		}
	};
	Stage.$jsvarlistener.connect(_level0.movieid);
	_level0.$jslisten_init = true;
}

Or just include the .as file located in the download zip

#include "MLAB_flash_setvariables.as"
Additional Notes:

At the moment, this method specifically sets variables on the _root timeline. In order to define the variables path you must change the following line inside the include file.

_root[values[0]] = values[1];

into

set(values[0], values[1]);


If you do this, you must set the full path of every variable passed into the setFlashVariables (ie: "_root.var1=foo&_root.testobject.var1=bar"), otherwise, variables will be assigned to the timeline the .as file has been included on.

Download

Example Files and includes: MLAB_jstoflash_example.zip

Size: 7 kb

Last Updated: 2003-12-02