Phase 4: Enhancing the Thumbnail and Image States


Right now, you have a Gallery component that can load clickable thumbnails that load fullsize JPEG images. While this functionality is critical to the success of the Gallery component, the same functionality could be accomplished in a regular HTML page with less effort. Let's add some features that are truly within the domain of Flash technology.

Framing the Selected Thumbnail with the BevelFilter Class

In this section, you learn how to add the new Flash Player 8 bevel filter to the selected thumbnail image.

  1. Go back to the Gallery.as file. Add the code shown in Listing 35-8. Note that the public function set selectedIndex should already be defined in your code — add the new code shown in bold. This code adds two new functions, and extends the functionality of the selectedIndex setter function:

    • frameThumb: This function creates a new BevelFilter instance named bf for the selected thumbnail, which is retrieved from the _imgColl holder within the ScrollPane instance. (_imgColl is set in the buildHolders() function.) The bf instance is assigned to the filters array of the selected thumbnail, and the alpha of the clip is set to 100%.

      Tip 

      We use the default values of the BevelFilter class. If you search the Flash 8 Help panel for "BevelFilter class," you can find more information on changing the look and feel of the filter with the thumbnail images, using BevelFilter properties such as distance and angle.

    • dimThumb: This function retrieves the previously selected thumbnail, removes any filters, and sets the alpha of the previous thumbnail to 75%.

    • selectedIndex: The setter function for the selectedIndex property now invokes the dimThumb() function with the existing _selectedIndex value before a new _selectedIndex value is assigned. After a new value has been assigned, the frameThumb() function is invoked. Remember, the selectedIndex property is the heart of the Gallery class — any change to the selectedIndex value propagates to other functions within the class.

    Listing 35-8: Framing the Selected Thumbnail

    image from book
     private function frameThumb():Void {    var mc:MovieClip = _imgColl["mc" + selectedIndex];    var bf:BevelFilter = new BevelFilter();    mc.filters = [bf];    mc._alpha = 100; } private function dimThumb(nIdx:Number):Void {    var mc:MovieClip = _imgColl["mc" + nIdx];    mc.filters = [];    mc._alpha = 75; } public function set selectedIndex(nIdx:Number):Void {    if(_selectedIndex != nIdx){       if(_selectedIndex != undefined) dimThumb(_selectedIndex);       _selectedIndex = nIdx;       frameThumb();       loadImage();    } } 
    image from book

    Note 

    The Listing35-8.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 the movie loads, the first thumbnail appears with a bevel border. If you click another thumbnail, the previously selected thumbnail's bevel is removed and the alpha is reduced, as shown in Figure 35-9.

image from book
Figure 35-9: The BevelFilter applied to the thumbnail image

Creating a Loading Transition with the BitmapData and BlurFilter Classes

Let's continue the fun with Flash filters! In this section, you learn how to use the BitmapData class to make a copy of the thumbnail image over the Loader component area. The thumbnail, of course, is not as large as the full-size JPEG image. As such, the thumbnail image is stretched and pixilated when it's set to the same width and height of the full-size image. You use the BlurFilter class to smooth the thumbnail's pixilation. The filter's strength is inversely proportional to the loaded percent of the full-size JPEG image. As the full-size JPEG image loads into the Loader component, the intensity of the BlurFilter instance is gradually diminished.

  1. Go back to the Gallery.as file and add the bold code shown in Listing 35-9. This code modifies existing functions and adds a few new ones:

    • init: This function uses two new private variables: _blurStrength indicates the maximum blur applied to the copied thumbnail when the copy is made, and _overlay is a new MovieClip instance that holds the copied thumbnail in the overlayThumb() function. The position of the _overlay instance is set to the same X and Y position as the _clo instance.

    • onLoad: This handler is modified to add two event listeners to the Loader component, _clo. The "progress" event is broadcasted from the Loader component as new bytes of a loaded full-size JPEG image arrive into the Flash movie. This event is captured by the onImgProgress() function. The "complete" event is broadcasted by the Loader component when the full-size JPEG image has fully loaded into the Flash movie. This event is captured by the onImgComplete() function.

    • overlayThumb: This function creates a bitmap copy of the selected thumbnail, scales the copy to fit within the dimensions of the Loader component, and sets the initial blur of the scaled copy to a maximum intensity. The overlayThumb() function is invoked by the selectedIndex property when a new thumbnail is clicked. Here, the new BitmapData class is used to create the copy of the loaded thumbnail JPEG image. The new bitmap is attached to a new MovieClip holder named _bitmap within the _overlay instance. The _overlay instance is then resized using the same procedure that the Loader component uses to fit loaded images within its display area.

    • blurOverlay: This function creates the BlurFilter instance responsible for blurring the copied thumbnail image. The function requires one parameter: the percent loaded of the full-size JPEG image. If the loading process has just started, the percent loaded is equal to 0. This value is remapped to a blur intensity value (nBlur), as indicated by the _blurStrength variable set in the init() function. As more bytes of the JPEG image load into the movie, the nBlur value is reduced. The BlurFilter instance is applied to the filters array of the _overlay instance.

    • onImgProgress: This handler is invoked whenever the Loader component broadcasts a "progress" event. When this event occurs, the loaded percent of the JPEG is retrieved with the percentLoaded property of the Loader component and passed to the blurOverlay() function.

    • onImgComplete: When the Loader component broadcasts the "complete" event, the onImgComplete() function is invoked. The "complete" event signals that the full-size JPEG image has loaded completely into the Flash movie. At this point, the _bitmap instance within the _overlay instance can be removed to reveal the full-size JPEG below it.

    • selectedIndex: The overlayThumb() function is added to the setter function for the selectedIndex property. Whenever the user clicks a new thumbnail image, the process of copying, scaling, and blurring the thumbnail is started.

    Listing 35-9: Copying and Blurring the Thumbnail Image

    image from book
     private var _blurStrength:Number; private var _overlay:MovieClip; private function init():Void {    _thumbSpacing = 1;    _blurStrength = 20;    _overlay = createEmptyMovieClip("_overlay", 10);    _overlay._x = _clo._x;    _overlay._y = _clo._y; } private function onLoad():Void {    stylePane();    _clo.addEventListener("progress", Proxy.create(this, onImgProgress));    _clo.addEventListener("complete", Proxy.create(this, onImgComplete)); } private function overlayThumb():Void {    var mc:MovieClip = _thumb;    var nW:Number = mc._width;    var nH:Number = mc._height;    var bmd:BitmapData = new BitmapData(nW, nH);    bmd.draw(mc);    var mcH:MovieClip = _overlay.createEmptyMovieClip("_bitmap", 1);    mcH.attachBitmap(bmd. 1);    var nLW:Number = _clo.width;    var nLH:Number = _clo.height;    var nFactor:Number = nH >= nW ? nLH/nH : nLW/nW;    _overlay._xscale = _overlay._yscale = nFactor*100;    _overlay._x = _clo._x + ((_clo.width - _overlay._width)/2);    _overlay._y = _clo._y + ((_clo.height - _overlay._height)/2);    blurOverlay(0); } private function blurOverlay(nPL:Number):Void {    var n:Number = (nPL*(_blurStrength/10))/10;    var nBlur:Number = _blurStrength - n;    var bf:BlurFilter = new BlurFilter(nBlur, nBlur, 3);    _overlay.filters = [bf]; } private function onImgProgress(oEvent:Object):Void {    var clo:mx.controls.Loader = oEvent.target;    blurOverlay(clo.percentLoaded); } private function onImgComplete(oEvent:Object):Void {    _overlay._bitmap.removeMovieClip(); } public function set selectedIndex(nIdx:Number):Void {    if(_selectedIndex != nIdx){       if(_selectedIndex != undefined) dimThumb(_selectedIndex);       _selectedIndex = nIdx;       overlayThumb();       frameThumb();       loadImage();    } } 
    image from book

    Note 

    The Listing35-9.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 you click a thumbnail image, a copy of the thumbnail is created, scaled, blurred, and positioned above the Loader component. The blur intensity is minimized as the full-size JPEG loads into the movie. Figure 35-10 shows a snapshot of this animated transition.

image from book
Figure 35-10: The blurred copy of the thumbnail image

Transitioning Thumbnail States with the Tween and ColorMatrixFilter Classes

The thumbnails in the ScrollPane component can also use a scripted tween to fade to a desaturated state as the user views each full-size image. In this section, you see how the Tween class can programmatically update the thumbnail images. You can create a Tween instance by using the following syntax:

 import mx.transitions.Tween; var mc:MovieClip; var tw:Tween = new Tween(mc, "_x", mx.transitions.easing.Regular.easeOut, image from book    mc._x, mc._x + 100, 5, true); 

The Tween constructor accepts seven arguments, in the following order:

  • target: The first argument specifies the object whose property will be manipulated by the Tween instance. You can pass any object reference you want, including a TextField, MovieClip, or Object reference.

  • property name: The second argument indicates which property of the target object will be updated by the Tween instance. This argument should be a String value. For example, to control a MovieClip instance's X position, pass a value of "_x" as the second argument.

  • easing class: The third argument specifies the type of tween you'd like to use. You can use a variety of easing classes. If you do not require any special type of easing with the tween, you can specify a null value.

  • starting value: The fourth argument indicates the starting value that the Tween instance should use. You can use any numeric value, such as the current X position or alpha value of a MovieClip instance.

  • ending value: The fifth argument specifies the finish value for the Tween instance. You can use any numeric value. When the Tween instance reaches this value, the onMotionFinished handler for any listener assigned to the Tween instance is invoked.

  • duration: The sixth argument indicates how long the tween should last. This numeric value can be specified as seconds or frames.

  • time unit: The seventh and final argument determines the unit of measure for the duration argument, as a Boolean value. If you pass true as the last argument, the unit of measure is seconds. If you pass false, the unit of measure is frames.

  1. Go back to the Gallery.as file, and add the code shown in Listing 35-10. This code replaces the existing dimThumb() function with a new set of actions to utilize the Tween class.

    Listing 35-10: Tweening the Thumbnail States

    image from book
     private function dimThumb(nIdx:Number):Void {    var mc:MovieClip = _imgColl["mc" + nIdx];    if(mc.tweens != undefined) clearTweens(mc);    var twSaturation:Tween = new Tween(mc, "thumbSaturation", image from book       mx.transitions.easing.Regular.easeOut, 0, -100, 1, true);    var twAlpha:Tween = new Tween(mc, "_alpha", image from book       mx.transitions.easing.Regular.easeOut, mc._alpha, 75, 1, true);    twSaturation.addListener(mc);    twAlpha.addListener(mc);    mc.tweens = [twSaturation, twAlpha];    mc.watch("thumbSaturation", Proxy.create(this, onThumbSaturation), mc);    mc.onMotionFinished = Proxy.create(this, onTweenFinish, mc); } private function onThumbSaturation(sProp:String, oldVal:Number, image from book    newVal:Number, mc:MovieClip):Void {    mc.filters = [EasyFilter.saturate(newVal)];    updateAfterEvent(); } private function onTweenFinish(tw:Tween, mc:MovieClip):Void {    for(var i:Number = 0; i < mc.tweens.length; i++){       if(mc.tweens[i] == tw) mc.tweens.splice(i, 1);    }    if(mc.tweens.length < 1) delete mc.tweens; } private function controlTweens(mc:MovieClip, sAction:String):Void {    for(var i:Number = 0; i < mc.tweens.length; i++){       mc.tweens[i][sAction]();    } } private function clearTweens(mc:MovieClip):Void {    controlTweens(mc, "stop");    delete mc.tweens; } 
    image from book

    • dimThumb: This function is invoked from the selectedIndex property, just as it was in earlier sections of this project. Two new Tween instances are created for the thumbnail instance. The first Tween instance named twSaturation is responsible for modifying the saturation value of the thumbnail instance. The Regular.easeOut static class is specified as the easing class for both Tween instances. The starting value for the saturation tween is 0 (no change) and the ending value is -100 (color removed, desaturated). The duration of both tweens is one second. The twAlpha instance animates the current alpha of the thumbnail instance to the muted 75% used earlier. The thumbnail instance is added as a listener to both Tween instances; therefore, the onMotionFinished() handler of the thumbnail instance is fired when the tweens finish. The onTweenFinish() function of the Gallery class is delegated for this handler. Because saturation values are not a directly accessible value to use with the Tween class, a new property named thumbSaturation is created for the thumbnail instance. The watch() method can detect any changes to this property on the instance, and the Proxy.create() method is specified as the event handler for the watch() method.

    • onThumbSaturation: This function is invoked whenever the saturation tween (twSaturation) updates the thumbSaturation property of the thumbnail instance. Here, the new value created by the tween is passed to the EasyFilter. saturate() method to create a new ColorMatrixFilter instance. We discuss the EasyFilter.saturate() method in greater detail at the start of this chapter.

    • onTweenFinish: This handler is invoked by each Tween instance when the respective tween has completed. Each tween is removed from a tweens array stored within the thumbnail instance.

    • controlTweens, clearTweens: These functions manage the playback of the Tween instances. You add more functions later in this chapter that take advantage of these functions.

    Note 

    The Listing35-10.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). After the thumbnail images load, click a new thumbnail in the ScrollPane component. The previously selected thumbnail desaturates and fades to 75% opacity.

Setting the Image Caption

After you have the full-size JPEG image loading into the Loader component, you're ready to populate the _tCaption TextField instance, which you copied into the Gallery symbol earlier in this chapter. The JPEG files provided in the starter files and finished files folders have had metadata added to them. The caption metadata is read by the JPEG-Meta.php script on the server and inserted into the XML data sent to the Flash movie with the files.php script.

  1. Go back to the Gallery.as file and add the bold code shown in Listing 35-11. Add the new private variable to the list of existing private variables at the top of the class file, modify the existing init() and loadImage() functions, and add the new displayCaption() function below the last private function in the class file.

    Listing 35-11: The displayCaption() Function

    image from book
     private var _captionSpacing:Number;    private function init():Void {    _thumbSpacing = 1;    _blurStrength = 20;    _captionSpacing = 5;    _overlay = createEmptyMovieClip("_overlay", 10);    _overlay._x = _clo._x;    _overlay._y = _clo._y; } private function loadImage():Void {    var nIdx:Number = selectedIndex;    var oItem:Object = items[nIdx];    _clo.contentPath = rootURL + oItem.src;    displayCaption(oItem.caption); } private function displayCaption(sText:String):Void {    _tCaption.text = sText;    _tCaption._x = _overlay._x;    _tCaption._y = _overlay._y + _overlay._height + _captionSpacing; } 
    image from book

    • init: The new _captionSpacing variable stores the gap, in pixels, that should buffer the top of the _tCaption instance and the bottom of the full-size JPEG image.

    • loadImage: After the full-size JPEG image starts to load into the Loader component, the displayCaption() function is invoked to show the image's caption. The caption text is stored in the caption property of the current object within the items array, as described by the XML document delivered by the files.php script.

    • displayCaption: This function populates the _tCaption instance with the new caption text and positions the field below the lower left corner of the image.

    Note 

    The Listing35-11.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. Return to the main_starter.fla document, and test it (Ctrl+Enter or z+Enter). When a new full-size JPEG image is loaded, its caption text (if available) displays below the image, as shown in Figure 35-11.

image from book
Figure 35-11: The caption text below the JPEG image

Completing the Thumbnail Button Handlers

The thumbnail functionality is nearly complete. In its current state, the thumbnail images, once clicked, remain muted — even when the user rolls over a previously selected thumbnail. In this section, you add onRollOver and onRollOut handlers to each thumbnail instance.

  1. Go back to the Gallery.as file, and add the bold code shown in Listing 35-12.

    Listing 35-12: The onRollOver() and onRollOut() Thumbnail Handlers

    image from book
     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]) image from book          + _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);       mc.onRollOver = Proxy.create(this, onThumbOver, mc);       mc.onRollOut = Proxy.create(this, onThumbOut, mc);       var sURL:String = thumbURL + escape(oItem.src);       _mcl.loadClip(sURL, img);    } } private function onThumbOver(mc:MovieClip):Void {    if(mc != _thumb){       if(mc.tweens.length > 0) controlTweens(mc, "stop");       var aFilters:Array = new Array();       for(var i:Number = 0; i < mc.filters.length; i++){          aFilters.push(mc.filters[i]);       }       mc.existingProps = { filters: aFilters, alpha: mc._alpha};       mc.filters = [];       mc._alpha = 100;       }    } private function onThumbOut(mc:MovieClip):Void {    if(mc.tweens.length > 0 && _thumb != mc){         controlTweens(mc, "resume");    } else {       mc.filters = mc.existingProps.filters;       mc._alpha = mc.existingProps.alpha;    } } public function set selectedIndex(nIdx:Number):Void {    if(_selectedIndex != nIdx){       if(_selectedIndex != undefined) dimThumb(_selectedIndex);       _selectedIndex = nIdx;       overlayThumb();       frameThumb();       loadImage();       _thumb.existingProps = { filters: _thumb.filters, alpha: _thumb._alpha };    } } 
    image from book

    • buildHolders: This function, which creates the original thumbnail holders, is modified to assign onRollOver and onRollOut handlers to each thumbnail instance (mc). The Proxy.create() method delegates these handlers to the onThumbOver and onThumbOut functions of the Gallery class.

    • onThumbOver: This handler checks to see if any tweens are active on the thumbnail when the rollover event occurs. If there are any active tweens, they are paused. Any active filters applied to the instance are stored in a new property named existingProps. This property is used in onThumbOut to restore the last state of the button. Any filters on the thumbnail instance are removed, and the alpha is set to 100%. Note that these actions are only applied to a thumbnail instance if it is not the active thumbnail.

    • onThumbOut: This handler resumes any active tweens that may have been in progress when the user rolled over the thumbnail instance. Any filters that were applied to the instance before the rollover event occurred are also re-applied to the clip.

    • selectedIndex: When a thumbnail is initially selected with the selectedIndex property, the existingProps property is initialized with the filters that are applied to the selected thumbnail.

  2. Save the Gallery.as file.

  3. Return to the main_starter.fla file, and test it (Ctrl+Enter or z+Enter). After the thumbnail images load, start clicking each one. After the previously selected thumbnail fades out, roll back over the thumbnail. The original saturation and alpha of the thumbnail should display; when you roll off the thumbnail, the desaturated view of the thumbnail returns.

Building a Right-Click Download Menu Item for the Full-Size JPEG

To enable the user to download the full-size JPEG image, you use the ContextMenu class to add a new menu item to the Flash Player's contextual menu that appears when the user rightclicks (or Control+clicks on Mac) the Loader component display area.

  1. Go back to the Gallery.as file, and add the bold code shown in Listing 35-13. This code creates or modifies the following functions:

    • onLoad: This handler, which is invoked automatically when the Gallery instance loads in the Flash movie, now invokes the addContextMenu() function.

    • addContextMenu: This function creates a new instance of the ContextMenu class. The built-in items of the Flash Player contextual menu (such as Zoom In, Zoom Out, and so) are disabled for this new menu. A new custom menu item is created, named "Download this image." When the user selects this menu item, the downloadImage() function is invoked. The new menu is then assigned to the Loader component, _clo.

    • downloadImage: This function uses the new Flash Player 8 FileReference API to enable the user to download a file from the Web server. The current JPEG file URL and JPEG filename values are retrieved from the items array, and passed to the download() method of the fileRef instance.

    Listing 35-13: Utilizing the FileReference API

    image from book
     private function onLoad():Void {    stylePane();    addContextMenu();    _clo.addEventListener("progress", Proxy.create(this, onImgProgress));    _clo.addEventListener("complete", Proxy.create(this, onImgComplete)); } private function addContextMenu():Void {    var cm:ContextMenu = new ContextMenu();    cm.hideBuiltInItems();    cm.customItems.push(new ContextMenuItem("Download this image", image from book       Proxy.create(this, downloadImage)));    _clo.menu = cm; } private function downloadImage():Void {    var fileRef:FileReference = new FileReference();    var oItem:Object = items[selectedIndex];    var sURL:String = rootURL + oItem.src;    if(!fileRef.download(sURL, oItem.filename)) {       trace("dialog box failed to open.");    } } 
    image from book

  2. Save the Gallery.as file.

  3. Go back to the main_starter.fla document, and test it (Ctrl+Enter or z+Enter). When a full-size JPEG image loads into the Flash movie, right-click (or Control+click on Mac) the JPEG image. The contextual menu displays the "Download this image" option, as shown in Figure 35-12. If you select this menu item, a Save dialog box appears, enabling you to save the JPEG file to your computer.

image from book
Figure 35-12: The new right-click menu item




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