Macromedia Flash 8 Bible

Adding a Loader Component to your Flash Movie

The Loader component can automatically load an external image or .swf file into your Flash movie, and it's incredibly simple to use. One of the nice features of the Loader component is that it can scale the image to fit within the boundaries of the component. This example shows you how to use the Loader component

1. Create a new Flash document and save it as f8_loader_100.fla.

2. Rename Layer 1 to clo.

3. Open the Components panel, and open the User Interface grouping. Drag the Loader component to the Stage. Place the instance near the top-left corner of the Stage.

4. Select the new instance and name it clo in the Property inspector. Select the Parameters tab in the Property inspector. Leave the autoLoad setting at its default value (true). In the contentPath field, type http://www.flashsupport.com/images/beach.jpg. Make sure the scaleContent setting is true (see Figure 28-24).

   Note

   As always, you can name your instances with your preferred naming convention. Here, we name the Loader component clo, which stands for component loader. We use the c prefix consistently with all component instances in the examples in this book.

5. The Loader component, when used in this fashion, gives you a live preview of the loaded asset. Deselect the instance on the Stage, and reselect it. Doing so should force the instance to update, displaying the image within the area of the clo instance. You can resize the clo instance to change the size of the loaded image.

6. Save the document, and test it. You can watch the asset load into the Flash movie.

Figure 28-24: The parameters of the Loader component

You can use this procedure to load "fixed" content into your Flash movie, meaning, if you don't need to change the URL of the loaded asset for a given presentation, using the component with hard-coded values in the Property inspector can take care of your needs. However, if you want to be able to change or display several images in the same instance over the course of your presentation, you'll need to know how to change the parameters of the Loader component instance in ActionScript. In the next section, you learn how to do just that.

Dynamically Changing the Source of a Loader Component

You can also set the URL to the content of a Loader component instance using ActionScript. In the following steps, you learn how to integrate the Loader component with one of the earlier examples you created in this chapter.

1. In Flash 8, open the preloader_fp8_100.fla document. Resave the document as preloader_fp8_comps_100.fla.

2. Create a new layer, and rename it clo. On frame 1 of this layer, add a Loader component instance, as outlined in Step 3 in the previous section.

3. In the Property inspector, name the new instance clo. Do not specify any additional parameters for the component. You can resize the component instance so that it fills up more of the Stage.

4. Select frame 1 of the actions layer, and open the Actions panel (F9). Change line 5 of the script to the following code. Here, you change the reference to the included .as file to loadFile_component.as. In the next step, you see how the code in the new .as file is altered.

   #include "loadFile_component.as"
   

5. Open the loadFile.as file from the earlier example, and add (or modify) the code to the bold code shown in Listing 28-11.

   Listing 28-11: The Modified loadFile_component.as Script

   import mx.utils.Delegate;
   
   var snd:Sound;
   var mcHolder:MovieClip;
   var clo:mx.controls.Loader;
   var ns:NetStream;
   var vWin:Video;
   
   var nc:NetConnection = new NetConnection();
   
   nc.connect(null);
   
   function loadFile(sUrl:String, sType:String, oProp:Object,
   oListener:Object):Void {
      if(sType == null || sType == undefined) var sType:String =
         sUrl.substr(-3).toLowerCase();
      else   sType = sType.toLowerCase();
      var mc:MovieClip = mcHolder = createEmptyMovieClip("mcHolder", 1);
      if(oProp != null || oProp != undefined){
         mc._x = oProp.x;
         mc._y = oProp.y;
         mc._xscale = mc._yscale = oProp.scale;
      }
      var oTarget:Object;
      switch(sType){
         case "swf" :
         case "jpg" :
         case "gif" :
         case "png":
         default:
            clo.load(sUrl);
            oTarget = clo;
            break;
         case "mp3" :
            snd = new Sound(mc);
            snd.loadSound(sUrl, true);
            oTarget = snd;
            break;
         case "flv" :
            var mcVid:MovieClip = mc.attachMovie("videoClip", "mcVid", 1);
            vWin = mcVid.vWin;
            ns = new NetStream(nc);
            ns.onMetaData = Delegate.create(this, this.onVideoMetaData);
            ns.play(sUrl);
            mcVid.vWin.attachVideo(ns);
            oTarget = ns;
            break;
      }
      var oInit:Object = {_x: 25, _y: Stage.height - 30, target: oTarget, 
         listener: oListener};
      var mcLoader:MovieClip = attachMovie("loaderClip", "mcLoader", 2, oInit);
      mcLoader.onResize = function():Void {
         this._y = Stage.height - 30;
      };
      Stage.addListener(mcLoader);
   }
   
   function unloadFile():Void {
   
      if(mcHolder instanceof MovieClip) mcHolder.removeMovieClip();
      if(mcl instanceof MovieClipLoader) mcl.unloadClip();
      if(snd instanceof Sound) {
         snd.stop();
         delete snd;
      }
      if(ns instanceof NetStream) ns.close();
      if(clo.content != undefined) clo.content.unloadMovie();
   }
   
   function onVideoMetaData(oData:Object):Void {
      var nWidth:Number = oData.width;
      var nHeight:Number = oData.height;
      if(nWidth == 0 || nWidth == undefined ||  isNaN(nWidth)){
         vWin._width = vWin.width;
         vWin._height = vWin.height;
      } else {
         vWin._width = nWidth;
         vWin._height = nHeight;
      }
      vWin._visible = true;
   }
   

   Here, instead of creating a MovieClipLoader object to load the SWF or image asset, the loadFile() function tells the clo instance to load the asset specified by the sUrl parameter. The load() method of the Loader component essentially acts as the loadMovie() method, bringing the external asset into the movie.

   The unloadFile() function is modified to unload the asset from the Loader component, which can be referenced via the content property of the Loader component.

6. Save the loadFile.as file as loadFile_component.as.

7. Save the Flash document, and test the movie. Type a URL into the tFile field, such as:

   • http://www.flashsupport.com/images/beach.jpg

   Click the Load Asset button, and the asset should load into the Loader component. Notice that the custom preloader still works with the Loader component as well, because the Loader component has getBytesLoaded() and getBytesTotal() methods.

Applying the ProgressBar Component

Now you'll learn how to use the ProgressBar component with the example you created in the previous section. The ProgressBar component displays the download progress of a loading asset, and can be used with the Loader component or your own custom loader Movie Clips.

1. Open the preloader_fp8_comps_100.fla and loadFile_component.as files from the last section. Save these as preloader_fp8_comps_101.fla and loadFile_progressbar.as, respectively.

2. With the preloader_fp8_comps_101.fla document active, open the Components panel and drag an instance of the ProgressBar component from the User Interface grouping to the Stage.

3. Delete the new instance of the ProgressBar component from the Stage. You only need to have the ProgressBar component in the Library panel for use in this exercise.

   Note

   You can open the Library panel to see the ProgressBar component and its linkage identifier.

4. Select frame 1 of the actions layer, and open the Actions panel. Change the .as file referenced in line 5 to the following code, shown in bold.

   #include "loadFile_progressbar.as"
   

5. Switch over to the loadFile_progressbar.as file, and add or modify the bold code shown in Listing 28-12.

   Listing 28-12: Modifying the Code for the ProgressBar Component

   import mx.utils.Delegate;
   
   var snd:Sound;
   var mcHolder:MovieClip;
   var clo:mx.controls.Loader;
   var cpb:mx.controls.ProgressBar;
   var ns:NetStream;
   var vWin:Video;
   
   var nc:NetConnection = new NetConnection();
   nc.connect(null);
   
   function loadFile(sUrl:String, sType:String, oProp:Object,
   oListener:Object):Void {
      if(sType == null || sType == undefined) var sType:String =
         sUrl.substr(-3).toLowerCase();
      else   sType = sType.toLowerCase();
      var mc:MovieClip = mcHolder = createEmptyMovieClip("mcHolder", 1);
      if(oProp != null || oProp != undefined){
         mc._x = oProp.x;
         mc._y = oProp.y;
   
         mc._xscale = mc._yscale = oProp.scale;
      }
      var oTarget:Object;
      switch(sType){
         case "swf" :
         case "jpg" :
         case "gif" :
         case "png":
         default:
            clo.load(sUrl);
            oTarget = clo;
            break;
         case "mp3" :
            snd = new Sound(mc);
            snd.loadSound(sUrl, true);
            oTarget = snd;
            break;
         case "flv" :
            var mcVid:MovieClip = mc.attachMovie("videoClip", "mcVid", 1);
            vWin = mcVid.vWin;
            ns = new NetStream(nc);
            ns.onMetaData = Delegate.create(this, this.onVideoMetaData);
            ns.play(sUrl);
            mcVid.vWin.attachVideo(ns);
            oTarget = ns;
            break;
      }
      var oInit:Object = {_x: 25, _y: Stage.height - 30, source: oTarget};
      cpb = attachMovie("ProgressBar", "cpb", 2, oInit);
      cpb["onResize"] = function():Void {
         this._y = Stage.height - 30;
      };
      cpb.addEventListener("complete", oListener);
      Stage.addListener(cpb);
   }
   

   In the loadFile() function, an instance of the ProgressBar component is added from the Library instead of the loaderClip symbol. The instance is named cpb.

   The oInit object passed to the cpb instance needs to be slightly modified, as the ProgressBar component uses a source property instead of a target property. Instead of specifying the listener object in the oInit object, the listener is added to the ProgressBar component via the addEventListener() method, just as you've done with Button component instances.

   Note

   The unloadFile() and onVideoMetaData() methods have been excluded from the printed listing, but they are included in the Listing28-12.as and loadFile_progressbar.as files, as they are still necessary for the functionality of the script.

6. Go back to the preloader_fp8_comps_101.fla document. There's one last thing to change. Since the ProgressBar component broadcasts a "complete" event, you need to change the method name on the oLoader listener object. Select frame 1 of the actions layer, and open the Actions panel. Rename the oLoader.click() handler to:

   oLoader.complete = function(oEvent:Object):Void {
   

7. Save both documents, and test the preloader_fp8_comps_101.fla document. When you type a URL into the tFile field and click the Load Asset button, the ProgressBar component instance displays on the Stage, as shown in Figure 28-25. When the loading has finished, the ProgressBar component is removed from the movie.

Figure 28-25: The ProgressBar component in action