Archive for April, 2007

SWF Your Object: A Better Way To Embed Flash

Thursday, April 19th, 2007

If you’ve ever worked with Flash (who hasn’t?), then you’ve struggled to come up with an embedding method that is clean, standards-compliant, and easy to read. If you use Dreamweaver, embedding Flash into your pages is easy, but let’s face it, all that object and embed code is enough to make your eyes water:


<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>

A List Apart jumped on the bandwagon on November 9, 2002 when they published an article entitled “Flash Satay: Embedding Flash While Supporting Standards. In the article, they referred to the default code (above) as the Twice Cooked Method, as each parameter has to be declared twice for the Flash content to be displayed in IE and Netscape browsers. The end result of their efforts looks like:


<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>

Not bad, much better than the default. But still not very effective. What if you don’t have Flash? How would you convince the Interactive Department that you need them to do this before the content can be pushed live?

Move over. There’s a new kid on the block.

Introducing SWFObject, a Javascript Flash Player detection and embed script. From the author’s website, SWFObject is a small Javascript file used for embedding Adobe Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible. It is also very search engine friendly, degrades gracefully, can be used in valid HTML and XHTML 1.0 documents*, and is forward compatible, so it should work for years to come.

Embedding is as easy as embedding this code into your HTML:


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

<div id="flashcontent">
This text is replaced by the Flash movie.
</div>

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");
so.write("flashcontent");
</script>

This method is compliant with IE5/5.5/6, Netscape 7/8, Firefox, Mozilla, and Opera on the Windows platform. On Mac, it works on IE5.2, Safari, Firefox, Netscape 6/7, Mozilla, and Opera 7.5+, and barring any stupidity, should continue to work in the future.

Lovely isn’t it?