Professional Web Templates

19.Oct
2009

Advanced Preloader with Reflection

preview1

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:

1

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.

2

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

3

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:

4

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.

5

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:

6

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.

7

Final Work

Follow FlashMint on Twitter for more awesome Flash Tutorials!
"Like" FlashMint FaceBook Page to stay in touch!

11 Responses to “Advanced Preloader with Reflection”

  1. [...] post:  Advanced Preloader with Reflection | Free Flash Tutorials at … [...]

  2. hi says:

    hello,

    I liked this tutorial but i couldn’t do it properly so pls can u mail me the source file of this preloader?

    Thanks,
    Anees

  3. admin says:

    Sorry Anees, we do not provide the source files.

  4. ayaz says:

    hey can u give me the code which is in AS3

  5. So... says:

    Cool tutorial idea. But…I don’t see the two .png that you mentioned so I’m not sure how to go about this…

  6. free says:

    Zici ca sa importam imaginile,dar ce imagini?ca nu ati lasat nici un link catre ele,cum fac rost de ele?

  7. pG0 says:

    hey the preloading effect is really nice but im facing some problem using the code.
    it shows the following error,

    **Error** Scene=Scene 1, layer=loading_MC, frame=1:Line 8: This type of quotation mark is not allowed in ActionScript. Please change it to a standard (straight) double quote.
    txt = +percent+”%”;

    Total ActionScript Errors: 1 Reported Errors: 1

    need help !!!
    Thanx in advance….

  8. admin says:

    @pG0, you should change the quotation mark to a standard one in layer: loading_MC, frame:1 , line:8. as it’s written in your error message.

  9. khanong says:

    @pG0, you should change the quotation mark to a standard one in layer: loading_MC, frame:1 , line:8. as it’s written in your error message.

  10. Mak says:

    Thank you for the tut. just one small thing,i already had seen it in another site,
    and like the other one, i can’t seem to find the two main images bar.png and bar_h.png.
    What’s with that?!

Leave a Reply