Preloaders are essentially a usability aid. That is a way to make a visitor’s browsing experience easier (modem or broadband) by displaying a short message or detailing how long the content their looking for on your site will take to appear.

This tutorial demonstrates how to build a status bar preloader showing the size of your movie in kilobytes in Flash MX, (you can also use Flash 5 or either of the Flash MX 2004 series).

Setting up your Flash preloader
Create a new movie in Flash and add three new layers (screen shot below) called Labels, Actions and Preloader. You may have noticed i’ve also locked these. Locking them prevents any objects (movie clips, graphics etc.) ending up in these layers as it’s generally considered best practice to keep scripts, labels and objects on separate layers.

Set up your keyframes to match the screen shot above.

Select Frame 1 of your Actions layer then opening the actions panel place in the following code:

totalBytes = Math.round(getBytesTotal() / 1024);
loadedBytes = Math.round(getBytesLoaded() / 1024);
percentDone = Math.round((loadedBytes / totalBytes) * 100);
if (_root._framesloaded>= _root._totalframes) {
gotoAndPlay("start");
}
In the first three lines we tell Flash to initialize three variables called totalBytes, loadedBytes and percentDone. The first two use the getBytesTotal() and getBytesLoaded() methods which returns an integer of the total size in bytes of the movie and amount of bytes currently loaded respectively. To retrieve the actual amount in kilobytes we divide both by 1024, then using the Math.round method to convert the floating-point numbers to the nearest integer.

The percentDone variable is the loaded kilobytes divided by the total movie size in kilobytes which we’re multiplying by 100 to arrive at a number between 1 and 100.

The fourth line sets up an ‘if’ conditional statement, in this case if the main timeline’s frames loaded is higher than or equal to the total frames, tell the play head to go to and play the Frame Label called ‘start’.

Next up select Frame 2 of the actions layer and in your actions panel add the following code:

gotoAndPlay(1);
This forces the play head back to Frame 1 which updates our loading variables and checks if the condition statement is met. If you’re not adding the preloader to an existing movie on Frame 3 of the Actions layer add a:

stop();
to prevent your movie looping.

In the Labels layer select Frame 3 and in the properties panel add the frame label ‘start’.

As soon as the conditional statement is met the play head misses out frame 2 and continues onto ‘start’.

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.

This Tutorial was taken from http://www.bestflashanimationsite.com/ and wrote by Charlie Abbott.

Tags: Actionscript, Adobe, Flash, how to, preloader, Tutorial