This tutorial was written for the Flash Designer software, which allows you to create flash animations in a much easier way than by using Macromedia Flash. You may get Flash Designer here.
Control stacking order of Flash and DHTML elements with z-index. Use
z-index negative value to put objects behind and positive value to
bring items to front.
To make items visible below Flash animation you have to export SWF file in windowless mode (WMODE=transparent).
The following example demonstrates 3 objects, Flash animation
with z-index:0, "Text BELOW" (z-index:-1) and "Text ABOVE" (z-index:1)
Text BELOW the Flash
Text ABOVE the Flash
Create Flash Animation
- Launch Flash Designer and choose "Blank Animation". Choose "Frame"
> "Frame Size" to set movie dimensions. Enter 300 x 240 and click
OK.
- Choose "Rectangle" tool and draw a rectangle inside the frame.
- Choose "Edit" > "Align" > "Center on Page"
- Choose "Item" > "Sprite Animation" and select "Rotate 360" / "Medium", click OK.
- Choose "Text" tool, click inside the rectangle and type the text in the "Text Edit" dialog: "Flash Item". Click OK.
- Choose "Edit" > "Align" > "Center on Page"
- Choose "Item" > "Intro" > "Intro Animation". Check
"Enable", select "Stretch/Squeeze", "Vertical". Check "Glyph
Animation", "2 way" and "Always Visible"
- Press F9 to preview the file
Export SWF File
- Choose "Movie" > "Export Options", check "Transparent" and click OK.
- Choose "File" > "Export SWF File", navigate to Desktop, leave "Untitled-1" as the name and click OK
- Choose "File" > "Export HTML Page", select a name and click OK. The web page should popup in a browser window.
- Right click in the browser window and choose "View Source" to edit the HTML file.
- Replace entire HTML code with the code below. Save the file and refresh the browser.
<HTML>
<BODY>
<DIV STYLE="z-index:-1;
position:relative; left:50; top:115;"><b><font
color=red>Text BELOW the Flash</b></font></DIV>
<DIV STYLE="z-index:1; position:relative; left:100;
top:165;"><b><font color=blue>Text ABOVE the
Flash</b></font></DIV>
<DIV STYLE="z-index:0; position:relative">
<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
WIDTH="300" HEIGHT="240"
CODEBASE = "http://active.macromedia.com/ flash5/cabs/swflash.cab#version = 5,0,0,0">
<PARAM NAME="MOVIE" VALUE="Untitled-1.swf">
<PARAM NAME="PLAY" VALUE="true">
<PARAM NAME="LOOP" VALUE="true">
<PARAM NAME="WMODE" VALUE="transparent">
<PARAM NAME="QUALITY" VALUE="high">
<EMBED SRC="Untitled-1.swf" WIDTH="300" HEIGHT="240" PLAY="true" LOOP="true" WMODE="transparent" QUALITY="high"
PLUGINSPAGE = "http://www.macromedia.com/ shockwave/download/index.cgi?P1_Prod_Version = ShockwaveFlash">
</EMBED>
</OBJECT>
</DIV>
</BODY>
</HTML>