Learn how to create designing flash preloader using the action script. You will also learn:

1. How to design a preloader,
2. how to apply mask effect and action script code on it
3. how to create percent field and more.






Step 1

Open Flash and start a new project with dimension of 200 X 100px. Select white as background color. Set your Flash movie's frame rate to 24 and click ok.



Step 2

Take the Oval Tool (O). 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 #F80000 and draw a three circle like it is shown on the picture below.



Step 3

After that, take the Line Tool (N). Select a #F80000 as line color, and choose Solid as type of line, with thickness set to 0.5



Then, draw this shapes,



Step 4

Take the Paint Bucket Tool (K). For Fill color set #F80000 and paint the shape that we just created in previous step. See the picture below.



Now we have designed our preloader, and it's time for animation.

Step 5

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



Step 6

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



Step 7

Double click on layer 1 to rename its name in shape. After that, click on frame 100 and press F5 key. Then, create a new layer above the shape layer and name it mask.

Step 8

Select tha mask layer and 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 any color and draw a "rectangle" and place it on the position like it is shown on the picture below.



Step 9

Click on frame 100 and press F6 key. After that, place the rectangle over the shape using the arrows key or by mouse. See the picture below.



Step 10

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 11

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





Step 12

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

Step 13

Select perecent layer and Take the Text tool (T). Then, go to the Properties Panel (Ctrl+F3) below the stage, and select the following options:

a) Select a Dynamic Text field.
b) Select a Lucida Sans font.
c) Choose 11 as font size and bold it.
d) Select #323232 as color.
e) As the rendering option, select Anti - alias for readability.
f) For Var: type "percen101"



Then, type somewhere below the shape 99%. See the picture below.



Step 14

Go back on the main scene (Scene1).



Step 15

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:

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

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

We're done with the prelaoder. To see how it works, click on the first frame and go again to the A.S.panel. Then, enter this script inside the Actions panel:

stop ();

After that, create a new layer above the prelaoder layer. click on the second frame and press F6 key. After that, Import, place, create any animation, image, movie. Then, click again on the second frame and type again stop(); inside the Actions panel.

Have a nice day!

Download source file (.fla)