Amen KAMALELDINE

Amen is an industrial informatics engineer. he studied the first four years of his education in Faculty of Engineering in Lebanon. He went to France to Continue his studies by doing the fifth year of engineering and the master TIS (Technologie Information et Système) in the same time at UTC (Université de Technologie de Compiègne). He also work as a freelancer in flash development field. He is always interessted in the new multimedia technologies.

View all articles by Amen KAMALELDINE

In this tutorial we will upgrade the PhotoViewer to display Thumbnails in the top instead of numeric labels, as we are loading all images at the begining so we can extract a thumbnail from the bitmap data of the loaded image so lets get started.

below is the result of what you will upgrade, please read the previous PhotoViewer in order to understand this one.



so first we will need to add a new simple class called MenuItem wich extends a Sprite and it has a property which hold the image position and its called imgPos

import flash.display.Sprite;
//class to display a Thumbnail
class MenuItem extends Sprite {
public var imgPos:uint;
public function MenuItem() {
  
 }
}


next we will declare a new private variable in our PhotoViewer Class which will contain the percentage of the thumbnail of the big image in order to maintain the aspect ration
//thumbnails percentage size
  private var thumbPerc:Number = .15;


in the parseXML function i commented the old code which generate the numeric menuitems which is no longer needed in this version

ok and the last thing is to add this code in the onImageLoaded function which will generate our thumbnail, after the big image is loaded we resize the loader to the desired thumbnail size and we extrat the bitmap data from the fake holder and feed the menu item take a look at the code its commented

//Create Top Thumbnail
    //resize the loader to thumbPerc%
    loader.scaleX *= thumbPerc;
    loader.scaleY *= thumbPerc;
    myBitmapData= new BitmapData(loader.width, loader.height);
    //draw it from the fakeHolder to retrieve the data of the resized image
    myBitmapData.draw(fakeHolder);
    var bm:Bitmap = new Bitmap(myBitmapData);
    var menuItem:MenuItem = new MenuItem();
    menuItem.name = "menuItem" + imgPos;
    bm.smoothing = true;
    menuItem.addChild(bm);
    menuHolder.addChild(menuItem);
    if (imgPos > 0) {
     //get the previous menu item
     var dspObj:DisplayObject = menuHolder.getChildAt(imgPos-1);
     //set the new item next to the old item with 2px space
     menuItem.x = dspObj.x + dspObj.width + 2;
     //call the resize to align the menuHolder
     resizeHandler(null);
     
    }
    //save the menu item position
    menuItem.imgPos = imgPos;
    //
    menuItem.mouseChildren=false
    //enable the button mode and use the hand cursor
    menuItem.useHandCursor=true;
    menuItem.buttonMode=true;
    //add the on click event
    menuItem.addEventListener(MouseEvent.CLICK,handleItemClick,false,0,true);


and thats it a new PhotoViewer with dynamic thumbnails

hope that this will help you out

cheers