Z-Index and Flash.
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)
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" and "Medium" speed, 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 "Animation" > "Intro Animation". Check "Enable", select "Stretch", "Vertical". Click "Text Animation" and check "Enable Glyph Animation" and click OK. Check "2 way" and "Always Visible" and click OK.
- Press F9 to preview the file
Export Flash SWF File
- Choose "Movie" > "Export Options", check "Transparent" and click OK.
- Choose "File" > "Export Flash SWF File", navigate to Desktop, leave "Untitled-1" as the name and click OK
- Choose "File" > "Export Web 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:100; top:165;"><b><font color=blue>Text ABOVE the Flash</b></font></DIV>
<DIV STYLE="z-index: 0; position:relative">
<DIV STYLE="z-index: -1; position:relative; left:50; top:95;"><b><font color=red>Text BELOW the Flash</b></font></DIV>
<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>
