The “background” property defined by the com.ghostwire.ui.core.uiComponent class determines the style of the background for a component instance – color, opacity, border color, border width, gradient fills, and corner radius.

By default, no background will be drawn. The following is an example on how to draw a simple background:

var pane:uiPane = new uiPane();
pane.background = { color:0xABCABC, cornerRadius:16 };
pane.padding	= 10;
pane.move(10, 10);
 
var msg:uiLabel = new uiLabel("Hello World!", "star.png");
pane.addChild(msg);
 
addChild(pane);

Typically, only containers that does not use a skin will use this property to draw a background (if desired).

The property can also be used to apply a simple drop shadow effect.

var pane:uiPane = new uiPane();
pane.background = { color:0xABCABC, cornerRadius:16, shadow:0x000000 };
pane.padding	= 10;
pane.move(10, 10);
 
var msg:uiLabel = new uiLabel("Hello World!", "star.png");
pane.addChild(msg);
 
addChild(pane);

With the recent Aspire UI Version 1.3 Update, a glow effect can also be specified via the property.

var pane:uiPane = new uiPane();
pane.background = { color:0xABCABC, cornerRadius:16, glow:0x000000 };
pane.padding	= 10;
pane.move(10, 10);
 
var msg:uiLabel = new uiLabel("Hello World!", "star.png");
pane.addChild(msg);
 
addChild(pane);

The glow effect can be applied in combination with the shadow effect.

var pane:uiPane = new uiPane();
pane.background = { color:0xABCABC, cornerRadius:16, glow:0x000000, shadow:0x000000 };
pane.padding	= 10;
pane.move(10, 10);
 
var msg:uiLabel = new uiLabel("Hello World!", "star.png");
pane.addChild(msg);
 
addChild(pane);

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.

See Also:

• uiToolTips: Using Fancy Background Skins
  The uiToolTips manager implements the use of pop-up tool tips. The contents...
• Using uiImage: Drawing Solid Border/Frame Around The Image
  With the Aspire UI library, you can use the background property defined...
• Aspire UI Components: Preview
  GhostWire Studios is pleased to unveil Aspire UI Components. Written in Actionscript...
• Aspire UI Preview: Text Styles
  In Aspire, text styles are managed via an external CSS file which...
• Using uiWindow: Setting the color and transparency level of the background overlay of modal windows
  What are modal windows? In user interface design, a modal window is...

Comments RSS