BitmapData class - displaying and resizing

Question

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:
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

Answer 1

MediaTracker isn't about the number of images. I've been bitten in the ass by this before -- images seem to magically refuse to appear, or only appear on reloads, and it's because paint() got called before the image was loaded. MediaTracker fixed it.
I don't know what you mean about images not working in constructors though. You can do that.
Here's some code that works to display an image (for me anyway):
import java.awt.*;
import java.awt.event.*;
import java.awt.image.*;
public class Test {
  public static void main(String[] argv) {
    Image i = Toolkit.getDefaultToolkit().createImage("image.jpg");
    Frame f = new Frame("Test");
    MediaTracker mt = new MediaTracker(f);
    mt.addImage(i, 1);
    try {
      mt.waitForAll();
    } catch (InterruptedException e) {
      e.printStackTrace();
    f.addWindowListener(new WindowAdapter() {
      public void windowClosing(WindowEvent e) {
        System.exit(0);
    f.add(new Displayer(i));
    f.pack();
    f.setVisible(true);
  private static class Displayer extends Canvas {
    private Image i;
    Displayer(Image i) { this.i = i; }
    public void paint(Graphics g) {
      g.drawImage(i, 0, 0, null);
    public Dimension getPreferredSize() {
      return new Dimension(i.getWidth(null), i.getHeight(null));
    public Dimension getMinimumSize() { return getPreferredSize(); }
}