Star flash preloader

Date: 9.9.2007, 16:5    Total views: 59940

Using this thoroughly explained, detailed, action script  flash lesson, you will see how to create very trendy stars preloader. You will also learn how to draw stars using the Line Tool, how to convert preloader into a Movie Clip Symbol,  how to create Motion Tween and much, much more!



Step 1

Open a new flash document.



Step 2

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



Step 3

Take the Line Tool (N) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

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



Then, draw a five stars like it is shown on the picture below.



Step 4

After that, take the Paint Bucket Tool (K), for Fill Color choose white and paint the stars. See the picture below.

Step 5

Take the Selection Tool (V) and select the all stars. After that, press Ctrl+G key (Group) to group it. Then, go to the Align Panel (Ctrl+K) and do the following:

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.



Now, we have aligned the stars with the background.

Step 6

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

1. Select a Static Text field,
2. Select a Microsoft Sans Serif as font .
3. Choose 12 as font size.
4. Select #A59CCDas color,
5. As the rendering option, select Use Anti-alias for readability.



Then, type somewhere below the stars loading... See the picture below.



Step 7

Press Ctrl+A key (Selec all) to select the stars and text. See the picture below.



After that, press F8 key (Convert to Symbol) to convert this text and stars (preloader) into a Movie Clip Symbol.



Step 8

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



Step 9

Take the Selection Tool (V) again and select only the stars. Then, press Ctrl+X key (Cut). After that, create a new layer above the layer 1 and name it stars. Then, select the stars layer and press Ctrl+Shift+V key (Paste in Place).

Step 10

Create a new layer above the layer stars and name it stars 1. Then, select layer stars 1 and press again Ctrl+Shift+V key (Paste in Place).

Step 11

While the stars is still selected, go to the Properties Panel (Ctrl+F3). Then, for Fill and Stroke Color choose #403571.Now you have this:



Step 12

Then, create a new layer above the layer stars 1 and name it mask.

Step 13

Select the 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 14

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



Step 15

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

Step 16

After that, click on frame 100 of layer mask and press F6 key. Then, place the rectangle over the stars. See the picture below.



Step 17

Right-click anywhere on the gray area between the frame 1 and frame 100 on the timeline and choose Create Motion Tween from the menu that appears. See the picture below.



Step 18

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



Step 19

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

Step 20

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 #403571 as color.
e) As the rendering option, select Anti - alias for readability.
f) For Var: type "percent11"



After that, type somewhere above the stars 99%. See the picture below.



Step 21

Go back on the main scene (Scene 1).

Step 22

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);
percent11 = ""+percent+"%";
gotoAndStop(percent);
if (loaded == total) {
_root.gotoAndPlay(2);
}
}

Step 22

Double click on layer 1 to rename its name in preloader.

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();

Enjoy!

Download source file (.fla)