Embedding Flash the Smart Way with SWFObject

Design & Development

Jarrod Medrano Mar 11 2008

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.

You should now have something that looks like this:

Folder Structure

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

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="320" height="240" id="swfobjectexample" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="swfobjectexample.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="swfobjectexample.swf" quality="high" bgcolor="#ffffff" width="320" height="240" name="swfobjectexample" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

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.

<script src="swfobject.js" type="text/javascript"></script>

Now copy and paste this code into the body:

<div id="flashcontent">

<div align="center"> <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_new"><img src="img/pidot.jpg" border="0"/></a><p>In order to view the content on this page, you will need the latest version of Adobe’s Flash Player. <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_new">Click here to download it</a>.</p></div>
</div>

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:

<script type="text/javascript">
// <![CDATA[

var so = new SWFObject("swfobjectexample.swf", "swfobjectexample", "320", "240", "8", "#FFFFF");
so.write("flashcontent");

// ]]>
</script>

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

SWFObect(“url goes here”,”name”,”width”,”height”,”version of flash required”,”background color”);

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.

Here is the complete code:

<script src="swfobject.js" type="text/javascript"></script>
<div id="flashcontent">
<div align="center" style="margin-top:100px; width:320px; height:240px;"><a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_new"><img src="img/pidot.jpg" border="0"/></a><p>In order to view the content on this page, you will need the latest version of Adobe’s Flash Player. <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_new">Click here to download it</a>.</p></div>
</div>

<script type="text/javascript">
// <![CDATA[

var so = new SWFObject("swfobjectexample.swf", "sotester", "320", "240", "8", "#FFFFF");
so.write("flashcontent");

// ]]>
</script>

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:

Adobe Flash Required

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:

var so = new SWFObject("swfobjectexample.swf", "swfobjectexample", "320", "240", "8", "#FFFFF");

And after that, copy and paste this code:

so.addVariable("bgColorVar", "black");

Hooray! Now the background is black!

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:

var myColor:Color;
var bgColorVar:String;
if (bgColorVar != undefined) {
if (bgColorVar=="black") {
myColor = new Color(this.bg_mc);
myColor.setRGB(0×000000);
}
}

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.):

<script type="text/javascript">
// <![CDATA[

var so = new SWFObject("http://www.portent.com/flash/swfobjectexample.swf", "swfobjectexample", "320", "240", "8", "#FFFFFF");
so.addVariable("bgColorVar", "none"); // this line is optional, but this example uses the variable and displays this text inside the flash movie
so.addParam("wmode", "transparent");
so.write("flashcontent1");

// ]]>
</script>

related articles

5 Comments

  1. I have been granted one internet! Very well explained even for someone like myself who can’t code at all.

  2. Works fine but is there a way to turn the background transparent? In the old fashioned way (the easiest for a non coder like me) I always used the wmode parameter.
    Thx anyway

  3. Jarrod Medrano

    Yes! You can turn the background transparent.
    Stay tuned for an update to this post!

  4. JK

    When I embed flash using SWFObject, how can I specify what URL is opened when a user mouse clicks on that flash playing in their browser.

  5. Jarrod Medrano

    Do you mean the link to Adobe?

Comments are closed.