Selteco Software
Selteco.com > FlashDesignerZONE.com > Tutorials > T1044

Flash background.

Use Flash SWF file as the background of a web page like you would use BODY BACKGROUND tag.

BODY BACKGROUND will not work. You have to add Flash file in absolute mode and use z-index to put it behind.

Use a DIV tag with the following attributes and insert this code at the end of document before </body>: 

<div style="position: absolute; top: 0; left: 0; z-index: 1;">
<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
WIDTH="1024" HEIGHT="800"
CODEBASE="http://active.macromedia.com/flash5/cabs/swflash.cab#version=5,0,0,0">
<PARAM NAME="MOVIE" VALUE="t1044.swf">
<PARAM NAME="PLAY" VALUE="true">
<PARAM NAME="LOOP" VALUE="true">
<PARAM NAME="WMODE" VALUE="opaque">
<PARAM NAME="QUALITY" VALUE="high">
<EMBED SRC="t1044.swf" WIDTH="1024" HEIGHT="800" PLAY="true" LOOP="true" WMODE="opaque" QUALITY="high"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT>
</div>
  1. Create a new document and set the size to 1024 x 800 ("Frame" > "Frame Size")
  2. Set "Frame 1" to "Stop" ("Frame" > "Frame Delay" and check "Stop", click OK)
  3. Draw a circle (hold CTRL to draw equal edges).
  4. Choose "Item" > "Gradient Fill"
  5. Set up the gradient to simulate 3d shape:

  6. Move the ball below the bottom edge of the document
  7. Right click the ball and choose "Intro" > "Intro Animation". Check "Enable animation" and choose "Fly" / "Top". Click OK. To loop the animation choose "Item" > "Sprite Animation".
Hit F9 to preview the movie.

Now copy the ball several times ("Edit" > "Duplicate"). Resize each ball. For each object choose "Intro" > "Intro Animation" and modify duration time to be unique. We have used 2.2 seconds or 1.8 seconds or 5.6 seconds to create an illusion of random falling.

To publish the Flash animation choose "File" > "Export Flash SWF File". Then choose "File" > "View HTML code". Copy the code to integrate the background with your HTML page (you have to add DIV tag manually).

Download source project t1044.zip (1 kb)

Firefox NOTE: The rest of your html code (entire body section) must be in a separate layer: 

<div style="position: relative; z-index: 2;">
 ...body section...
</div>