Current Classes | Syllabus | Class Schedule

VCB-331 Rich Media 1

Preloaders (Flash AS3)

Introduction

Flash movies stream by default. However, it is not always desirable to have a flash file begin to play until it is fully downloaded. This is where pre-loaders (or just "loaders") come in. Pre-loaders are "mini" animations that download quickly and play in the foreground while the main file downloads in the background. Some preloaders contain little animations to entertain the user, others shown a progress bar which lets the user know how much of the movie has downloaded (I like these best). With this exercise we'll create a couple different kinds from simple to more complex.

Note: To truly see a loader in action you need to download over a network like the Internet. If you run these on your local computer you'll likely see the loader for only a brief flash.

Basic loader

This loader just plays a little animation until the movie is fully downloaded.

1. Open an existing flash file (typically you'll add the loader to an already existing file, although you could start with the loader and add the rest of the content later).
2. If you're using an existing Flash file, move all of the frames one frame to the right to make room for the loader.
3. Create a new movie clip. Inside the clip, create a simple animation (like a spinning object). Put the clip in frame 1 (make sure it lasts only one frame).
4. Create an "actions" layer (unless one already exists). Put a keyframe in frame 1 of the actions layer.
5. Add a stop(); to the frame in layer 1. This will cause the little movie clip animation to play indefinitely. To get the movie to proceed once it has downloaded we need to add an action to the movie clip itself (see next step).
6. Select the movie clip in frame 1. Add the following action:

   this.addEventListener(Event.ENTER_FRAME, loading);    
   function loading(myEvent:Event):void {
       var total:Number=this.stage.loaderInfo.bytesTotal; 
       var loaded:Number=this.stage.loaderInfo.bytesLoaded;
       if (total==loaded) { 
           this.nextFrame(); 
           this.removeEventListener(Event.ENTER_FRAME, loading); 
       }
   }  

   First a listener is added to the first frame, which in turn calls the "loading" function every time the frame plays. The "loading" function compares the amount of information downloaded (bytesLoaded) with the total number in the file (bytesTotal). Once they are the same (==), the movie advances to the next frame, which should be the start of the actual Flash piece. Try it, but be warned, if it is a small .swf file you might not see much of the loader other than a really quick flash.

Loader with text display

This loader adds some text that tells the user what percentage is downloaded thus far.

1. Add a dynamic text box to the stage (make sure it's in frame 1). Give the text box the instance name "loader_txt".
2. The script is the same as before, with one new line:

   this.addEventListener(Event.ENTER_FRAME, loading);    
   function loading(myEvent:Event):void {
       var total:Number=this.stage.loaderInfo.bytesTotal; 
       var loaded:Number=this.stage.loaderInfo.bytesLoaded;
       loader_txt.text = "Loading: "+Math.floor((loaded/total)*100)+ "%"; 
       if (total==loaded) { 
           this.nextFrame(); 
           this.removeEventListener(Event.ENTER_FRAME, loading); 
       }
   }  

   The new line performs a mathematical operation that divides the amount loaded by the total number of bytes in the Flash file to find the percentage downloaded so far. This amount is then written into the dynamic text field. As the movie plays this script is executed over and over again; each time the numbers are updated, so the percentage grows until it hits 100%. Then the main movie starts.

Loader with graphic bar display

This loader adds a graphical display—a progress bar that grows as the movie loads.

1. In frame one, draw a long, skinny rectangle, with both fill and border colors (this will be the progress bar so size & position accordingly).
2. Select the fill and stroke separately and convert each to a movie clip. Important: make sure for registration you choose the upper-left corner. Call the fill movie clip "bar_mc". The stroke clip doesn't need an instance name.
3. Make sure the stroke is above or "in front" of the fill.
4. Now update your code: loader_txt.text = "Loading: "+Math.floor((loaded/total)*100)+ "%";

   this.addEventListener(Event.ENTER_FRAME, loading);    
   function loading(myEvent:Event):void {
       var total:Number=this.stage.loaderInfo.bytesTotal; 
       var loaded:Number=this.stage.loaderInfo.bytesLoaded;
       loader_txt.text = "Loading: "+Math.floor((loaded/total)*100)+ "%"; 
       bar_mc.scaleX=loaded/total; 
       if (total==loaded) { 
           this.nextFrame(); 
           this.removeEventListener(Event.ENTER_FRAME, loading); 
       }
   }  

   The new line causes the bar_mc movie clip to expand as the movie loads. Pretty slick, eh? Test it out. You probably won't see much. However, if you upload a .swf with a loader to the Web and view it there, you may see the loader in action.