Preloaders are one of the most significant element that a flash designer should always consider; approx. 10% of people leave your site when it takes more than 10secs to load, And 70% of people step away on flash sites when they saw an ugly preloaders, preloaders reflects the entire site, that's one of the main reason why we should make our preloader looks simple and interesting.

In This tutorial I'm going to show you how to make a simple preloader and since this is a preloader I then decided to include an invisible content which equivalent to 1mb, this is for the sake of previewing the preloader.

If you want to preview the preloader once more you need to clear your cache.

First, open up a new flash document, rename the first layer to background then add your desired background, then make another layer above and name him loader, drag in here our loading animation, I would be using my chibidesign logo, use your align vertical and horizontal center to put them exactly at the middle.

And then make another layer and name him frontlogo, copy [Ctrl C] our chibidesign logo from loader layer and paste it on our frontlogo layer, pasting at the same position using [Ctrl Shift V].

Convert the two of them into a movie clip, with an instance name of mc_logo and mc_frontlogo.

Select our mc_frontlogo then edit the logo and make it look like the figure, I actually grab the same background color gradient and mask it using chibidesign font to make it look like an empty shell.

Create a new layer above and name him ‘masking', create a rectangle to cover the whole mc_frontlogo but make sure the left side is perfectly aligned, and then convert the layer to mask.

Convert the Rectangle to a movie clip, with an instance name of ‘mc_mask', Double click the movie clip and make it move to the right using motion tween, make sure you end up on frame 100.

Make another new layer on top and name him textloading, this layer will contain two elements, the loading text and the bytes loaded percentage.

Grab your text tool and type down ‘Loading' and convert it to a movie clip and an instance name of mc_loading, then on the right side type down zero [0%] With text align to the right, then on the properties panel select dynamic text and give him an instance name of ‘txt_percent'.

Then double click our mc_loading, and do a looping animation using gotoAndPlay function to go back on frame (1). And construct something if the loading has been completed, make sure you labeled the frame and add a stop action on the last frame.

Go back on to the root and add a new layer and name it ‘action'. Then on the first frame press F9 and type down the following script.

Those functions will trigger every time mc_logo enters frame, it will continuously calculate the bytes loaded and put things in action.

1. stop();
2. var mc_logo:MovieClip;
3. var txt_percent:TextField;
4. var mc_mask:MovieClip;
5. 
   
6. mc_logo.onEnterFrame = function(){
7. if (_root.getBytesLoaded() == _root.getBytesTotal()){
8. _root.nextFrame();
9. mc_loading.gotoAndPlay('complete');
10. }
11. 
    
12. var loaded:Number = Math.round ((_root.getBytesLoaded()/_root.getBytesTotal())*100);
13. mc_mask.gotoAndStop(loaded);
14. txt_percent.text = String (loaded + "%");
15. }