Advanced preloader ( AS 3.0 and AS 2.0 version).

Today we will build a preloader witch will inform our users how much of our content is loaded. For this tutorial I will show you both as 3.0 and as 2.0 code. Will build the same graphical interface but will write as 3.0 code for those that use Flash CS3 and as 2.0 code for those that use Flash 8.

Ok let’s begin.

1.Go to File – New select Flash file(ActionScript 3.0),if you use Flash CS3 or if you use Flash 8 chose Flash Document and click Ok.It is possible to write actionscript 2.0 in Flash CS3 but I suppose that if you have Flash CS3 you use as 3.0 and as 2.0 if you have Flash 8.

2.Add a new layers (Insert – Timeline – Layer).

3.Select the top layer and name it actions, select the next layer and name it preloader.The naming of the layers is not required but to be well organize I name them.

4.Lock the actions layer, select the preloader layer pick the rectangle tool from the tools panel and draw a rectangle set it’s color to :your choice, set it’s stroke to none ,the width to 300 and height to 15.

5.With the rectangle selected go to Window – Align to open the Align panel. Be sure that the to stage button is pressed and click on the Align horizontal center and Align vertical center.

6.Select the rectangle hit F8 to convert it. Name it bar, set it’s type to MovieClip and the registration point to upper left and hit Ok.

7.With the rectangle selected set it’s instance name to bar.

8. On the preloader layer select frame 2 and hit F7 to insert a blank keyframe. With the frame 2 selected go to File – Import – Import to Stage, browse to your hard drive and select a relatively big picture (I selected a picture with a size of 527kb) and click Ok.

9.Select the picture resize it to cover the stage (if it doesn’t).

10.Select frame 1 in the actions layer hit F9 to open the ActionScript panel.Copy the code from below and paste in the panel

Code:

ActionScript 2.0 code for Flash 8:

stop();
this.onEnterFrame = function() {
var procentLoaded:Number = this.getBytesLoaded()/this.getBytesTotal()*100;
bar._xscale = procentLoaded;
if (procentLoaded == 100) {
this.gotoAndPlay(2);
}
};


ActionScript 3.0 code for Flash CS3:


stop();
this.loaderInfo.addEventListener(ProgressEvent.PROGRESS,checkingProgress);
function checkingProgress(event:ProgressEvent):void{
var procentLoaded:Number = event.bytesLoaded/event.bytesTotal*100;
bar.scaleX = procentLoaded/100;
if(procentLoaded == 100){
this.gotoAndPlay(2);
}
}


In frame 2 in actions layer hit F7 to insert a blank keyframe after hit F9 to open the ActionScript panel and paste the code: stop();

Hit Ctrl + Enter to test the movie.If the preloader is not appearing, on the test window go to View > Download Settings and chose 56k (from here you can test how fast is loading your file on connections with different speed) after go to View > Simulate Download (or Ctrl+Enter).Now you should see the progress of your preloader.

First let’s explain the ActionScript 2.0 code

-first we put a stop() method this will prevent our movie to start automatically

-we check the progress of our loader every frame with the onEnterFrame event. On every frame we get the bytes loaded (getBytesLoaded()) divide this value by the total number of bytes of our document. We multiple the result with 100 to obtain a hole number and assign the value to procentLoaded variable.

-next we scale our by the value of the procentLoaded variable,

-after we verify if our percent is equal to 100 if so go to frame 2.

The ActionScript 3.0 code it’s not much different.The progress of our loading process is handle by the checkingProgress function witch listens for a PROGRESS event. The percent with witch we scale our bar is divided by 100 because in AS 3.0 the scale property goes from 0 to 1.(in AS 2.0 goes from 0 to 100).

That all, we have an advanced preloader for use in our applications.

I hope that I was clear enough.

If you have questions, suggestions, doubts about the tutorial don’t hesitate to comment.I will see you on next tutorial.

You can download the source file :AS 3.0 preloader