Prerequisite Tutorials:

Symbol Combinations - (Intermediate) Combining Buttons and Movie Clips
Not Just Another Cheesy Preloader (Advanced) - The first version covers alot of ground that is not covered again in this one. If you missed the first, It is highly recommended that you complete it before continuing with the second!

 

1) Basically the design is the same, it is the code that has changed to take advantage of new Flash functions that are available for exactly this purpose.

The preloader will be set up as a Smart Clip to make it easier to handle within your other projects. First is to insert a new movie clip symbol named "Preloader". Name the instance of the new symbol "Preloader".

2) Next we need 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. Add a new movie clip symbol inside the "Preloader" movie clip and call it "PreloaderBar". In the new symbol "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.

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

4) 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.

5) 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.

6) 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:

7) Now back to the "Preloader" movie clip 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 and selecting :Panels>Instance". Type in "PreloaderBar" into the field labeled "Name". Naming the instance is critical to proper setup of the Preloader. Without setting the proper name of the instance, in the later steps when you need to reference this movie clip using Action Script, there will be nothing available in the target window.

8) 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.

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

10) Insert the following code into frames 1 and 2:

Loaded = _root.getBytesLoaded();
Total = _root.Target.getBytesTotal();
// Calculates Progress as a ratio of FramesLoaded to TotalFrames to 100 percent.
Progress = int(Loaded*100/Total);

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

// Loop checks value of Progress and tells PreloaderBar what frame to stop at.
if (Number(Progress)<100) {
PreloaderBar.gotoAndStop(Progress);
gotoAndPlay (1);
} else {
PreloaderBar.gotoAndStop(100);
nextFrame ();
}

12) Label the frame 10 location "Change" and insert a "_root.gotoAndPlay(ContinueFrame)" action.

13) Now we need to define the Clip Parameters to make the Preloader a "Smart Clip". Open the Library window and right-click on the "Preloader" movie clip. Select "Define Clip Parameters..." Input a variable "ContinueFrame" with a default value of 11 and a "Progress" variable with a default value of 0

14) 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 and second the "Progress" frames, use the Loaded and Total variables to calculate the current value of the "Progress" variable. 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, "Change", is the frame that actually kicks the play head over to the specified frame with a short delay.

15) Notes on using you new Preloader:

• The Preloader no longer usees the NumberOfScenes variable as in the previous version.
• 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 almost 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.
• The drawback to the frame based 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. Distributing the download bandwith more evenly across the length of the movie is no longer necessary.
• 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.

"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