Tutorials

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

bird.jpg and candles.jpg
These 2 files will be loaded externally into the Flash movie we will create.
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;
}

- The As3 Event Object
Part 1: Introduction to AS3 event handling Part 2: How to create an AS3 event listener Part 3: The AS3 event object by Alberto Medalla Lecturer, Ateneo de Manila University When an ActionScript 3 event occurs, an event object gets created just before...

- As3 Sound
Exercise Files: Sound.fla CheerfulSong.mp3 In this lesson, we're going to learn how to control sound in Flash using ActionScript 3. We're going to learn: how to load an external sound file into a Flash moviehow to play and stop the soundhow to...

- Preloading External Swf File Generates Error #1009: Cannot Access A Property Or Method Of A Null Object Reference
Exercise Files: Stage_Issue_Preloader.fla Stage_Issue_Load_This.fla When you're preloading a SWF file that has code that makes any reference to the stage, you might encounter this error: TypeError: Error #1009: Cannot access a property or method of...

- Pausing And Resuming Sound In Actionscript 3.0
Exercise Files: Pausing_Sound_Start.fla CheerfulSong.mp3 NOTE: Be sure to save both files in the same folder. In ActionScript 3.0, you can start playing a sound file using the play() method of the Sound class. And in order to stop playing a sound file,...

- Preloading In Actionscript 3.0 Part 1
Exercise Files: Preloader01_Start.fla allin.swf In this tutorial, we are going to learn how to create a preloader in Flash using ActionScript 3. What is a preloader and what is it for? Flash movies tend to have larger than average file sizes compared...

Tutorials