Craig Campbell’s School of Flash

There is very little that will push users away quicker than a bulky Flash website with no preloader. Without a preloader, your users will have nothing to look at but a blank screen until your Flash file has fully loaded. For users with a speedy broadband connection, this may not be much of an issue (depending on the size of your file), but for people with sluggish connections, it’s imperative that you give them some kind of indication that everything is loading properly.

1. Create your preloader bar. For this example, I’ll be drawing a basic rectangular bar that will expand within a thin border. Using the rectangle tool, set the stroke option in the Properties Panel to a hairline stroke, choose whatever fill color you want, make sure that Object Drawing mode is turned off on the toolbar, and draw your preloader rectangle in the center of the stage.

2. Separate the fill from the border. Since the border of the rectangle will stay constant while the fill expands within it, it will be easier if we send the fill to its own layer. To do this, simply hit Esc to make sure that everything is deselected, and then click once on the fill. Make sure that ONLY the fill is selected, and then right-click on the fill (or Ctrl+click if you’re using a one-button mouse on a Mac) and click on Distribute to Layers. This will remove the fill from the current layer and copy to a new layer just below the current layer.

3. Convert the fill to a movie clip. Click on the fill (which should be on its own layer now) and hit F8 to convert it to a symbol. Select “movie clip” and set the registration point to the upper left corner. Our loader bar is going to be expanding from left to right, and this will only work properly if the registration point is on the left side. Give your movie clip an instance name of loader_mc.

4. Create a dynamic text field. This text field will tell the user what percentage of the site has loaded so far. For this example, select the Text Tool, choose Dynamic Text in the drop-down menu on the Properties Inspector, choose 12 point Verdana (or whatever font you want), and click and drag beneath your loader bar to draw a text field that has the same width as the loader. Here’s what mine looks like:

With this new text field selected, in your Properties Inspector, click on the button to right-align your text within the text field. Give this text field an instance name of loaded_txt.

5. Embed the font for the dynamic text field. Even if you select a popular font, such as Verdana, you can never be 100% certain that your users are all going to have the same font installed on their system. And when you’re dealing with dynamic text fields, if your users don’t have your selected font, and if you don’t embed your font, then Flash will choose a different font to display, and you’ll lose control of what your text fields look like.

To avoid this issue, select your dynamic text field, and then click on the “Embed” button in the Properties Inspector. In the pop-up dialog that appears, select Uppercase, Lowercase, Numerals, and Punctuation and click OK. To select more than one item, click on the top item, hold onto Shift, and then click on the bottom item. All items in between will be selected. Like so:

6. Create a new keyframe for your content. You won’t be able to test your preloader unless you actually have some content to load. So at this point, I want you to throw in a little bit of dummy content.

Create a new layer to hold your content, click on frame 2 for this new layer, and hit F6 to add a new keyframe. In this new keyframe, simply import a hi-resolution image or two onto the stage. This content does not have to be arranged in any sort of orderly fashion. You’re just using this extra content to “fatten up” the file size so you’ll have a way to test your preloader.

7. Add a stop action to frame 1. Since your Flash file now has 2 frames, you need to provide a way to keep the file from jumping back and forth between them. So add a new layer to the top of your layer stack, rename the layer Actions, click on frame 1 for the Actions layer, and hit Opt+F9 (or just F9 for PC) to open up your Actions panel. In your Actions, simply type stop();

8. Code the preloader. Make sure that frame 1 of the Actions layer is still selected, and add the following code to your script:

On lines 3 and 4, you’re adding Event Listeners to the main timeline. The PROGRESS event handler on line 3 calls on the onProgress function over and over as long as content is still loading. The COMPLETE event handler calls on a function called onComplete and is triggered whenever the content has been fully loaded.

In the onProgress function, we first create a variable called loaded, which stores the number of bytes that have been loaded thus far and another variable called total, which stores the total number of bytes in the Flash file. When we divide loaded by total (line 10), we get the total percentage of the file that has currently been loaded, and we store it in a variable called pct. (Actually, it’s technically a ratio instead of a percentage, but I won’t be picky if you won’t.)

We then use this pct variable (which, if everything is working properly, now contains a number between 0 and 1) to update the scaleX property of our loader bar movie clip. The scaleX property is basically the width of a movie clip as a ratio of its original width. So at this point, if your Flash file is 90% loaded, then the loader bar will be at 90% of its full width.

Once we have the width of the loader set, we then update the dynamic text field to tell our users precisely how much of our file has been loaded.

9. Test your movie. If everything is working properly, then when you test your movie (by hitting Cmd+Enter or Ctrl+Enter on PC), you won’t see the preloader at all. It will jump straight to frame 2, where you have a hi-res image on the stage. This happens because when the file is already on your system, it is loaded immediately, and the COMPLETE event triggers the onComplete function to take us to the next frame of the Flash file. However, there is a way to simulate a download in order to test our preloader.

After hitting Cmd+Enter or Ctrl+Enter to test your movie, go to View > Bandwidth Profiler. This will display loading information above your movie. Once the Bandwidth Profiler is visible, go to View > Simulate Download. Hopefully, if all your ActionScript was entered properly, you will now see your preloader in action. As your loader bar expands to the right and your dynamic text field updates the percentage loaded, double-check this against the percentage that the Bandwidth Profilers says has been loaded. If these two numbers match, you’re in business.

You can also adjust the speed of the simulated download by selecting View > Download Settings.

Once your Flash file finishes loading, you should see the preloader disappear and the next frame appear. And voila! You now have a fully-functioning preloader. Now all you need to do is replace the image(s) you stuck in frame 2 with the actual content of your website, and you’re good to go!

Sample FLA file: preloader.zip

Tags: actionscript 3, Flash CS3, preloader, tutorial

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.