Flash Tutorial – Top Bluish Preloader
In this thoroughly explained, detailed lesson, I will show you how to create a really cool bluish preloader with percent using the action script code and some special flash tips and tricks. Using this lesson, you will also learn how to design bluish preloader, how to convert any object into a movie clip symbol, how to use Free Transform Tool (Q) and much much more!

Step 1
Create a new document in Flash. Set the movie's width to 300 and movie's height to 200.
Step 2
Double click on layer1 to rename its name in preloader.Then, take the Oval Tool (O), go to the Properties Panel belwo the stage and choose the Following options:
a) Enter #1F63AB for the stroke color
b) Enter #B3C3D5 for the fill color
c) Select Solid as the type of outline, with the line thickness set to 4.
d) Turn on the Stroke hinting option to get rid of any blurry edges while drawing.

After that, draw a "circle" about 88x88 pixels. See the picture below.

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

Step 4
Double-click on the movie clip on stage with the Selection tool (V), or choose right click and Edit in Place.You should now be inside the movie clip.

Step 5
Then, select only the Fill area of "circle ", without stroke, press Ctrl+x key (Cut), create a new layer (layer2), click on the first frame and press Ctrl+Shift+V (Paste in Place).
Step 6
Go back on layer 1, click on frame 100 and press F5. After that, lock layer1, select layer2 and press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.See the picture below.

Step 7
Click on frame 100 of layer2 and press F5 key. Go back on frame 1, choose right click and Copy Frmaes. Then, create a new layer above layer 2 and name it mask. Click on the first frame, choose right click and Paste Frames.
After that, lock and hide layer2 and select the mask layer. click on the first frame, take the Free Transform Tool (Q), and decrease the "circle" maximal. Look at the picture below!

Step 8
Take the Selection Tool(V),select a "circle" that you have just decreased and go to the Properties Panel below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.
Step 9
Click on frame 100 and press F6. Then,take the Selection Tool (V) again, select the "circle" and increase it like it shown on the picture below.

Step 10
Go back on frame1 and in Properties Panel (Ctrl+F3), for Tween choose Motion.
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
Take the Text Tool (T) and in the Properties Panel (Ctrl+F3) below the stage, choose the following options:
a) Select a Dynamic Text field.
b) Select a Trebuchet MS font
c) Choose 14 as font size and bold it.
d) Select #1A50B8 as color
f) As the rendering option, select Use device fonts.

Then, somewhere beneath the "circle" type 99%. See the picture below.

Step 14
While the "type" (99%) is still selected, go to the Properties Panel below the stage, and for Var: type progress. See the picture below.

Step 15
Then, take the Selection Tool (V), click once on the "preloader" to select it and 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);
progress = ""+percent+"%";
gotoAndStop(percent);
if (loaded == total) {
_root.gotoAndPlay(2);
}
}
Step 16
While the "preloader" is still selected, go to the Properties Panel below the stage, choose Filters > plus icon > Bevel, and choose the following options from the picture below.

Then, click again on plus icon, choose Gradient Glow and set the options from the picture below.

Now you get this:

Step 17
Create a new layer above preloader layer and name it loading.
Step 18
Take the Text Tool (T), go to the Properties Panel below the stage and choose Static Text. Then, type above the preloader loading. See the picture below

Step 19
While the text ("loading") is still selected, press F8 key and convert it into a Movie Clip Symbol.

Step 20
Double-click on the movie clip on stage with the Selection tool (V), or choose right click and Edit in Place.

Step 21
After that, press F6 key (Keyframe), six times.

Step 22
Click on every second frame, and after that, press delete key on the keyboard.See the picture below.

Step 23
Go back on the main scene (Scene1),Take the Selection Tool (V) and click once on the "loading" text to select it. Then, go to the Properties Panel, choose Filters > plus icon > Bevel and set the following options:

Step 24
Create a new layer above the loading layer and name it picture.
Step 25
Click on frame 2, and press F6 key. Then, go to the A.S.Panel (F9), and enter this code inside the Action Panel:
stop();
Step 26
Then, while you're still on frame 2, choose File > Import > Import to Stage (Ctrl+R) and Import any picture.
That's it!
Enjoy!
Download source file (.fla)
Related posts:
- Making the camera focus change effect in Flash with the aid of the blending filters
- How to make a complete Flash website navigation system with a built-in preloader for external content
- Design a mirror website flash navigation menu
- Glowing neon playback control buttons
- Glowing neon playback control buttons
Print This Post
