Making an advanced preloader in Flash

Making an advanced preloader in Flash


In this tutorial, I will show you how to create a preloader with a twist. Using animated blocks to show percentage progress.

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:

http://www.tutorialhelpcentre.com/images/tutorialimages/ap_1.jpg

on the squares layer, press F5 in the second frame to make this stretch over 2 frames. On the stage, draw a square:
http://www.tutorialhelpcentre.com/images/tutorialimages/ap_2.jpg
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:
http://www.tutorialhelpcentre.com/images/tutorialimages/ap_3.jpg
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:
http://www.tutorialhelpcentre.com/images/tutorialimages/ap_4.jpg
now in the background layer press F5 again in frame 2 and create a nice clean background to go behind the squares:
http://www.tutorialhelpcentre.com/images/tutorialimages/ap_5.jpg
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:
http://www.tutorialhelpcentre.com/images/tutorialimages/ap_6.jpg
click the slightly longer text box, and make sure the settings in the "properties" menu match the ones below:
http://www.tutorialhelpcentre.com/images/tutorialimages/ap_7.jpg
Now select the square on the far left and give it an instance name of sq1:
http://www.tutorialhelpcentre.com/images/tutorialimages/ap_8.jpg
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
http://www.tutorialhelpcentre.com/images/tutorialimages/ap_9.jpg
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:
http://www.tutorialhelpcentre.com/images/tutorialimages/ap_10.jpg
and then press simulate Download to get a real time version of how different speed internets will load it :)
that's all! have fun!!



Submit Comment

Comments

Unfortunately no comments have been left on this tutorial. Be the first using the form above.