Using the Loader and ProgressBar Components


If you're thinking it takes too much effort to create your own ActionScript code for preloaders in ActionScript, you may be in luck. Flash 8 includes two User Interface components, Loader and ProgressBar, which make the task of loading external files into Flash movies at run time very simple.

You might be wondering why we even bothered to have you get your hands dirty, per se, with our earlier coverage. It's extremely important for you to be able to build your own functionality into your projects. Chances are, you'll come across situations where components won't do exactly what you need them to do. As such, you'll need to know how to build interactivity into your movie on your own. Now that you have a solid understanding of how to load external files into a Flash movie, you can have a greater appreciation for the features we're about to demonstrate.

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.

image from book
Figure 28-24: The parameters of the Loader component

Note 

Understand the image is being loaded into the Flash movie at run time, not at author-time. Even though the component displays a live preview of the image in the component on the Stage, it still needs to load the image dynamically when the Flash movie file (.swf) loads into a Web browser. In other words, the JPEG image is not being imported into the .fla file and exported with the .swf file.

On the CD-ROM 

You can find the f8_loader_100.fla document in the ch28 folder of this book's CD-ROM.

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.

On the CD-ROM 

Make a copy of the preloader_fp8_100.fla and loadFile.as documents from the ch28 folder of this book's CD-ROM. Alternatively, you can use your own version of these documents if you built it in the earlier exercise of 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

    image from book
     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, image from book       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; } 
    image from book

    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.

On the CD-ROM 

You can find the preloader_fp8_comps_100.fla and loadFile_component.as files in the ch28 folder of this book's CD-ROM.

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

    image from book
     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); } 
    image from book

    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.

image from book
Figure 28-25: The ProgressBar component in action

On the CD-ROM 

You can find the completed documents, preloader_fp8_comps_101.fla and loadFile_progressbar.as, in the ch28 folder of this book's CD-ROM.

Caution 

The ProgressBar component cannot monitor the download progress of a Flash Video (.flv) file. Moreover, using the ProgressBar and Loader components in a Flash movie adds 31 KB to the .swf file's size.




Macromedia Flash 8 Bible
Macromedia Flash8 Bible
ISBN: 0471746762
EAN: 2147483647
Year: 2006
Pages: 395

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net