Building the Flash preloader objects
Next on your Preloader layer place three text areas and in the properties panel change them to dynamic. Then using the screen shot below as a guide select the top text area assigning the var name percentDone with the second two assigned the var loadedBytes and totalBytes. also in the properties panel select Character... and tick: Only > Numerals (0-9) this keeps your dynamic text smooth looking (anti-aliasing) by embedding the font you're using within your Flash movie.
The percentage sign and kb text is set to static. This example uses the Bios Three pixel font which you can download in the Pixel Fonts section of the site. Note: when using pixel fonts to prevent them from blurring you need to place them on non-rounded X and Y values, as in the above screen shot.
Next up let's throw in an image to test how it's working so far.
On Frame 3 in Layer 1 place a keyframe. For testing purposes we'll need to add a large image file. A quick way to do this is to take a screen shot of your current screen. In Windows 98, 2000 or XP press the Print Screen key on your keyboard and paste this into Layer 1. If your not able to paste in screen shots have a look around your hard drive for a large image file (+100k) to import.
At this point your timeline should match the screen shot below.
Before you test your movie save it to you hard drive.
Within the test movie area select the bandwidth profiler, then select debug within the top menu and choose your test modem speed (56k). To toggle between instant preview and the bandwidth profiler preview press Ctrl+Enter, the green line (screen shot below) will display the progress of your file loading.
Building the status bar
From Tools select the rectangle tool. Choose a fill color and turning off the stroke color add your background status bar shape to your Preloader layer. You can set the width in the properties panel or the align tool to match your movie's width.
With the shape selected convert it to a symbol called 'bar' assigning it as a movie clip behavior. Then double click on the bar movie clip you just created and using the align tool select: To Stage > Align left edge (detailed below).
Next click back to Scene 1 of your movie and open your library panel, drag another instance of bar from your library on to your Preloader layer. You should now have two bar movie clips in your movie.
Select both bar movie clip's and align so they line up exactly on top of each other. To do this using the align tool turn off 'To Stage' and select align to edge (this could be align to left, right, top or down depending where you dragged the duplicate bar movie clip into your preloader layer).
Next we need to change the color of the bar that will represent the status of our loading movie. To do this select the top bar and in your properties panel choose Color > Tint, selecting a different color than the background bar movie clip.
Adding the status bar Actionscript
We'll be using the an onClipEvent method attached to our top bar movie clip to scale it's size. With the movie clip still selected open your actions panel (top of your actions panel should read: Actions - Movie Clip) and place the following code:
onClipEvent (enterFrame) {
_xscale = _root.percentDone;
}
Before we look at what going on in the bar movie clip Actionscript in the bottom two paragraphs lets complete the final step of our preloader. With the top bar movie clip still selected change the width in the properties panel to 1 (W: 1.0).
The onClipEvent responds automatically to a predefined set of events, in this case enterFrame. The enterFrame handler will execute repeatedly (the speeds determined by your movies frame rate) any code between the left and right Braces regardless of whether the clip itself (or the main line) is playing or stopped.
The _xscale Property refers to the horizontal scaling percentage of the movie clip it's attached to, so if _xscale = 50 the bar movie clip would be half of its original size and as the percentDone variable always returns a number between 1 and 100 the bar will always* give an accurate guide of how far along the movie is loaded.
* as tested in IE5, IE6, Mozilla and Netscape on Windows 98 and XP (Flash player 5, 6 and 7).
