Preloading in ActionScript 3.0 Part 2

Exercise Files:
Preloader02_Start.fla
bird.jpg
candles.jpg

We've learned about the basics of preloading in Part 1 of Preloading in ActionScript. In this lesson, we'll apply the same concepts to make a picture gallery that has the ability to preload the images. Links to the exercise files are provided at the beginning of this article. Make sure to save all these files in one folder.

Descriptions of Exercise Files

1. bird.jpg and candles.jpg
   These 2 files will be loaded externally into the Flash movie we will create.
2. Preloader02_Start.fla
   This Flash document has the following elements:
   
   • 2 Buttons - The instance names of the buttons are pic1_btn and pic2_btn. Clicking on these buttons will load the image files.
   • 1 TextField - The instance name of the TextField is percent_txt. This will display the loading progress of the image that is being loaded.

Go ahead and open the Preloader02_Start.fla file. Select frame 1 of the Actions layer and then go to the Actions Panel and place the code below (comments have been included to explain the code):

// Create the loader object that will be used to load the
// external image files. I've named it picLoader. We'll only
// need one loader since we don't plan on displaying the images
// at the same time. We only want to load and display them one
// at a time.
var picLoader:Loader = new Loader();

// Create the URLRequest objects that specify the filenames
// of the external image files. We need to create 1 URLRequest
// per image file. We have 2 images so we need to create two
// URLRequest objects. I've named the first one picURL1, which
// requests for bird.jpg. I've named the second one picURL2, which
// requests for candles.jpg.
var picURL1:URLRequest = new URLRequest("bird.jpg");
var picURL2:URLRequest = new URLRequest("candles.jpg");

// Add the event listeners for each of the buttons. We will
// use a CLICK event to tell Flash to respond. When any of
// the buttons are clicked, Flash will begin to load the
// corresponding image.
pic1_btn.addEventListener(MouseEvent.CLICK, clickOne);
pic2_btn.addEventListener(MouseEvent.CLICK, clickTwo);

// These are the event listener functions for the CLICK
// event handlers. I've created two different functions
// for each of the buttons since each button will be
// loading a different image. (but do know that there are
// more effecient ways to go about this).
// This clickOne event listener function is for when the
// pic1_btn button is clicked
function clickOne(e:MouseEvent):void
{
     // Add the event listeners for ProgressEvent.PROGRESS 
     // and Event.COMPLETE.
     // This is for the preloading of the images.
     picLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
     picLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);

     // This load statement below is the line that tells Flash to 
     // start loading the image.
     picLoader.load(picURL1);
}

// This next function does the same thing as the function above,
// except that it will load a different image as specified in the 
// load statement.
// This one is for the second button and will load 
// picURL2 (the candles.jpg image), while the other one will load 
// picURL1 (the bird.jpg image).
function clickTwo(e:MouseEvent):void
{
     picLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
     picLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
     picLoader.load(picURL2);
}

// This is the event listener function for ProgressEvent.PROGRESS.
// It contains the preloader formula.
function onProgress(e:ProgressEvent):void
{
     // The line below calculates how much of the file has already 
     // been loaded.
     var nPercent:Number = Math.round(e.target.bytesLoaded / e.target.bytesTotal * 100);

     // This next line outputs the results from the preloading 
     // calculations.
     // The value will be displayed in the percent_txt TextField 
     // on the stage.
     percent_txt.text = nPercent.toString() + " %";
}

// This is the event listener function for Event.COMPLETE 
// (dispatched when the image has successfully loaded completely).
function onComplete(e:Event):void
{
     // Remove the ProgressEvent.PROGRESS and Event.COMPLETE 
     // listeners once the image has been loaded.
     picLoader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, onProgress);
     picLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, onComplete);

     // Add the loader to the display list so that the image that 
     // was loaded will be visible on the stage.
     addChild(picLoader);

     // Adjust the x and y position of the loader so that it fits 
     // within the border drawn on the stage. If you don't put 
     // these lines, then the loader position will default to 
     // x = 0 and y = 0 (making it appear on the upper left corner 
     // of the stage.
     picLoader.x = 75;
     picLoader.y = 30;
}