This was so helpful I wanted to say kudos to these guys! 

http://blog.deconcept.com/swfobject/

 This is awesome information for flash detection, and activation!  

Table of Contents

What’s new in this version?

For a full list of changes, please see my SWFObject 1.5 blog post.

How it works

[For the über nerds, you can view the raw javascript here.]

Using SWFObject is easy. Simply include the swfobject.js Javascript file, then use a small amount of Javascript on your page to embed your Flash movie. Here is an example showing the minimum amount of code needed to embed a Flash movie:

<script type="text/javascript" src="swfobject.js"></script> 		 <div id="flashcontent">   This text is replaced by the Flash movie. </div>  <script type="text/javascript">    var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");    so.write("flashcontent"); </script>

Here is a breakdown of what the code does:

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

Prepare an HTML element that will hold our Flash movie. The content placed in the ‘holder’ element will be replaced by the Flash content, so users with the Flash plug-in installed will never see the content inside this element. This feature has the added bonus of letting search engines index your alternate content.

var so = new SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl, detectKey]);

Create a new SWFObject and pass in the required arguments:

  • swf – The file path and name to your swf file.
  • id – The ID of your object or embed tag. The embed tag will also have this value set as it’s name attribute for files that take advantage of swliveconnect.
  • width – The width of your Flash movie.
  • height – The height of your Flash movie.
  • version – The required player version for your Flash content. This can be a string in the format of ‘majorVersion.minorVersion.revision’. An example would be: "6.0.65". Or you can just require the major version, such as "6".
  • background-color – This is the hex value of the background color of your Flash movie.

Optional arguments are:

  • quality – The quality you wish your Flash movie to play at. If no quality is specified, the default is "high".
  • xiRedirectUrl – If you would like to redirect users who complete the ExpressInstall upgrade, you can specify an alternate URL here
  • redirectUrl – If you wish to redirect users who don’t have the correct plug-in version, use this parameter and they will be redirected.
  • detectKey – This is the url variable name the SWFObject script will look for when bypassing the detection. Default is ‘detectflash’. Example: To bypass the Flash detection and simply write the Flash movie to the page, you could add ?detectflash=false to the url of the document containing the Flash movie.
so.write("flashcontent");

Tell the SWFObject script to write the Flash content to the page (if the correct version of the plug-in is installed on the user’s system) by replacing the content inside the specified HTML element.

The Details

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. Get your pages working without your Flash movies, then add them in later with little Javascript snippets that replace your alternate content with the Flash movies. This ensures that the alternate content will be indexed by search engines, and that users without the Flash plug-in will still see a working HTML page. Whether you provide upgrade instructions or not is up to you. If your alternate content can suffice, there may be no reason at all to tell people they are missing out on Flash content.

SWFObject works in all the current web browsers, including, on PC: IE5/5.5/6, Netscape 7/8, Firefox, Mozilla, and Opera. On Mac: IE5.2, Safari, Firefox, Netscape 6/7, Mozilla, and Opera 7.5+, and should continue to work well into the future.

SWFObject detects Flash player versions in these browsers from version 3 and up, and will allow users to interact with your Flash content without ‘activating’ it first. For more information on this, see this blog post on the Internet Explorer Eolas patent dispute.

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

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

SWFObject’s built in plug-in detection can be bypassed. If a new browser is ever launched or for some reason the plug-in detection fails on a user’s system, you can include a bypass link that will disable the detection built into SWFObject, and it will always write the Flash content to the page. To use the bypass link, 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>

SWFObject Examples

The example given above is what you need for the bare bones use of SWFObject, but what if you want to use some of the other parameters the Flash plug-in has to offer? SWFObject makes it very easy to add any extra parameter you may need. The examples below are a number of different methods you may wish to use to embed your Flash content.

A simple example adding a few extra parameters

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

Here is a full list of the current parameters and their possible values on adobe.com.

Passing variables into your movies using the “Flashvars” parameter:

Using Flashvars is the easiest way to get data from your HTML into your Flash movie, but you can only pass the data in when your movie first loads. Normally, you would add a parameter called “flashvars” and then for the value, you passing 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 Flash movie 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 Flash movie. Just access them as you would any variable on the _root timeline.

The SWFObject script also comes with an extra function which allows you to pull variable values from the url string. An example is you have a url that looks 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 Flash movie. Here is an example, we’ll assume that the url looks like the above example:

<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 the location.hash, as used sometimes when deep linking into your Flash applications. For an example of how deep linking to your Flash movies using the location.hash variable, check out this demo of Slideshow Pro, which uses the SWFObject embed.

Using Express Install with SWFObject

SWFObject has full support for the Adobe Flash Player Express Install feature. Your users never have to leave your site to upgrade their player.

To use ExpressInstall, you must first upload the expressinstall.swf to your web server. Then, use the useExpressInstall method to specify the path to your expressinstall.swf. If no path is specified, SWFObject will look in the same folder as the current HTML page.

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

If you want to see ExpressInstall in action, you can install Flash player 7 (or 6.0.65) and visit this page.

If you wish to customize the Express Install feature, the source code to the expressinstall.swf is included with SWFObject.

If your Flash movie is in a popup window, or you wish to redirect the user to a different location after they complete the ExpressInstall update, you can use the xiRedirectUrl attribute to redirect the user back to your landing page instead of the actual page with your Flash movie.

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

Download

SWFObject is released under the MIT License. This means (basically) that you can use it for whatever you want with no restrictions.

Download SWFObject 1.5 – Zip file, includes swfobject.js and the example html templates below.

Or, if you are more of a hands on type, you can view my example pages:

* Pages are sent as text/html, not application/xhtml+xml.

AddThis Social Bookmark Button