Proportional Scaling Techniques in AS3

The ability to proportionally scale an object to fit within, or fill a region is a powerful technique with a variety of applications. We used this approach on Logobama to allow users to upload any size photo and automatically scale it to fit within the available space, before saving out an image from Flash.

The source code for this post includes a ScalingImage class that loads an image and responds to any stage resize event by proportionally scaling the image to fill the stage. Check out the demo and try resizing your browser.

The code behind a proportionally scaled full screen image is fairly straightforward:

// set image dimensions to match stage;
image.width = stage.stageWidth;
image.height = stage.stageHeight;

// choose the larger scale property and match the other to it;
( image.scaleX < image.scaleY ) ? image.scaleY = image.scaleX : image.scaleX = image.scaleY;

Since scaleX and scaleY are percentages, it’s just a matter of figuring out which property is larger and making the two equal.

By swapping the scale comparison from “greater than” to “less than”, the object will scale proportionally to fit the larger of the two dimensions given. This kind of calculation is handy when you need to fit items of variable dimensions into a fixed space, such as the flickr photos on the Authenticity Book Axiom Gallery.

// choose the smaller scale property and match the other to it;
( image.scaleX > image.scaleY ) ? image.scaleY = image.scaleX : image.scaleX = image.scaleY;

There are many applications for this technique, from creating image thumbnails to building a liquid grid layout. We’d love to see more examples of this approach in action, so feel free to leave a link or two in the comments.