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.
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:
|
<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" > "Line & Fill" > "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 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 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 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)
