displaying a Flash SWF movie in a HTML page using SWFObject

These days the chore of getting a SWF file to display in your HTML page (sometimes referred to as “embedding the SWF”) is, thank heavens, becoming easier. With the release of Dreamweaver CS4, Adobe has finally dispensed with it’s inherited mess of “twice cooked tags” and has adopted the “SWFObject” javascript code library. “SWFObject” is just the name given to a chunk of javascript code by writers Bobby Van Der Sluis, the late Michael Williams and Geoff Sterns. When added to your HTML page, The code will instruct your browser to fire up the flash SWF plugin and play your movie. Hooray!

While DWCS4 includes shortcuts to adding this code, it’s a simple task to hook up the code yourself.

Follow these steps for a quick start.

  1. Download the SWFObject js library. Google provides a page with a link to the latest version of the js file package for download.
  2. Hook up the swfobject.js external javascript document to your HTML page by adding a script tag inside the <head> element of your page. Make sure the src path to your swfobject.js file is valid.
    <script type="text/javascript" src="swfobject.js"> </script>

    Add another script tag containing information about your SWF file. Make sure the path to your swf file is correct. In the example below, the SWF to be displayed on this page is named game.swf and is located inside a folder named flash.

    <script type="text/javascript"> swfobject.embedSWF("flash/game.swf", "myContent", "300", "120", "9.0.0", "expressInstall.swf"); </script>
  3. Add a DIV element in the BODY of your page. The SWF file will be displayed inside this element. Add an ID attribute matching the value specified in your script tag e.g. 
    <div id="myContent"></div>
  4. You can add any amount of “alternative” content inside the div box. If your flash movie cannot play for any reason, the alternative content will be displayed instead.

Troubleshooting :

No flash Movie!

Load the page in another browser or force the movie to play in your browser by using the file > open menu command on your browser. Safari users can try dragging the SWF file into an open browser window. If nothing shows, go to the Adobe flash site and test your browser for flash compatibility.

Check your file paths are correct by replacing the page file name in your URL address bar with the path you have written in your script tag. You must be absolutely sure these paths are correct.

In more detail

The above steps cover the absolute minimum you need to do. There’s a lot of options including player version checking, file source file locations, alternative content display and browser compatibility. Check the following links for more information.

SWFObject 2.0x Documentation on the google code site.

Bobby Van Der Sluis’s in-depth analysis of the issues surrounding SWF player deployment on A List Apart.

Google now provides an online code repository, so you don’t even have to download the scripts!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s