The Ultimate JavaScript Library for Embedding Flash Content
![[ Image: SWFfix Logo ]](https://perishablepress.com/wp/wp-content/images/2007/misc-chunks/swffix.jpg)
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 it out..
Overview
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
Step 1
Download the SWFFix library1 (and Express Install files, if needed) and copy to desired directory.
Step 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>Step 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>Step 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. - The second parameter is an object that may contain two optional
name:valuepairs: swfversionspecifies the required version of Flash Player.expressinstallspecifies the URL of the Express Install file (if used).
Multiple Flash Movies
To include multiple Flash movies using the previously described “JavaScript-independent” method, 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:
Step 1
Download the SWFFix library1 and copy to desired directory.
Step 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>Step 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
Step 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
To include multiple Flash movies using the previously described “dynamic-inclusion” method, repeat steps 3 and 4 for each additional Flash movie.
Footnotes
2 responses to “The Ultimate JavaScript Library for Embedding Flash Content”
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
Thanks for the tip on SWFObject. It is easy to understand why Google frowns upon SWFObject, UFO, and other dynamic methods of including Flash content. However, with SWFFix — the focus of this article — there are two ways to embed Flash. The primary method employs JavaScript to enhance preexisting object markup, and involves no dynamic content replacement. And, as explained in the article, SWFFix also provides a method for dynamic inclusion of Flash content. Such versatility is one of the reasons I call SWFFix “The Ultimate JavaScript Library for Embedding Flash Content!”