Anonymous
Domino 2.0 Rich Internet Applications with IBM Lotus Notes/Domino
You are here: Today » Unobtrusive Flash with an Ajax 'Mme.flash' module
« Validate xhtml of a site in development with Ajax
Adding document counts with Ajax »

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:

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:

Where's the flash???

Star rating

100%

Comments

To add a comment, log in or register as new user. It's free and safe.