Sky bluish preloader

This detailed tutorial will show you how to create bluish preloader like sky using the action script code. You will also learn how to use mask option in flash, how to create percent for preloader and much more. Let's go!



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 white 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 #F0F0F0 for the stroke color
2. Select Solid as the type of outline, with the line thickness set to 4.



Then, draw a line about 120px like it is shown on the picture below.




Step 4
While the Line is still selected, 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.


Step 5
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 Arial Black as font .
3. Choose 12 as font size.
4. Select #666666 as color,
5. As the rendering option, select Use Anti-alias for readability.


Then, type somewhere above the line loading... See the picture below.



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



Step 7
After that, press F8 key (Convert to Symbol) to convert this text and line (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 line. Then, press Ctrl+X key (Cut). After that, create a new layer above the layer 1 and name it line. Then, select the line layer and press Ctrl+Shift+V key (Paste in Place).

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

Step 11
While the line is still selected, go again to the Properties Panel (Ctrl+F3) below the stage and for line thickness set 8, and for stroke color set #CBE2EA. See the picture below.



Step 12
Click after that on frame 100 and press F5 key.

Step 13
Then, create a new layer above the layer line 1 and name it mask.

Step 14
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 15
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 16
Click on frame 100 of layer and press F6 key. Then, place the rectangle over the line. 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 Arial Black as font.
c) Choose 12 as font size.
d) Select #666666as color.
e) As the rendering option, select Anti - alias for readability.



Then, draw a rectangle below the line.. In that rectangle, you will type 99%. See the picture below.



Step 21
After that, for Var: type "percen1"



Step 22
After that, type in the rectangle that we have created in previous step 99%. See the picture below.



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



Step 24
Go back on the main scene (Scene 1).



Step 25
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 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 on frame 2. Then, click again on the second frame and type again stop(); inside the Actions panel.

Enjoy!