Embedding Flash the Smart Way with SWFObject

There are several ways to embed Flash on a web page – some are better than others. Here’s the one we’ve found to work best:

First, you’ll need to go to the SWFObject home page to download the javascript. You can also read up on SWFObject here. The example html included inside the zip file should be enough for you to figure it out, but in case you have a short attention-span (like me); I’m going to walk you through it, step by step.

Download the example files for this tutorial here. Extract the files from the .zip and then put the SWFObject.js into this folder. You should now have something that looks like this:

The html file contains the default embed code that comes with Macromedia Flash 8. It looks like this:

Note: with Adobe Flash CS3, publishing a file automatically outputs javascript that does the flash detecting for you, but the code they use to embed is just as bad as before. There are a couple reasons why this code is no good, the main one being that if you view the embedded swf in IE, you’re likely to get a prompt about activating the control. This is something you want to avoid at all costs and SWFObject does a good job of taking care of it. The other reason is that the code is redundant. You have to enter the same information for the object tag and the param tag. This can get annoying if you’re constantly changing the parameters. With SWFObject, you only have to do it once. So let’s delete this nasty code and replace it with SWFObject.

After you’ve deleted the above code from the HTML file, make sure you link to your swfobject.

Now copy and paste this code into the body:

This is what will be displayed in the event that the end user doesn’t have flash installed. I included a simple image and some text. It’s usually wise to include a link to Adobe’s website so that they can download the flash player if they want to. It’s worth noting that if the user does have flash installed, he will never see this content, which looks a lot more professional than loading the swf on top of an error message.

Next, you need to place the javascript that will embed the swf:

So, if we look at the parameters one by one:

The name of the flashcontent div can be changed to whatever you want, as long as it matches what is in the so.write function. It is necessary to have separate names if you intend to embed more than one swf in the same page.

After you’ve done this part, open the page in a browser. If you see the animation, HUGE SUCCESS! I grant you one internet.

In order to view the content on this page, you will need the latest version of Adobe’s Flash Player.
Click here to download it.

Here is the complete code:

If you want to see what is displayed when you don’t have flash, either remove the swf from that directory, break the url, or better yet, uninstall flash.

Here is what it should look like if you don’t have flash installed in your browser:

In order to view the content on this page, you will need the latest version of Adobe’s Flash Player.
Click here to download it.

Now we’re going to do something a little different. We’re going to send a variable to the swf, and this will change the backgound color. Find this part of the code:

And after that, copy and paste this code:

Hooray! Now the background is black!

In order to view the content on this page, you will need the latest version of Adobe’s Flash Player.
Click here to download it.

But wait, how did you do that!? Well, the answer is contained inside the .fla file. On the first frame of the flash movie, I entered this actionscript code:

This is a boolean function that declares the bgColorVar variable. If the variable is defined AND if it is equal to black, the background color will be changed to black. Otherwise, the background will still be white. The background color is actually a movie clip I made, which I then placed on the bottom layer.

And that’s how you use SWFObject! See you next time kiddies!

Addendum!

To add parameters to your swfobject, take a look at this code, where I add a wmode parameter (note this would NOT WORK for this particular movie, because it has a white movie clip as a background.):