The Ultimate JavaScript Library for Embedding Flash Content
Published Tuesday, July 31, 2007 @ 10:54 am • 2 Responses
[ Keywords: swffix, javascript, library, embed, embedding, flash, object, content ]
![[ Image: SWFfix Logo ]](http://perishablepress.com/press/wp-content/images/2007/misc-chunks/swffix-logo.gif){kind=logo}
Earlier this year, Geoff Stearns and Bobby van der Sluis teamed up to create the “ultimate JavaScript library for embedding Flash content” into web documents. For those of you familiar with techniques for embedding Flash, these two names are instantly recognizable. Geoff Stearns is the author of SWFObject and Bobby van der Sluis is the author of UFO. Easily, SWFObject and UFO are the two best and most widely used techniques for detecting and embedding Flash content. Needless to say, when I heard that these two great minds were collaborating on an even better method to embed Flash, I was very excited to check out the fruits of their collective efforts..
On July 25th, 2007 the first publicly available version (0.2 - public alpha) of SWFFix was released to the masses. SWFFix is a Flash-embedding JavaScript library featuring standards-compliant markup, Flash-version detection, and Express-Install support. SWFFix uses the nested-objects method to optimize cross-browser support, deliver alternate content, and facilitate graceful degradation. SWFFix “fixes” the issues commonly associated with the nested-objects method (e.g., the click-to-activate requirement of IE6 and Opera 9+), providing greater functionality and a richer user experience. SWFFix also features dynamic embedding of Flash content for (X)HTML documents. Best of all, the SWFFix library consists of a single, extremely lightweight JavaScript file — only 12KB (unzipped) or 3.4KB (gzipped)! Overall, definitely impressive.
Installation and Use
As mentioned, there are two ways to include Flash content via SWFFix. The first method ensures delivery of Flash content even when JavaScript is unavailable. The second method requires JavaScript to dynamically embed Flash content via the DOM. First we will outline the “JavaScript-independent” method, and then proceed with the “dynamic-inclusion” method.
JavaScript-independent method
1. Download the SWFFix library 1 (and Express Install files, if needed) and copy to desired directory.
2. Embed both Flash content and alternative content using standards-compliant markup via the nested-objects method. Note the required inclusion of id="targetID" in the object element. Edit the following code as needed and copy into your (X)HTML document:
<body>
<div>
<object id="targetID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="movie" align="left" width="333" height="333">
<param name="movie" value="http://domain.tld/movie.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http://domain.tld/movie.swf" width="780" height="420">
<!--<![endif]-->
<p>Alternative content (e.g., you can have a richer experience by downloading the Flash plugin)</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>3. Include the SWFFix JavaScript library in the <head> of your (X)HTML document (edit as needed):
<script type="text/javascript" src="http://domain.tld/js/swffix.js"></script>4. Register your Flash content with the SWFFix library and add to the <head> of your (X)HTML document (edit as needed):
<script type="text/javascript">
SWFFix.registerObject("targetID", {swfversion:"9.0.0", expressinstall:"http://domain.tld/expressInstall.swf"});
</script>In the previous code, we are using the following parameters:
- The first parameter is the target id of the
<object>element used for the movie. - The second parameter is an object that may contain two optional
name:valuepairs: swfversionspecifies the version of Flash Player required to display the content.expressinstallspecifies the URL of the Express Install file (if used).
Multiple Flash Movies using the JavaScript-independent method
To include multiple Flash movies using the previously described “JavaScript-independent” method, simply repeat steps 2 and 4 for each additional Flash movie.
Dynamic-inclusion method
Whereas the previous method of inserting Flash content requires a pre-coded <object> construct, the dynamic method of embedding Flash replaces a target-container block-element such as a <div> with the required <object> markup. Simply predefine the required object attributes and parameters and the code is inserted dynamically. Of course, because this method requires JavaScript, users without it will not see your Flash content. Having said that, here is how to do it:
1. Download the SWFFix library 1 and copy to desired directory.
2. Include the SWFFix JavaScript library in the <head> of your (X)HTML document (edit as needed):
<script type="text/javascript" src="http://domain.tld/js/swffix.js"></script>3. Define the <object> attributes, <param> elements, and target id in the following code, and then copy to the <head> of your document:
<script type="text/javascript" src="http://domain.tld/js/swffix.js"></script>
<script type="text/javascript">
if (SWFFix.hasFlashPlayerVersion("9.0.0")) {
var fn = function() {
var att = { data:"movie.swf", width:"333", height:"333" };
var par = { flashvars:"foo=bar" };
var el = document.getElementById("targetID");
SWFFix.createSWF(att, par, el);
};
SWFFix.addDomLoadEvent(fn);
}
</script>In the previous code, SWFFix.createSWF(attributeObj, paramObj, toBeReplacedElem) requires three arguments:
attributeObj— contains the<object>’s attributes inname:valuepairsparamObj— contains the<object>’s nestedparamelements inname:valuepairstoBeReplacedElem— specifies the targetidof the (X)HTML element that will be replaced with your Flash movie
4. Add to the <body> of your (X)HTML document (edit as needed):
<body>
<div id="targetID"><p>Alternative content (e.g., you need both JavaScript and Flash..blah blah blah..)</p></div>
</body>Multiple Flash Movies using the dynamic-inclusion method
To include multiple Flash movies using the previously described “dynamic-inclusion” method, simply repeat steps 3 and 4 for each additional Flash movie.
Shouts
Many thanks to both Geoff Stearns and Bobby van der Sluis for pooling their efforts to provide this incredible Flash-embed resource for the open-source community. Nicely done, gentlemen.
— Cheers!
References
About this article
Related articles
← Previous post • Next post →
« Get Organized, Save Time with the AT&T 8525 Pocket PC • Temporary Site Redirect for Visitors during Site Updates »
1 • sherwood
August 2, 2007 at 6:44 am
I attended a session with a Google engineer a couple weeks ago, where he characterized swfobject as a “dangerous” technique for optimizing Flash for search engines. He said that he could not guarantee that swfobject users would not be penalized, even if their implementation was totally above-board:
Google Flash Fixes can be Dangerous