SWF Object Detection Scripts

The problem with Flash...

Many of our templates include some sort of Shockwave/Flash animation components. Some of our customers have asked, “What if some of my visitors can’t view Flash – what do they see?” Unfortunately, they just see a big, blank space! This happens if your visitor doesn’t have the Flash player installed on their system. It may also happen if they have their security settings set to block ActiveX components. Another issue with Flash movies is that the code used to embed a Flash file into your web page does not validate according to the W3C HTML or XHTML specifications. That’s a huge concern for web developers who are trying to meet standards.

This issue is almost resolved with Internet Explorer 7 & 8.

What's the issue?

In August 2003, a federal court ruled that Microsoft had infringed on a patent related to plug-in technology used in Internet Explorer owned by the University of California and licensed to Eolas Technologies Inc. "Plug-ins" include objects like Flash movies and Java Applets, as well as any other components that use the EMBED, APPLET, or OBJECT HTML tags. If your web site has a Flash or Swish animation, you'll want to read on.

As Microsoft is appealing this decision, they have also begun working on changes to Windows and Internet Explorer to try to side-step the patent issue. The new Internet Explorer, released for testing, will prompt users to click "OK" in order to load any plug-ins on that page. (You can imagine how this can get annoying for users!)

“What can I do?”

Other than deleting all that beautiful Flash work off your web site, you can venture into the arena of Flash detection. And the great news is never before has it been easier to work with Flash detection than it is now. Geoff Stearns has put together an elegant solution, SWFObject for detecting the Flash plugin and embedding it into your web page. If you’re concerned about your web site’s code validating as HTML or XHTML, his solution takes care of that problem as well!

Using SWFObject:

FlashObject is easy – and free – to use. Download SWFObject and import the flashobject.js file into your web site. Open the page that has the Flash movie. To import the javascript file, add this to the <head>…</head> area of your page:

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

Now find the code that embeds the Flash movie. Don’t delete it yet, because you’ll want to grab some of its parameters:

<object classid="…” codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,0,0" width="500" height="100" id="mymovie">
<param name="movie" value="movie.swf?variable=varvalue">
<param name="flashvars" value="variable=varvalue">
<param name="quality" value="high">
<param name="bgcolor" value="#003399">
<embed …></embed>
</object>

Add this code after the last </object> tag.

<div id="flashcontent">
This text is replaced by the Flash movie.
</div>

You can keep the div’s ID (“flashcontent”) or call it something else. Then, put your alternate content in between the <div id=”flashcontent”> and </div> tags. This can be simple text, or it can be HTML code for a replacement image… whatever you want! This even allows search engines to index that alternate content as well, which you couldn’t really do with just a plain Flash movie.

Add this code underneath your flashcontent div:

<script type="text/javascript">
  var fo = new SWFObject("movie.swf", "mymovie", "500", "100", "6", "#003399");
  fo.addVariable("variable", "varvalue");
  fo.write("flashcontent");
</script>

This short bit of Javascript is what passes in the Flash movie parameters – from the original code, above - so that the FlashObject script can display the Flash movie properly. Here’s the breakdown:

new SWFObject(
  "movie.swf",  -- the file name of the Flash movie

  "mymovie", -- this matches the “ID” from your Flash movie parameters

  "500", -- the width of the Flash movie

  "100", -- the height of the Flash movie

  "6", -- the version of the Flash Player that is required

  "#003399"); -- the background color

  fo.addVariable("variable", "varvalue"); -- this is only necessary if you are passing in variables to the Flash movie through the HTML code. You can duplicate this line if you are passing in several variables.

  fo.write("flashcontent"); -- replace “flashcontent” with the name of the div ID, if you’ve changed it

At this point, you can delete the original Flash code (the <object>…</object> tags and everything in between).

And that’s it! Visit Geoff's Site to learn more about the SWFObject’s specifications and additional variations, details, and examples.

Portions courtesy of:
http://www.pixelmill.com/support/kb101619.htm