Article
Display Download Status In Your Flash Preloader
Getting Graphic
Ok, enough with the text messages. How do you do one of those snazzy, progress-indicating loading bars?
Well, it’s really simple.
Draw a solid rectangle on the stage underneath your text field (or wherever you want it to appear, really).
With the selection tool, single click on the rectangle’s fill (this will select the fill, but not the stroke). I’m going to only scale the fill and leave behind the stroke as an indicator of the total size.
Convert the selected fill into a symbol (menu: ‘Insert’ > ‘Convert to Symbol…‘ or press F8). The Symbol Properties dialog box appears. Enter a symbol name and click ‘OK’.
Note that if you're using FlashMX, you must select a registration point option on the left in the little grid. If you're using Flash5, we'll need to fix something else in just a minute.
Now, when you create or place a movieClip on the stage, you may have noticed that you can give it an 'instance' name (this is on the 'Properties' panel in MX and on the ‘Instance’ panel in 5). This name allows the clip to be identified by actionScript, and various clip properties can inspected and controlled.
On the 'Properties' / 'Instance' (FlashMX / Flash5) panel, enter ‘loadBar’ as the instance name.
Just as we used our calculated variables to set the text in our text field, we’ll now use them to set the scale of our ‘loadBar’.
To help you differentiate them from functions and variables, property names start with the underscore character ‘_’.
The property we will set is ‘_xScale’. There’s also a ‘_width’ property, but they differ slightly. ‘_width’ sets the actual width of a clip in pixels, whereas ‘_xScale’ sets the width as a percentage of the clip's defined size.
_xScale is the best choice in this case, as we’ve just defined the clip at a size that fits perfectly into the stroke we left on the stage (when it has a scale of 100%). Our ‘percentLoaded’ value also ranges from 0% to 100%, so they should be very happy together.
Note that you could also use the width property, however, unless you wanted to scale from 0 to 100 pixels width, there would be a tiny bit more maths involved. In this situation, xScale is easier.
Now, to set the properties of a movieClip, we must tell Flash which movie we’re talking about. This is the instance name we entered before (loadBar). This is how it looks…
loadBar._xScale = percentLoaded;
It’s dot syntax again, but this time we’re using it to set a property, rather than calling a function.
Go ahead and add it to the script on frame 2. Now it looks like ...
kBytesLoaded = _parent.getBytesLoaded()/1024;
kBytesTotal = _parent.getBytesTotal()/1024;
kBytesRemaining - kBytesTotal - kBytesLoaded;
percentLoaded = 100 * kBytesLoaded / kBytesTotal;
percentRemaining = 100 - percentLoaded;
progress = Math.floor(kBytesLoaded) add ' of '
add Math.floor(kBytesTotal) add 'kBytes loaded';
loadBar._xScale = percentLoaded;
Flash 5 Note
When you test your movie, it may not appear exactly as you expected. Rather than growing from one side of the display to the other, loadBar grows out from the center. This is because the scaling of the clip is based around its ‘registration point’.Select the loadBar symbol, and you’ll see a cross in the center. This is the registration point.
Let’s move the registration point to the left hand edge of the rectangle. This will make the scaling clip stretch out to the right.
Double-click the clip to enter edit mode, and click once on the rectangle to select it.
In the ‘info’ panel (menu, Window > Panels > Info), the position of the shape relative to the clip’s registration point is shown in the fields marked X and Y. Next to this is a little set of boxes, some are grey, one is white, one is black. Here, you set whether the X,Y values are relative to the center of the shape, or to the top-left corner. In the following image, the X,Y values are 0.0 relative to the center.
Click on the corner box and notice that the X,Y values change. Enter 0 (zero) into the X value, and hit the tab key to set it. The rectangle on the stage jumps to the right, so that its left hand edge is aligned with the registration point.
Well that’s good, but it’s a bit annoying that our clip is now in the wrong position.
Exit the clip’s edit by clicking the ‘Scene 1’ link in the top-left of the window (just above the timeline). Click and drag the clip back to the left, so that it fits within the stroke again.
Test the movie again and you’ll see a more ‘traditional’ progress bar.
You may have noticed that, before there’s any movement, the bar is very briefly displayed at 100% width. This is because, before it has a chance to do any calculations in frame 1, the bar is shown as it is placed on the timeline. But there’s an easy fix! Select the clip, and, in the info panel, enter 1 into the width field. Hit the tab key to set it.
Test the movie again… it’s fixed!