If you’ve ever worked with Flash and HTML (and who hasn’t?), we’ve all come to a point where we need to embed a Flash movie into an HTML page. This is usually the same point where you cringe, especially if you need to validate your HTML/XHTML (and you should!). Embedding Flash can result in an ugly mess of code like this one:

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

Not only does it fail validation, you will need to “click to activate” because of changes to the Eolas patent. And finally, there is no plugin detection. Clearly this is an ineffective way of embedding Flash into your sites.

There is also the Flash Satay method, popularized by A List Apart in 2002:

<object type="application/x-shockwave-flash
data="c.swf?path=movie.swf"
width="400" height="300">
<param name="movie"
value="c.swf?path=movie.swf" />
<img src="noflash.gif"
width="200" height="100" alt="" />
</object>

While this method validates in HTML and XHTML, there is still the issue of screen readers ignoring the content, you still need to “click to activate” and there is still no plug-in detection.

Fortunately, there is a solution that addresses all these pain points; SWFObject.

Implementing Flash using SWFObject is as simple as:

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

In this example, I specified the name of the SWF file (”myContent.swf”), inside which HTML the Flash should be placed (a div with an id of “myContent”), the width and height (”300″ by “120″), and the version of Flash that you would like to use (”9.0.0″).

If you aren’t sure that the user has Flash installed, you can specify the path the Flash Express Install SWF (”expressInstall.swf”), as is done here:

<script type="text/javascript">
var flashvars = {};
var params = {};
var attributes = {};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
</script>

As you can see, SWFObject supports JavaScript Objects using Object Literal Notations.

This is just a few of the many different ways that you can use SWFObject to embed Flash into your pages. The SWFObject documentation is also an excellent resource for more information.

I’d be interested in hearing your thoughts, comments, and questions about this post. Please post them up below in the comments section. ↓

Hat tip to Nadine for inspiring this post.

Written by: Justin Kozuch | Posted: Tuesday, February 24th, 2009
Category: Flash, JavaScript |