With the Aspire UI library, you can use the background property defined in the uiComponent class to draw a background behind component instances. By default, no background will be drawn. Typically, only containers will use this property.

In the case of the uiImage component, the background property can be used in conjunction with the padding property to draw a simple solid border around the displayed image:

var img:uiImage = new uiImage("flower.jpg");
img.background = {color:0x000000}; // ** solid black background **
img.padding = 10; // ** this effectively becomes the thickness of the border **
img.move(10, 10);
addChild(img);

To take things a little further, you can also add a drop shadow easily via the background property:

var img:uiImage = new uiImage("flower.jpg");
img.background = {color:0x000000, shadow:0x000000}; // ** solid black background with drop shadow **
img.padding = 10; // ** this effectively becomes the thickness of the border **
img.move(10, 10);
addChild(img);

Note: In the example above, the image asset “flower.jpg” is stored in the default path “assets/images/” relative to the host SWF, and loaded during run-time.

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 these 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 a trial version.

Other Posts You Might Enjoy:

• uiImage: “maintainAspectRatio” Property
• Aspire UI: Applying Background Glow+Shadow
• uiImage: Resizing While Maintaining Original Aspect Ratio
• uiToolTips: Using Fancy Background Skins
• uiImage: Preloading External Bitmap Images

Comments RSS