Easing preloader

In this easy Flash 8 tutorial, I will show you how easy it is to make an attractive and effective flash preloader using a little Action Script.



Step 1

Start Flash. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 200 pixels and the height to 150 pixels. Select white as background color, for Frame rate set 24 fps and click ok.



Step 2

Select the Text tool (T) . In the Properties Panel (Ctrl+F3) , select the following options:

a) Select a Static Text field.
b) Select a Arial Black font.
c) Choose 18 as font size.
d) As the rendering option, select Anti - alias for readability.
e) Select #191919 as color.



Then, type on the stage "LOADING". See the picture below.



Step 3

Take the Rectangle tool (R).In the Properties panel (Ctrl+F3), for Stroke color choose No stroke, for Fill color choose #D3D3D3 and from the right side of "LOADING" draw a rectangle about 50x5 pixels. See the picture below.



Step 4

While the Rectangle Tool (R) is still selected, draw another "rectangle" about 50x2 pixels, above the first "rectangle", but for this time, for Fill color choose #777777. Look at the picture below!



Step 5

Press Ctrl+A key (Select All), to select a preloader and after that press F8 key (Convert to Symbol), to convert it into a Movie Clip Symbol.



Step 6

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



Step 7

Click on frame 100 and press F5 key.

Step 8

Create a new layer and name it percent.

Step 9

Select the Text tool (T). In the Properties Panel (Ctrl+F3), select the following options:

a) Select a Dynamic Text field.
b) Select aArial Black font.
c) Choose 15 as font size.
d) Select #646464 as color.
e) As the rendering option, select Anti - alias for readability.
f) For Var: type "percent99"



After that, type somewhere above the "rectangle" (See step 3 and 4) 99%. See the picture below.



Step 10

Click on frame 100 and press F5 key.

Step 11

Go back on the main scene (Scene1), take the Selection Tool (V) and click once on the "preloader" to select it.Then, press F9 or select Window > Actions to open the Actions panel. Enter the following ActionScript code inside the Actions panel.

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

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

Step 12

Click on the first frame and enter the following ActionScript code inside the Actions panel.

stop();

Step 13

Create a new layer, click on frame 2 and press F6 key. After that Import (Ctrl+R) any large picture. Click again on frame 2 and enter the following ActionScript code inside the Actions panel.

stop();

Test your Movie (Ctrl+Enter).

Have a nice day!

Download source file (.fla)