If you are coming across this tutorial I will assume you already what a preloader is and why you use it. I am guessing you want to know the technical details the preloader, so I won't go into detail about what a preloader is. You can search Google for that answer.
I will also admit there are many different ways to write a preloader. For example, you can have multiple scenes, code which counts through 100 frames before advancing to the frame of the media. Even with simple scripting techniques the structure of code can very greatly as well. For example you don't need to use a listener object, just write your listeners as functions. With this said, here is the method that I used.
Step 1 - Make a .swf Movie File
Create a .swf file from your movie. You can do this with Flash, by importing video (File > Import > Import Video), or with 3rd party software, and then exporting it (File > Export > Export Movie). You can test the .swf file by opening it in a web browser.
Step 2 - Make a Flash File to Load your Movie
Here comes the fun part. I set up a new Flash document with 5 layers.
The layers are broken down into the following components
- Functions - Auxillary actionscript functions
- Preloader - Actionsript code for the preloader (sets up listener)
- Movie - Contains the Movie Clip instance where the .swf file is loaded to
- TraceBox - Contains an HTML text area that debugging statements are printed to
- LoadText - Contains a dynamic text area that displays percentage of movie that is loaded
The two layers, Functions and TraceBox are only used for debugging purposes and can be removed once the preloader works. Because they are used for debugging, I won't go into detail about them. So the layers we want to focus on are Preloader, Movie and LoadText.
Step 3 - Make a Place for the Movie to Load
First we want to make a place for our Movie to load. To do this we need to make an instance of a Movie Clip. First, let's make a symbol (Ctrl/⌘+F8).
The symbol is now in your library and you can drag it onto a layer in your stage.
Since the movie clip I am loading is of me bouldering, I named the instance 'Bouldering'.
Our movie will load into this Movie Clip instance.
Step 4 - Create a Place to Display Loading Progress
Now Flash has a place to put the movie, but there is still no place to display information about the progress of our movie being loaded. There are many different ways display this information. It could be strictly graphic, or simply just text. Whichever way you choose to do it, you must make change your
onLoadProgress function accordingly, see below.
In this simple example I create a piece of dynamic text on the LoadText layer. I set it to '0 %' initially since this is what will be displayed before any part of the file is loaded. I named the instance 'loadText'.
Step 5 - Write the Preloader
The method I used to load a movie was to use the new
MovieClipLoader class. To use the
MovieClipLoader class you must setup a listener before loading the movie with the
loadClip method. The listener simply defines functions that will be called at certain events, for example when the loading is starting or ending. The methods I defined were
onLoadStart,
onLoadProgress and
onLoadComplete. Once I add the listener to the
MovieClipLoader I can load the clip. Now that the code has been explained, lets look at it:
var mcl = new MovieClipLoader();
var listener = new Object();
listener.onLoadStart = function (targetClip) {
targetClip._visible = false;
}
listener.onLoadProgress = function (targetClip, loaded, total) {
var percentage = (loaded / total) * 100;
_root.loadText.value = percentage + " %";
}
listener.onLoadComplete = function (targetClip) {
targetClip._visible = true;
}
mcl.addListener(listener);
mcl.loadClip("bouldering.swf", _root.Bouldering);
Now, lets break down the code:
var mcl = new MovieClipLoader();
var listener = new Object();
The code above simply creates a new variable of type
MovieClipLoader and a generic object that will define listeners for our Movie Clip. The reason to use an
Object to hold our listener functions is so we can create multiple movie clip loaders and make separate listeners for each of them without running into conflicts with function name. Or vice versa we can create multiple loaders and one listener that does something dynamic based on a variable set in the listener object.
listener.onLoadStart = function (targetClip) {
targetClip._visible = false;
}
listener.onLoadProgress = function (targetClip, loaded, total) {
var percentage = (loaded / total) * 100;
_root.loadText.value = percentage + " %";
}
listener.onLoadComplete = function (targetClip) {
targetClip._visible = true;
}
This code creates the listeners for the three events of a movie clip getting loaded, the start event, progress event and the complete event. In reality there are more events, but for this simple example I left out the other events like the error event.
onLoadStart gets called when the movie starts to load. I simple set our movie container to be hidden. The movie container will be revealed in the
onLoadComplete method.
The
onLoadProgress method is where all of the important work is done. This is the method that allows us to give important feedback about the progress of the movie being loaded. The two arguments
loaded and
total allow us to calculate a percentage. In this method I simply update the content of my dynamic text area to reflect the current progress of the load.
_root.loadText will points to the instance of the dynamic text area created in step 3.
mcl.addListener(listener);
mcl.loadClip("bouldering.swf", _root.Bouldering);
The first line of this code tells Flash that the listeners it is supposed to use when firing events is from the listener object we created. The second line tells flash to load the .swf movie (created in step 1) to be loaded into the Movie Clip instance created in step 3. It is important that argument 2 of
loadClip corresponds with the name of the instance created on your stage.
Recap
So each part is relatively simple. The key is to make sure you relate your ActionScript to your Flash file properly through the name of the Movie Clip instance. In this case it was 'Bouldering', but you can change it to whatever you like, as long as it is the same in both places.
Click here to
view all the Flash files included.
