Devit!

With Flash animation & video clips becoming a staple of modern web designs there are frequent instances where an HTML element will overlap your flash clip.  This could be a lightbox, drop down menu or modal popup window.  There is a fairly simple fix for this.  Set the WMODE attribute to true.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="900" height="1000" title="test">
<param name="movie" value="rtraction_animation.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="rtraction_animation.swf" wmode="transparent" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="900" height="1000"&gt;&lt;/embed>

Notice how wmode is an extra param tag for the object tag and just an attribute for the embed tag.

That’s great if you’re coding the HTML directly but due to the IE Flash ActiveX bug many people began using Javascript libraries to embed flash.  The syntax is quite simple for the 2 most popular Javascript Flash libraries AC_FL_RunContent and the open source SWFObject 2.0.

AC_FL_RunContent

AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','900','height','1000','title','test','src','rtraction_animation','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','rtraction_animation','wmode','transparent' );

AC_FL_RunContent is Adobe’s Javascript library for dynamically embedding Flash. You’ll notice each this function equires the name of the option with the value right after. We just added wmode and transparent as parameters at the end of the function.

SWFObject

swfobject.embedSWF("rtraction_animation.swf", "rtraction_animation", "300", "120", "9.0.0","expressInstall.swf", '', {wmode:"transparent"}, {id:"rtraction_animation",name:"rtraction_animation"});

This version is our preferred which uses the open source SWFObject 2.0 library. Add the option parameter wmode and set it to transparent. The Javascript library generates the proper tags on the fly.

Jeremy

Jeremy has a love hate relationship with computers , and in contemplative moments he has been known to muse on the fact that his life’s work is in reality a long string of 1’s and 0’s. When he’s not banging code into his keyboard at work, Jeremy is banging out beats for his band “Sad Skelton” that you can check out at www.sadskelton.com.

This entry was posted on Monday, March 9th, 2009 at 5:23 pm and is filed under Devit!. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.