I have been working with SWFObject a bit lately and was a little confused by how the flashvars, params, and attributes arguments for the embedSWF() function differ from each other and what exactly SWFObject did with them. Based on the documentation, I did a little experiment where I used each and then viewed the generated source using the Web Developer Toolbar for Firefox.
Here is my HTML and SWFObject JavaScript which uses the dynamic publishing method as described in the SWFObject Documentation:
<html>
<head>
<script type="text/javascript" src="swfobject/swfobject.js"></script>
</head>
<body>
<div id="embedhere">Embed Fail</div>
<script type="text/javascript">
var flashvars = {};
flashvars.my_flashvar1 = "my_flashvar_value1";
flashvars.my_flashvar2 = "my_flashvar_value2";
var params = {};
params.my_param1 = "my_param_value1";
params.my_param2 = "my_param_value2";
var attributes = {};
attributes.my_attribute1 = "my_attribute_value1";
attributes.my_attribute2 = "my_name_attribute";
swfobject.embedSWF("Test.swf", "embedhere", "300", "250", "9.0.0", false, flashvars, params, attributes);
</script>
</body>
</html> |
<html>
<head>
<script type="text/javascript" src="swfobject/swfobject.js"></script>
</head>
<body>
<div id="embedhere">Embed Fail</div>
<script type="text/javascript">
var flashvars = {};
flashvars.my_flashvar1 = "my_flashvar_value1";
flashvars.my_flashvar2 = "my_flashvar_value2";
var params = {};
params.my_param1 = "my_param_value1";
params.my_param2 = "my_param_value2";
var attributes = {};
attributes.my_attribute1 = "my_attribute_value1";
attributes.my_attribute2 = "my_name_attribute";
swfobject.embedSWF("Test.swf", "embedhere", "300", "250", "9.0.0", false, flashvars, params, attributes);
</script>
</body>
</html>
Here is what the generated source looks like after I load the page in Firefox and SWFObject has done its thing:
<html><head>
<script type="text/javascript" src="swfobject/swfobject.js"></script>
<style media="screen" type="text/css">#embedhere {visibility:hidden}</style></head><div firebugversion="1.5.0" style="display: none;" id="_firebugConsole"></div><body>
<object data="300x250TestAdAS3.swf" name="my_name_attribute" id="my_id_attribute" type="application/x-shockwave-flash" height="250" width="300"><param value="my_param_value" name="my_param"><param value="clickTAG=http%3A//www.example.com" name="flashvars"></object>
<script type="text/javascript">
var clickTAG = escape("http://www.example.com");
var flashvars = {clickTAG:clickTAG};
var params = {
my_param: "my_param_value"
};
var attributes = {};
attributes.id = "my_id_attribute";
attributes.name = "my_name_attribute";
swfobject.embedSWF("Test.swf", "embedhere", "300", "250", "9.0.0", false, flashvars, params, attributes);
</script>
</body></html> |
<html><head>
<script type="text/javascript" src="swfobject/swfobject.js"></script>
<style media="screen" type="text/css">#embedhere {visibility:hidden}</style></head><div firebugversion="1.5.0" style="display: none;" id="_firebugConsole"></div><body>
<object data="300x250TestAdAS3.swf" name="my_name_attribute" id="my_id_attribute" type="application/x-shockwave-flash" height="250" width="300"><param value="my_param_value" name="my_param"><param value="clickTAG=http%3A//www.example.com" name="flashvars"></object>
<script type="text/javascript">
var clickTAG = escape("http://www.example.com");
var flashvars = {clickTAG:clickTAG};
var params = {
my_param: "my_param_value"
};
var attributes = {};
attributes.id = "my_id_attribute";
attributes.name = "my_name_attribute";
swfobject.embedSWF("Test.swf", "embedhere", "300", "250", "9.0.0", false, flashvars, params, attributes);
</script>
</body></html>
As you can see the attributes are just attributes to the object tag. The parameters show up inside of param tags with one param tag for each param following the object tag. I would be curious to hear if anyone has used the “attributes” and “parameters” arguments when embedding Flash with SWFObject and for what.
The flashvars argument is the most useful in my case because that is how you can get external data passed into the SWF. I think a lot of folks load in their data into a Flash movie using a separate call to load an XML document. That is the way to go if you are pulling a large amount of data dynamically based on some type of user input.
If you only have a few name value pairs that are not going to change, passing these in during the embed using flashvars is probably the better option. Assigning these values during the embed will save a second round trip you would normally make to get an XML document.
So let’s say you decide you want to pass in a couple key-value pairs to a Flash movie using SWFObject. In the code example above there are two key-value pairs we assign to flashvars: “my_flashvar1” and “my_flashvar1”. Now you will want access these two inside your ActionScript code.
For ActionScript 2 it would look something like this:
trace(_level0.my_flashvar1);
trace(_level0.my_flashvar2); |
trace(_level0.my_flashvar1);
trace(_level0.my_flashvar2);
ActionScript 3 requires another line of code to get to the same place:
var paramList:Object = this.root.loaderInfo.parameters;
trace(paramList["my_flashvar1"]);
trace(paramList["my_flashvar2"]); |
var paramList:Object = this.root.loaderInfo.parameters;
trace(paramList["my_flashvar1"]);
trace(paramList["my_flashvar2"]);
A word of caution: When you use SWFObject’s embedSWF() function there are quite a few optional parameters. Be sure that you put a “false” in for optional parameters you don’t intend to use before any parameters you ARE going to use. In the embed example below I want to use the flashvars option but I don’t want to use the option to specify an express install file so I put in a false in that spot. Also, just be careful in general because there are a total of 10 different arguments for the embedSWF() function (including all the optional ones) so it is easy to get them in the wrong order and such.
swfobject.embedSWF("Test.swf", "embedhere", "300", "250", "9.0.0", false, flashvars); |
swfobject.embedSWF("Test.swf", "embedhere", "300", "250", "9.0.0", false, flashvars);
Take a look at the SWFObject documentation for a description of each parameter.
That’s it!