Latest TweetsVerify any search engine or visitor via CLI Forward-Reverse Lookup perishablepress.com/cli-forwar…
Perishable Press

The Ultimate JavaScript Library for Embedding Flash Content

[ Image: SWFfix 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 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:value pairs:
  • swfversion specifies the required version of Flash Player.
  • expressinstall specifies 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:

  1. attributeObj — contains the <object>’s attributes in name:value pairs
  2. paramObj — contains the <object>’s nested param elements in name:value pairs
  3. toBeReplacedElem — specifies the target id of 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

Jeff Starr
About the Author Jeff Starr = Web Developer. Security Specialist. WordPress Buff.
Archives
2 responses
  1. 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

  2. Jeff Starr

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

[ Comments are closed for this post ]