CapCai Blog

Flash behind HTML

Sometimes integrating your Flash movie into the HTML page may cause some layout issues such as your HTML dropdown menu appearing below the Flash movie.

Those are caused because by default browsers place embedded content on the topmost layer.

A fast fix to the above problem would be to add the “wmode” and setting the value to “transparent” in the embed tag. (Note: The “wmode” tag is not supported in some browsers)

However, what if the background color of your Flash movie is not the same as the color of your HTML page? (Might not be the best example, but for argument sake)

This is when the putting “Flash behind HTML” technique might come in handy.

To achieve this, we need to utilize layering in the HTML page, and another possible value for the “wmode” tag, which is “opaque”.

Layering in CSS has pretty much the same concept like layering in Flash. To do layering using CSS, we need to use a special attribute called the z-index. The smaller the z-index, the lower in the stack they are. So stuff that are put in layer 2 (or z-index:2) will block those that are put in layer 1 (or z-index: 1).

Do not use negative z-index, because it won’t show up on Mozilla. If there are 2 objects with the same layer, whichever comes later will be on top of the one that comes before it.

This is the HTML to embed your Flash movie behind the HTML (to test it just grab the code below and make a simple Flash movie and name it “yourmovie.swf”):

 <div style="position:relative; font-size:30px; z-index:5;">LAYER 5</div>
 <div style="position:relative; font-size:30px; z-index:2">LAYER 2 before flash</div>
 <div style="position:absolute; top:0; left:0; font-size:120px; z-index:2;">
 	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="200" height="150" id="recursion_tree_branch" align="middle">
 		<param name="allowScriptAccess" value="sameDomain" />
 		<param name="wmode" value="opaque" />
 		<param name="movie" value="yourmovie.swf" />
 		<param name="quality" value="high" />
 		<param name="bgcolor" value="#e7e7e7" />
 		<embed src="yourmovie.swf" mce_src="yourmovie.swf" wmode="opaque" quality="high" bgcolor="#e7e7e7" width="200" height="150" name="yourmovie" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
 	</object>
 </div>
 <div style="position:relative; font-size:30px; z-index:4">LAYER 4</div>
 <div style="position:relative; font-size:30px; z-index:2">LAYER 2 after flash</div>
 <div style="font-size:30px; z-index:1">LAYER 1</div>