.:: The Flash Place ::. Flash Tutorials - Making an advanced preloader

Posted on December 21st, 2006 11:15 PM by Matt

Making an advanced preloader
Difficulty: Intermediate
Type: flash
Rate this tutorial: You must be logged in to rate tutorials
Rating: with 4 votes

This tutorial will teach you how to make a preloader like this one (sorry about the music, it was the only thing i could find big enough to show you an example!)

Firstly you'll need to set the timeline out into the necessary layers:

on the squares layer, press F5 in the second frame to make this stretch over 2 frames

on the stage, draw a square:

Right-Click > convert to symbol > movieclip > name it "Square"

double click the square to open the movieclip, now right click the frame 1 (there should only be one frame here) and press "Create motion tween", now go to frame 6 and press F6 to create a keyframe, this is how the end square will look.

on frame1, right click the square and press "free transform" now make the square really small but still seeable.

Create a new layer, and press F6 in Frame 1 and then in Frame 6

in frame1 press F9 to open up the actions layer

in frame 1 and 6 in the actions box type

stop();

I used 2 layers one for the border and one for the center, but you don't need to,

now your layers should look something like this:

now go back to the root layer, press F11 to open up the library and drop 9 more of the squares onto the stage, but them in a line equal distance apart:

now in the background layer press F5 again in frame 2 and create a nice clean background to go behind the squares:

Create 2 text boxes on the stage, open up the "properties" menu, one of the text boxes should be static text with just a "%" in, the other should be dynamic text - slightly longer:

click the slightly longer text box, and make sure the settings in the "properties" menu match the ones below:

now select the square on the far left and give it an instance name of sq1:

go to the next on across and give it the name sq2 etc etc until you finish on sq10 :)

now its time for the actionscript!!

on the "actions" layer press F6 on the 2nd frame

in the first frame open up the actions panel (F11) and insert the following code:

totalBytes = Math.round(getBytesTotal() / 1024); // gets the total size of the movie in KB
loadedBytes = Math.round(getBytesLoaded() / 1024); //amount done in KB
percentDone = Math.round((loadedBytes / totalBytes) * 100); //% completed
if (_root._framesloaded >= _root._totalframes) { //when movie has finished loading
gotoAndPlay(3); //play the 3rd frame
}
if (percentDone >= 0){ //when loaded over 0% play sq1
   sq1.nextFrame();
}
if (percentDone >= 10){ //when loaded over 10% play sq2
   sq2.nextFrame();
}
if (percentDone >= 20){ //etc etc
   sq3.nextFrame();
}
if (percentDone >= 30){
   sq4.nextFrame();
}
if (percentDone >= 40){
   sq5.nextFrame();
}
if (percentDone >= 50){
   sq6.nextFrame();
}
if (percentDone >= 60){
   sq7.nextFrame();
}
if (percentDone >= 70){
   sq8.nextFrame();
}
if (percentDone >= 80){
   sq9.nextFrame();
}
if (percentDone >= 90){
   sq10.nextFrame();
}

if (percentDone >=100){ //when the preloader reaches 100% all the squares go off in random directions and slowly become invisible
        sq1._x = sq1._x+10;
       sq1._y = sq1._y+10;
       sq1._alpha = sq1._alpha-20;

        sq2._x = sq2._x-10;
       sq2._y = sq2._y+10;
       sq2._alpha = sq2._alpha-20;

        sq3._x = sq3._x-10;
       sq3._y = sq3._y-10;
       sq3._alpha = sq3._alpha-20;

        sq4._x = sq4._x+10;
       sq4._y = sq4._y+10;
       sq4._alpha = sq4._alpha-20;

        sq5._x = sq5._x-10;
       sq5._y = sq5._y+10;
       sq5._alpha = sq5._alpha-20;

        sq6._x = sq6._x-10;
       sq6._y = sq6._y-10;
       sq6._alpha = sq6._alpha-20;

        sq7._x = sq7._x+5;
       sq7._y = sq7._y+10;
       sq7._alpha = sq7._alpha-20;

        sq8._x = sq8._x+10;
       sq8._y = sq8._y+5;
       sq8._alpha = sq8._alpha-20;

        sq9._x = sq9._x-5;
       sq9._y = sq9._y-5;
       sq9._alpha = sq9._alpha-20;

        sq10._x = sq10._x+10;
       sq10._y = sq10._y+10;
       sq10._alpha = sq10._alpha-20;
}

if (percentDone >=100){ //when preloader is finished, background spins and fades out
       preloader_BG._alpha = preloader_BG._alpha-5;
       preloader_BG._rotation = +5
       percenttext._alpha = percenttext._alpha-5;
       percenttext._rotation = +5
       percenttext2._alpha = percenttext2._alpha-5;
       percenttext2._rotation = +5
if (preloader_BG.rotation = 45){
        preloader_BG._y = preloader_BG._y+10;
       percenttext._y = percenttext._y+10;
       percenttext2._y = percenttext2._y+10;
}
}

in the next frame, just enter

gotoAndPlay(1);

now to test that it has worked, but a large file like an MP3 on frame 3 and then press control > test movie

on the window that opens up do this:

and then press simulate Download to get a real time version of how different speed internets will load it :)

that's all! have fun!!

Source1 - preload.fla (right-click > "save target as" to download)

Source2 - preload.swf (right-click > "save target as" to download)

Back to tutorials