Unobtrusive Flash with an Ajax 'Mme.flash' module

Since Microsoft required a user action to activate embedded ActiveX objects like Flash movies due to the Eolas patent, everyone has to render Flash objects by using JavaScript. Embedding Flash movies with JavaScript however has one other substantial benefit: you can fill the div tag where the Flash will be rendered with alternate content, readable by search engines. So I decided to extend my Dom object with a Mme.flash module.

The minimum tags needed to render Flash

After a quick search on the internet, I found a few very helpful sites:

• Flash Satay on the 'A list apart' site describes standards-compliant method of embedding Flash movies.
• UFO is the well known Unobtrusive Flash Object from Bobby van der Sluis.
• And there is Embedding Flash without <embed> from Hixie.

After a little experimenting, I found the minimum tags required to render Flash:

<!-- without Flash detection -->
<object
data="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/
flash.swf"
type="application/x-shockwave-flash"
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" />
</object>

<!-- with Flash detection -->
<object
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,40,0"
data="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/
flash.swf"
type="application/x-shockwave-flash"
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" />
    <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" />
    [Alternate content when Flash plugin not installed]
</object>


The Mme.flash module

Mixing this with JavaScript the 'Ajax' way, I cooked up a module for my Dom:

/* unobtrusive flash */
Mme.flash={items:[],
init:function(){var o=this.items,i;for(i=0;i<o.length;i++)this.render(o[i]);return true},
add:function(a,b){this.items.push([a,b])},
render:function(a){
    var v=[],q=Mme.extend({wmode:'transparent',quality:'high'},a[0]),x
    v.push('<object type="application/x-shockwave-flash" width="'+q.width+'" height="'+q.height+'" data="'+q.movie+'">')
    for(x in q){switch(x){case'height':case'width':break;default:v.push('<param name="'+x+'" value="'+q[x]+'" />')}}
    v.push('</object>')
    Mme.get(a[1]).innerHTML=v.join('\n')
}
}


Integrating in a web page

You need a <script> tag in the html head to add one or more Flash files to the page. First attribute is an object with the parameters of the Flash: 'height', 'width' and 'movie' are required. Second parameter is the id of the <div> in which the Flash file has to be rendered:

<!-- in the html head -->
<script type="text/javascript">
Tme.flash.add({height:120,width:300,movie:"http://www.macromedia.com/shockwave/download/
triggerpages_mmcom/flash.swf",flashvars:"bandwidth=medium"},"flash1")
</script>

<!-- somewhere in the html body -->
<div id="flash1">This is the alternate content for search engines.</div>


And here is the result: