AS3 proportionally scaling external image

Question

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.

  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<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>0 && mouseX<(boundryWidth)) {
   if (mouseY >0 && mouseY<(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>boundryHeight) {
   menu_mc.y += (destY-menu_mc.y)/tween;
   if (menu_mc.y>0) {
    menu_mc.y = 0;
   } else if (menu_mc.y<(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<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();

}

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.)

Thanks in advance for any aid!

Answer 1

You look like you need to scale your bitmaps into a 100x100 square. You'll need to wait until the loader has completed loading to do that because until then you won't know what the dimensions of the item are.

When you create your loader, add an event listener, like this:

loaderArray[i].contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);

and then add this function:

function onLoadComplete(event:Event):void
{
    var info:LoaderInfo = LoaderInfo(event.currentTarget);
    info.removeEventListener(Event.COMPLETE);

    var loader:Loader = info.loader;
    var scaleWidth:Number = 100 / loader.width;
    var scaleHeight:Number = 100 / loader.height;

    if (scaleWidth < scaleHeight)
        loader.scaleX = loader.scaleY = scaleWidth;
    else
        loader.scaleX = loader.scaleY = scaleHeight;
}

This may be a bit complicated, but all it really does is clean up the event listener that you had added, and find the dimensions of the loader (which it can get now because it's finished loading), and scale the loader appropriately.

If you need it to be centered within your thumbnail, add this to the bottom of the onLoadComplete method:

    loader.x = (100 - loader.width) * 0.5;
    loader.x = (100 - loader.height) * 0.5;

or you need it to take up the whole thumbnail and cut off the edges, change it to this (the inequality is the other-way around)

    if (scaleWidth > scaleHeight)
        loader.scaleX = loader.scaleY = scaleWidth;
    else
        loader.scaleX = loader.scaleY = scaleHeight;

and add this:

    var shape:Shape = new Shape();
    var g:Graphics = shape.graphics;
    g.beginFill(0x00FF00);
    g.drawRect(0, 0, 100, 100);
    g.endFill();
    loader.mask = g;

I haven't tested this, so there may be a few glitches, but hopefully it gives you the right idea.