The process is pretty simple if you use onClipEvent and a simple shape tween (or motion tween) combination. The advantage of using onClipEvent function is that, we can use any kind of tween as our progress indicator! There is a lot of scope with this preloader and its extremely customizable rather than, using ._width of a static graphic bar to indicate the progress.

Also, we are going to make the percent indicator which slides along with the loading bar. Below is the sample of what we are going to build.

[ Advanced Preloader with shape tweens]

Here is How:
The following steps will explain how to make the Advanced Preloader with Shape Tweens.

Note: It is not necessary to use shape tween. For this tutorial, I am using a simple line and box animation as the indicator.

1. Download and open the partial fla file: Click Here. It contains the basic frames and tweens, and frame labels used in this tutorial.

2. Go to frame 20 of the Actions layer and apply this code:
    

   loaded_bytes = Math.round(_root.getBytesLoaded());

   loaded_total = Math.round(_root.getBytesTotal());

   total_percent = (loaded_bytes/loaded_total)*100;

   _root.loaded_text = Math.round(total_percent);

   startpoint = bar._x

   _root.text._x = startpoint + (_root.bar._currentframe*2.5);

    

3. Now, click on 21 frame of the Actions layer and apply this code:

gotoAndPlay(20);

4. On the last frame of the actions layer, apply this code:

gotoAndPlay("Scene 2", 1);

5. We have now applied all the code on the main time line. Its time to apply instance name to various objects. Now, goto frame 20 and click on the black box. In the properties panel, apply the instance name : bar .

[ Apply the Instance name : bar and text , to the box tween and text area ]

6. In the same way, apply instance name : text ,by clicking on the small text area as shown above. Note : The text box is Dynamic Text and not Static Text.
7. Click on the text box and apply the var : loaded_text

 
[ Apply the var : loaded_text to the text box ]

8. Click on the box again, and apply this code in the Actions Panel:

onClipEvent (enterFrame) { gotoAndStop(int(_parent.getBytesLoaded()*100/_parent.getBytesTotal())); }

9. Open the library by pressing Ctrl + L. Click and open the movie Tween_MC. You will notice that there are two different layers. One for the box tween and another for the progressing line tween. On the first frame of the actions layer, apply the code to stop the movie clip. i.e., stop(); . On the last frame apply the Code: _root.gotoAndPlay(22);

10. Now its time to put some content for which we're making this preloader. We will add another Scene ("Scene 2") , where will have our content to be loaded. For this tutorial, i have added a new scene and content to be loaded.

11. We are done !!! Please don't scratch your head and say huh? , i will explain each and every code used above.

Tips

To make a the pregress indicator fill a shape, use masking with motion tweens. Or if the object is not a bitmap, then use the shape tween. The main content of your animation should go in Scene 2. In my example, I have a picture of a flower as the content of my animation. I'm sure you'll have something else.   In Flash MX 2004, it is a bit tricky to find out how to go to the next Scene. You have to click on the Scene icon that is towards the top-right corner of your Timeline in order to change scenes easily: [ changing scenes ]

Code Explanation:
Lets start! Here comes the best part. The code is the heart of this preloader, without which this preloader is not possible. We need to understand the code in order make sense.

loaded_bytes = Math.round(_root.getBytesLoaded());

loaded_total = Math.round(_root.getBytesTotal());

total_percent = (loaded_bytes/loaded_total)*100;

The first line sets the variable loaded_bytes equal to the number of bytes loaded. Math.round makes it a perfect integer (rounds it off). Similarly, loaded_total is the total number of bytes to be loaded. total_percent is the ratio of loaded_bytes and loaded_total times 100. For example, if the total bytes are 200 and currently loaded bytes are 50, then it is 25 % of the total loaded. i.e., (50/200)*100.

_root.loaded_text = Math.round(total_percent); startpoint = bar._x _root.text._x = startpoint + ((_root.bar._currentframe)*(2.5));

Note: loaded_text is the var name, and text is the instance name.

Now we apply total_percent (percent of the bytes loaded) to the small text box with instance name: text. Again, we use Math.round to round to the nearest whole number.In the second line, startpoint is the position of the progressing bar with respect to the origin (0,0) of the flash document. We set this startpoint variable because, we want the text box to move along with the progressing bar. Notice that in the the movie Tween_MC, there are exatly 100 frames. So, each frame is updated with increase in one percent.

So, we want the text box to follow the progress bar.The length of the bar is 250 and there are 100 frames in the tween_MC, so we divide 250 by 100 frames and we get 2.5. We multiply 2.5 by the _currentframe to update the position of the text box. To make the box go along with the progress bar, we also need to add the starting position or initial position of the progress bar, for which we have already assigned a variable startpoint. So, we set the _x position of text box to the position of the porgress bar.

[Labeled Diagram when the movie is being loaded]

Lets see, how does the progress bar and the box tween works.

onClipEvent (enterFrame) { gotoAndStop(int(_parent.getBytesLoaded()*100/_parent.getBytesTotal())); }

This code is applied on the movie clip with instance name: bar. What it basically does is that, it updates or rather controls the play head of the timeline in the tween_MC. It tells that on refresh of the frame, update the current frame of the timeline INSIDE the tween_MC movie clip. int rounds off the total percent loaded. But, to make the frame refresh at the frame rate of the movie, we need to make a loop. So, we add gotoAndPlay(21); on the main timeline to make the loop until the tween_MC reaches the 100th frame. On the 100th frame we have applied _root.gotoAndPlay(22); , which tells that if everything is loaded, then play the outro animation (outro animation starts from 22nd frame). When the outro animation is over, the last frame tells it to goto and play scene 2 where our content is.

Note

The Major difference between dynamically updated _width of the bar and frame updated tweened progress bar is that, it is easier to customize the tween rather than trying your hands on actionscript to create more complex dynamically updated animations. By using this tutorial, you can even put a 1000 frame long animation as the progress indicator, but the animation will skip 10 frames each time, since we used Math.round to make the percent round off to the nearest integer.

Download ZIP

I hope this tutorial is useful to you. Got questions? We are happy to help you out !, If you have any questions or comments, please don't hesitate to post them on the Forums.

Also, if you are interested in helping out the kirupa.com site, click here to find out how.

Thank you.

Neil Panchal Breaking the Norms