|
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.
Grab all the tutorial files here
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.ceil((loadedk/totalk)*100);
We use Math.ceil on the final percentage to round the outcome of the calculation
up to the nearest whole number.
This gives us a friendlier figure to display in our textfield.
( Note: Sometimes the values for getBytesTotal and getBytesLoaded
may differ slightly, so rounding to the next number up and checking for a percentage
that is greater than 99% is advisable to allow for this ) |
| 5. |
if (percent<99){
This is our conditional statement. If our percentage is less than 99 ( i.e.
not loaded ), 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.
email for further info / answers at tutorials@tripleaxis.com |
