Embed Flash or Die Trying

[ Image: 50 Cent ]
Embed Flash or Die Tryin’
Web designers and developers looking to embed Flash content into a web page currently enjoy a wide variety of methods from which to choose. The most common methods vary along several key dimensions, including standards-compliance, user-friendliness, and universal support. Some methods make it easy to provide alternative content, others enable auto-activation of Flash content, while others feature plugin-detection functionality. In an attempt to round-up the myriad techniques, this article presents nine of the most useful, practical, and popular methods for embedding Flash content.

embed Element ^ ]

The quickest, easiest method for including Flash content in web pages requires only the embed tag. The embed tag is currently supported by all major browsers and does a fine job of displaying Flash content. The (major) downside is that the W3C does not support the proprietary embed tag, ultimately resulting in invalid (X)HTML markup that is not standards-compliant. Also, this method fails to detect if the required version of Flash is installed before rendering content, possibly resulting in errors or broken pages. Further, as virtually all browsers support the embed tag, alternative content provided via the noembed tag fails to appear when the required Flash plugin is not installed. In such a case, the Flash content is replaced by an image-link of a broken puzzle piece that enables manual plugin installation.

Usage (1 step)

1. Customize1 this code and insert it into the <body> of your document:

<embed type="application/x-shockwave-flash" 
   pluginspage="http://www.adobe.com/go/getflashplayer" 
   width="333" height="333" src="path/flash_movie.swf" />
<noembed><p>Alternative content</p></noembed>

object Element ^ ]

The W3C recommends using the standards-compliant object element to include Flash content on a web page. The non-proprietary object element validates as XHTML-strict and is compatible with all modern browsers. Further, the object element graciously supports alternative content, which may be included within the element itself (see example).

Every major, modern browser except Internet Explorer correctly interprets and utilizes the object tag and attributed MIME-type to include Flash content. In a perfect world, this would be all that one would need to properly embed Flash:

<object type="application/x-shockwave-flash" data="flash_movie.swf" width="333" height="333"> 
   <p>Alternative content</p> 
</object>

Unfortunately, it’s not a perfect world. Thus, we once again must reach out and coddle IE with its proprietary classid attribute, which equips the browser to load the requisite ActiveX control. Thus, this is the markup we must use for Flash presentation within Internet Explorer:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="333" height="333">
   <param name="movie" value="flash_movie.swf" />    
   <p>Alternative content</p>
</object>

Combining the two different object methods, we get something resembling the following:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="333" height="333">
   <param name="movie" value="flash_movie.swf" />
   <object type="application/x-shockwave-flash" data="flash_movie.swf" width="333" height="333">
      <p>Alternative content</p>
   </object>
</object>

..which may appear to be a reasonable solution, but falls short of satisfactory along several fronts1. So, while we strive for standards-compliance Flash-support via a single, unified implementation of the object element, such idealism unfortunately remains just beyond our present reality. Fortunately, there are plenty of alternative solutions. For example, the next method explains how the use of IE conditional comments successfully enables us to embed Flash using only the object tag.

Nested Objects (Dual Objects / object tags only) ^ ]

The "Nested Objects" method of embedding Flash content exchanges the invalid <embed> tag for a nested set of <object> tags. Using IE-specific conditional comments, this method delivers the parent object tag to Internet Explorer, while delivering the nested object tag to all "non-IE" browsers. Ignoring the unrecognized attributes of the parent object tag, non-IE browsers will correctly utilize the recognized attributes of the nested object tag.

This method requires no JavaScript, is standards-compliant, and functions on virtually every major modern browser. The code itself, although valid (X)HTML, is relatively bulky and provides no plugin detection, possibly resulting in broken content. Further, thanks to the Eolas patent dispute2, this method requires IE users to "click-activate" the movie before it will play.

Usage (1 step)

1. Customize1 this code and insert it into the <body> of your document:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
      codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" 
      width="333" height="333" id="unique_id" align="middle">
   <param name="movie" value="path/flash_movie.swf" />
   <param name="quality" value="high">
   <param name="bgcolor" value="#fff">
   <!--[if !IE]>-->
   <object data="path/flash_movie.swf" type="application/x-shockwave-flash" 
         width="333" height="333"  id="unique_id" align="middle">
      <param name="pluginurl" value="http://www.adobe.com/go/getflashplayer">
      <param name="quality" value="high">
      <param name="bgcolor" value="#fff">
   <!--<![endif]-->
      <p>Alternate content goes here..</p>
   <!--[if !IE]>-->
   </object>
   <!--<![endif]-->
</object>

Twice Cooked Method (default Adobe Flash method) ^ ]

The "Twice Cooked" method is the default method used by the Adobe Flash IDE to embed Flash movies. This is by far the most popular and widely supported method for including .swf content into (X)HTML web pages. This method is not standards-compliant, provides no alternate content, and provides no plugin detection, possibly resulting in broken content. Further, this method requires IE users to "click-activate" the movie before it will play. Nonetheless, this method remains popular and is relatively simple to implement, requiring no additional JavaScript to function properly.

Usage (1 step)

1. Customize1 this code and insert it into the <body> of your document:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
      codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" 
      width="333" height="333" id="unique_id" align="middle">
   <param name="allowScriptAccess" value="sameDomain" />
   <param name="movie" value="path/flash_movie.swf" />
   <param name="wmode" value="transparent" />
   <param name="scale" value="exactfit" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="#333" />
   <param name="menu" value="true" />
   <embed src="path/flash_movie.swf" name="unique_id" allowScriptAccess="sameDomain" 
      type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" 
      quality="high" bgcolor="#333" width="333" height="333" align="middle" />
</object>

This method provides support for the passing of variables to the Flash movie. Simply include the following parameters:

<param name="flashvars" value="variable=value&autostart=true" />
<embed ... flashvars="variable=value&autostart=true" ... />

Flash Satay ^ ]

Based on the generic object implementation, the "Flash Satay" method drops the invalid <embed> tag, manipulates various <object> tag parameters, and implements the use of a small container movie to load target Flash content. Any number of Flash movies may use the same container file, which may also receive and pass variables to the various target movies. This method requires no JavaScript, is standards-compliant, and functions on virtually every major modern browser. Keep in mind, however, that this method includes no innate Flash plug-in detection, which may result in broken and/or missing content. Further, this method requires IE users to "click-activate" the movie before it will play.

Usage (2 steps)

1. Open a new Flash movie, place the following ActionScript into the first frame, and save the file as c.swf1:

_root.loadMovie(_root.path,0);

2. Customize2 this code and insert it into the <body> of your document:

<object type="application/x-shockwave-flash" data="c.swf?path=movie.swf" width="333" height="333">
   <param name="movie" value="c.swf?path=movie.swf" />
   <img src="noflash.gif" alt="Alternate Image" />
   <p>Alternative content description</p>
</object>

Replace "movie.swf" with the name of your movie. The movie parameter will then pass the name of your target movie as a variable to the container file, which will then load and play the target movie itself. The container movie may be modified for additional functionality, but its file size must be kept small (within a few kilobytes).

Small Movie Satay (even easier)

For small Flash movies (e.g., small ads, decorative graphics, etc.), there is no need for the container movie. Simply customize and use this:

<object type="application/x-shockwave-flash" data="movie.swf" width="333" height="333">
   <param name="movie" value="movie.swf" />
</object>
  • "Flash Satay" References:
  • 1 Download a ready-made copy of the c.swf file (download taken offline 2013/08/17)
  • 1 Download a ready-made copy of the c.fla file (download taken offline 2013/08/17)
  • 2 Flash Satay

FlashReplace ^ ]

FlashReplace by Robert Nyman is a JavaScript solution for including Flash content into a web page. FlashReplace works by replacing specified block-level placeholders with predefined Flash content. The script is extremely lightweight, weighing in at a mere 2.1 KB, and requires only one line of code to implement. FlashReplace also works fine with streaming Flash movies, and does not require users of Internet Explorer to "click-activate" Flash content. To ensure maximum browser support, FlashReplace employs the forbidden <embed> element, which unfortunately results in code that is not standards-compliant. Also, to keep the script as lightweight as possible, FlashReplace contains no support for Adobe Express Install. Overall, a very lightweight and flexible solution for delivering Flash content to the widest audience possible. Well done!

Usage (1 step)

1. Download 1 the FlashReplace script and copy to desired directory.

2. Customize this code with the correct file path and insert it into the <head> of your document:

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

3. Customize this block-element placeholder according to the variables listed below and place into the <body> of your document. The code may be placed in its target location within the document, at the bottom of the page, or even in an external JavaScript file:

<script type="text/javascript">
   FlashReplace.replace("elmToReplace", "src", "id", width, height, version, params);
</script>

FlashReplace parameters:

  • elmToReplace — the id of the element to be replaced with the movie
  • src — the path to the Flash movie (e.g., flash/my-movie.swf)
  • id — the id to be used for the Flash-movie element
  • width — the width of the Flash movie
  • height — the height of the Flash movie
  • version — (optional) specifies a required Flash version
  • params — (optional) open parameter for customization

It is also possible to include multiple Flash movies within the same JavaScript placeholder. This is useful if you are consolidating code in an external .js file. Here is an example that also demonstrates usage of the two optional parameters (version and params):

<script type="text/javascript">
<!--//--><![CDATA[//><!--

   FlashReplace.replace("header", "/flash/header-movie.swf", "flash-header", 777, 333);
   FlashReplace.replace("article", "/flash/article-movie.swf", "flash-article", 555, 333, 7, { wmode : "transparent" });
   FlashReplace.replace("footer", "/flash/footer-movie.swf", "flash-footer", 777, 333, 7, 
      {
         wmode : "transparent", 
         quality : "high", 
         bgcolor : "#fff" 
      }
   );

//--><!]]>
</script>

SWFObject ^ ]

SWFObject is a Javascript Flash-Player detection and embed script that detects Flash Player versions 3 and up on all major modern browsers. SWFObject is search-engine friendly, degrades gracefully, generates valid (X)HTML markup, and is forward compatible. SWFObject includes an Adobe Express Install feature and provides automatic ActiveX control activation, so visitors do not need to "click-activate" Flash content. There is even a SWFObject extension available for Flash MX 2004 and Flash 8 1. SWFObject works great in both HTML and (X)HTML documents, but only when pages are sent as "text/html" (not "application/xhtml+xml").

Usage (4 steps)

1. Download SWFObject from the SWFObject Home Page2 and copy to desired directory.

2. Insert this function call into the document <head>:

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

3. For each movie object, customize2 and insert this code into the <body> of your document:

<div id="unique_element_id">
   <p>This is the alternate content that will be replaced by the Flash content.</p>
   <p>Include a link to <a href="path/doc.html?detectflash=false">bypass the detection</a>.</p>
   <p>This alternate content is for users without the Flash plugin or without Javascript enabled.</p>
   <p><strong><a href="http://www.adobe.com/go/getflashplayer">Upgrade your Flash Player<a/>.</strong></p>
   <p><noscript> content is not required unless you want to support users with the Flash plugin but without JavaScript.</p>
</div>

4. For each movie object, customize2 and insert this code directly below the previous code:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
   var so = new SWFObject("path/movie.swf", "unique_movie_id", "333", "333", "7", "#777");
   so.write("unique_element_id");
//--><!]]>
</script>

Here are some additional, optional variables (for additional variables and complete details, visit the SWFObject Home Page2):

   so.addParam("salign", "t");            // alignment parameter
   so.addParam("quality", "high");        // movie quality setting
   so.addParam("scale", "noscale");       // used for full-screen movies
   so.addParam("wmode", "transparent");   // player transparency setting
   so.addVariable("variable1", "value1"); // pass variable to Flash movie
   so.addVariable("variable2", "value2"); // pass variable to Flash movie
   so.useExpressInstall('path/expressinstall.swf'); // Adobe Express Install - requires "expressinstall.swf" file
   so.setAttribute('xiRedirectUrl', 'http://example.com/upgrade-finished.html'); // redirect after express install - must be abs url
   so.addVariable("variable1", getQueryParamValue("variable1")); // to pass "http://example.com/page.html?variable1=value1"

UFO ^ ]

UFO (Unobtrusive Flash Object) employs JavaScript to detect the Flash plug-in and embed Flash movies. UFO is free to use and supports virtually all major modern browsers. UFO produces valid (X)HTML code and compliments accessible, seo-friendly websites. Highly customizable, UFO supports multiple, differently configured Flash movies and provides excellent support for Adobe Express Install functionality1. UFO also provides automatic ActiveX control activation, so visitors do not need to "click-activate" Flash content. Plus, UFO works great in both HTML and (X)HTML documents when pages are sent as either "text/html" or "application/xhtml+xml". Nice. :)

Usage (3 steps)

1. Download the UFO JavaScript from the UFO Home Page1 and copy to desired directory.

2. Customize1 and insert this code into the <head> of your document:

<script type="text/javascript" src="ufo.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
   var FO = { movie:"movie.swf", width:"333", height:"333", majorversion:"8", build:"0" };
   UFO.create(FO, "unique_id");
//--><!]]>
</script>

3. Customize this block-element placeholder with alternate content and place into the <body> of your document:

<div id="unique_id">
 <p>Replacement content goes here.</p>
 <p>
  <a href="http://www.macromedia.com/go/getflashplayer">
   <img src="http://www.macromedia.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Flash Player" />    
  </a>
 </p>
</div>

To prevent undesirable or unusual presentational behavior during page/movie download, add the following CSS styles to the document <head> and placeholder element, respectively:

<style type="text/css">
    #ufoDemo { visibility: hidden; }
</style>
<div id="ufoDemo" style="visibility:visible;">
 <p>Replacement content goes here.</p>
</div>

Here are some additional, optional general parameters (for additional parameters and complete details, visit the UFO Home Page1):

id, base, play, loop, name, menu, scale, align, salign, quality, wmode, bgcolor, flashvars, devicefont, swliveconnect, allowscriptaccess, seamlesstabbing, allowfullscreen

Here are some additional, optional UFO-specific parameters (for additional parameters and complete details, visit the UFO Home Page1):

xi:"true" - enable Adobe Express Install support
ximovie:"[URL of express install Flash movie, ufo.swf]" 
xiwidth:"[width of customized express install Flash movie]" 
xiheight:"[height of customized express install Flash movie]" 
xiurlcancel:"[URL of cancel page]" 
xiurlfailed:"[URL of failed page]" 
setcontainercss:"true" - use for full-screen Flash content

You can use the optional xiurlcancel and xiurlfailed parameters to route express install cancellations and failures to separate URLs. You also have the option customize the express install Flash movie (you can find the ufo.fla file in the ufo.zip file).

SWFFix ^ ]

SWFFix 1 is a recently released 2 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)! This could be the one, folks!

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 — Usage (4 steps)

1. Download the SWFFix library 3 (and Express Install files, if needed) and copy to desired directory.

2. Embed both Flash content and alternative content using standards-compliant markup (edit as needed):

<body>
   <div>
      <object id="targetID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="movie" align="left" width="333" height="333">
         <param name="movie" value="movie.swf" />
         <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="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:"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:value pairs:
  • swfversion specifies the version of Flash Player required to display the content.
  • expressinstall specifies 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 — Usage (4 steps)

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

  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

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.