FlashRespect.com

In this step by step tutorial, you will see how to create professional preloader in flash, using the action script. Preloader is very important, because he provides the users of your web site feedback of how much of your flash movie is loaded. You will also learn how to use action script panel, how to apply action script code on preloader to make it more powerful and more.

Example:

Step 1

Create a new document in Flash. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 200 pixels and the height to 120 pixels. Select black as background color. Set your Flash movie’s frame rate to 24 and click ok.

Step 2

Take the Line Tool (N) and go to the Properties Panel (Ctrl+F3). Then, do the following.

1.Enter #676767 for the stroke color,
2.Select Solid as the type of outline, with the line thickness set to 1.

Then, draw a horizontal line about 105px ,and place it on the position like it is shown on the picture below.

Step 3

While the line is still selected, go to the Align Panel (Shortcut: Ctrl+K) and then,do the following in the Align panel:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.

Step 4

Take the Rectangle Tool (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose #61170C and draw a “rectangle” above the line about 105×2px. See the picture below.

Step 5

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 11 as font size.
4. Select #8C8C8C as color.
5. As the rendering option, select Anti-alias for readability.

Then, type below the line loading…

Step 6

Press Ctrl+A key on the keyboard (Select all) and after that press F8 key (Convert to Symbol) to convert this preloader into a Movie Clip Symbol. See the picture below.

Step 7

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

Step 8

Click on frame 100 and press F5 key.

Step 9

Select only a rectangle and press Ctrl+X key (Cut). Then, create a new layer above the layer 1 (layer 2), select it and press Ctrl+Shift+V key (Paste in Place).

Step 10

While the rectangle is still selected, press F8 key (Convert to Symbol) to convert this rectangle into a Movie Clip Symbol.

Step 11

Click again on frame 100 and press F5 key.

Step 12

Go back on frame 1 of layer 2 and press Ctrl+C key (Copy). After that Create a new layer above the layer 2 and name it mask. Then, select it and press Ctrl+Shift+V key (Paste in Place).

Step 13

Click on frame 100 and press F6 key. After that, go back on frame 1 of layer mask, and place the rectangle that you just copied on the position like it is shown on the picture below.

Step 14

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.

Step 15

Select mask layer and convert it to a mask by right-clicking on the mask layer and selecting Mask.

Step 16

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

Step 17

Take 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 11 as font size.
d) Select #8C8C8C as color.
e) As the rendering option, select Anti - alias for readability.
f) For Var: type “percen1″

Then, type somewhere above the rectangle 99%. See the picture below.

Step 18

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);
percen1 = “”+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)