Preloader

From SRMSwiki

We're going to keep the preloader on one frame, so if you want to include an animated character or design, make sure the animation happens inside the symbol, not on the main timeline of the game. Just drop the animated symbol onto frame 1 of your timeline, and as the preloader runs, the symbol's animation will play out.

Display the Percentage Loaded

Add a Dynamic Text Field

If you'd like to create your own preloader from scratch, open Flash and create a new file. Or, download this sample preloader and follow along.

Got your preloader screen designed? Great! Now add a dynamic text field to the stage.

To add a dynamic text field, select the type tool and draw a box on the stage. Making sure the text box is still selected, open the Properties Panel (Window --> Properties or Ctrl+F3). In the properties panel, select Dynamic Text from the dropdown. Beneath that, where it says <Instance Name>, enter percentBox.

This text field will display the percentage of your file that has loaded.

Calculate the Percent Loaded
Add the following actionscript to the frame:

_root.onEnterFrame = function(){
percent = Math.round((this.getBytesLoaded()/this.getBytesTotal())*100);
  percentBox.text = percent + "%";
  if (percent == 100){
      delete _root.onEnterFrame;
      gotoAndPlay("FirstGameFrameHere");
  }
}

Now let's look at that big chunk of actionscript piece by piece to see how it works:

_root.onEnterFrame = function(){
Keep executing the following code over and over again.
percent = Math.round((this.getBytesLoaded()/this.getBytesTotal())*100);
Take the amount of the file that has already loaded (getBytesLoaded) and divide it by the total size of the file (getBytesTotal). That will give you a decimal (say .25). Convert it into a percentage by multiplying it by 100. Take that number and save it as a variable named “percent.”
instancenameoftextfieldhere.text = percent + "%";
Display the percent variable followed by the percent sign in the dynamic text field on the stage. (Don't forget to fill in your text field's instance name.)
if (percent == 100){
    delete _root.onEnterFrame;
    gotoAndPlay("FirstGameFrameHere");
}
Check to see if the percent variable is equal to 100, because that means my game has fully loaded. When that happens, stop playing the preloader and skip to the specified frame (start my game)!
Don't forget to fill in the first frame of your game, which is 2 if your preloader is all on one frame.

Add a Status Bar

Let's get more advanced – in addition to displaying the file's loading progress as a number, we'll show it as a status bar. Draw a long, low rectangle (a sideways bar graph) on the stage and give it the instance name statusBar. We'll use the percent variable to control its width, so it'll get wider as the percent gets larger.

Show the Percent as a Bar Graph
Draw a square on the stage, convert it to a symbol (select it, go to Modify --> Convert to Symbol, or use keyboard shortcut F8) and give it the instance name statusBar.

Add this line to your actionscript, right above the if statement:

statusBar._width = percent*2;

This code says, "take the percent variable, multiply it by two, and make that number the width of my status bar (in pixels)." You can replace the two with any number or decimal, or none at all, depending on how wide you want the status bar to be at 100%. In this case, multiplying 100% by 2 would give our status bar a maximum width of 200 pixels.

Test Your Preloader

Test your movie to see how it's working - go to Control --> Test Movie, or hit Ctrl+Enter.

Did you see the preloader run, or did your movie go straight to frame 2? Remember that a preloader keeps the user entertained while the rest of the file loads. If your file is small, there's a chance that your preloader will run too quickly for you to see it in action. If that's the case, you need to slow down your preloader's load time.

In the Test Movie screen you've opened, select View --> Simulate Download (or hit Ctrl+Enter again). Your preloader will display as if it was downloading slowly from a website, and that'll give you a chance to see exactly what's happening.

Preloader Resources

In this tutorial, you've learned how to show the percent of your file loaded as a number or a bar. Some people have gotten a lot more creative than that. Check out this gallery of cool preloaders: http://www.prettyloaded.com/.

Update the Wiki

Upload the assets (.SWF and .FLA) you created to your Team page if you are working on a Team game, or to your "My Projects" page if you are working alone.