Journalists' Toolkit

Icon

A training site for multimedia and online journalists

How to use SWFObject 2 to embed Flash content

I know a lot of people have proclaimed the “death of Flash,” but we still see it everywhere. So let’s use the best possible practice for including Flash — SWF files — in Web pages, shall we?

About SWFObject

SWFObject is free, open-source code (JavaScript) that lets you simplify the way we embed Flash in a Web page.

You can download it here. Don’t get the beta, get the regular one. The file is:

swfobject_2_2.zip

1) Unzip the file. Now you’ll have a folder named “swfobject”; double-click to open it.

2) Copy these files and paste them into a new folder so you can learn how to use them:

  • swfobject.js
  • index_dynamic.html
  • test.swf
  • expressInstall.swf

3) Open up the HTML file in Dreamweaver or Notepad or whatever you normally use. Examine the code there. Look in the HEAD for this:

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

<script type="text/javascript">
swfobject.embedSWF("test.swf", "myContent", "300", "120", "10.0.0", "expressInstall.swf");
</script>

Explanation

The first line just looks for the JavaScript file, swfobject.js. You’ve got that. Notice it is looking in the same directory where this HTML file resides. If the JS file is elsewhere, then edit this line to look in the correct place.

Of the next three lines, the keys are in the middle, between the parentheses.

test.swf This is the name of YOUR SWF. You will change this (unless your SWF is named “test.swf”).

myContent This is the ID of your DIV (in your HTML). You may change this. IT MUST MATCH the ID in the DIV in your HTML below.

300 This is the width of your SWF. You will change this.

120 This is the height of your SWF. You will change this.

10.0.0 This is the oldest version of the Flash player that will run your SWF. (You select this in Publish Settings, in the Flash application, before you spawn your SWF.) You may change this.

expressInstall.swf This may be omitted.

IMPORTANT: Note that the DIV used by SWFObject (for example, “myContent”) wil be REPLACED by your SWF. So if you want to create and style a DIV to style or position your SWF, that DIV must wrap around the “myContent” DIV.

Your HTML file can — obviously — have any filename. It does not need to be named index_dynamic.html.

Resources

View Source on this example page to see how the middle part has been edited. For me, this is the easiest way to set up the page (just copy a page that works). But note that your SWF’s filename, width, height, and (maybe) your DIV ID are all different from the example.

In the CSS for my example, the surrounding DIV is named “centerer.”

Alternative File Use

An alternative to keeping the SWFObject code file on your own site is to use the file at Google Code instead. Read an explanation.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> 

<script type="text/javascript">
swfobject.embedSWF("test.swf", "myContent", "300", "120", "10.0.0");
</script>