0 Replies Latest reply on Jun 19, 2009 4:45 AM by LivingDeadBeat

    BitmapData class - displaying and resizing

    LivingDeadBeat

      Hi Forum,

       

      I'm trying to teach myself flex by working through the tutorial videos on here and searching the net, however i have become a bit stuck with image manipulation.

       

      I want to make a Flash solution that loads in an image and with let the user zoom in and out and pan around.  I'm having problems quite early on particularly with displaying the resized image correctly and was wondering someone could provide some advice....some simple advice.  I have development experience but very little knowledge with flash/flex components.

       

      So far i have loaded the image, and i've been playing around with the bitmapdata class and managed to resize it.  But when i output it the image is smaller but has a background that takes up the original size.  I Think this may be solved somehow with the rec property?  But i can't get it to work. 

       

      I wanted to load the image at its original size and then resize it smaller to fit a view area, then when someone wants to zoom increase the size of the displayed image with the overflow not showing.

       

      So far my output looks like this:

       

      http://img20.imageshack.us/img20/5972/47821998.jpg

       

      As you can see the image is smaller but it must still be taking up the same size or something because the canvas has scoll bars on it.  Whats happening.  Also when the image is bigger than the canvas how can i not have scroll bars and hide the overflow.  Here is my code:

       

      mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
           layout="absolute" 
           backgroundGradientAlphas="[1.0, 1.0]" 
           backgroundGradientColors="[#FBF8F8, #FBF8F8]"
           applicationComplete="Init()">
           
           <mx:Script>
                <![CDATA[
                     private var imgLoader:Loader;
                     
                     private function Init():void{
                          imgLoader = new Loader();
                          //Image location string
                          var imageURL:String = "http://www.miravit.cz/australia/new-zealand_panoramic/new-zealand_panoramic_01.jpg"
                          //Instantiate URL request 
                          var imageURLReq:URLRequest = new URLRequest(imageURL);   
                          
                          imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoadCompleted);
                          imgLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressListener);
                          
                          //Begin image load
                          imgLoader.load(imageURLReq);
                     } 
                     
                     private function imgLoadCompleted(event:Event):void{
                     //On completion of image load     
                          progressBar.visible = false;
                          
                          var scale:Number = .1;
                          
                          //Set matrix size
                          var m:Matrix = new Matrix();
                          m.scale (scale,scale);
                          
                          var bmd:BitmapData = new BitmapData(this.width, this.height);
                          bmd.draw(this.imgLoader,m);
                          
                          var bm:Bitmap = new Bitmap(bmd);
                          
                          auctionImageContainer.source = bm;
                          
                     }
                     
                     private function progressListener(event:ProgressEvent):void {
                      //Update progress indicator.
                           progressBar.setProgress(Math.floor(event.bytesLoaded / 1024),Math.floor(event.bytesTotal / 1024));
                           
                    }
                ]]>
           </mx:Script>
           
           
           <mx:Canvas height="583" width="674">
           
                
                <mx:Canvas id="cvsImage" 
                     borderColor="#BABEC0" borderStyle="solid" left="152" right="151" top="177" bottom="121">
                     
                     <mx:Image id="auctionImageContainer" />
                          
                     <mx:ProgressBar id="progressBar"
                               mode="manual"  
                                 x="84.5" y="129" 
                                 labelPlacement="center" 
                                 themeColor="#6CCDFA" color="#808485" />
                               
                </mx:Canvas>
                     
           </mx:Canvas>
           
      </mx:Application>
      

       

       

      Thanks for any help

       

           LDB