In this tutorial we will create an advanced blue preloader with beautiful reflection effect and a big easing text. This requires a little knowledge about animations and action scripting.

About the Author:
Hi. I`m Danny, a freelancer web developer from Romania and I like to write interesting tutorials in Flash and Photoshop. You can visit my website for more great and useful tutorials: Extreme Design Studio.

Advanced Preloader with Reflection

Step 1

Create a new file with Action Script 2.0 and go to Modify – Document (CTRL+J) and do the settings below:

Import to scene (CTRL+R) the two main images bar.png and bar_h.png and put the half bar under the full bar and align them to middle. Right click on each object and convert it to a movieclip (F8) and rename the first layer to preloader and apply the glow filter and set the alpha to 50.

Step 2

Select both bars and press F8 to convert them in a single movieclip. Double click the object. Inside the movieclip will be the main animation. Now select again the two bars and press F8 to convert them in a single movieclip. Repeat this once more to have the possibility to set the alpha to 0 for the both bars.

Double click again on the movieclip and now you must be inside of a two movieclips. Very good. Now insert a keyframe (F6) on the frame 10 then right click on the frame 1 and select Create Motion Tween. Select frame 1 and click on your object. In the Properties Panel you will find the option Color and set it to Alpha 0.

Ok now we have the animation for our bars. Right click on the frame 20 and select Action (F9) and write stop();

Step 3
On the timeline bar click on the second movieclip to return. On the image above the second movieclip is named as Symbol 5. Double click Layer 1 icon and mark View layer as outlines and rename it to bars.

Insert a keyframe on the frame 3 and copy your bar (CTRL+C) and paste in place (CTRL+SHIFT+V) and move it with 10 pixels using SHIFT + Right Arrow.

Repeat this step for every uneven frame (Frame 5 – 3 bars, Frame 7 – Frame 4 bars… until you reach frame 100).
You don’t need to make 50 bars. Try to insert 2 or 3 frames until you reach frame 100. See the picture below:

Step 4
Insert a new layer and rename it to percent. With the Text Tool (T) create a text 100%. Use Arial font with size 50 and left aligned. Instance field should be txt_mc and var field should be txt and don’t forget to embed numerals and punctuations.

Step 5
Very good now we must add a movieclip to move the text using action script. Insert a new layer and rename it to move. With the Rectangle Tool (R) draw a small white rectangle and convert it to movieclip (F8) with alpha 0, instance name moving and the X Axis same like the text. Insert a keyframe to frame 100 and move the object at the end of lines. Try to view the picture below:

Step 6
Return to Main Scene, right click on the movieclip and select Actions (F9) and write the following code:

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

onClipEvent(enterFrame) {
loaded = _root.getBytesLoaded();
percent = int(loaded/total*100);
txt = +percent+”%”;
txt_mc._x = moving._x;
gotoAndStop(percent);
if (loaded == total) {
_root.gotoAndPlay(2);
}
}

Now add a keyframe on frame 2 and put stop(); for the both frames (F9). On the frame 2 you can put a text field with Content Loaded and a big image to test your preloader.

Final Work