Author: Nuno Mira | Website: http://www.nunomira.com/

SWFObject:

SWFObject is a JavaScript library that’s used for embedding SWF files in HTML.
At the time of this writing the current version is 2.2.
The main advantage of SWFObject, besides ease of use and being standards compliant is the possibility to add Flash Player version detection and automatic update, thus, you can make sure that your visitors have the required version to see your website.
If you’re not using it, make sure you start!

Adobe Flash doesn’t use SWFObject by default but if you go to
File->Publish Settings->HTML and check "Detect Flash Version"
it will be used.

The code may seem a bit complex but in its simplest form it’s just three lines::
One for including the library:

One for embedding the SWF:

swfobject.embedSWF("url-variables.swf", "flashContent","550", "400");

And the last one, the div where the SWF will appear:

Couldn’t be easier!

The complete prototype is:

swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes, callbackFn)

We’re interested in the FlashVars - flashvars -, so we can restrict its use to this only:

swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars);

and even version and expressInstallSwfurl can be ignored (although I wouldn’t recommended it!)

swfobject.embedSWF(swfUrl, id, width, height, "", "", flashvars);

flashvars is an object that will hold variable name/value pairs.
Just like in ActionScript, in JavaScript you can start with an empty object and add properties to it:

var flashvars = {};
flashvars.firstname = "john";
flashvars.lastname = "doe";
flashvars.number = "55";

or you can create the object and define its properties at once:

var flashvars = {
	firstname: "john",
	lastname:"doe",
	number: "55"
};

’s just a matter of preference.

In order to grab the variables from the URL we’ll use the getQueryParamValue() method. You may want to look at the api documentation, for this and other available methods.

var flashvars = {};
if (swfobject.getQueryParamValue("firstname") && swfobject.getQueryParamValue("lastname") && swfobject.getQueryParamValue("number"))
{
    flashvars.firstname = swfobject.getQueryParamValue("firstname");
    flashvars.lastname = swfobject.getQueryParamValue("lastname");
    flashvars.number = swfobject.getQueryParamValue("number");
}
swfobject.embedSWF("url-variables.swf", "flashContent","550", "400", "10.0.0", "expressInstall.swf", flashvars);

if(). It makes sure that all the variables exist.
In case they don't, you could, for instance redirect the user to an error page or show an error message.

if (swfobject.getQueryParamValue("firstname") && swfobject.getQueryParamValue("lastname") && swfobject.getQueryParamValue("number"))
{
	// flashvars code here
}
else
{
	window.location = error-page.html;
}

» Level Intermediate

Added: 2011-03-17 Rating: 1 Votes: 1

» Author

Nuno Mira has been a Flash Developer for 9 years. He loves teaching, and learning. When he isn't coding he may be surfing or snowboarding.

» Download

Download the files used in this tutorial.

Download (596 kb)

» Forums

More help? Search our boards for quick answers!