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:

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
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
if (percentDone >= 10){ //when loaded over 10% play sq2
if (percentDone >= 20){ //etc etc
if (percentDone >= 30){
if (percentDone >= 40){
if (percentDone >= 50){
if (percentDone >= 60){
if (percentDone >= 70){
if (percentDone >= 80){
if (percentDone >= 90){

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


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!!

Submit Comment


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