Basic Flash Preloaders
There are many ways to build Flash preloaders. This method I would say is a balance between the one of the better methods and the easiest to understand.
Basic Preload Code
To start open a new Flash file and give it the following timeline structure:
In frames one and five on the actions layer simply add a stop(); command and in frame five on the content layer put a fairly large image so we have something to preload.
Now go back to frame on on the actions layer and add the following code:
this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onLoaderProgress);
function onLoaderProgress(evt:ProgressEvent) :void {
var percent:Number = evt.bytesLoaded / evt.bytesTotal;
trace(percent);
}
The first line adds an event listener to the stage which listens for the loading of this swf to make progress. Each time this swf makes progress it executes the onLoaderProgress function. For now this function simply divides the bytes of the swf loaded by the total size in bytes of the swf. The result is a percentage expressed from zero to one. Then we trace that percent to the output window. This will give us a good idea as to how often the progress event is triggered and give us a good look at what is happening with our percent variable.
Next we add the following code:
this.loaderInfo.addEventListener(Event.COMPLETE, onLoaderComplete);
function onLoaderComplete(evt:Event) :void {
play();
}
This code adds another event listener to the stage that listens for the loading to be complete. Once the swf has completely loaded we execute the onLoaderComplete function which runs a play(); command and plays the rest of our swf.
Visualizing the Preloader
While the swf is preloading we have a percent variable which is slowly increasing from zero to one as the swf preloads. Getting tat percent variable was the hard part. Now all we need to do is have a movie clip react to our increasing percent variable.
For example we could create a rectangle, convert the fill of that rectangle to a movie clip called fill_mc and add the following line to our onLoaderProgress function:
fill_mc.scaleX = percent;
That’s it! We have a preload bar!!
Now that we have one visual representation of our loading progress the possibilities are endless! We could create a speedometer and us the rotation property. We could use an image an the alpha property. Or a combination of any of those.
In class we created a basic speedometer preloader and deconstructed the initial preloader at pepsi.com.