The uiFrame container is used when you want to draw a background or border behind a single child display object. The background/border is rendered using skinning, ie determined by the value of the “skin” property.

In the themes shipped with the Aspire UI library, the default skin for the uiFrame class is “Frame”, ie, pointing to a “Frame.png” image file in the respective theme folder (by default, the “assets/skins/default” folder).

NOTE: In the screenshots above, the uiFrame container contains a single uiPane instance, which in turn contains the other display objects. uiFrame can contain only a single child.

Fancy Borders
We look at how more fanciful graphics can be used as the background for uiFrame instances.

First, you must have the graphics in PNG bitmap format – get this done with Adobe Fireworks or any graphics editing program you have that outputs to PNG. Let’s take for example the following:

We store that PNG in our theme folder as “FancyFrameA.png”.

Next, we need to tell the Aspire UI skinning framework about the new skin asset – basically, how it should be scaled. This is defined in the “rules.xml” file (again, stored in the theme folder). The following entry is added to the XML:

<FancyFrameA edge="20" prefs="padding|15" />

That XML entry tells the com.ghostwire.ui.managers.uiSkins manager that
(i) the FancyFrameA skin asset has a non-scaling edge of “20″ pixels, for all four sides; and
(ii) any component instance using this skin asset should use a padding property value of “15″.

Those numbers are not arbitrarily plucked from the air – you need to get those numbers, pixel-perfectly, by looking at your PNG image. First, slice the image up into nine regions (in Adobe Fireworks, you can use guide lines):

We see from the image above that the skin asset, to avoid distortion, should not scale its top 20 pixels and bottom 20 pixels when scaling vertically, and likewise it should not scale its left 20 pixels and right 20 pixels when scaling horizontally.

If you are familiar with the scale9grid property of the DisplayObject class, you should be at home with this concept. However, the scale9grid property is defined as a Rectangle (the center rectangle in the 9 regions) while the edge property is defined in the same way the padding and margin properties of Aspire UI component instances are defined – by declaring the thickness of the “top”, “right”, “bottom” and “left” edges respectively (in an Array or a comma-delimited String).

In the above example, the four edges happen to be the same size (so supplying one value is good enough – applied to all four edges).

Let’s look at another example:

With the above image, a different scaling rule will apply:

<FancyFrameB edge="26,58,5,5" prefs="padding|31,21,10,10" />

That XML entry specifies:
(i) the FancyFrameB skin asset has a non-scaling “top” edge of 26 pixels, “right” edge of 58 pixels, “bottom” edge of 5 pixels, and “left” edge of 5 pixels; and
(ii) any component instance using this skin asset should use a padding property value of “31,21,10,10″, which means 31 pixels top, 21 pixels right, 10 pixels bottom and 10 pixels left.

Here is another example, this time with a skin asset that has more than 9 scaling regions:

This skin asset has a “middle” region that should not be scaled when it is resized horizontally.

The XML entry will be as follows:

<FancyFrameC edge="25,5,5,5" midX="41" prefs="padding|30,10,10,10" />

The midX property declares that the middle 41 pixels of the image should not be scaled when the skin asset is resized horizontally.

FancyFrameDemo
Here is a live demo (uses three “special” frame skins within the same SWF):

FancyFrameDemo Class

package
{
	import com.ghostwire.ui.containers.uiFrame;
	import com.ghostwire.ui.controls.uiText;
	import com.ghostwire.ui.managers.uiSkins;
 
	import flash.display.Sprite;
	import flash.events.Event;
 
	public class FancyFrameDemo extends Sprite
	{
 
		public function FancyFrameDemo()
		{
			// ** make sure stage is not null **
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(evt:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
 
			// ** let assets preload before starting application **
			uiSkins.manager.addEventListener(Event.INIT, main);
		}
 
		private function main(evt:Event):void
		{
			// ** main application code **
			var frameA:uiFrame = new uiFrame();
			frameA.skin = "FancyFrameA";
			frameA.content = new uiText("The Big Brown Fox Jumps Over The Lazy Dog.");
			frameA.move(5, 10);
 
			addChild(frameA);
 
			var frameB:uiFrame = new uiFrame();
			frameB.skin = "FancyFrameB";
			frameB.content = new uiText("The Big Brown Fox Jumps Over The Lazy Dog.");
			frameB.move(5, 100);
 
			addChild(frameB);
 
			var frameC:uiFrame = new uiFrame();
			frameC.skin = "FancyFrameC";
			frameC.content = new uiText("The Big Brown Fox Jumps Over The Lazy Dog.");
			frameC.move(5, 200);
 
			addChild(frameC);			
		}		
	}
}

Note
When declaring the value for edge (or the margin or padding properties of uiComponent instances), if you specify one value, that value is applied to all sides; if you supply two values, the first is applied to top and bottom, the second applied to left and right; if you supply three values, the first is applied to top, second to left and right, third to bottom; if you supply four, each side takes their respective values. If you are familiar with CSS, you should recognize that this is the same rule used for setting the margin and padding properties in CSS.

See: http://www.ghostwire.com/aspireui/docs/layout/margin-and-padding

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 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:

• uiToolTips: Using Fancy Background Skins
• Aspire UI Preview: Skinning
• uiColorPicker: Adding Drop Shadow To Popup Palette
• uiFrame: ActionScript 3.0 GroupBox
• Using uiImage: Drawing Solid Border/Frame Around The Image

Comments RSS