Create a Flash Preloader

Large movies take a long time to load, especially for users who are not blessed with a high speed broadband connection. Therefore just giving them a screen which says loaded or just giving them nothing at all can leave them a little dazed and wondering what to do. The solution - give them some feedback on what is being loaded.

Movie modifications

The first thing you need to do is have an empty frame at the top. You don't need anything else - just an empty frame before you content. If it's easier you could even create a separate scene to house this frame. Make sure it's a key frame and the next frame where you content begins is a key frame too.

Next create a text box which says loading, or the name of the movie or something similar. This will be our loading object. It should only exist in that first fame. Now with the object selected go to Insert > Convert to Symbol and save it as a movie clip. I recommend the name 'preloader' but it has no affect what so ever. It just makes it easier for you to identify it in the library.

The scripting

Now double click on your newly created movie clip and watch it zoom into editing mode. There should currently only be one frame in the timeline now - extend this to three by inserting two new frames. Call this layer text or graphic or something similar. This layer will just remain the normal static text. The scripting will go in a different layer - create a new one for the scripting and make each of the three frames, key frames.

Now we have three key frames in the script layer which we can insert code to. This is expert field so we need expert view on. If you're not working in expert code view then open the actions panel and click the options view icon. It looks like a little square with an arrow pointing to the top right hand corner. Then click the line which says expert view rather than normal view. This will turn the action scripts window into more of a text editor style window to allow us to insert code.

The first thing we want to do here is to stop the main movie from going any further before it's loaded. So click on the first frame in the script layer and put the following code in:

_parent.stop();

This tells the main movie to stop. Generally commands like this use the model: object.command. In this example the object is the main movie or _parent as its known and the command is to stop it.

Now click on frame two of the script layer. He we are going to set some variables so we can give the user feedback on how far the movie has loaded so far. We do this by using a few functions built into ActionScript which allow us to get certain values.

kBytesLoaded = getBytesLoaded()/1024;
kBytesTotal = getBytesTotal()/1024;
kBytesRemaining = kBytesTotal - kBytesLoaded;
percentLoaded = 100 * kBytesLoaded / kBytesTotal;
progress = Math.floor(percentLoaded) add "%";

This script works out what has been loaded and how much is to load and then works out the percentage. It's a great script although I can't claim responsibility for it. Insert this script into the second frame and that will give us plenty of variables to work with.

Finally click on the third frame in the scripts layer. In here we check to see if the movie has loaded and if it has we send them on their way. If not we continue to loop and give them feedback on what has been loaded so far.

if (percentLoaded < 99){
gotoAndPlay(2);

} else {

_parent.play();
stop();
}

Here you can see if that if less the 99% has loaded then the movie is not fully loaded then the movie clip is sent back to recalculated the variables. If 99% or more has loaded then the movie clip is stopped and the main movie starts again. I use 9% rather than 100% as if there is a little data left which cannot be loaded it will never reach 100% and therefore loop for ever.

Giving feedback

Finally we need to tell the user what is going on. So create a new layer, call it something like feedback. Then insert a text box. This will display the percentage that has been loaded so far. This box needs to be set to dynamic. In Flash MX you can change this in the properties box - look for the drop down menu saying static text and change it to dynamic text.

Also look for the input text box which says var next to it. This stands for variable and will let us make the text box fill with a variable we set. So in the box write:

Progress

This will fill the box with the process variable telling the user what percentage of the movie has loaded. You're done - hit Control + E to return to editing the main movie. You can now export your movie save in the knowledge that users will see how much percentage of the movie has been loaded.