1) First is to set up the progress bar animation movie clip. We will be using a mask layer to slowly reveal a progress bar rectangle that is stationary, giving the effect that it is lenghtening as the movie loads. Start by making a new movie clip symbol and call it "PreloaderBar". In the "PreloaderBar" timeline insert three new layers so that there are a total of four. Starting at the bottom and working your way up, name the layers "Progress", "Mask", "Box", and "Events". Right-Click the "Mask" layer and select "Mask" from the pop-up window. Only the "Progress" layer's contents should be effected by the "Mask" layer.

Note: Copying frames from one layer to another will change the name (and contents) of the destination layer if it is empty, so pay attention to layer positions and names as you cut and paste.

2) Into each layer insert a blank frame at the frame 100 location.

3) We will now draw the shape and copy the entire frame it is in to each of the locations it will be used to ensure perfect alignment throughout the layers. In the "Box" layer draw the rectange for the progress bar shape with a colored fill. Copy the first frame of "Box" into the first frame of "Progress" and remove the box outline from the "Progress" copy, and the interior color fill from the "Box" copy.

4) Now, we make a shape tween in the mask layer to reveal the progress bar in increments. In the "Mask" layer, draw another rectangle which completely covers the rectangle in "Progress". Color and outline do not matter. Position this new rectangle so that it barely touches the left side of the rectangles in "Progress" and "Box". Copy the first frame of the "Mask" layer and paste it into the last frame of the "Mask" layer. Adjust the last frame's rectangle position so that it covers the rectangles in "Progress" and "Box". It doesn't have to be perfect, just cover all of the other rectangles on the other layers. Double-click the first frame of the "Mask" layer to edit its properties and select the "Tween" tab. In the "Tweening" drop-down menu select "Shape". Close the dialog box. If you lock all the layers involved in a mask, you can see the mask in action by hitting enter.

Note: A motion tween may be used in place of a shape tween if the shape is converted to a symbol before being copied to the last frame of the "Mask" layer.

5) In the first and last frame of the "Events" layer add Stop actions to keep the movie from playing on its own or looping once it has completed the 100 frames.

The finished movie clip should look as follows:

6) Now moving on to the main movie timeline, rename the current layer "Progress" and insert an instance of the "PreloaderBar" movie clip we just made into the "Progress" layer. Name the instance by right clicking it to bring up its "Properties" dialog box. Type in "PreloaderBar" into the field labeled "Instance Name". Naming the instance is critical to proper setup of the Preloader. Without setting the name of the instance, in the later steps when you need to reference this movie clip using the "Tell Target" action, there will be nothing available in the target window.

7) Insert a new layer above "Progress" and call it "Events". Insert a frame into the frame 10 position of both layers and lock the "Progress" layer. This frame is spaced out to frame 10 to allow a short pause after the movie has completed loading to give your visitors closure to the progress bar.

8) Insert a blank keyframe into the 2, 3 and 10 frame locations of the "Events" layer.

9) Label the First keyframe "Initialize" and enter the following action script into it:

Note: "//" lines are provided to clarify the line directly above them and are not intended to be included in the sction script. "Comment:" lines are Flash Comment actions.

Comment: Adjust variable NumberOfScenes to reflect the number of scenes in this movie
Set Variable: "NumberOfScenes" = 2
// Variable = String, Value = Expr.
Set Variable: "iCount" = 0
// Variable = String, Value = Expr.
Loop While (iCount < NumberOfScenes)
// Condition = Expr.
   Comment: Loop totals the frames from all scenes and stores into variable TotalFrames
   Set Variable: "TotalFrames" = TotalFrames + GetProperty("_level" & iCount, _totalframes)
   // Variable = String, Value = Expr.
   Set Variable: "iCount" = iCount + 1
   // Variable = String, Value = Expr.
End Loop
Comment: Reset iCount for next Loop
Set Variable: "iCount" = 0
// Variable = String, Value = Expr.

10) Label the Second Keyframe "Progress" and enter the following action script into it:

Comment: Reset variable FramesLoaded
Set Variable: "FramesLoaded" = 0
// Variable = String, Value = Expr.
Loop While (iCount < NumberOfScenes)
// Condition = Expr.
   Comment: Loop totals the number of frames loaded from all scenes in the movie into the variable FramesLoaded
   Set Variable: "FramesLoaded" = FramesLoaded + GetProperty("_level" & iCount, _framesloaded)
   // Variable = String, Value =Expr.
   Set Variable: "iCount" = iCount + 1
   // Variable = String, Value = Expr.
End Loop
Comment: Calculates Progress as a ratio of FramesLoaded to TotalFrames to 100 percent.
Set Variable: "Progress" = Int (FramesLoaded * 100 / TotalFrames)
// Variable = String, Value = Expr.
Comment: Reset iCount for next Loop
Set Variable: "iCount" = 0
// Variable = String, Value = Expr.

11) Label the Third Keyframe "Loop" and enter the following action script into it:

Comment: Loop checks value of Progress and tells PreloaderBar what frame to stop at.
If (Progress <100)
   Begin Tell Target ("/PreloaderBar")
   // Target = String
      Go to and Stop (../:Progress)
      // Expression = Expr.
   End Tell Target
   Go to and Play ("Progress")
   // The second frame label
Else
   Begin Tell Target ("/PreloaderBar")
   // Expression = Expr.
      Go to and Stop (100)
   End Tell Target
   Go to and Play ("Change")
    // The final frame label
End If

12) Label the frame 10 location "Change" and insert a "Go To and Play(Scene 1, 1)" action.

13) Let's take a quick look at what is happening here. We have created a timeline loop that continues until all frames are loaded from all scenes. The first frame is the "Initialize" frame that runs only once and preps the variables for use in the two-frame loop of frames two and three. It loads up the NumberOfScenes and TotalFrames variables which never need to be updated again. TotalFrames is calculated by using the "_level0" syntax for accessing scene timelines from any location using a loop counter to cycle through all scenes. Frame 2, the "Progress" frame, loads up the FramesLoaded variable (using the same method as we did for TotalFrames) from scratch each time the frame is hit and calculates the ratio of frames loaded to total frames. Frame 3, the "Loop" frame, checks the status of the variable "Progress" against 100% and tells the "PreloaderBar" movie clip which frame to stop at. The tenth and final frame, "NextFrame", is the frame that actually kicks the play head over to the next scene with a short delay.

14) Notes on using you new Preloader:

• Each Movie that this Preloader is used in needs to have the NumberOfScenes variable setting changed to reflect the number of scenes for that movie or it will not function properly.
• As with all preloaders, it is inefficient and demonstrates a lack of understanding to use this preloader in small files. Check the streaming of each movie to make sure that it needs a preloader by previewing the movie and selecting View>Streaming. You can change what kinds of connection speeds you test the streaming at here as well.
• If your movie is very long and the streaming takes a while, place other movie clips in other layers in the preloader scene (which should always be scene 1) like text, small visual effects that load quickly or extremely simple games. Users will get bored looking at a large file downloading and skip it without other distraction techniques. For examples of this "distraction" technique check out the preloaders for the games at the Disney website.
• One drawback to this type of preloader is since it is based on the number of frames rather than the byte count, larger frames can take a longer time to download than others making the preloader appear to be "stuck" on a certain percentage. This can be minimized by placing hidden instances of later used movie clips and elements in earlier frames to help distribute the download bandwith more evenly across the length of the movie.
• If you want a numerical version of this preloader, just place a non-editable text box which points to the variable "Progress" in the "Progress" layer. Click the link for a tutorial on Using Text Boxes.

  Next Tutorial: Not Just Another Cheesy Preloader, Version 2 - (Advanced)

"The Internet is the foundation for a new industrial order. ... If you don't believe deeply, wholly...that the Net is going to change your business, you're going to lose."  - Fortune Magazine