First time here? First time here? Newsletter Signup Newsletter
651326 Members and growing! | Flash Jobs
Search tutorials
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.
flash player detection

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"
};
It’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);
Notice the conditional - 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-02-28
Rating: 1 Votes: 7
(10 being the highest)
» 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.
» Forums
More help? Search our boards for quick answers!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: work2survive
» Title: Girl Walking 1kb
» Description: Walking girl, animation just takes 1kb, using high heels shoes, and fashion model attitude.
Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.