Adding a preloader

How big is my movie?

When you publish a swf, you can check its byte size in Windows Explorer or with Get Info on the Mac.

What's making it so big?

You can get a picture of how much content has to download in each frame (a frame's content will not display until it is completely downloaded) by doing this:

1. File, Publish Settings
2. Check Generate Size Report under the Options
3. Publish
4. Open the txt file with the same name as the fla, in the same directory -- you'll see the byte content of each frame in the movie, followed by a list of the bytes in each symbol, embedded font, and frame with actionscript

What will it look like when it downloads?

You can also get an idea of how it will download to a viewer's pc by choosing:

1. Control, Test Movie
2. View, Download Settings (choose the connect speed you want to test for)
3. View, Simulate Download

Based on the likely connect speed of your intended target audience, you may decide to add an animation before the main movie to provide information and interest/entertainment while the movie loads and/or to give the viewer some idea of how long the loading is going to take. You have three basic options:

1. Create an animated sequence that you want to have play all the way through and then start the main movie
2. Create a sequence that loops and displays while the movie is loading
3. Create a sequence that indicates how much of the movie has loaded (as a percent of the total size of the movie), then jumps to the main movie when all has loaded -- this is the method we'll use in our sample movie.

Adding a preloader to sitesample

Open sitesample4.fla (made on the previous page or available via link under Files at right) and save it as sitesample5.fla. Looking at the timeline for this fla, you'll remember (or note now) that we left the first 10 frames blank so we could add a loader there later. The movie (website) itself starts in frame 10. So, in the labels layer, make a keyframe in frame 10 and label that frame "start".

The preloader is going to work by showing a preloading movieclip as soon as the movie starts and then loop between two frames, checking to see how much of the movie has downloaded. When all of the movie is loaded onto the user's harddrive, the preloader code will cause the playhead to jump to frame "start" (10). While the movie is loading, the preloader will calculate the percentage of the movie that has been loaded (from server to pc/mac) and jump to a corresponding frame in the preloading movieclip. The second thing to do to set up the preloader is to make a keyframe in frame 2 of the labels layer and label it "loading" (without the quotes).

Making the 100-frame preloader movieclip

In order to show the loading progress of the movie, we'll create a movieclip that is 100 frames long, and contains a progressive sequence (in this case, letters 'filling up'), so that we can jump to a frame that represents the percentage of bytes currently downloaded from the server to the user's computer out of the total number of bytes to be downloaded. Below is a picture of what the movieclip looks like at frame 20, and following is a description of how to make it

• Create a new preloader layer under the actions layer.
• Choose Insert, New Symbol, movieclip, name preloader. Label the layer loading fill. With the text tool, choose Static Text and a blocky font and type Loading on the stage (in the new movieclip's timeline).
• Select the text and choose Modify, Break Apart once to separate the letters, and again to create a Flash shape of the letters.
• Use the Ink Bottle tool to create outlines around the letters. Shift-double-click all the outlines, cmd-x to cut them from the layer they're in, create a new layer called loading outline, and cmd-shift-v to paste them into the new layer.
• Make a mask layer above loading fill and draw a rectangle that covers the text in that layer. Drag the rectangle down til its top edge touches the bottom edge of the loading letters.
• Extend the timeline of all layers out to 100. Make a keyframe in the mask layer at 100. In that frame, drag the rectangle up til its top edge just touches the top edge of the loading fill. Go back to frame 1 and turn on Shape tweening in the Properties panel. Right-click the mask layer and set it to Mask.
• Add a layer above all called actions. Put a stop(); action into frame 1 of that layer.
• Return to the main movie by clicking Scene1.
• Drag a copy of preloader from the library into the preloader layer in frame 1 of the main movie. Give the movieclip an instance name of loading_mc. Make a blank keyframe in frame 10, so the intro will disappear when the main movie starts.

Including a text indicator of loading progress (not in our sample)

If you also (or instead) want a textfield to display the percent loaded: Add a textfield layer to the movie. In frame 1, make a dynamic text field named pct_txt (in the properties panel). Put a blank keyframe in frame 10 of that layer, so the textfield won't show when the main movie starts.

Put in code to loop and display

In the actions layer of the main movie, make frame 3 a keyframe and put this code in it:

if (getBytesLoaded() > 4 && getBytesLoaded() == getBytesTotal()) {
        gotoAndPlay("start");
} else {
        pct = Math.round(getBytesLoaded() / getBytesTotal() * 100);
        // this is for the visual indicator movieclip:
        loading_mc.gotoAndStop(pct);
        // this is for the textfield indicator:
        pct_txt.text = pct + "%";
        gotoAndPlay("loading");
}

That tells the playhead to loop between frame 2 and 3 until the whole movie is loaded (getBytesLoaded == getBytesTotal) and then jump to frame start to begin. While the looping is happening, the visual indicator movieclip (loading_mc) is being sent to the frame corresponding to the percent of content currently loaded and the textfield is being updated to reflect that also. You can include either the visual indicator movieclip or the textfield indicator, or both.

Home  :  Notes Index  :  Resources  :  About/Contact  :  Downloads