title: AS3 proportionally scaling external image
body: <p>Currently I am using a for loop to dynamically load XML images and place them in a grid as thumbnails.  I have the arrangement set and all the data is loading smoothly, but now I need to make the images scale to small 100px x 100px thumbs in small container movieclips.  My code is as follows.</p>
  
  <pre><code>  import gs.*;
  import gs.easing.*;
  var bttnHeight:Number = 20;
  var select:Number = 0;
  
  
  var xmlLoader:URLLoader = new URLLoader();
  xmlLoader.addEventListener(Event.COMPLETE, showXML);
  xmlLoader.load(new URLRequest("testxml.xml"));
  var list_mc:Array = new Array();
  
  function showXML(e:Event):void {
   XML.ignoreWhitespace = true;
   var nodes:XML = new XML(e.target.data);
   var gallcount = nodes.gallery.length();
   var list_mc = new listitem();
  
  
   //Generate menu to select gallery
   function populateMenu():void {
    var spacing:Number = 0;
    for (var i=0; i&lt;gallcount; i++) {
     list_mc[i] = new listitem();
     list_mc[i].name = "li" + i;
     list_mc[i].y = i*bttnHeight;
     list_mc[i].gallname.text = nodes.gallery[i].attributes();
     menu_mc.addChild(list_mc[i]);
     list_mc[i].addEventListener(MouseEvent.ROLL_OVER, rollover);
     list_mc[i].addEventListener(MouseEvent.ROLL_OUT, rollout);
     list_mc[i].buttonMode = true;
     list_mc[i].mouseChildren = false;
    }
    menu_mc.mask = mask_mc;
   }
   //list_mc.mask(mask_mc);
   var boundryWidth = mask_mc.width;
   var boundryHeight = mask_mc.height;
   var diff:Number = 0;
   var destY:Number = 0;
   var ratio:Number = 0;
   var buffer:Number = bttnHeight*2;
  
  
   function findDest(e:MouseEvent):void {
    if (mouseX&gt;0 &amp;&amp; mouseX&lt;(boundryWidth)) {
     if (mouseY &gt;0 &amp;&amp; mouseY&lt;(boundryHeight)) {
      ratio = mouseY/boundryHeight;
      diff = menu_mc.height-boundryHeight+buffer;
      destY = Math.floor(-ratio*diff)+buffer/2;
     }
    }
   }
   var tween:Number = 5;
   //This creats the scroll easing
   function moveMenu() {
    if (menu_mc.height&gt;boundryHeight) {
     menu_mc.y += (destY-menu_mc.y)/tween;
     if (menu_mc.y&gt;0) {
      menu_mc.y = 0;
     } else if (menu_mc.y&lt;(boundryHeight-menu_mc.height)) {
      menu_mc.y = boundryHeight-menu_mc.height;
     }
    }
   }
  
   function rollover(e:Event):void {
    TweenLite.to(e.currentTarget.li_bg, .4, {tint:0x334499});
   }
   function rollout(e:Event):void {
    TweenLite.to(e.currentTarget.li_bg, .4, {removeTint:true});
   }
   stage.addEventListener(MouseEvent.MOUSE_MOVE, findDest);
   stage.addEventListener(Event.ENTER_FRAME, moveMenu);
  
   populateMenu();
   select = 0;
  
   //Generate thumbnails
   function genThumb():void {
    var photos = nodes.gallery[select].photo;
    var thumbframe:Array = new Array();
    var row = 0;
    var column = 0;
    var loaderArray:Array = new Array();
    for (var i=0; i&lt;photos.length(); i++) {
     thumbframe[i] = new Sprite;
     thumbframe[i].graphics.beginFill(0x0000FF);
     thumbframe[i].graphics.drawRect(0,0,100,100);
     thumbframe[i].graphics.endFill();
     thumbframe[i].y = row;
     thumbframe[i].x = column;
     loaderArray[i] = new Loader();
     loaderArray[i].load(new URLRequest(photos[i].text()));
     trace(loaderArray[i].height);
     var index = i+1;
     container_mc.addChild(thumbframe[i]);
     if (index%5 == 0) {
      row=row+120;
      column = 0;
     } else {
      column=column+120;
     }
     thumbframe[i].addChild(loaderArray[i]);
    }
   }
  
   genThumb();
  
  }
  </code></pre>
  
  <p>Both the loaders and the containers are in respective arrays.  The images load correctly, but I am at a loss for how to scale them (ultimately I'd like to integrate a tween to animate as they load as well if possible.)</p>
  
  <p>Thanks in advance for any aid!</p>