Too much information

The Mission

Use Flash as a background image.

The Problems

There are a multitude of problems with embedding Flash into valid mark-up. Basically:

• You can’t use the tag now days and has been dropped in favor of the
• This presents problems because IE and Netscape/Firefox based browsers handle the object tag differently. If you manage to get a single object tag to load a flash movie in both browsers then IE seems to not stream the movie anymore.

The Solutions

So how do we use the object tag to please everyone? There are a few methods and they are well documented and there have been a few methods pop up for doing it nicely. They are:

• Flash Satay, was the first attempt to deal with the problem of embedding Flash in a standards compliant way. Had nice lean mark-up. Messy in that it uses a flash movie to load a Flash movie to get around an IE non-streaming bug. Made passing vars to the desired Flash movie hard work. There is a follow up to this article in which the comments are worth reading.
• Daniel Duris, came up with a method that improved on this slightly, although it seemed to be just the Satay method without the loader movie. Suffers from the IE no-stream bug. It IS quite lean and I tend to use it for small Flash widgets that don’t need loading:
  
<object type="application/x-shockwave-flash" data="images/banner.swf" width="288" height="128">
<param name="movie" value="images/banner.swf" />
<img src="banner.gif" width="288" height="128" alt="banner" />
</object>


• Hixie and Flash Gillay methods came about as a second stab at the problem, The Gillay one being better documented. This approach uses IEs propriety stuff to hide the second nested object tag from itself. A nice trick and also has better accessibility options and I RECOMMEND THIS ONE. Downside is the mark-up is doubled, blotted, and you have IE specific code, HTML validates but is slightly yucky. Still, best compromise at the moment.

  His site is not always up, here the HTML:

  
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,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>


As for using Flash as a background, the short story is: you can’t. You have to wrap the object tag in a div and then make it a lower z-index (CSS) to the content on top of it. The trick is to set the param ‘wmode’ to ‘opaque’ in side the object tag(s).

And for good measure. Heres The Flash® Player Detection Kit to make sure the dummies/users have the right plugin installed.