Phase 2: Loading Thumbnails into the ScrollPane

In this section, you learn how to modify the Gallery.as and main_starter.fla files to load JPEG thumbnails from your PHP server.

Uploading Scripts and Images to Your Web Server

Before you can continue to modify the Flash documents for this project, you need to upload the files in the starter files/prod/wwwroot folder to a publicly accessible location on your PHP-enabled Web server. If possible, try uploading the files to the document root of the Web server. For example, if your site's domain is www.mydomain.com, try putting the PHP script files at the document root where you can load them by typing the following URL into a Web browser:

• http://www.mydomain.com/info.php

Also, if you have directory browsing enabled on your Web server, you should be able to access the images folder (and browse the image files within) by typing:

• http://www.mydomain.com/images

After you've completed the project, you can move your script files and images to other folders and modify the script parameters in the Flash movie as needed.

Tip 

You can also configure a local Web server on your computer for testing purposes. During the writing of this chapter, we used PHP5 with Microsoft IIS on Windows XP. If you test locally, make sure that http://localhost/info.php loads properly before continuing.

Building Data Properties for the Gallery Class

Once you have uploaded the wwwroot files to your own Web server, you're ready to go back to Flash production tasks. In this section, you add several data properties to the component, enabling the component to access the resize.php script and to store the JPEG file information for the Gallery.

1. Go back to the Gallery.as file you created in Phase 1. Add the bold code shown in Listing 35-3. This new code creates the following properties. Each property has an associated private variable listed at the top of the class.

   Listing 35-3: The Data Properties of the Gallery Class

    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;    function Gallery(){       init();    }    private function init():Void {       trace("Gallery.init >");    }    public function set items(aData:Array):Void {       _data = aData;    }    public function get items():Array {       return _data;    }    [Inspectable(defaultValue="",name="Server Host")]    public function set rootURL(sPath:String):Void {       _rootURL = sPath;    }    public function get rootURL():String {       return _rootURL != undefined ? _rootURL : "";    }    [Inspectable(defaultValue="resize.php")]    public function set thumbScript(sPath:String):Void {       _thumbScript = sPath;    }    public function get thumbScript():String {       return _thumbScript;    }    public function get thumbURL():String {       return rootURL +thumbScript + "?height=" + thumbHeight + "&img=";    }    [Inspectable(defaultValue=50)]    public function set thumbHeight(nHeight:Number):Void {       _thumbHeight = nHeight;    }    public function get thumbHeight():Number {       return _thumbHeight;    } } 

   • items: This property saves an array of JPEG filenames in the _data private variable. The items property is accessed later in this chapter when the thumbnails are built. Whenever information related to the active thumbnail or JPEG image displayed in the Loader component is needed, the items property can be utilized.

   • rootURL: This property stores a root path to the Web server with the PHP scripts and images. This value is appended to image URLs used throughout the class. The private variable _rootURL stores the String data associated with this property.

   • thumbScript: This property stores the name of the script file to call for dynamic resizing of the JPEG images as thumbnails. The default value is set to resize.php, the script file you've already put on your Web server.

   • thumbURL: This read-only property formats the thumbScript value with the rootURL value, the thumbHeight value for the height= variable for the resize.php script, and the img= variable required by the resize.php script. The actual image name is appended to thumbURL in a later function. The String value for this property is stored in the private variable _thumbScript.

   • thumbHeight: This property stores the height, in pixels, that should be passed to the resize.php script for the creation of the thumbnail images. The private variable _thumbHeight stores the value for this property.

   Note 

   Any property that is preceded by an [Inspectable] tag will be available in the Parameters tab of the Property inspector for the Gallery component. You won't see such properties appear unless you specify the AS 2.0 class name in the Component Definition dialog box, which we discuss later in this chapter.

   Also, while the use of the underscore (_) for private variable names used within a class is a common practice, you can name your private variables with your own custom naming convention.

2. Save the Gallery.as file.

Creating Thumbnail Holders in the Gallery Class

After you've created the data properties for the Gallery class, you're ready to add the code that makes new MovieClip holders within the nested ScrollPane instance, _csp, of the Gallery symbol.

1. In the Gallery.as file, add the bold code shown in Listing 35-4. Note that the character denotes a continuation of the same line of code. The modifications and additions are as follows:

   • init: The init() function now sets a private variable named _thumbSpacing. This variable stores the number of pixels to insert between thumbnail images. You can change this number to increase or decrease the horizontal gap between thumbnails.

   • onLoad: Because we have placed author-time instances of the User Interface components on the Stage of the Gallery symbol, we need to use the MovieClip. onLoad() handler to properly initialize any parameters with the ScrollPane (_csp) or Loader (_clo) components. Here, the stylePane() function is invoked to format the ScrollPane instance.

     Note 

     Because the Gallery class extends the MovieClip class (see the class statement at the top of the file), the onLoad function automatically invokes when the Gallery instance appears within the Flash movie at run time. You don't explicitly call the onLoad() function anywhere within the class.

   • stylePane: This function sets the background color and border style of the ScrollPane instance. More importantly, the contentPath property of the ScrollPane instance is set to paneHolder. As you see in the buildHolders() function, you need to create new MovieClip instances within the ScrollPane instance — you can't add content within the ScrollPane instance without building an empty MovieClip symbol in the movie's Library that is attached to the ScrollPane instance. You build the paneHolder symbol later in this section.

   • buildHolders: This function goes through the items property (which contains a list of all the JPEG file information) and builds nested MovieClip instances within the ScrollPane instance's content clip. Each MovieClip instance for a thumbnail (the mc instance) is created within a MovieClip named _imgColl (short for image collection), which is also a private variable for the Gallery class. This variable is accessed later for finding thumbnails and controlling their states. Each mc instance has a nested MovieClip instance named img, which is targeted with a MovieClipLoader instance named _mcl, which is also a private variable name. Each object in the items array contains a src property (mapped from the XML generated by the files.php script), which is used as the img variable value to format the URL for the resize.php script.

   • calcThumbW: This function is used within the buildHolders() function to determine how wide a thumbnail image should be based on the aspect ratio of the original image. The width and height properties of the JPEG file are retrieved from nested objects within the items array.

     Note 

     You haven't actually loaded any data into the Gallery instance back in the main_ starter.fla file. In the next few steps, you learn how to load the XML data and format it as a data provider for the items property.

   • load: This public function initiates the thumbnail creation and loading process. This is the only method that needs to be called outside of the class.

   Listing 35-4: The Thumbnail Creation Process

    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;    function Gallery(){       init();    }    private function init():Void {       trace("Gallery.init >");       _thumbSpacing = 1;    }    private function onLoad():Void {       stylePane();    }    private function stylePane():Void {       _csp.setStyle("backgroundColor", 0xFFFFFF);       _csp.setStyle("borderStyle", "none");       _csp.contentPath = "paneHolder";    }    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);          mc.idx = i;          var sURL:String = thumbURL + escape(oItem.src);          _mcl.loadClip(sURL, img);       }    }    private function calcThumbW(oFile:Object):Number {       var nWidth:Number = oFile.width;       var nHeight:Number = oFile.height;       var nFactor:Number = thumbHeight/nHeight;       return nWidth*nFactor;    }    public function load():Void {       buildHolders();    }    [Public properties omitted from this listing...] } 

   Note 

   The properties added in Listing 35-4 are not displayed in the printed listing, but the complete code is available in the Listing35-4.as file in the ch35ch35 folder of this book's CD-ROM.

2. Save the Gallery.as file.

3. Switch over to the main_starter.fla document. As we mentioned earlier in this section, you need to create an empty Movie Clip symbol named paneHolder, to use as a holder within the ScrollPane component. Choose Insert ð New Symbol. Name the new clip paneHolder, and select the Export for ActionScript box. The Identifier value should auto-fill with the value paneHolder, as shown in Figure 35-5. Click OK.

4. Once you're inside the paneHolder timeline, choose Edit ð Edit Document to go back to the Main Timeline of the Flash document. Now you're ready to load XML data from the files.php script on your Web server.

5. Create a new layer named actions, and place it at the top of the layer stack. Select frame 1 of the actions layer, and open the Actions panel (F9, or Option+F9). Add the code shown in Listing 35-5.

   Listing 35-5: Loading the XML Data

    import ascb.util.Proxy; var xmlData:XML = new XML(); var cgl:com.themakers.Portfolio.Gallery; var sHost:String = "http://localhost/"; init(); function init():Void {    xmlData.ignoreWhite = true;    xmlData.onLoad = Proxy.create(this, onFileData);    xmlData.load(sHost + "files.php?dir=images/"); } function onFileData(bSuccess:Boolean):Void {    trace("onFileData > "+ bSuccess);    var aFiles:Array = xmlData.firstChild.childNodes;    var aData:Array = new Array();    for(var i:Number = 0; i < aFiles.length; i++){       var xn:XMLNode = aFiles[i];       var oItem:Object = {          src: xn.attributes.src,          width: Number(xn.attributes.width),          height: Number(xn.attributes.height),          caption: xn.attributes.caption,          filename: xn.attributes.filename       };       aData.push(oItem);    }    cgl.items = aData;    cgl.rootURL = sHost;    cgl.thumbScript = "resize.php";    cgl.thumbHeight = 50;    cgl.load(); } 

   This code creates a new XML instance named xmlData. The cgl instance (already placed on the Stage) is typed as a Gallery class member. The sHost variable should be set to the domain name of your Web server. Do not use the localhost value unless you are testing against a Web server running on your computer.

   Note 

   When you're ready to deploy the final version of the Flash movie, you can set sHost to an empty string, or the folder path leading to the PHP script files. Also, if you have difficulties testing against your own PHP server, you can use

   • http://www.flashsupport.com/f8b/gallery/

   as the value for the sHost variable to test your Flash movie.

   The init() function uses the Proxy.create() method to delegate the onLoad() handler of the xmlData instance to the onFileData() function. When the XML data has loaded from the PHP script, the onFileData() function invokes. The sHost value is appended to the files.php?dir=images/ string in the load() method of the xmlData instance.

   The onFileData() function cycles through the returned XML data, which resembles that shown in Listing 35-1. The for() loop goes through each <img> node (xn) and maps each attribute to a property of the same name on an object (oItem) that is passed to the aData array. After each <img> node has been processed, the aData array is used for the items property of the Gallery instance, cgl.

   The rootURL, thumbScript, and thumbHeight properties of the Gallery instance are also set in the onFileData() function. Once these properties have been set, the load() function is invoked, starting the process of loading the thumbnail images.

6. Save the main_starter.fla document, and test the movie (Ctrl+Enter or z+Enter). If the PHP script files are uploaded and correctly specified in the frame 1 script, the thumbnail images load into the ScrollPane instance of the Gallery component, as shown in Figure 35-6. Note that the scroll bar for the ScrollPane instance does not automatically appear — you'll fix that in a later section.

   On the CD-ROM 

   You can find this version of the main_starter.fla file as main_101.fla in the ch35/in_process folder on this book's CD-ROM.

Figure 35-5: The paneHolder clip settings

Figure 35-6: The basic thumbnails loading into the Gallery component