Embedding Flash with SWFObject

21 February, 2009

Today we take a look slightly complex but common way to embed SWF files into your web page - SWFObject.

SWFObject is JavaScript that is used to send display the SWF in the browser. The two key reasons for using SWFObject are:

• It can detect the specific version of Flash Player required and display some alternate text if the user's version is inferior.
• It removes the 'Click to Activate' box that plagues Internet Explorer and embedded objects.

So now we know what SWFObject is and why to use it, where do we get it from? At the moment it is hosted by Google and it can be downloaded from their SVN. You can download it here: http://code.google.com/p/swfobject/downloads/list. When you download the file from Google it comes with an example that shows how to use SWFObject. That is what we have based this article off.

Below is an example of Flash embedded with SWFObject.

This example detects for Flash Player 10.0.0. If you have an earlier version, you will be seeing the alternate text prompting you to download the latest version. For the benefit of those of us with the latest version, this is what the alternate text looks like:

Now, onto the code we need to use to get our SWF file on the page. There are two areas of code that we need to put into our HTML to get things working: some JavaScript in the HEAD section and some HTML in the BODY. First, let's look at the JavaScript:

Our first line simply includes the necessary swjobject.js file. There is nothing too amazing about that. The second line starts the custom JavaScript we have to write. Into the swfobject.registerObject method we need pass two elements - the id of our object and the version of Flash Player we want to check for. The third line simply ends our JavaScript.

The Flash Player version we are checking for is important because we will alter this to check our own alternate text. Once you have the SWF file successfully embedded onto the page, you will want to write and style your alternate text. To see this yourself you just need to change the version to something higher than you have, 20.0.0 for example, and the alternate text will display. Remember to set it back to what it should be once the text looks the way you want it to though.

Next is the HTML we add to get the SWF on the page (this is the code provided by Google):

We won't go through this section line by line, but we will pick out the important bits you will want to edit. Firstly in line two, the first object line, you need to edit the width and height attributes to match the width and height of your SWF.

Next, on the line beneath that, you need to change the value attribute to the path of your SWF file.

Repeat these changes for the data (SWF path), width and height attributes of the next object tag.

And lastly is the alternate content that is shown to users without the correct Flash Player. This is everything inside the div tags. Above we have an <h1> and a <p> tag. Whatever you put between the two div tags is what is shown as the alternative content. So in here you can write and style whatever you want to match the tone and look of your web page.

And that's about all there is to it. There are more elements surrounding SWFObject that we will go into at a later stage, such as the passing in of optional parameters and that sort of thing. But today we have covered enough to get a basic understanding of SWFObject and get you started with it on your website. For more information you can refer to Google's documentation on how to use SWFObject, http://code.google.com/p/swfobject/wiki/documentation.

From now on fcOnTheWeb.com will be using this SWFObject and this style of implementation to embed all their Flash.

ferrari_chris