Displaying Content Based on Flash Version Detection

With the changes in Internet Explorer requiring that a swf be clicked once to activate it, it has become necessary to use something other than the code published in the Flash IDE to detect the Flash version and display appropriate content (if one wishes to avoid making site visitors have to do that extra click). The best and easiest method for achieving this is to use SWFObject (also called FlashObject for some period of time).

SWFObject

As described on this page at adobe.com, it involves creating content within a div tag that will hold the Flash content if the correct version of Flash is detected, putting content into that div tag to display if the correct version is not detected, including swfobject.js (or flashobject.js, depending on when you got the files) in the head section of your page, and using javascript to write the Flash content into that div if the detection succeeds.

Examples

You can see an example of this by looking at the source code of the front page of this site. Note the inclusion of flashobject.js in the head section, the creation of div id="flashsection" (with an alternate image that will be displayed if the user either does not have Flash 7 or higher, or has javascript turned off), and code at the end of the html section to write Flash content if the detection (in flashobject.js) succeeds.

I also implemented a div within a table cell and used it with flashobject on this page, which I will get around to implementing on all the other pages at the site one of these days...

Flash extension for creating a template

If you want to create a ready-to-use template for use with SWFObject, instead of the traditional object/embed tags that Flash produces by default, you can download and use this JSFL command.

Testing in Firefox

Once I created and uploaded my new pages using flashobject, I tested to see if they worked in Firefox by doing the following:

• quit Firefox
• found the current Flash player dll in my Firefox directory (c:/Program Files/Mozilla Firefox/plugins/NPSWF32.dll) and renamed it to NPSWF.dl800
• found the Flash 6 player dll I keep in that directory, named NPSWF32.dl6079, and renamed that to NPSWF32.dll (you can get previous Flash plugins from this page for testing).
• Opened Firefox, browsed to my index.php page and checked to see that the alternate image was displayed and that the link went to the correct page at adobe.com
• Closed Firefox again
• Renamed the Flash 6 dll back to NPSWF32.dl6079, and the Flash 9 dll to NPSWF32.dll
• Reopened Firefox and tested again to see if the table cell now shows the Flash movie
• Disabled javascript in Firefox: Tools, Options, Web Features, uncheck the Enable Javascript checkbox. Reload page to see if swf is still displayed.
• Reenabled javascript

I should note that there are more robust ways for switching between browser plugins to test your detection code. One I've heard often recommended is from Kewbee.

A remaining question

The one thing I have not figured out how to do using SWFObject is to show an image if the right Flash version is not detected (situation 1) and embed the swf (instead) if javascript is disabled (situation 2). It seems that one has to show the same alternate content regardless of which of those situations is encountered, so I chose the default of showing an image.