Journalists' Toolkit > Flash > About SWFObject

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:

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. BUT IT MUST MATCH the ID in the DIV for THIS SWF.

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.

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 src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"> </script>

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

Updated 30 March 2011

Journalists' Toolkit > Flash > About SWFObject