Flash Tutorial: Preloader Movie Clip	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Tutorial - Preloading External Flash Movies

Free Flash Tutorial

Step Five: Creating the Preloader Movie Clip

The Progress Bar that you have just created is just part of the final display. We need to combine it with other information such as the percentage. This is done inside a new Movie Clip:

1. Go to: Insert > New Symbol
2. Name the new symbol: preloaderloader
3. For Behavior select: Movie Clip
4. Click: OK
   
   
   
   
5. Add 2 Layers so that you have a total of: 3 Layers
6. Rename Layer 1 to: ActionScript
7. Rename Layer 2 to: Text
8. Rename Layer 3 to: Progress
   
   
   Layers inside the preloaderloader.
   
   
   
   The ActionScript Layer
   
   
9. Select Frame 1 of the ActionScript Layer and add this code:

// Stop the preloader from automatically running
stop();


10. On the ActionScript Layer right click on Frame 3 and select: Insert Blank Keyframe
    
    
    Frame 3 has a blank Keyframe.
    
    
    
11. Add this code to this new Frame (miss out the gray comments if you wish):

//  Get the total bytes to be loaded
total_bytes = (this._parent.MyExternallyLoadedSWFMovieHolder.getBytesTotal());

//  Get the bytes loaded so far
loaded_bytes = (this._parent.MyExternallyLoadedSWFMovieHolder.getBytesLoaded());

//  Work out the difference between the total bytes to load and the bytes loaded so far
remaining_bytes = (total_bytes-loaded_bytes);

//  Work out the percentage loaded
percent_done = (int((loaded_bytes/total_bytes)*100));

//  Set the target bar percentage loaded
bar.ba.target = (percent_done);

//  Display progress of percentage loaded in the text box
DisplayProgress = (Math.round(bar.ba._width))+" % loaded.";

//  Check to see if everything has loaded
if (bar.ba._width>99) {

    //  If everything has loaded move onto the next frame
    gotoAndPlay(4);

//  If everything hasn't loaded then run this code
} else {

    /*  If everything has not loaded return to frame 2 and try again.  This creates a loop and then runs the code above again. This is how everything updates. The values will change as more content is loaded.  */
    gotoAndPlay(2);

//  Close the if-else statement
}


12. On Frame 5 of the ActionScript Layer right click select: Insert Blank Keyframe
    
    
    Frame 5 has a blank Keyframe.
    
    
    
13. Add this ActionScript to the new frame:

// Tell the external Movie to goto and play frame labeled "Play"
// You can use frame numbers too
_root.MyExternallyLoadedSWFMovieHolder.gotoAndStop("Play");

//  Stop on this frame
stop();



The ActionScript Layer should now have three little a's. The ActionScript Layer is now finished.



The Text layer

14. On the Text Layer right click on Frame 2 and select: Insert Blank Keyframe
    
    
    Frame 2 in the text layer has a blank Keyframe.
    
    
    
15. Select the Text Tool:
16. Drag a Text Tool on the Stage to create a: Text Box
17. Return to using the Selection Tool:
18. Move the Text Box to the: Centre of the Stage
19. If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
20. In the Property Inspector set the Text Box to: Dynamic Text
21. If the Show Border Around Text is selected, deselect it:
22. Give the Text Box a Variable Name (Var): DisplayProgress
    
    
    Don't get the Variable Name (Var) mixed up with the Instance Name!
    
    
23. On the Text Layer right click on Frame 3 and choose: Insert Frame (Not a Keyframe)
    
    
    The Timeline should now look like this. The Text Layer is now Finished.
    
    
    
    The Progress Layer
    
    
24. On the Progress Layer right click on Frame 2 and choose: Insert Blank Keyframe
25. Open the Library: Window > Library (F11)
26. Drag onto Stage your Movie Clip: Bar
27. Place it just above the Text Box like this:
    
    
    The Bar is just above the Text Box.
    
    
28. In the Property inspector give the Bar Movie Clip an Instance Name: bar
    
    
    
    
29. On the Progress Layer right click on Frame 3 and choose: Insert Frame (Not a Keyframe)
    
    
    Your Timeline should now look like this.
    
    
30. The Preloader is now ready to be placed on to the Main Stage. In the Edit Bar click on the Scene 1 Tab to return to the Main Stage:
    
    
31. On the Main Stage select Frame 3 in the layer: Preloader
32. Open the Library: Window > Library (F11)
33. Drag onto Stage the Movie Clip: preloaderloader
34. Place it towards the: Centre of the Main Stage
35. In the Property Inspector give it an Instance Name: preloaderloader
    
    
    Movie Clips Instance Name in the Property Inspector.