AS3 Loading Screen ( Preloader )

Why do we need loading screen?

Flash is built for streaming content, which means the movie will start if the minimum bare content has been loaded, such as elements used in the first frame.
This will not be good in games, because if a part of the game didnt load, then the game may not work properly!
So we need to dedicate a frame at the beginning of the game to load the whole game parts on and after the loading is done, we will allow the game to start.

The following code will show you how to do that:

__________________code start____________________

stop();

addEventListener(Event.ENTER_FRAME, loadProgress);

function loadProgress(event:Event) {
// get bytes loaded and bytes total
var movieBytesLoaded:int = this.root.loaderInfo.bytesLoaded;
var movieBytesTotal:int = this.root.loaderInfo.bytesTotal;


// convert to KiloBytes
var movieKLoaded:int = movieBytesLoaded/1024;
var movieKTotal:int = movieBytesTotal/1024;
var percentageLoaded:Number=Math.round((movieKLoaded/movieKTotal))*100;

// show progress
progressText.text =""+percentageLoaded+"% Loaded";

// move on if done
if (movieBytesLoaded >= movieBytesTotal) {

removeEventListener(Event.ENTER_FRAME, loadProgress);

gotoAndStop(2);

}
}

__________________code end____________________


Description of the code:

1- First you need to add " stop(); " at the begining to stop the movie at the loading page.

2- Add an event listener that will apply the loadProgress function to all frames "addEventListener(Event.ENTER_FRAME, loadProgress);"

3- The first two lines in the loadProgress function are

var movieBytesLoaded:int = this.root.loaderInfo.bytesLoaded;
var movieBytesTotal:int = this.root.loaderInfo.bytesTotal;

" this.root.loaderInfo " is used to get the status of the movie, so in the first line it will get the loaded bytes of the movie and in the second line it will get the total bytes of the movie .

4- Lines 3 and 4 in the function are

var movieKLoaded:int = movieBytesLoaded/1024;
var movieKTotal:int = movieBytesTotal/1024;

In this step we are converting the loaded bytes to kilobytes, because they will be needed in the next step when calculating the loading percentage .

5- Line 5 in the function is

var percentageLoaded:Number=Math.round((movieKLoaded/movieKTotal))*100;

In this step we are calculating the percentage of the loaded bytes.
First divide the loaded kilobytes over the total kilobytes of the movie, that will give us the ratio of the loaded bytes over the total bytes of the movie. Then we need to round the result to not have fractions in the percentage. After that we multiply the result by 100 and that will give us the percentage of the loaded bytes.

6- Line 6 in the function is

progressText.text =""+percentageLoaded+"% Loaded";

In this line we are showing the percentage loaded movie to the user.
I made a dynamic text field on the stage and named it progressText, so by using
progressText.text we are editing the content of the text field and entering the percentage in it.
Note: progressText.text accepts only strings, so I added ( ""+ ) after it which means deal with everything after me as string!

7- Line 7 in the function is

if (movieBytesLoaded >= movieBytesTotal) {
removeEventListener(Event.ENTER_FRAME, loadProgress);
gotoAndStop(2);
}

Now we are checking if the bytes loaded are larger than or equal to the total bytes, if so then the loading is done.
When the loading is done, we will need to do two actions:

>Stoping the loadProgress listener.
>Moving to the frame that the game starts on (in my case im assuming that the game starts on frame 2).

THATS IT!

Here is the source file