We’ve all been there. You’re building an image gallery and you need to create consistently sized thumbnails from a set of images, of various sizes and orientations and with differing aspect ratios – or you need a fullscreen background which always fills the stage, regardless of a user’s screen resolution and browser window size – or maybe you just need to fit a DisplayObject into a rectangular area whilst maintaining the correct proportions of the original image.

Introducing DisplayUtils

Since this is a common task, one that I find myself coding over and over, I’ve whipped up a little class called DisplayUtils which will help with the scenarios mentioned above and more.

The main method in DisplayUtils is FitIntoRect. FitIntoRect can work in several ways. You can use it to resize a DisplayObject to fit inside a rectangle, or you can use it to generate a transformation matrix, which can be applied to an object or used with the BitmapData.draw method to create thumbnail previews, or both. There is also another method called createThumb, which uses fitIntoRect to quickly and easily create nicely cropped and scaled thumbnails from a source image with any aspect ratio.

Have a play with the demo above to see what you can do with these methods.

Using DisplayUtils and fitIntoRect

There are several parameters to control how fitIntoRect works. Here’s what you can pass to the method:

  • displayObject : The DisplayObject to resize
  • rectangle : A Rectangle object representing the space the DisplayObject should fit into.
  • fillRect : Whether the DisplayObject should be transformed to fill the entire rectangle, or whether it should fit completely within it.
  • align : The alignment of the DisplayObject within the rectangle, for example Top Left or Middle.
  • applyTransform : Whether the calculated transformation matrix should be applied to the DisplayObject within the fitIntoRect method. If false, the DisplayObject will not be modified, but the Matrix returned by the fitIntoRect method can be used to transform objects or modify the draw command on a BitmapData object.

The download includes all necessary classes as well as several examples of how to use the fitIntoRect method. Here are some code snippets for getting started with…

Example Usage

Fit a DisplayObject into a Rectangle

var area:Rectangle = new Rectangle( 0, 0, 200, 100 );
DisplayUtils.fitIntoRect( myDisplayObject, area, true, Alignment.MIDDLE );

Create a fullscreen background image

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

function onStageResized( event:Event = null ):void
	var area:Rectangle = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight );
	DisplayUtils.fitIntoRect( myDisplayObject, area, true, Alignment.MIDDLE );

stage.addEventListener( Event.RESIZE, onStageResized );

Create a thumbnail

var thumb:Bitmap = DisplayUtils.createThumb( myBitmap.bitmapData, 100, 100, Alignment.MIDDLE, true );
addChild( thumb );


You can download the DisplayUtils class, as well as the Alignment class, which simply contains enumeration for the various alignment options when using fitIntoRect and createThumb.

A example of some of the uses discussed above is also available in the zip.

Download: DisplayUtils
Posted on 25 May 2009
6 Trackbacks


Fit DisplayObject into Rectangle was posted on May 25th 2009 in the category Code / Actionscript 3.0, Code, Flash, Open Source and tagged; , , , , .

You can Leave a comment.

Warning: file_get_contents(http://search.twitter.com/search.atom?q=from:soulwire&rpp=1) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.0 410 Gone in /home/soulwire/webapps/soulwire_blog/wp-content/themes/soulwire/functions.php on line 203


44 Responses to Fit DisplayObject into Rectangle

Leave a Reply

Pingbacks / Trackbacks

  1. 7 years ago Classe DisplayUtils by Soulwire | Flash-Square

    [...] Encore une classe très utile, et très bien présentée, sur l’excellent blog de Soulwire : DisplayUtils permet d’afficher une image dans un rectangle défini, en conservant les proportion de l’image, et en paramétrant l’alignement souhaité. En fonction de la taille de l’image, vous pouvez choisir de remplir totalement la zone d’affichage, et donc de cropper l’image, ou bien d’ajuster la taille de l’image au rectangle afin de l’afficher entièrement. Démo, exemple d’utilisation et téléchargement >> [...]

  2. 7 years ago Project is bijna af « Stephanepolet's Blog

    [...] mijn resize-methode aangepast. Deze werkte echt niet naar behoren. Ik maakte eerste gebruik van een DisplayUtil klasse die ik had gevonden op het internet maar deze werkte niet goed voor Bitmaps. Dan [...]

  1. Tino 5 years ago


    I use it in every project to scale images in a slideshow or something like that ;)

    But did you tryed your code with a video? Because if I scale a video with this code EVERY video get’s a 4:3 ratio even if it has a 16:9 ratio or other ratios …

    Reply to this comment

  2. Jeff 5 years ago

    Thanks… Works like a charm!!

    Reply to this comment