The worst thing whic can happen to you is that someone who visiting your web site waiting for a movie to load. You must to use a feedback mechanism who will inform your users of the download's progress. A preloader resolves this problem. The preloader provides the users of your web site feedback of how much of your flash movie is loaded. The viewer can see what is happening. That is the reason why I will teach you how to create a preloader using Action Script. So, this tutorial will show you how to create a preloader with percent, total and loades bytes. Let's go!



Step 1

Create a new Flash Documet, take the Text Tool (T), in the Properties Panel (Ctrl+F3) set the font and size which you like and type load somewhere on the stage. Look at the picture below!



Step 2

Select that text ("loading") and press F8 to turn the text in a Movie Clip symbol. Name it whatever you like.



Step 3

Open the Properties Panel (Ctrl+F3), and for   type loading_mc.



Step 4

Double click the Movie Clip and go into symbol editing mode.

Step 5

Then, press ten times F6 on the keyboard (keyframe). Look at the picture below!



Step 6

Click on every second frame and press delete key on the keyboard.



Step 7

Insert a new layer and name it percent.

 

Step 8

Take the Text Tool (T) and click somewhere beneath the "loading" text. In the Propertise Panel (Ctrl+F3) choose Dynamic Text, and for var: type percent. See the picture below.



Step 9

In text box type 0.




Step 10

Go back on the main scene (Scene 1).

Step 11

Click once on preloader to select it, open the Action Script Panel (F9) and enter the following A.C.code inside the Actions panel:

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

Step 12

Take the Text Tool (A) again, in the Properties Panel (Ctrl+F3) choose  Static Text and somewhere on the stage (over or beneath the preloader) type loaded bytes and total bytes. See the picture below.





Step 13

Take again the Text Tool (A) click on the right side of loaded bytes, and type 0. Then in the Properties Panel (Ctrl+F3) set Dynamic Text, and for Var: type loaded. Look at the pictures below!





Step 14

Repeat step 11, but for this time do that for a Total bytes. Only difference is that in the Properties Panel (Ctrl+F3) for Var you must type total.

Step 15

Take the Selection Tool (V), click once on Preloader (loading) to select it, open the Action Script Panel (F9) and beneath the first script enter the following Action Script code:

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

Step 16

Create a new layer and name it picture. Then using the "drag and drop tehnique", move that layer beneath the first layer. Look at the picture below!



Step 17

Click on the second frame of layer picture and press F7 (blank keyfreame). After that choose File > Import > Import to Stage (Ctrl+R) and import any picture.



Step 18

Click on the second frame of layer 1 (layer of preloader), press F7 (Blank keyframe), open the Action Script Panel (F9) and and type this

stop ();

we're done! Cheers!

Download source file (.fla)

Have questions about this tutorial? Visit our friendly Community Forums!