Phase 3: Displaying the Full-Size JPEG Image

Since the XML data provided by the files.php script completely describes each JPEG image in the chosen Web folder, your work with the main_starter.fla document is finished. You complete the remaining changes within the Gallery class file.

Loading the Full-Size Image

After you have the thumbnail JPEG images loading from the resize.php script, you're ready to add more functionality to each MovieClip instance containing a JPEG thumbnail. The mc instance created in the for() loop of the buildHolders() function is the primary instance to target for adding button behaviors.

You also need to track which thumbnail is currently selected. Just as the List component has a selectedIndex property indicating which entry in the list is active, the Gallery component needs a selectedIndex property to indicate which thumbnail has been clicked by the user.

1. Go back to the Gallery.as file, and add the bold code shown in Listing 35-5. This code has the following changes:

   • buildHolders: This function now creates an onRelease() handler for each mc instance holding a JPEG thumbnail image. The onRelease() handler is delegated to the onThumbClick() function of the Gallery class. A reference to the mc instance is passed to the Proxy.create() method in order for the onThumbClick() handler to identify which thumbnail image has been clicked. Also, the first mc instance to be created in the for() loop is set as the value of a new private variable named _thumb. This variable can be referenced in later functions to also identify which mc instance was clicked last.

   • onThumbClick: This function is invoked whenever the user clicks a thumbnail image in the ScrollPane instance. When a thumbnail is clicked, the _thumb variable is set to the passed mc reference of the function. Then, the selectedIndex property is set to that clip's idx value. Remember, the for() loop of the buildHolder() function assigns an idx value to each thumbnail mc instance. The idx value matches the index of the corresponding JPEG data in the items array.

   • loadImage: This function does the work of changing the contentPath property of the Loader instance, _clo, to the full-size JPEG image URL. The selectedIndex value is used to look up the JPEG file data from the items array. The src property, as built by the script in Listing 35-6, contains the URL to the JPEG image. This value is appended to the rootURL value and then set as the new contentPath property value. The loadImage() function, by design, is only invoked by the selectedIndex setter function.

     Listing 35-6: Tracking the Active Thumbnail

      import ascb.util.Proxy; import flash.display.BitmapData; import flash.filters.*; import flash.net.FileReference; import mx.transitions.Tween; import com.themakers.Effects.EasyFilter; class com.themakers.Portfolio.Gallery extends MovieClip {    private var _csp:mx.containers.ScrollPane;    private var _clo:mx.controls.Loader;    private var _tCaption:TextField;    private var _data:Array;    private var _rootURL:String;    private var _thumbScript:String;    private var _thumbHeight:Number;    private var _thumbSpacing:Number;    private var _mcl:MovieClipLoader;    private var _imgColl:MovieClip;    private var _thumb:MovieClip;    private var _selectedIndex:Number;    function Gallery(){       init();    }    private function init():Void {       [No changes to this function]    }    private function onLoad():Void {       [No changes to this function]    }    private function stylePane():Void {       [No changes to this function]    }    private function buildHolders():Void {       var mcH:MovieClip =  _csp.content;       _mcl = new MovieClipLoader();       _mcl.addListener(this);       var aFiles:Array = items;       var nWidth:Number = 0;       var mcC:MovieClip = _imgColl = mcH.createEmptyMovieClip("_imgColl", 1);       for(var i:Number = 0; i < aFiles.length; i++){          var oItem:Object = aFiles[i];          var mc:MovieClip =  mcC.createEmptyMovieClip("mc" + i, i+1);          mc._x = (i == 0) ? 0 : mcC["mc" + (i-1)]._x +              calcThumbW(aFiles[i-1]) + _thumbSpacing;          var mcD:MovieClip = mc.createEmptyMovieClip("disp", 1);          var imgH:MovieClip = mcD.createEmptyMovieClip("imgH", 1);          var img:MovieClip = imgH.createEmptyMovieClip("img", 1);          if(i == 0) _thumb = mc;          mc.idx = i;          mc.onRelease = Proxy.create(this, onThumbClick, mc);          var sURL:String = thumbURL + escape(oItem.src);          _mcl.loadClip(sURL, img);       }    }    private function calcThumbW(oFile:Object):Number {       [No changes to this function]    }    private function onThumbClick(mc:MovieClip):Void {       _thumb = mc;       selectedIndex = mc.idx;    }    private function loadImage():Void {       var nIdx:Number = selectedIndex;       var oItem:Object = items[nIdx];       _clo.contentPath = rootURL + oItem.src;    }    public function load():Void {       [No changes to this function]    }    public function set selectedIndex(nIdx:Number):Void {       if(_selectedIndex != nIdx){          _selectedIndex = nIdx;          loadImage();       }    }    public function get selectedIndex():Number {       return _selectedIndex;    }    [Other public properties have been omitted from this listing] } 

   • selectedIndex: This pair of setter/getter functions creates a new property named selectedIndex. This property tracks which index of the items array is currently selected. Whenever the user clicks a thumbnail button, the selectedIndex value is updated and the loadImage() function is invoked.

2. Save the Gallery.as file.

3. Go back to the main_starter.fla document, and test it (Ctrl+Enter or z+Enter). After the thumbnails load, click the first thumbnail image. The full-size JPEG then loads into the Loader component of the Gallery component, as shown in Figure 35-7.

Figure 35-7: The full-size JPEG image for the first thumbnail

Updating the Scroll Bar and Auto-Loading the First Image

As Figures 35-6 and 35-7 illustrate, the scroll bar of the nested ScrollPane instance (_csp) is not visible as more thumbnails load into the instance. The ScrollPane instance needs to be told when to redraw its UI elements — the ScrollPane component does not automatically detect when more content has been added beyond its visible frame.

1. Go to the Gallery.as file, and add the functions shown in Listing 35-7. Place these functions after the last private function, loadImage, and before the public functions. This code contains two new functions:

   • onLoadInit: This function is an event listener for the MovieClipLoader instance, _mcl, created in the buildHolders() function. Whenever a thumbnail image has finished loading, the onLoadInit() function is automatically invoked by the _mcl instance. A reference to the MovieClip holder for the image is passed to the function, where the idx value assigned to the outer mc holder for the nested thumbnail holder is accessed. When the first thumbnail in the ScrollPane instance loads, the selectedIndex property is set to 0, which invokes all of the code in the public function set selectedIndex() area of the class file. This process sets the loading of the first full-size JPEG image into action. If the very last thumbnail is loaded into the ScrollPane instance, the updateScroller() function is invoked.

     Tip 

     You can place the updateScroller() action in the onLoadInit() handler outside of the if/else statement to force the ScrollPane instance to update after every thumbnail load. If you have several images in your Web folder, you might wait a long time before the last thumbnail loads.

   • updateScroller: This function fires one action: _csp.redraw(true);. This action forces the ScrollPane instance to re-examine its contents and determine if a vertical and/or horizontal scroll bar is necessary.

   Listing 35-7: The onLoadInit() and updateScroller() Functions

    private function onLoadInit(mc:MovieClip):Void {    var nIdx:Number = mc._parent._parent._parent.idx;    if(nIdx == 0){       selectedIndex = 0;    } else if(nIdx == items.length - 1){       updateScroller();    } } private function updateScroller():Void {    _csp.redraw(true); } 

   Note 

   The Listing35-6.as file in the ch35 folder of this book's CD-ROM shows the new code within the entire Gallery class file.

2. Save the Gallery.as file.

3. Go back to the main_starter.fla document and test it (Ctrl+Enter or z+Enter). When all of the thumbnails have loaded, the horizontal scroll bar for the ScrollPane instance should display, enabling you to scroll to more thumbnail images. Refer to Figure 35-8.

Figure 35-8: The updated ScrollPane instance