By: Matthew David

March 25th, 2002

Reader Rating: 8.5

Flash movies are renowned for being compact and light in file size. That said, it's amazing how large those compact files can get when audio and a lot of imported graphics are used in a movie.

Fortunately, Flash, with its built-in ActionScript technology, can be optimized to preload each section of a movie before it's played. Graphics, scenes, and even whole movies can be downloaded as the rest of the movie plays, which can significantly optimize the experience a cus-tomer has with your site.

Getting Started

To begin with, we'll write a script that will play an animation while the rest of the movie preloads before it starts to play. This is similar to the many "Movie is downloading, please wait..." animations you see on Websites.

To start, open a file and save it as Simple_Preloader.fla. The movie opens up with a default of just one scene. For the preload script to work a second scene must be added. To do this, select Insert -- Scene, as shown here.

The Preloader script is going to be placed into Scene 1, but before we do this let's add some content to scene two. Open Scene two, and add two layers: call one layer "Scripts" and the other "Content". Make each layer five frames long.

Next, select the "Content" layer and add the following text: This is Scene 2.

In a production Flash movie this is the section where you will place the main movie. Scene two can be as large and long as you like. When you have finished with the Simple_Preloader, why not experiment with it -- add a scene from a complex animation that you've written.

Select the "Scripts" layer. Choose frame 5 and open the ActionScript Inspector. From the Basic Actions drag a "Stop" action on the ActionScript editor window.

Add The Preload Script

Now let's add the Preload script itself. Open Scene 1. Add one layer and call it "Preload". Make the Preload layer 5 frames long. Change each frame into a "keyframe" (keyboard short cut F6), as shown below. Converting the frames to keyframes will allow scripts and animation to be added.

Select frame 1. Using the "Text" tool add the word "Loading" in the center of the stage. Make the font Arial Black and 12 point in size.

Copy the word "Loading" from frame one and paste it into frames 2-5, as shown below. The word should appear in the same place in each frame. Select frame two. Select the word "Loading" and double click it to open it in edit mode. Immediately after the word add a single period.

Next, select frame three and edit the word "Loading" by adding two periods after the word. Add three periods after the word on frame four, and four periods on frame five. Now, when the animation plays it will display the word "Loading", and the three periods will animate after it.

Now, select frame 1. Open the ActionScript Inspector. From the Basic Actions drag "If Frame Is Loaded". Select the settings to "Scene 2" and "frame number 5", as shown here.

This script tells Flash that it must preload all of the content up to frame 5 of scene 2. If the animation were longer in scene 2, the number of frames would need to be extended. For instance, if your movie had 550 frames, you'd need to change the frame number to 550. All content, including audio, graphical and scripted content, will be preloaded with this script.

Drag an instance of the "Go To" action. Select the settings to Scene 2 and frame number 1. This action tells Flash what to do when all of the frames of scene 2 are loaded. In this case, the movie automatically goes to and begins playing frame 1 of scene 2:

Now, choose frame 5. From the ActionScript Inspector drag "Go To" and add the settings Scene 1, Frame 1. This will cause the animation to keep repeating until all the content in Scene two is loaded, as shown here:

Time to Test

The movie can now be tested. Press F12 to preview in your Web browser. You will notice that while Scene 2 is loading the animation will keep repeating. The more content you have in scene 2, the longer the preload scene will be displayed. The movie in Scene 2 is very short. To see the full effect of the preload script, import an MP3 file into scene 2. Most MP3 files are in excess of 1 MB in file size. When you place the movie on a Website, it will allow you to view the preload script in action while the MP3 downloads.

Preloading allows you to create movies that have the same impact to a cus-tomer whether they access the Internet on a dial-up modem or a dedicated high-speed connection. The above script provides a great deal of flexibility. Why not have a company logo animate for the first scene? Or, you could display a simple Flash game, or even a short presentation outlining what is to be covered in the main movie when it has downloaded. The possibilities are endless!