Flash Training: Progress Bar	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Tutorial - Preloading External Flash Movies

Free Flash Tutorial

Step Four: Creating a Progress Bar

The progress bar is a visual representation of the percentage of the external Movie that is loading. It looks something like this:

Progress Bar.

1. Go to: Insert > New Symbol (Ctrl F8)
2. For Name type: Bar
3. For Behavior select: Movie Clip
   
   
   
   
4. Click: OK
   
   
5. In the Timeline use the Insert Layer button to add 1 layer so you have a total of: 2 Layers
6. Rename layer 2 to: Border
7. Rename layer 1 to: Progress Bar
   
   
   The Layers.
   
   
8. Select Frame 1 of the: Border Layer
9. Select the Rectangle Tool and: Draw a Rectangle
10. Return to the Selection Tool:
11. Click in the centre of the rectangle and press: Delete
12. Select the outline by double clicking on the: Stroke (Rectangle Outline)
13. In the Property Inspector set its width to: 102.0
14. Set its height to: 6.0
15. In the Timeline Lock the: Border Layer
    
    
    Your Loader Bar should look similar to this.
    
    
16. Select Frame 1 of the: Progress Bar Layer
17. Select the Rectangle Tool and: Draw a Rectangle
18. Return to the Selection Tool:
19. Double click on the outline Stroke (border) and press: Delete
20. Click in the centre of the rectangle to select the: Fill
21. In the Property Inspector change the Fill colour of the rectangle to: Black (or anything you like)
22. In the Property Inspector set its width to: 0.1
23. Set it's height to: 3
24. Then position it inside the border like so:
    
    Note: You may need to Zoom In:
    
    
    Black Rectangle positioned inside the border.
    
    
25. Right Click on the black rectangle in the Progress Bar Layer and select: Convert to Symbol
26. Give it a Name: Loading bar
27. For Behavior select: Movie Clip
28. For Registration select centre left:
    
    
    
    
29. Click: OK
    
    
30. In the Property Inspector give the new Movie Clip the Instance Name of: ba
    
    
    The Instance Name in the Property Inspector.

Note: The Instance Name and Movie Clip Names are different. In the ActionScript it is always the Instance Name that is important. Remember that Instance Names are case sensitive and must not start with a number or contain spaces. The Movie Clips name can be anything you want (as long as each Movie Clip has it's own unique name). Instance Names do not need to be unique.

Cross Ref: For detailed information about how to name objects see the tutorial on: ActionScript Syntax


Progress Bar ActionScript

You now have to add some code to the Loading bar Movie Clip. What this does is control the width of the bar. So that as more of the object loads the wider bar becomes. The bars width will match the percentage. If 50% has loaded then the bar will be 50 pixels wide etc.

31. Select the Loading bar Movie Clip and add the following code (if you wish leave out the gray comments):

// When the Flash Movie loads do the following...
onClipEvent (load) {

    //  Call the following function
    function follow(source, target, percent) {

        /* Set the variable vector equal to the percentage of the content being loaded and minus current width of this Movie Clip.  */
        vector = (source-target);

        //  Set the desp variable equal to the vector variable times by the percent which is the percentage loaded
        desp = (vector*percent);

        //  Return the amount loaded
        return (source-desp);

        //  Reset the target value
        dd.target = 0;

        //  Close the function
        }

    // Close the above Clip Event
    }

//  When this Movie Clip enters the frame (every 1/12th of a sec) do...
onClipEvent (enterFrame) {

    //  Call the function from above to reset this Movie Clip's width
    this._width = follow(this._width, target, .2);
}



Note: The above code is attached directly to the outside of the Movie Clip not to the Timeline. In your Actions Panel it should say Actions - Movie Clip in the top left corner or the Actions Panel:


The Actions are attached to the Movie Clip not the Timeline.


Cross Reference: The comments in the ActionScript above are very brief and if you don't understand how the code works I suggest you look at one of the preloader tutorials where you will find a more in-depth explanation as to how preloaders work: Preloaders or Preloader Listings

32. The Progress Bar is now complete so click on the Scene 1 Tab to return to the Main Stage: