Aug 25 2009
uiImage: Resizing While Maintaining Original Aspect Ratio
When using the Aspire UI library, each component instance will attempt to compute its own “ideal” preferred size if its size is not explicitly set. This preferred size typically means the minimum size at which the component may render itself fully (or sufficiently without appearing distorted), taking into account its child display objects such as labels or embedded images, if any.
In the case of the uiImage component, its preferred size is simply the size of the original image source. You can override this size by calling the setSize() method.
The following image has an original size of 260×180 (aspect ratio of 1.4).
Resizing
You can override the preferred size by calling the setSize() method:
var img:uiImage = new uiImage("flower.jpg"); img.setSize(100, 100); addChild(img);
The image has been forced to be sized at 100×100. This becomes the instance’s preferred size.
Resizing While Maintaining Aspect Ratio
To maintain the original aspect ratio while resizing, call the setSize() method passing a positive value only for width or height, and negative one (-1) for the other side. For example to size the image at width 100px without distorting the aspect ratio:
var img:uiImage = new uiImage("flower.jpg"); img.setSize(100, -1); addChild(img);
Image sized at 100×69 (height of 69px determined by component based on original aspect ratio of image source).
Likewise, to size the image at height 100px without distorting the aspect ratio:
var img:uiImage = new uiImage("flower.jpg"); img.setSize(-1, 100); addChild(img);
Image sized at 144×100 (width of 144px determined by component based on original aspect ratio of image source).
Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features of the components include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management. This is a pure AS3 library with no dependency on the Flex framework. You may experiment with the various features by downloading the trial version.
