Comparing SWFObject with Other Methods

There have been several methods over the years to detect versions of Flash Player and embed SWFs into HTML pages. This section looks at each of the most popular methods and points out their respective limitations.

Default Embed Method

Everyone knows the default Flash embed method. It consists of an object tag with an embed tag placed inside as a fallback mechanism. This is the most popular Flash embed method and is the default choice when publishing your SWF from the Flash IDE. This is the most compatible way to embed a SWF and it works in the widest range of browsers.

Here is an example of the default Flash embed code:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"  
  codebase="http://fpdownload.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#version=7,0,0,0" 
width="550" height="400" id="Untitled-1" align="middle">
 <param name="allowScriptAccess" value="sameDomain" />
 <param name="movie" value="mymovie.swf" />
 <param name="quality" value="high" />
 <param name="bgcolor" value="#ffffff" />
 <embed src="mymovie.swf" quality="high" bgcolor="#ffffff" width="550"  
   height="400" name="mymovie" align="middle" allowScriptAccess="sameDomain" 
    type="application/x-shockwave-flash" 
pluginspage="http://www.macromedia.com/go/getflashplayer" />
 </object> 

While this is the most common method of embedding your movies, it does have a few drawbacks:

• There is no plug-in detection: With no plug-in detection, users may see broken or no content. If there is no plug-in installed at all, they will either get the "ActiveX install" message in Internet Explorer (see Figure 1), which many users now fear because of rampant spyware and malware, or the "strange puzzle piece" box in Mozilla-based browsers (see Figure 2). Neither of these plug-in install systems is very user friendly. They don't explain themselves well as to what exactly a user is installing.
• It is not valid HTML or XHTML: There is no such thing as an embed tag in any version of HTML or XHTML. However, because many browsers handle object tags differently (or not at all, or the implementation is too buggy), the embed tag is needed as a fallback mechanism.

Figure 1. ActiveX install message in Internet Explorer

Figure 2. Plug-in install message in Firefox

Object Tag Only and Flash Satay

Here are two examples of Object Tag Only embedding and Flash Satay:

Object Tag Only

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/
   cabs/flash/swflash.cab#version=6,0,40,0" width="300" height="120">
  <param name="movie" 
value="http://www.macromedia.com/shockwave/
       download/triggerpages_mmcom/flash.swf"> 
  <param name="quality" value="high">
  <param name="bgcolor" value="#FFFFFF"> 
 <!--[if !IE]>  
 <object data="http://www.macromedia.com/shockwave/
   download/triggerpages_mmcom/flash.swf"  
   width="300" height="120" type="application/x-shockwave-flash">
   <param name="quality" value="high">
   <param name="bgcolor" value="#FFFFFF"> 
  <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
   FAIL (the browser should render some flash content, not this).
  </object>
   <![endif]--> 
</object> 

Flash Satay

<object type="application/x-shockwave-flash
 data="c.swf?path=movie.swf" 
 width="400" height="300">
 <param name="movie"
  value="c.swf?path=movie.swf" />
 <img src="noflash.gif" 
 width="200" height="100" alt="" />
 </object> 

Both of these methods have their limitations:

• There are accessibility issues: Using Flash Satay, some screen readers (like JAWS) ignore Flash content entirely.
• There is no plug-in detection: As is the case with the default embed tag in Flash, if there is no plug-in detection, users may see broken content—or none at all. When Flash Player encounters a SWF embedded in a page, it will try to play it no matter what the version is. So if you have Flash Player 6 installed and encounter a Flash 7 SWF, your plug-in will try to play it anyway, possibly causing odd behavior.
• Some methods of Flash Satay do not stream the SWF to the player: This method may require "holder" SWFs into which your movie is loaded. This makes passing variables from FlashVars parameters a hassle. It's also a pain to maintain Flash content because you now have twice as many SWF files floating around your web server.
• Older versions of Safari ignore param tags: Until version 2.0 (on Mac OS X "Tiger") or 1.3 (OS X "Panther"), the Safari browser completely ignored the param tag. This meant that if you tried to set other options using them—like Flashvars, Align, Salign, and so on—Safari did not see those values.

"Small Flash Movie on the Index Page" Method

This method involves placing a single SWF on the index page of your website, which then checks the $version variable in Flash Player and redirects the user either to the Flash content inside the site or a "Flash upgrade" page.

Here are the problems with this method:

• There is no Flash Player detection on internal pages: If a user sends an internal URL to another user, that new user bypasses the Flash detection on the index page.
• It is not valid HTML or XHTML: The embed tag required to place the SWFs in your HTML documents will not validate.
• You hurt your own search engine ranking: Because this method requires you to use your index page solely as an empty Flash detection page, search engines will show your site description as something meaningless like "Detecting Flash Player" or even nothing at all. This is a huge waste of prime website real estate that you should use instead to promote your company or products. In addition, developers often fail to include a link to the other content in the site (because those links are in the SWF, they figure) so the rest of your website is never indexed either.

Flash Player Detection Kit

Macromedia (now Adobe) did an excellent job with the Flash Player Detection Kit released with Flash Player 8—but it does still have its limitations. It contains two different ways to detect Flash Player:

• Small Flash movie: The classic "small Flash movie on the index page" method has the problems I just described.
• JavaScript: Yes, that's right, Flash includes a JavaScript plug-in detection template. Unfortunately, it's not very user-friendly because it mixes JavaScript, VBscript, and your HTML all into one page. This has many of the drawbacks as past JavaScript detection and embed techniques had, and doesn't do anything to make your life easier as a Flash/HTML developer. Furthermore, it doesn't validate as XHTML or HTML (assuming you care about that sort of thing).

Raw JavaScript to Detect and Embed SWFs

It's hard to critique this method because it usually varies from site to site. However, most JavaScript Flash-detection schemes I come across generally suffer from the same faults:

• Unreliable plug-in detection: Often the detection works only with current versions of Flash Player and needs to be updated manually as new versions of the plug-in are released.
• More code added to the page: This makes it even harder to update or change your content. This method also makes it harder for designers or other people working with your pages to change or add Flash content.
• An overly complicated solution: Many Flash embedding scripts can grow to large file sizes or be overly complicated. SWFObject is designed to be simple and small.

Using Express Install with SWFObject

SWFObject has full support for the Express Install feature in Flash Player 8. Included with the SWFObject script is an ActionScript file that works with SWFObject to start the upgrade process in your SWFs. Your users never have to leave your site to upgrade their player, and when the upgrade is complete, they will be redirected back to the page that started the upgrade.

To use Express Install, you must first include the expressinstall.as file in your FLA. At the start of your SWF file, do a simple check to see if the user needs to be upgraded:

#include "expressinstall.as"

  // initialize the ExpressInstall object
 var ExpressInstall = new ExpressInstall();

  // if the user needs to upgrade, show the 'start upgrade' button 
if (ExpressInstall.needsUpdate) { 

   // this is optional, you could also automatically start the 
   // upgrade by calling ExpressInstall.init() 
  // here instead of the following lines  
    // attach the custom upgrade message and center it 

  var upgradeMsg = attachMovie("upgradeMsg_src", "upgradeMsg", 1);
   upgradeMsg._x = Stage.width / 2;
   upgradeMsg._y = Stage.height / 2; 

   // attach the button actions that will start the ExpresInstall updater
   upgradeMsg.upgradeBtn.onRelease = function() {
     // the ExpressInstall.init() method is what kicks off the actual update 
    ExpressInstall.init(); 
  }
   // if expressinstall is invoked, stop the timeline. 
  stop(); 
} 

Note: In this example, I am using a custom upgrade message. Because of changes in the way that Flash 8 publishes SWF files, the content you may use in the custom upgrade message is very limited. TextFields should be set to use device fonts and any outlines or strokes on objects should either be set to hairline or removed entirely. If you are having trouble with content not showing up in your custom upgrade message, try simplifying the objects. Alternatively, simply invoke the upgrade process without a custom message (see the sample code in the included FLA).

For a local example of this Express Install code, open the fo_tester.fla file in the source folder contained in the sample download ZIP file. If you want to see Express Install in action on the web, install Flash Player 7 (or 6.0.65) and visit my SWFObject Express Install page.

If your SWF is in a pop-up window, or you wish to redirect the user to a different location after they complete the Express Install update, you can use the optional xiRedirectUrl attribute to redirect the user back to your landing page instead of the actual page containing your SWF:

<script type="text/javascript">
    var so = new SWFObject("movie.swf", 
            "mymovie", "200", "100", "8", "#336699", true);
    fo.setAttribute('xiRedirectUrl', 
     'http://www.example.com/upgradefinished.html'); 
   // must be the absolute URL to your site 
     fo.write("flashcontent");
 </script> 

SWFObject Examples

The previous example is all that you need for barebones usage of SWFObject. But what if you need to use some of the other parameters that Flash Player offers? SWFObject makes it very easy to add any extra parameter you may need.

The following examples show a number of different methods you may wish to use to embed your Flash content.

Simple Example Adding a Few Parameters

In this example, I create a new SWFObject file and set quality to "low", the wmode parameter to "transparent", and alignment to "t":

<script type="text/javascript">
    var so = new SWFObject("movie.swf", 
            "mymovie", "200", "100%", "7", "#336699");
    so.addParam("quality", "low");
    so.addParam("wmode", "transparent"); 
   so.addParam("salign", "t");
    so.write("flashcontent"); 
</script> 

You can find a full list of the current parameters and their possible values in the following Flash Player TechNote: Flash OBJECT and EMBED tag attributes.

Passing Variables into SWFs Using the FlashVars Parameter

Using FlashVars is the easiest way to get data from your HTML file into your SWF, but you can pass the data in only when your movie first loads. Normally, you would add a parameter called flashvars and then, for the value, pass a string of name/value pairs like this:

variable1=value1&variable2=value2&variable3=value3  

and so on.

SWFObject makes this a bit easier by allowing you to add as many variables as you like in a similar manner in which you add additional parameters. Here is an example of passing values into your SWF using FlashVars:

<script type="text/javascript">
    var so = new SWFObject("movie.swf", 
            "mymovie", "200", "100", "7", "#336699");
    so.addVariable("variable1", "value1"); 
   so.addVariable("variable2", "value2"); 
   so.addVariable("variable3", "value3"); 
   so.write("flashcontent"); 
</script> 

Once this is done, all of the variables you pass in will be available immediately inside the SWF. Just access them as you would any variable on the _root timeline. For more information on how FlashVars work, see this Flash TechNote: Using FlashVars to pass variables to a SWF.

Pulling Variable Values from the URL String

The SWFObject script comes with a function that allows you to pull variable values from the URL string. For example, suppose you have a URL like this:

http://www.example.com/page.html?variable1=value1&variable2=value2 

Using the function getQueryParamValue(), you can easily pull these values from the URL and then pass them into your SWF. Using the previous URL, you would have the following:

<script type="text/javascript"> 
   var so = new SWFObject("movie.swf", 
            "mymovie", "200", "100", "7", "#336699");
    so.addVariable("variable1", getQueryParamValue("variable1")); 
   so.addVariable("variable2", getQueryParamValue("variable2")); 
   so.write("flashcontent");
 </script> 

The getQueryParamValue() function also supports reading variables from location.hash, which is used sometimes when deep-linking into your Flash application.

Using FlashVars to pass variables to a SWF

Introduction

The FlashVars property of Macromedia Flash Player provides an efficient method of importing variables into the top level of a movie when first instantiated. This feature requires Flash Player 6 (or later). For information on passing variables with earlier versions, refer to Additional Information below.

FlashVars

Placed within the Object (ActiveX) or Embed Tag (Netscape and Macintosh Internet Explorer), the property "FlashVars" can be used to import root level variables to the movie. All variables are created before the first frame of the SWF is played. The format of the string is a set of name=value combinations separated by '&'. Special and/or non-printable characters can be escaped with a '%' followed by a 2 digit hexadecimal value. A single blank space can be represented using the '+' sign.

All browsers will support string sizes of up to 64KB (65535 bytes) in length. FlashVars must be assigned in both the OBJECT and EMBED tags in order to work on all browsers.

Object Tag Example:

<PARAM NAME=FlashVars
  VALUE="foo=Hello%20World¶graph=first+line%0Dsecond+line">

Embed Tag Example:

<EMBED src="display.swf" FlashVars="foo=Hello%20World¶graph=first+line%
0Dsecond+line" ... (other parameters)> </EMBED>

Encoding of this string is the same as the page containing it. Internet Explorer is responsible for providing UTF-16 compliant string on a Windows platform. Likewise, Netscape will provide a UTF-8 encoded string to the player.

How SWFObject Works

Using SWFObject is easy. Simply include the JavaScript file called swfobject.js and then use a small amount of JavaScript on your page to embed your Macromedia Flash content.

The following example shows the minimum amount of code you need to embed a SWF:

<script type="text/javascript" src="swfobject.js"></script>
  <div id="flashcontent">
    This text is replaced by the Flash content.
 </div>

  <script type="text/javascript"> 
   var so = 
   new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699"); 
     so.write("flashcontent"); 
</script>
 

The following sections describe what this code does.

Holding the SWF

<div id="flashcontent">[...]</div> 

This part prepares an HTML element that holds the SWF. The content placed in the "holder" element is replaced by the Flash content so that users who have Flash Player installed will never see the content inside this element.

Alternate content can be any combination of HTML and images—whether it's a message to your users who don't have Flash Player installed or simply alternate HTML content. This feature has an added bonus of letting search engines index your alternate content.

Passing in the Parameters

var so = new SWFObject(swf, id, width, height, version, bgcolor); 

This code creates a new SWFObject file and passes in the following required parameters:

• swf: File path and name to your SWF file.
• id: ID of your object or embed tag. The embed tag will also have this value set as its name attribute for SWF files that take advantage of swliveconnect (used for JavaScript communication, replaced by ExternalInterface in Flash 8).
• width: Width of your SWF.
• height: Height of your SWF.
• version: Required player version for your Flash content. This can be a string in the format of "majorVersion.minorVersion.revision" (example: "6.0.65") or you can just require the major version (example: "6").
• background color: Hex value of the background color of your SWF.

Optional parameters include the following:

• useExpressInstall: If you would like to upgrade users using the Express Install feature, use true for this value.
• quality: This is the quality at which you wish to play your Flash content. If you specify no quality, the default is high.
• xiRedirectUrl: If you would like to redirect users who complete the Express Install upgrade, you can specify an alternate URL here.
• redirectUrl: If you wish to redirect users who don't have the correct Flash Player version, use this parameter and they will be redirected.

• detectKey: This is the URL variable name that SWFObject looks for when bypassing the detection. Default is detectflash.

  For example, to bypass Flash detection and simply write the SWF to the web page, you could add ?detectflash=false to the URL of the document containing the Flash content.

Writing the Flash Content to the Page

so.write("flashcontent"); 

This code tells the SWFObject script to write the Flash content to the page—assuming the correct version of the player is installed on the user's system—by replacing the content inside the specified HTML element.

Behind-the-Scenes Detection

SWFObject works quietly in the background of your HTML document. When developing pages that use SWFObject, you should start with your alternate (non-Flash) content first. After you get your pages working without your SWFs, incorporate them with little JavaScript snippets that replace your alternate content with the Flash content. This ensures that the alternate content will be indexed by search engines and that users without Flash Player will still see a working HTML page.

Whether you provide upgrade instructions or not is up to you. If your alternate content suffices, there may be no reason at all to tell people they are missing out on any Flash content.

SWFObject works in all the current web browsers in Windows, including Microsoft Internet Explorer 5, 5.5, and 6; Netscape 7 and 8, Firefox, Mozilla, and Opera. SWFObject also works in the following web browsers in Mac OS: Internet Explorer 5.2, Safari, Firefox, Netscape 6 and 7, Mozilla, and Opera 7.5+. It should continue to work well into the future.

SWFObject will also allow your users to interact with your Flash content without having to first "activate" it.

SWFObject can detect minor versions and revision versions of Flash Player as well, simply by passing the string value of the version you want. An example requiring Flash Player v.6.0 r65 (or 6,0,65,0) would be as follows:

var so = new SWFObject("movie.swf", 
                "mymovie", "200", "100", "6.0.65", "#336699"); 

Bypassing SWFObject

You can bypass the built-in plug-in detection of SWFObject. If for some reason the plug-in detection fails on a user's system, you can include a bypass link that disables the detection built into SWFObject and always writes the Flash content to the page.

To use this bypass, simply link to the page with your Flash content on it and include a single URL variable called detectflash and set it to false. Here is an example of what that link would look like:

<a href="mypage.html?detectflash=false">Bypass link</a>