1. Home
  2. Computing & Technology
  3. Animation

Creating Transparent Flash Movies with WMode and Div Layers

By Adrien-Luc Sanders, About.com

3 of 4

Let’s look at the (bolded) code for the div layer first:

<div id=layer1 style="position:absolute; top:20; left:20; width:350; height:350; z-index:1; padding:0px;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="300">
<param name="movie" value="wmode.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="wmode.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="300" wmode="transparent"></embed></object>
</div>

A div layer is like a window inside a window, letting you define an area inside your HTML page – much like a table, but with more options, such as the ability to layer on top of the rest of your content. If this looks familiar, good. If it’s confusing, the only thing you need to worry about is this:

All content that will be placed inside the div layer must be between the opening <div> and closing </div> tags.
position:absolute keeps the div layer in one place rather than moving relatively.
top:## and left:## position the div layer a set number of pixels from the top and left edges of the screen. You can also use right:## and bottom:##.
width=”###” and height=”###” set the size of the layer in pixels.

Explore Animation
About.com Special Features

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

Easy ways to connect two computers for networking purposes. More >

  1. Home
  2. Computing & Technology
  3. Animation
  4. Flash Animation Tutorials
  5. Creating Transparent Flash Movies with WMode and Div Layers

©2009 About.com, a part of The New York Times Company.

All rights reserved.