New Bookstore! Save 20% on books with discount code: LAUNCH
Web Dev + WordPress + Security
BBQ Pro: Block Bad Queries
BBQ Pro: The fastest firewall to protect your WordPress.

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. Book Author. Secretly Important.
BBQ Pro: The fastest firewall to protect your WordPress.

2 responses to “The Ultimate JavaScript Library for Embedding Flash Content”

  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
    Perishable 2007/08/05 8:59 am

    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. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
Blackhole Pro: Trap bad bots in a virtual black hole.
Thoughts
Take a screenshot with Firefox (no extension required). Open Developer Tools Settings and enable the “Take a screenshot” button. Then click the button :)
Take a screenshot with Chrome (no extension required). Open DevTools, type Cmd + Shift + P, then type screenshot.
After 10 years working on my 2010 iMac, my upgrade finally arrived. Shiny new iMac shipped from Ireland :)
Too much caffeine weirds me out. But I love the taste of coffee. So once in a while I enjoy a small cup of decaf. Hits the spot.
Chris Coyier is a truly awesome person. One of the finest people I've ever worked with. Just #gottasayit
Excel won't open CSV file because SYLK format? Open it with text editor and add an apostrophe ' at the beginning of the file, save changes, done.
Displaying too many social media buttons and links all over the place imho makes you look desperate and frankly kinda sad.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.