How to Pass Variables from Javascript to Flash AS3
Flash and Javascript are both powerful tools for bringing dynamic content to your website. While most of the time each have their separate uses, I occasionally run into the situation where I need Javascript and Actionscript to talk to each other. For instance, if I have a flash banner that needs to change depending on what page it’s on, it would be nice to simply pass some variable to the SWF file so the Flash would know where it was, instead of making multiple versions of the same file.
Step 1: the Javascript
Passing a Javascript variable to a Flash file begins with the embedding your SWF file in your web page. Your desired variable will be passed when the file loads, and can then be used however it needs to be in the Flash.
To embed a Flash file in an HTML page, I highly recommend downloading SWFObject if you don’t use it already. SWFObject is the best way I’ve found to embed flash content in an web page. It’s easy to use, standards-friendly, and makes defining parameters easier than ever. Plus, it lets you define alternate content if your user doesn’t have the Flash plugin which, with Apple’s grudge against Flash, is nice to have these days.
They key to passing a variable through your SWFObject code is going to be slightly different depending on what version of SWFObject you’re using. If you’re using SWFObject 1, the key is the parameter addVariable which is used as follows:
addVariable("variable_name", "variable_value");
Simply add this line to your block of code like so:
<script type="text/javascript">
var so = new SWFObject("myflashfile.swf", "myFlashContent", "800", "600", "6", "#ffffff");
so.addParam("wmode", "transparent");
so.addVariable("myVar", "Hello, World!");
so.write("flashDiv");
</script>
SWFObject 2 instead uses a <param> tag named “flashvars” which takes the form:
<param name=”flashvars" value="variable_name=variable_value" />
If you’re not comfortable with object tags, you can use their online script generator and just copy/paste to your HTML. To tell the generator your variables, simply expand the box labeled “SWF definitions”, and at the bottom you will find a line called Flashvars where you can add your variable names and values. This will add the line:
<param name=”flashvars" value="myVar=Hello, World!" />
within your <object> tags. The final code with SWFObject 2 will look something like this:
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myFlashContent", "9.0.0");
</script>
</head>
<body>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="myFlashContent">
<param name="movie" value="myflashfile.swf" />
<param name="flashvars" value="myVar=Hello, World!" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="untitled.swf" width="800" height="600">
<param name="flashvars" value="myVar=Hello, World!&var2=blah" />
<!--<![endif]-->
Alternate Content
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>Step 2: the ActionScript
If you’re using AS2, you can just go right ahead and use the variable in your flash file as you would any other variable, but AS3 requires an extra line of code:
var asVarName:VarType = this.loaderInfo.parameters.variable_name;
Effectively, you need to create a new variable in the ActionScript that is set to the variable you defined in the loaderInfo parameters. With our example above, the ActionScript would look like this:
var externalVar:String = this.loaderInfo.parameters.myVar;
Then you can use the variable externalVar, which now has the value “Hello, World!”, however you please, such as setting a text field value, changing a state, etc.
This Hub is brought to you by A Fresh Web Design, offering custom graphic and web design in Memphis, Kansas City, and across the country
