ActionScript 3.0 Cookbook: Chapter 6, Display List
Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10

By placing code in the event handlers for these events, you can show the progress of a download as it's being loaded. For instance, the handleOpen( ) method would be in charge of creating the preloader and adding it to the display list. The handleProgress( ) method would update the percentage value of the preloader, such as setting the text of a TextField instance to the percent value. Finally, the handleComplete( ) method would perform "clean up" and remove the preloader, since the asset is fully downloaded. Focusing on those methods, the code might look something like this:

private function handleOpen( event:Event ):void {
  // Create a simple text-based preloader and add it to the 
  // display list
  _loaderStatus = new TextField( );
  addChild( loaderStatus );
  _loaderStatus.text = "Loading: 0%";
}

private function handleProgress( event:ProgressEvent ):void {
  // Update the loading % to inform the user of progress
  var percent:Number = event.bytesLoaded / event.bytesTotal * 100;
  _loaderStatus.text = "Loading: " + percent + "%";
}

private function handleComplete( event:Event ):void {
  // Clean up - preloader is no longer necessary
  removeChild( loaderStatus );
  _loaderStatus = null;
}

The preceding code snippet assumes that there is a _loaderStatus variable as part of the class, with type TextField:

private var _loaderStatus:TextField;

Instead of messages appearing via the trace( ) statement as before, modifying the event handlers allows the loading information to be presented inside of the movie itself. This allows users to see the information directly and provides a better experience when loading large external assets.

See Also

Recipes 3.12, 6.7, 9.17, and 19.3

Section 6.7: Loading and Interacting with External Movies

Problem

You want to load, and be able to interact with, an external .swf movie into your own movie.

Solution

Use the new Loader class to load the .swf file, and then access the .swf file via the content property of the Loader instance.

Discussion

Recipe 6.6 demonstrates how to load external images via the Loader class. Loading external .swf movies uses the same technique--by calling the load( ) method on a Loader instance and passing a URL to a .swf instead of an image, the .swf is loaded into the movie. If the Loader is in the main display hierarchy, the .swf also appears on-screen.

This excerpt is from ActionScript 3.0 Cookbook. Well before Ajax and Windows Presentation Foundation, Macromedia Flash provided the first method for building "rich" web pages. Now, Adobe is making Flash a full-fledged development environment, and learning ActionScript 3.0 is key. That's a challenge for even the most experienced Flash developer. This Cookbook offers more than 300 solutions to solve a wide range of coding dilemmas, so you can learn to work with the new version right away.

This recipe involves creating two separate .swf files, ExternalMovie.swf and LoaderExample.swf. The first movie, ExternalMovie.swf, will be loaded at runtime into the second movie, LoaderExample.swf. The code for ExternalMovie.swf is as follows:

package {
  import flash.display.Sprite;
  import flash.display.Shape;
  public class ExternalMovie extends Sprite {
    private var _color:uint = 0x000000;
    private var _circle:Shape;
    
    public function ExternalMovie( ) {
      updateDisplay( );
    }
    
    private function updateDisplay( ):void {
      // If the circle hasn't been created yet, create it
      // and make it visible by adding it to the display list
      if ( _circle == null ) {
        _circle = new Shape( );  
        addChild( _circle );
      }

      // Clear any previously drawn content and draw
      // a new circle with the fill color
      _circle.graphics.clear( );
      _circle.graphics.beginFill( _color );
      _circle.graphics.drawCircle( 100, 100, 40 );
    }
    
    // Changes the color of the circle
    public function setColor( color:uint ):void {
      _color = color;
      updateDisplay( );
    }
    
    // Gets the current circle color value
    public function getColor( ):uint {
      return _color;  
    }
    
    
  }
}

The code for ExternalMovie.swf is nothing out of the ordinary--a black circle is created when the movie is executed. The main thing to notice about the code is that there are two public methods for accessing and modifying the color of the circle, getColor( ) and setColor( ). Whenever the setColor( ) method is invoked, the circle is redrawn with the updated color value.

By declaring these methods as public, the methods are able to be called from a movie that loads the ExternalMovie.swf in at runtime. In contrast, the private updateDisplay( ) method won't be available to the loading movie. See Recipe 1.13 for more information about the visibility modifiers for methods.

Now that ExternalMovie.swf is created, a new .swf needs to be created to load the external movie. This is done with LoaderExample.swf, which has the following code:

package {
  import flash.display.*;
  import flash.net.URLRequest;
  import flash.events.Event;

  public class LoaderExample extends Sprite {
    
    private var _loader:Loader;
    
    public function LoaderExample( ) {
      // Create the Loader and add it to the display list
      _loader = new Loader( );
      addChild( _loader );
      
      // Add the event handler to interact with the loaded movie
      _loader.contentLoaderInfo.addEventListener( Event.INIT, handleInit );
      
      // Load the external movie
      _loader.load( new URLRequest( "ExternalMovie.swf" ) );
    }
    
    // Event handler called when the externally loaded movie is
    // ready to be interacted with
    private function handleInit( event:Event ):void {
      // Typed as * here because the type is not known at compile-time.
      var movie:* = _loader.content;
      
      // Calls a method in the external movie to get data out
      // Displays: 0
      trace( movie.getColor( ) );
      
      // Calls a method in the external movie to set data.
      // Sets the color in the external movie, which draws
      // a circle with the new color, in this case red
      movie.setColor( 0xFF0000 );
    }
  }
}

The code for LoaderExample.swf is more interesting in that it communicates with the loaded movie. There are two main aspects in the preceding code:

1. Listening for the init event
2. Accessing the loaded movie via the content property