This post is a supplement to “uiImage: Resizing While Maintaining Original Aspect Ratio”. In this post, we will look at the maintainAspectRatio property of the uiImage class and see how it affects resizing when it is set to true.

The following image has an original size of 260×180 (aspect ratio of 1.4).

Normally, if you set the width and height of the component instance explicitly, the image will become distorted because the image will fill the area completely:

var img:uiImage = new uiImage("flower.jpg");
img.setSize(100, 100);
addChild(img);

maintainAspectRatio
If the maintainAspectRatio property set to true, the width and height explicitly set becomes the space allocated to the image, within which the image is allowed to fill while maintaining its original aspect ratio:

var img:uiImage = new uiImage("flower.jpg");
img.maintainAspectRatio = true;
img.background = {color:0x000000}; // just to show 100x100 area
img.setSize(100, 100);
addChild(img);

• The black background is drawn to show the bounds of the component instance; normally, by default, no background is drawn.
• Notice that the image is center-aligned within the allocated space.

Note The Difference
In the previous post “uiImage: Resizing While Maintaining Original Aspect Ratio”, we used either setSize(width, -1) or setSize(-1, height) to maintain the aspect ratio when resizing. That is useful when you know a specific width or height to use and want to let the component automatically compute the other side (maintaining aspect ratio). Even though the image may end up having the same dimensions, the key difference would be the space allocated:
(i) setSize(width, -1) or setSize(-1, height) – exact image space
(ii) setSize(width, height) with maintainAspectRatio set to true – image smaller than allocated space

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.

Other Posts You Might Enjoy:

• uiImage: Resizing While Maintaining Original Aspect Ratio
• Using uiImage: Drawing Solid Border/Frame Around The Image
• uiImage: Using Embedded And/Or Dynamically Generated BitmapData
• uiImage: Loading Resources From Foreign Domains
• uiBox: Implementing Some Common Layouts

Comments RSS