Flash: Scaling images using viewport

LayoutUtil from Troyworks package supply you with important tools for resizing and aligning a DisplayObject to match another DisplayObject on stage. You can find LayoutUtil source code on Google Code.

One of the handiest things is that you can align an image according to a certain rectangular area of this image, but not the whole thing. Let’s call the swf that we will be importing “content.swf”.

So you need to add a movie clip called viewport_mc to the content.swf. You can make this movie clip transparent if you don’t want it to interfere with your image. The main image in content.swf should be called slug_mc.

Now lets work with the parent swf , where you are going to import your content, lets call it “stage.swf”. In the stage.swf you need to create a movie clip which will be a basis for aligning loaded content. Let’s call this rectangular movie clip background_mc. We add a loader object to load the content.swf:

var loader:Loader;

And a movie clip object, where the imported content.swf will be stored:

var mc:MovieClip;

Now we need something new. This will be a snap object – an object storing information about the image.

var snapObject:IDisplayObjectSnapShot;

Then we load the image and call the scale() function:

loadSWF();function loadSWF(swf:String) {
 
loader = new Loader();
 
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeSWFLoadHandler);
 
var Arequest:URLRequest = new URLRequest(“content.swf”);
 
loader.load(Arequest);
 
}
 
function completeSWFLoadHandler(event:Event):void {
 
mc = MovieClip(Loader(event.target.loader).content);
 
snapObject = LayoutUtil.snapshotDimensions(mc);
 
this.addChild(mc);
 
scale();
 
}

In the scale function we use functions from LayoutUtils package. Here the viewport will be used to scale the image to the background_mc. Moreover, we have several options for scaling: scale to center, scale and crop, scale and fill.

function scale():void {
 
LayoutUtil.scaleTo(background_mc, mc, snapObject, "CENTER");//or
 
LayoutUtil.scaleTo(background_mc, mc, snapObject, "CROP");
 
//or
 
LayoutUtil.scaleTo(background_mc, mc, snapObject, "FILL");
 
}

When we scale to center, the image is scaled according to the shortest side. Scale and crop scales the longest side of the image and then crops what’s left. And the scale and fill does not take into account the original ratio of the image and just scales width and height independently.

You can download an example swf to play with the scaling functions. Here's the source FLAYou can also download the LayoutUtil.as.

LayoutUtil.as

SWF Application