GhostWire Studios Flash UI Components » Aspire UI: Applying Background Glow+Shadow

Nov 09 2009

Aspire UI: Applying Background Glow+Shadow

Published by sunny at 3:20 pm under Aspire UI,Flash,Tips

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);

backgroundproperty0

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);

backgroundproperty1

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);

backgroundproperty2
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);

backgroundproperty3

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.

Share or Bookmark This Post: