This tutorial will show you how to create dark flash preloader with percent using the action script code.You will also learn, how to design dark preloader, how to convert it into a Movie Clip symbol, how to apply action script code on it and more.

Example:



Step 1

Create a new flash document.



Step 2

Press Ctrl+J key on the keyboard (Document Properties) and set the dimensions of your document as whatever you like. Select #171E24 as background color. Set your Flash movie's frame rate to 30 and click ok.



Step 3

Take the Text Tool (A) and go to the Properties Panel below the stage. Then, choose the following options:

1. Select a Static Text field.
2. Select a Arial font
3. Choose 13 as font size.
4. Select #536F86 as color.
5. As the rendering option, select Anti-alias for readability.



Then, type somewhere on the stage "loading". See the picture below.



Step 4

While the text ("loading") is still selected, press F8 key (Convert to Symbol) to convert this text into a Movie Clip Symbol.See the picture below.



Step 5

Double-click on the movie clip on stage with the Selection tool (V). You should now be inside the movie clip.



Step 6

Click on frame 100 of layer 1 and press F5 key.

Step 7

Create a new layer above the layer 1 and name it percent.

Step 8

Using the drag and drop technique, move the percent layer below the layer 1. See the picture below.



Step 9

Lock layer 1, select percent layer and take again the Text tool (T), and go to the Properties Panel (Ctrl+F3) below the stage. Then, select the following options:

a) Select a Dynamic Text field,
b) Select a Arial font.
c) Choose 32 as font size.
d) Select #313F4D as color.
e) As the rendering option, select Anti - alias for readability.
f) For Var: type “percent1"



Then, type, on the position like it is shown on the picture below "100%". See the picture below.



Step 10

Go back on the main scene (Scene 1). Take the Selection Tool (V), click once on the “preloader” to select it and open the Action Script Panel (F9). Then, enter the following Action Script code inside the actions panel:

onClipEvent (load) {
total = _root.getBytesTotal();
}

onClipEvent (enterFrame) {
loaded = _root.getBytesLoaded();
percent = int(loaded/total*100);
percent1 = ""+percent+"%";
gotoAndStop(percent);
if (loaded == total) {
_root.gotoAndPlay(2);
}
}

We're done with preloader!

To see how its work, create a new layer above the preloader layer, click on layer 2 and press F6 key. Then, put on that frame some movie, picture… After that, while you're still on frame 2, go to the A.S.panel (F9) and type:

stop();

Then, go back on frame 1 of layer preloader and in A.S.panel type again:

stop();

Have a nice day!

Download source file (.fla)