Flash Preloader

This tutorial is divided into three sections: Setup, Design and ActionScript

Setup

1. Open Flash and create a new movie file. For this example my stage dimensions are 300 pixels wide and 150 pixels high.
2. Rename Layer 1 to bar by double clicking on the layer name and typing bar.
3. If you don’t have rulers visible on your stage. Select the View menu then choose the Rulers Option (Keyboard Shortcut Ctrl+Shift+Alt+R).
4. Draw a guide by placing the cursor within the left ruler. Hold down the left mouse button and drag a guide onto your stage. Place this guide a 100 pixels from the left of your stage.
5. Repeat Step 3 this time placing the guide at 200 pixels from the left of your stage.
6. Your stage should now look like (Fig 1)

FIG 1.

Design

1. Change your fill colour by selecting the bucket tool on your tool bar (Fig 2 Section A). Select the colour of the preloader bar. I’ve chosen #FF9900.
2. Select the Rectangle tool and draw a rectangle that is 100 pixels wide. Choose a height that is you think is suitable.
3. Choose the Select tool and double click on your rectangle
4. Change your stroke width to 2 pixels by modifying it in the Properties Panel. (Fig 2 Section B)
5. Your Stage should now look like Fig 2

FIG 2.

1. Select the outline by placing your mouse cursor over the border of the rectangle until it looks like this: and double click.
2. Cut the outline by holding down Ctrl and pressing X
3. Create a new layer by clicking the new layer button on the layers palette
4. Name this layer Outline
5. Select the Edit menu then choose Paste In Place (Keyboard Shortcut Ctrl+Shift+V)
6. Your layers palette should now look like Fig 3

FIG 3.

1. Select the layer bar and double click on the rectangle fill
2. Convert this shape to a symbol by pressing F8
3. In the Convert to Symbol popup menu enter bar_mc in the name
4. Select Movie Clip option under the behaviour
5. and for Registration select the middle left rectangle (See Fig 4 for all options)
6. Click Ok
7. In the Properties Panel in the instance name input box enter BAR

FIG 4.

1. Create a New layer and rename it text box
2. Select the text tool (make sure you’re working on the text box layer)
3. Draw a text box by holding down the left mouse button and dragging your mouse on the stage
4. In the properties palette change the text box type to Dynamic Text (Fig 5 Section A)
5. In the box labeled Var type the following exactly TEXT (Fig 5 Section B)

FIG 5.

ActionScript

1. 3Create a New Layer and rename it actions.
2. With the layer Actions selected, insert 3 blank keyframes by pressing F6 twice (Fig 6)
3. While on the Actions layer select the first frame

FIG 6.

1. Press F9 to view the actions panel
2. In the actions pane window (Fig 6 Section A) enter the following actionscript:
   
   LOADED = Math.round(getBytesLoaded());
   TOTAL = Math.round(getBytesTotal());
   PERCENT = LOADED/TOTAL;
   BAR._width = PERCENT*100;
   TEXT = Math.round(PERCENT*100)+"%";
   if (LOADED == TOTAL) {
   gotoAndPlay(3);
   }
   
3. Select Frame two on the Actions Layer and enter the following actionscript:
   
   gotoAndPlay (1);
   
4. Select Frame three on the Actions Layer and enter the following actionscript:
   
   play();
   

We've made the source file for this tutorial freely available for download and modification. If this tutorial was helpful or you had questions concerning anything we covered please contact us.

Return to Tutorials Main Page
Back to Top