1. Home
  2. Computing & Technology
  3. Animation

Creating Transparent Flash Movies with WMode and Div Layers

By , About.com Guide

4 of 4

Now the (bolded) embed src to place the Flash swf file:

<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>

Most of that is generated when you publish HTML from Flash, but there are two parts that you need to look at:

<param name="wmode" value="transparent">
and
wmode="transparent" inside the <embed src=”etc.”> tag.

wmode is an optional parameter in Internet Explorer 4.0 and higher, that allows you to take advantage of the layering, absolute positioning, and transparent movie features. When you add the parameter tag for wmode and edit it into your embed src tag (it must be in both), it lets you set all non-object areas of the Flash movie to transparent, opaque, or window. The latter creates a separate rectangular window.

View the example.

Explore Animation
About.com Special Features

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. 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.