Scripting a Preloader Bar Function based on frames loaded

This tutorial is a continuation of the Function Callback Preloader script as seenn here. We will use the script from this previous tutorial to determine when to move to the next frame and  will create an onEnterFrame event in the function callback to "grow" our loading bar in this tutorial. Since this script is based on frames loaded, this script is good for movies that have frame content distributed throughout the movie. Frames that have large movie clips or data that is inequitably distributed throughout the timeline may want to consider using a class with bytes loaded for your preloader.

You will need this file to complete this tutorial.

1. Open the source movie. You will see a layer with the movie content, and an action layer at the top, with the funciton callback preloader action in it, and layers for the preloader loading bar and percentage text. Click on the black loading bar. The instance name is loaderbar_mc. Click onthe dynamic text box to the left of the % symbol and you will see the instance name is percent_txt. These will be important in our scripts.

2. Click in the actions layer frame 1 and open your action panel. Blow the stop, we need to add a script before the function callback that will initialize the size of the loading bar. Click at the end of the stop(); line and add a line. Type in loadbar_mc._xscale = 0; so that your script now looks like this:

stop();
loadbar_mc._xscale = 0;
_root.onEnterFrame = function(){
    if (_framesloaded >=_totalframes){
        nextFrame();
    }
}

This tells the loadbar to initialize at a width of 0%.

3. We will need a variable to track the percentage loaded fo we can tell the loaderbar how big it needs to be. Add the action: var percentageloaded:Number; to initialize the variable percentageloaded as a number.

stop();
loadbar_mc._xscale = 0;
var percentageloaded:Number;
_root.onEnterFrame = function(){
    if (_framesloaded >=_totalframes){
         nextFrame();
    }
}

4. We want to calculate the percent loaded on a regular basis while it is loading, so we can simply add this script to the onEventFrame function callback so it will progress at the frame rate. 

Add the following script to the function callback between the curly brackets, but above the if statement:  percentageloaded = Math.round(_framesloaded / _totalframes * 100);

stop();
loadbar_mc._xscale = 0;
var percentageloaded:Number;
_root.onEnterFrame = function(){
    percentageloaded = Math.round(_framesloaded / _totalframes * 100);
    if (_framesloaded >=_totalframes){
        nextFrame();
    }
}

5. We need to use the variable percentageloaded as the _xscale value, which is based on a percentage.. Inside the onFrameEvent function callback, add  a script that changes the _xscale size of the loaderbar_mc. Add this script loadbar_mc._xscale = percentageloaded; so your actions look like this:

stop();
loadbar_mc._xscale = 0;
var percentageloaded:Number;
_root.onEnterFrame = function(){
    percentageloaded = Math.round(_framesloaded / _totalframes * 100);
    loadbar_mc._xscale = percentageloaded;
    if (_framesloaded >=_totalframes){
        nextFrame();
    }
}

6. Play your movie. Test streaming and downloading.