RE: [flexcoders] Image Viewer

[Alex Harui]

When you create thumbnails in your app, you have to load the original
data in order to do so.  The only way to reduce traffic is to generate
thumbnails on the server, which is more or less what Scene7 does

 

________________________________

From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of USA
Sent: Monday, August 25, 2008 2:49 AM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Image Viewer

 

Hi Guys,

I am working on image viewer in Adobe AIR. The problem I am facing is
that I am using TileList for showing the preview of images of selected
folder. But when I select any folder it loads whole of the images in
actual size which is not good. I want to write code which creates
thumbnail preview of images and is performant. I tried using bitmap to
do that but could not display the image. Here is the code of
TileListRenderer.

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox  xmlns:mx="http://www.adobe.com/2006/mxml
<http://www.adobe.com/2006/mxml> "        
            styleName="plain"
            verticalAlign="middle"
            horizontalAlign="center"
            horizontalScrollPolicy="off"
            verticalScrollPolicy="off"
            paddingBottom="10"
            paddingLeft="10"
            paddingRight="10"
            paddingTop="10"
            borderStyle="solid"
            borderColor="#B5B5B5" 
            width="130"
            height="130"
            toolTip="{data.title}"
            clipContent="true"
            creationComplete="init()"
            click="return;" xmlns:components="org.ectar.components.*">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.ListEvent;
            import mx.controls.List;

            private var _image:Bitmap;
            private var _loader:Loader;
            
            private function initializeImage(): void
            {
                _loader = new Loader();
 
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE,
imageLoadHandler)
 
_loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,
ioErrorHandler);
                var source:String = data.source;
                _loader.load(new URLRequest(source));
            }
            private function imageLoadHandler(e:Event) : void 
            {
                _image = createFilteredBmp(e.target.content.bitmapData,
this.width, this.height);
                imageCanvas.addChild(_image);
                invalidateDisplayList();
                //    clean up
                e.target.removeEventListener(Event.COMPLETE,
imageLoadHandler)
                e.target.removeEventListener(IOErrorEvent.IO_ERROR,
ioErrorHandler);
                _loader = null;    
            }
            
            private function ioErrorHandler(e:IOErrorEvent) : void {
                trace(e.text);
            }
        
            private function init(): void {
                this.addEventListener(MouseEvent.ROLL_OVER, doRollOver);
                this.addEventListener(MouseEvent.ROLL_OUT, doRollOut);
            }
            
            private function doRollOver(event:MouseEvent):void 
            {
                this.setStyle("backgroundColor","#9E9E9E");
            }
            
            private function doRollOut(event:MouseEvent):void {
                this.setStyle("backgroundColor","#5E5E5E");
            }
            /*    This function was written by Andi Skater and was found
at
 
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&;
catid=651&threadid=1288553&enterthread=y
<http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72
&catid=651&threadid=1288553&enterthread=y> 
        */
        private function createFilteredBmp(b:BitmapData,
newWidth:Number, newHeight:Number): Bitmap 
        {
            var scale:Array =
getScaleFactors(b.width,b.height,newWidth,newHeight);
            
            if(scale[0] == 1.0){
                //no scaling
                return new Bitmap(b);
            } 
            else 
            {
                var bmpDataImg:BitmapData = b;
                var matrix:Matrix = new Matrix();
                matrix.scale(scale[0], scale[0]);
                var bmp:BitmapData = new BitmapData(scale[1], scale[2]);
                bmp.draw(bmpDataImg, matrix);        
                bmpDataImg.dispose();
                return new Bitmap(bmp);        

            }
        }
        /*    This function was written by Andi Skater and was found at
 
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&;
catid=651&threadid=1288553&enterthread=y
<http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72
&catid=651&threadid=1288553&enterthread=y> 
        */        
        [ArrayElementType("Number")]
        private function
getScaleFactors(width:Number,height:Number,newWidth:Number,newHeight:Num
ber):Array{
            
            var factorX:Number = newWidth/width
            var factorY:Number = newHeight/height
            var scaleFactor:Number;
            
            scaleFactor = (factorX < factorY)? factorX:factorY;
            
            /*if (_scaleMode == "fit") {
                scaleFactor = (factorX < factorY)? factorX:factorY;
            } else {
                scaleFactor = (factorX > factorY)? factorX:factorY;
            }*/
            var scaledWidth:Number = width * scaleFactor;
            var scaledHeight:Number = height * scaleFactor;
            
            [ArrayElementType("Number")]
            var factors:Array =
[scaleFactor,scaledWidth,scaledHeight,width,height]            
            return factors
        }
        ]]>
    </mx:Script>

        <mx:Sprite id="imageCanvas" addedToStage="initializeImage()">
            
        </mx:Sprite>
</mx:VBox>

Please suggest where it is going wrong?

Regards,
Uma