Putting Theory into Practice: An Example

If you haven’t already downloaded the sample files, download and open them now. There is an FLA file containing a preloader movie clip, some “site content,” and an ActionSript file defining a class called Preloader.

The Preloader Movie Clip

The preloader movie clip is on the first frame of the main Timeline of the example FLA, and has an instance name of preloader_mc. The first frame of preloader_mc has only a stop() action on it. The animation that reveals the preloader, the in animation, starts on a frame labeled IN. After the in animation, there is a movie clip containing the progress animation with an instance name of progress_mc. This clip can be as long as you want. However, it is important that it contains only the progress animation and has no extra frames at the beginning or end. The preloader code use the _totalframes property of this clip to determine whether the preloader has played all the way through. The out animation begins on the frame labeled OUT.

The Class

Take a look at the Preloader class that extends the existing MovieClip class. The preloader movie clip must be set as a member of this class in the Linkage dialog box accessed from the library.

    function Preloader(){
         mx.events.EventDispatcher.initialize(this); 
    } 

The constructor is called when the movie clip appears on the Stage. The only code in the constructor gives this instance the ability to broadcast events to listeners using the EventDispatcher class.

    public function startPreload(t:MovieClip){
         target_mc = t;
         this.gotoAndPlay("IN"); 
    } 

The next method definition in the class file, startPreload, is the only public method of the class. The parameter is the movie clip whose load progress this instance is reporting on. The target_mc variable is set to reference the target clip, and the preloader clip is told to play the in animation.

    private function onAnimateIn(){
         this.stop();
         this.onEnterFrame = this.checkLoadProgress;
     }

On the final frame of the in animation, the onAnimateIn method is called from the preloader clip’s Timeline. This method stops the animation and starts checking the load progress on every frame.

    private function checkLoadProgress(){
         var bl = target_mc.getBytesLoaded();
         var bt = target_mc.getBytesTotal();

          var pct = bl/bt;

          var cf = progress_mc._currentframe; 
        var tf = progress_mc._totalframes;

          var f = Math.ceil(tf * pct); 

         if(f > cf){
             progress_mc.play();
         }else{
             progress_mc.stop(); 
        }

          this.pct_str = (Math.round(cf/tf * 100)).toString();

          if(bt > 20 && bl == bt && cf == tf && progress_mc){ 
            onPreloadComplete();
         }
     }  

The checkLoadProgress method contains the code that tracks the load progress of the target movie clip and updates the preloader movie clip as necessary. This method is called on each frame until the loading is complete.

The first few lines of code get the values for total bytes and loaded bytes of the target movie clip and calculate the percentage that has already loaded.

The next two lines get the current frame and the total number of frames in the progress animation movie clip. I then multiply the total frames by the load percent to find the corresponding frame in the progress animation clip. Because the progress animation is so glorious, I don’t want to deprive the user of any part of its beauty. I want to ensure that the animation plays through, nice and smooth, without skipping any frames. So, instead of jumping to the frame I just calculated from the load percentage, I compare this value with the current frame of the progress clip. If the progress clip has outrun the loading progress—if the current frame is beyond the frame that corresponds with the load percentage—I make the clip stop and wait for the load to catch up. If the target frame is beyond the current frame of the clip, I let the progress animation play.

The preloading is complete when the loaded bytes equal the total bytes, and the progress clip has played all the way to the end (the current frame is equal to the total frames). At this point, the onPreloadComplete method is called.

    private function onPreloadComplete(){
         this.onEnterFrame = null; 
        this.gotoAndPlay("OUT"); 
    }

Here the onEnterFrame method is cleared, and the preloader is sent to the out animation. At the end of the out animation, the onAnimateOut method is called from the Timeline.

    private function onAnimateOut(){
         this.stop();
         dispatchEvent({target:this, type:'onPreloaderOut'}); 
    }

An onPreloaderOut event is broadcast by this method. On the first frame of the main Timeline, the Timeline is added as a listener for events broadcast by the preloader. So when the preloader dispatches the onPreloaderOut event, the onPreloaderOut function on the main Timeline is called, which sends the Timeline to the SITE frame.

Testing

The Simulate Download feature available when testing in the Flash authoring tool is very useful when testing a preloader. You can find this on the View menu when testing a movie. It is a good idea to try Simulate Download at different bandwidth settings, so you can get an idea of how the preloader looks on different types of connections. Use the Bandwidth Profiler to ensure that your preloader clip is small enough, and to compare the actual load progress with the progress reported by your preloader. Sometimes, I throw a gigantic bitmap into the file just to make sure my preloader is working properly.

Although the Simulate Download feature is very useful, it doesn’t duplicate loading something from a remote location. Always be sure to test preloaders by loading the content from a remote server (ideally the same server that the live content will eventually go on) before going live with your content.