How do I make a preloader in Flash?

Editor's note: Shortly after posting this, the Youtube version of the video discussed below was cut from 23 minutes to 14 seconds. You can still view (and purchase for $3.50) the fuller versions at the author's site: http://tutvid.com/tutorials/flash/tutorials/
simplePreloader.php

As with anything of some depth, it can take awhile to “circle” a topic you’re learning and get closer and closer to the details. In a class last week, several students commented on the common practice of using a Flash preloader in sites built primarily in Flash. This post is intended to summarize and explain generally what you are doing when you create a Flash preloader, and why.

A preloader plays while the larger “movie” is loading in the meantime. I told my students I’d get them some resources for different approaches to doing just that. Below are a couple that I’ve put on on my recommended Delicious list under the tag “preloader” for background information. Further down you’ll also see a great video tutorial that walks through the process quite well, and my blow-by-blow dissection of the ActionScript used.

• smartwebby.com info
  
• webmasterworld.com forum
  
• youtube.com tutorial from tutvid.com -- shown in embedded video below

Key Components to a Preloader
What do we really want out of a preloader, then, and how is it generally accomplished?

1. Amount Loaded So Far: You want to have a visual indicator of how much of the movie has loaded so far.
2. Constant Progress Updating: We need this progress to be updated contiuously. Intuitively, as visitors we will gauge how much time has passed versus how much progress has been made (amount loaded so far). This gives us a sense of not just the download’s progress, but also its speed.
3. Constant Progress Checking: In order to constantly update the progress of the amount loaded so far, we will need to check it.
4. Manipulating Visual Indicators: Finally, in order to continously display the information we’re gathering, we’ll manipulate some visual indicators. It could be dynamic text which displays the current “percent downloaded”, it could be a bar filling up proportionally to the amount downloaded, or any number of approaches.

The video tutorial above does a good job of illustrating how to create a preloader using ActionScript (he’s using ActionScript 2.0). You’ll need an animation that’s 2+MB so that you can use Flash’s Simulate Download settings in the Test Movie mode to see the effects of your preloader in action as you build it. (That also gives you a good appreciation of the pain caused by how long your movie takes to load at different speeds.) Then you’ll create a preloader bar and dynamic text to update the download progress, and use the timeline and ActionScript to bring it all together.

Actions Panel Color Coding
Below you’ll find a screenshot sample of finished code for the ActionScript that’s really the brains behind this whole preloader, as well as a basic dissection of what’s happening. (Notice in the screenshot below that the Actions panel color codes things for you.

• Names you created and basic syntax is in black.
• Text strings are in green.
• Flash keywords, properties and functions in blue.

Completed Code Sample
Click the code image below for a clearer and larger display.


Dissected Code Sample
So below is a summary of what you’re doing in the code, line by line. (By the way, all of this ActionScript code is going on frame 1, with the majority of your preloader elements also starting on frame 1. Your main movie elements start on their own layers on frame 2, after the preloader has completed its task.)

On line 1 we set the movie to stop. This doesn’t kick in until frame 1 has played through, which allows the rest of the preloader to do its job, but to make sure that the main movie doesn’t start playing until called by the IF statement we create starting line 8.

On line 2 we call a variable name textVar and set it to say “LOADING”. (We created this dynamic text and gave it a variable name in the Property Inspector when creating it on the Stage. )

On line 3 we create an initial container to hold preloader’s interval information, and to set the details of its repetition. We name the container “loaderInt” and set it to use the Flash function setInterval(), with parameters to run a function LBar that we’ll create next, and to run it every 10 milliseconds.

For readability we skip Line 4 and on Line 5 we create the function called LBar(). The lines beneath it get the opening and closing curly braces to contain the function’s logic. That logic will:

1. Line 7: Define the contents of another dynamic text field (percentInst) we created earlier on the stage. The contents will be the result of dividing the total bytes loaded so far by the total file size, multiplying that number by 100, and adding a percent sign to make it easily understood to visitors.
2. Line 8: Create an IF statement that says, each time this function is run, check to see if the bytes loaded is greater than or equal to the total file size. If so, then:
1. Line 10: Start playing again (which will run the main movie now),
2. Lines 11-14: Hide all the visual indicators we’d created to update the visitor on the download’s progress, and
3. Line 15: Clear out the “loaderInt” that we’d created to continously run our preloader.
3. Line 17: Use the _xscale property to increase the fill of the horizontal loader bar we created. Do this proportional to the percent of how much is loaded, divided by the total file size. Keep in mind that this line is outside of the IF statement, so it runs each time the Lbar function is being run. That continously updates the download progress bar until the movie is loaded and the LBar function is no longer called.

Closing
Hopefully that puts you on the right path to creating this and other preloaders in Flash, where needed, and is a good introduction to some handy use of ActionScript.

On the Road,
Eric J. Reid