Advanced Preloader

This tutorial will show you how to create on a very simple and effective way, advanced preloader using the Action Script. You will also learn how to create percent for preloader, how to use instance name, how to apply action script code on preloader using the action script panel and more.

Example:



Step1

Open Flash – Click on Rectangle Tool (R), Stroke color must be turned off , under  Fill color choose color whatever you like and draw some square on main scene (Scene 1).Choose the dimension whatever you like. Click on that square – select it and convert it to symbol by pressing F8. In Previous window (Convert to symbol window) choose under Behavior : Movie Clip, name: preloader_mc, Registration point – midddle left point.





Step 2

In <Instance Name> in Properties Pannel (Ctrl+F3), type name of preloader, in our case preloader_mc.



Step 3

Double Click on layer 1  on Main scene (Scene1) and  change it name in preloader.
Press twice on new made Movie Clip (preloader_mc). When you go to it's inside, double click on layer1 and change it's name in preloader_mc. Copy that preloader, create new layer, call him progress1, and press Ctrl+Shift+V (paste in place).

Step 4

Click on that copied preloader (square) and go to Fill color, change it color in white (or whatever you like), and after that press F8 to Convert it to symbol. In Convert to symbol window choose under Behavior: Movie Clip, name progress1_mc, Registration point – middle left point.



Under <Instance Name> in Properties Panel type progress_mc1.



Step 5

Open Transform Panel (Ctrl+T), Click on progress1_mc ( square whose color has been turned into white) and in Transform Pannel turn off «Constrain» option and for Width type 1%.



Now you have this:



Step 6

Move White square on  the begining of orange square whit drag and drop technique or by using arrows on the keyboard.



Step 7

Insert new layer above progress1 layer and call it "Percent".

Step 8

Take Text Tool (T), and press  somewhere below preloader, and in Properties Panel (Ctrl+F3), set up dynamic text, and under var: type load. Look at the picture!





Step 9

In text box type 0 (zero).



Step 10

Go back to main scene (Scene1).

Step 11

Click once on preloader and open Action Script Panel (F9), and paste this script:

onClipEvent (enterFrame) {
_root.stop();
mctotal = _root.getBytesTotal();
mcloaded = _root.getBytesLoaded();
percent = Math.round((mcloaded/mctotal)*100);
load = percent+"%";
progress_mc1._xscale = percent;
if (percent == 100) {
_root.play();
}
}

were not finished yet!

Step 12

Now when you're in main scene (Scene1), take Text Tool (A), and above your preloader type loading. Select that title and press F8 to Convert it in symbol. In Convert to symbol Panel choose under Behavior: Movie Clip, Registration point – middle point, name whatever you like, for this example we use loading_mc, and press Ok.

Step 13

Double click on new made Movie Clip (loading). After that press F6 fifteen times to get fifteen changing points. Then choose every third frame and press delete. Look at the picture!



Step 14

Go back on main scene (Scene1), type one below another, loaded bytes and total bytes, and in Properties Panel set up static text.
Look at the picture!





Step 15

Take Text Tool (A) again,  and click right from loaded bytes and type 0, after that select that box and down in Properties Panel set up Dynamic text, and under var: type loaded.







Step 16

Repeat step 15 but for this time do that for total bytes and under var in Properties Panel type: total.





Step 17

Click once on loading – select it and open Action Script Panel (F9) and paste this script:

onClipEvent (enterFrame) {
_parent.loaded = _parent.getBytesLoaded();
_parent.total = _parent.getBytesTotal();
if (_parent.getBytesLoaded() == _parent.getBytesTotal()) {
_parent.nextFrame();
}
}

Step 18

Insert new layer above preloader layer and call him picture. After that  by using drag and drop technique pull it below preloader layer so that it can be in the last place.





Step 19

Lock preloader layer, choose picture layer and click on File - Import - Import to stage(Ctrl+R) and insert a picture.

Step 20



Step 21

Unlock prelaoder layer, click on his second frame and press F7 (Blank keyframe), open after that Action Script pannel (F9) and type:

stop ();

Preloader is over. Enjoy

Download example (85 KB)