Sponsors

Other Tutorials

Site Partners

Tutorials > Flash > Making an advanced preloader in Flash

Making an advanced preloader in Flash

Submitted by Matt Davenport on June 16, 2009
Comments (0)

Writing tutorials takes a ton of time and effort. If you find this tutorial useful, please let me know by making a donation. The more donations I receive, the more time I can afford to spend writing. Please donate

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

Comments (0) June 16, 2009

Name Your Comments

Submit Comment