Neil Panchal : 25 November 2004
This tutorial is a guide to make an Advanced Preloader. You
must have noticed on some great flash based websites on the net,
that they have preloaders which fills up a shape or execute a
nice animation in accordance to the bytes loaded. In addition to
that, you must have noticed that some websites even have a intro
transition and outro transition of the preloader.
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.
Preloader with shape tweens]
Here is How:
The following steps will explain how to make the Advanced
Preloader with Shape Tweens.
It is not necessary to use
shape tween. For this tutorial, I am using a simple line and box
animation as the indicator.
Download and open the partial fla file:
It contains the basic frames and tweens, and frame labels
used in this tutorial.
- Go to frame 20 of the Actions layer and apply this code:
- Now, click on 21 frame of the Actions layer and apply
- On the last frame of the actions layer, apply
- 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 ]
- 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
- Click on the text box and apply the var :
[ Apply the var : loaded_text
to the text box ]
Click on the box again, and apply this code
in the Actions Panel:
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);
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
- We are done !!! Please don't scratch your head and say
huh? , i will explain each and every code used above.
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
- 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 ]
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.
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.
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
[Labeled Diagram when the movie is
Lets see, how does
the progress bar and the box tween works.
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.
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.
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
Also, if you are
interested in helping out the kirupa.com site,
click here to find out how.
Breaking the Norms