Flashvalley - Flash tutorials - Creating a preloader in Flash

stop();

var initX:Number = _root.preloader.mask._x;

The stop() here is self-explanatory, we don't want the play head to move until the movie is loaded.

On the second line we store the initial position of our mask in the variable initX. We want to store the initial value because we will be adding a new value to the initial position each time we check for the amount of data loaded.

stop();

var initX:Number = _root.preloader.mask._x;

myInterval = setInterval(checkLoading, 50, this);

In a 12 frame per second movie, the onEnterFrame event will be called every 83 millisecond. With our setInterval method we are actually calling a function every 50ms, therefore, because the screen will refresh every 83ms we will need to use updateAfterEvent to force refresh it every 50ms.

We are giving a name to our Interval, myInterval in our case, because we want to be able to clear it once the loading is completed . The function we are going to call is, you might have guessed it, the function checkLoading. You will notice that I am passing the parameter this to the function checkLoading, it is not a necessary move but for demonstration purpose it will show you how to pass parameters to the function you are calling. In our case here, this refers to the _root.

stop();

var initX:Number = _root.preloader.mask._x;

myInterval = setInterval(checkLoading, 50, this);

function checkLoading(path) {
var amount:Number = (path.getBytesLoaded()*100)/path.getBytesTotal();
path.preloader.mask._x = initX+(amount*_root.preloader.mask._width)/100;
path.percentageLoaded.text = Math.floor(amount);
updateAfterEvent();
if (amount == 100) {
clearInterval(myInterval);
path.gotoAndStop(2);
}
}

Here is our checkLoading function, you will notice that path will receive the actual reference contained in this (the _root in our case).

On the second line of the function we are calculating the percentage of data loaded every time the function is called, we are doing that by using the getBytesLoaded() and the getBytesTotal() methods. To get that number represented as a percentage we multiply the amount of data loded with 100 and we divide it by the total size of the movie.

On the next line we are going to move the mask accordingly to the percentage of data loaded and accordingly to the size of our preloader. We do that using the same type of calculation we just mentioned above, we multiply the percentage of data loaded (variable amount) with the _width of the mask and we divide that number with 100. We then add that number to our variable initX.

On the next line we are sending the amount of data loaded in percentage to the dynamic text field on the stage. We use Math.floor to convert the decimal number into a whole number.

On the next line we use the updateAfterEvent() method to refresh the screen each time the mask has moved, we do that because the function is called every 50ms and the screen would normally refresh every 83ms (because we have a 12 frame per second frame rate). In simple words refreshing the screen means smoother animation.

The next 3 lines check if the the amount of data loaded is equal to 100, if it is then it means that the movie has loaded then we go and stop on the next frame.

That's it for the first implementation, let's now have a look at another possible code using onEnterFrame

Here is the code with onEnterFrame

stop();

var initX:Number = _root.preloader.mask._x;

onEnterFrame = function () {
var amount:Number = (this.getBytesLoaded()*100)/this.getBytesTotal();
this.preloader.mask._x = initX+(amount*this.preloader.mask._width)/100;
this.percentageLoaded.text = Math.floor(amount);
if (amount == 100) {
delete onEnterFrame;
gotoAndStop(2);
}
};

The general concept is the same the only difference is that the main function sits between the onEnterFrame event method. Once the movie is loaded we just delete the onEnterFrame event using delete.

This tutorial should hopefully help you to understand the ins and outs about creating preloaders in Flash. If you don't want to have to fiddle with the export frame for the components and the classes each time you want to preload a file or if you are looking for an easy and customizable preloader, be sure to have a look at our Flashvalley preloader.

Good luck :)

flashvalley.com