Flash Background

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:

image 1

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)


Close    To Top
  • Prev Article-Flash:
  • Next Article-Flash:
  • Now: Tutorial for Web and Software Design > Flash > Action Script > Flash Content
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Geek Tutorial
     

    Blogging Tutorial

      RSS Tutorial
      Podcasting Tutorial
    Graphic Design Tutorial
      Coreldraw Tutorial
      Illustrator Tutorial
      3D Tutorials
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial/ Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial/ Articles
     

    XML Style

      AJAX Tutorial
      XML Mobile
    Flash Tutorial/ Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial/ Articles
      Linux Tutorial
      Symbian Tutorial
      MacOS Tutorial
    Personal Tech
      Hardware Tutorial
      Software Tutorial
      Online Auction