|
|
In
this tutorial, I will assume a basic level of Flash
knowledge.The idea behind this preloader is that we
halt the progression of the movie and find out our filesize.
We find then find out how much of that is loaded, use
these numbers to create a percentage
and then affect the scale of our bar to represent this.
We will repeat this until a satisfactory percentage
of the movie has been loaded and then we let the movie
continue. |
| Step
1: Create the graphics / structure. |
|
1.
|
Create
an empty movieclip. This will be our preloader, so you
can call it something appropriate... ...maybe 'preloader'. |
2.
|
Now we are working within our new
movieclip, create a long, filled rectangle and set
the outline stroke to hairline.
(
this is to ensure clean scaling of the line ).
|
| 3. |
Select the entire rectangle and bring up the 'Align'
panel, shown below and click the 'to Stage' button.
This will allow us to align our chosen objects to positions
relative to the movieclip in which we are working.
Click the 'Align Left Edge' button, then the 'Align
Top Edge' button. This aligns our shape so that its
top-left corner is flush up against the registration
point (center marker) of our movieclip. |
| |
|
| 4. |
Select the fill of the rectangle and select 'Convert
to Symbol' from the 'Insert' menu.
(You may press F8 instead for the same effect).
Call the new symbol 'fill' and set the behaviour to
'Movie Clip'.
Hit OK, bring up the instance panel and name the movieClip
'fill'. |
| 5. |
Repeat
step 3, but for the 'fill' movieclip. Note: you will
have to work inside the fill movieClip in order to
align it properly.
Once aligned, you will have to re-align the movieclip
itself so that it fits into the rectangle outline.
You should now have a movieclip that contains the
outline of a rectangle and another movlieclip, called
'fill'.
As both of these items are on the same layer at the
moment, separate them out into their own layers.
|
| 6. |
Lastly,
add a dynamic textfield into another layer above the
other graphics and set its variable to 'txt' as shown
below.
Place this textfield over the bar and adjust the text
size to fit snugly.
It is a good idea to enter the maximum possible amount
of text into a dynamic text field
( in this case '100%' ), in order to aid in sizing and
positioning the textfield. |
| |
 |
| |
Your
movie should now look something like this.
Note:
to check if everything is properly aligned, marquee-select
everything inside the main movieclip.
You should only be able to see one pair of
(registration point) cross hairs.
If
you see two, you need to repeat the alignment steps.
|
|
Step
2: Add the code.
|
| |
Select
the 'fill' movieclip and add the following code in
the Actions panel:
( note: make sure it says 'Object Actions'
in the top of the Actions panel and not 'Frame
Actions'.
We want to add the actions to the movieclip itself,
not into a frame. )
|
| |
|
|
|
| 1. |
onClipEvent(load)
{
_root.stop();
}
This
will simply halt the main timeline of your movie as
soon as the frame containing this movieclip is entered.
If that is the first frame of your entire movie, then
everything will be halted until something re-starts
it ( i.e. our Loader )
|
| 2. |
onClipEvent(enterFrame){
This
is the most commonly used movieclip event handler.
It enables us to execute the code within it every
time flash plays a frame.
This basically means that if we set the main movie's
framerate to 18fps, then we will be looping through
our code 18 times every second.
|
| 3. |
var
totalk = _root.getBytesTotal()/1024;
var loadedk = _root.getBytesLoadedl()/1024;
Both
getBytesTotal and getBytesLoaded return amounts in
bytes, so we divide by 1024 to obtain a true amount
in k.
|
| 4. |
var
percent = Math.round((loadedk/totalk)*100);
We
use Math.round on the final percentage to round the
outcome of the calculation to a whole number.
This gives us a friendlier figure to display in our
textfield.
|
| 5. |
if
(percent<100){
This
is our conditional statement. If our percentage is
less than 100, we want to continue looping, otherwise
we want to start the movie.
|
| 6. |
_parent.txt
= percent add "%";
"_parent"
simply means "one level up" ( up - if you
think of the main timeline being at the top )
In this case, _parent.txt refers to the variable that
our textfield displays and copies the current value
of our percent variable into it, with a nice little
percent sign on the end.
|
| 7. |
_xscale
= percent;
This
is the code that changes the horizontal scale of the
bar. As the _xscale property uses a percentage, affecting
this property is perfect for creating preloaders.
If you think of the graphic you created as being 100%
of the horizontal scale, 10% or even 50% will be thinner,
therefore a pretty accurate representation of the
amount of data loaded can be displayed.
|
| 8.
|
}
else {
_root.play();
}
This
is our 'loop out' action. If enough of the movie has
loaded, simply start the main timeline playing.
|
|
...
and there you have it. This is a movie preloader that
you can use again and again. To add this to a movie,
just drop it into the first frame of your movie.
get
the example FLA here.
email for further info / answers at tutorials@tripleaxis.com
|
