GhostWire Studios » Themes

Aspire UI Components: Size of “classic”, “graylic”, “vista” and “xp” Themes

sunny — Mon, 14 Dec 2009 11:13:04 +0000

The Aspire UI Components library, for pure ActionScript 3.0 development, now ships with four themes – “classic”, “graylic”, “vista” and “xp”. These themes are included to demonstrate the versatility of the skinning workflow; developers are not limited to these themes but can design their own themes via PNG images.

By default, components in the toolkit uses external PNG images loaded during run-time for component skinning. As of version 1.3, skin assets of the same theme can be compressed and packed into a single binary file, facilitating run-time loading and also making it easy to embed the skin assets if so desired.

As at the time of this post, the sizes of the compressed packed version of the themes are as follows:

“classic”
6kb (uncompressed 15kb)
The following is a screenshot of the theme in action:

“graylic”
8kb (uncompressed 17kb)
The following is a screenshot of the theme in action:

“vista”
22kb (uncompressed 36kb)
The following is a screenshot of the theme in action:

“xp”
22kb (uncompressed 30kb)
The following is a screenshot of the theme in action:

Note: sizes may change in the future if more component assets are added to the library.

For more information on packing themes, please refer to:
http://ghostwire.com/aspireui/docs/skinning/packing-skin-assets

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.

uiWindow: Background Drop Shadow + Glow Effect

sunny — Sat, 12 Dec 2009 16:02:47 +0000

The default behavior of the uiWindow container is to cast a drop shadow when it is active in the foreground, and not do so when it is inactive or when it is maximized to fill the stage. This behavior is determined by the component instance’s background property value.

Default Shadow
The following is the default background property value for all uiWindow instances:
{shadow_up:0x000000, shadow_up_maximized:-1};
That tells the instance it should render a drop shadow of color 0×000000 when its visual state is “up”, and not render any drop shadow when its visual state is “up_maximized” (when it is maximized, the drop shadow cannot be seen so applying the effect will be pointless).

Always Cast Drop Shadow
To make a uiWindow instance always cast a drop shadow, you can set its background property as below:

var win:uiWindow = new uiWindow();
win.background = {shadow:0x000000};

Never Cast Drop Shadow
To make a uiWindow instance never cast a drop shadow, you can set its background property to null:

var win:uiWindow = new uiWindow();
win.background = null;

Glow Effect
As of v1.3.0+, you can also get the uiWindow instance (any uiComponent, actually) to cast a glow effect:

var win:uiWindow = new uiWindow();
win.background = {glow_up:0x000000, glow_up_maximized:-1};

Drop Shadow + Glow
In the “vista” theme, the uiWindow instances use drop shadow + glow effects:

See: “vista” themed uiWindow demo

Specifying Default uiWindow Background Property
If you wish to override the default background property value, ie set the default value for all uiWindow instances, you can do so by defining it in the theme folder’s “rules.xml”:

 edge="5,5,5" slices="up,out,up_maximized,out_maximized" prefs="padding|5|background|shadow_up,0,shadow_up_maximized,-1,glow,0,glowDepth,12,glow_up_maximized,-1" />

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 the trial version.

Aspire UI Components “vista” Theme Demo II

sunny — Thu, 03 Dec 2009 05:46:43 +0000

The previous demo of the new “vista” theme featured mainly the uiWindow component.

Here is another demo featuring various UI components, including the checkbox, radiobutton, tabview, sliders and steppers (this is the same demo included in the library distribution but with the “vista” theme applied):

The size of the above SWF is approximately 74KB (the theme assets embedded in the SWF contribute about 22KB to the size).

You may experiment with the various features by downloading the trial version.

Aspire UI Components Theme “vista” Released

sunny — Wed, 02 Dec 2009 13:18:59 +0000

A new bonus theme, emulating the look of Windows Vista OS, has been added to the Aspire UI components library. Below is a live demo (click on the three buttons to bring up windows):

The SWF above is approximately 84KB (the theme assets are embedded in the SWF).

Availability
The new theme has been included in the distributions for both Aspire UI Lite Edition and Aspire UI Standard Edition (v1.3.3).

You may experiment with the various features by downloading the trial version.

Aspire UI v1.3 Update: Skin Assets Packing

sunny — Wed, 04 Nov 2009 12:42:45 +0000

The Aspire UI library, for pure ActionScript 3 development, has been updated to version 1.3 (changelog).

Among the many improvements, the most important is implementing support for the use of packaged themes. The Aspire UI library uses external PNG images for component skinning, which means that skin assets can be easily modified by theme designers using any image editor (capable of exporting to the PNG format).

With the Aspire UI Version 1.3 Update, the skinning work flow has been further enhanced by allowing developers to optionally use packaged themes.

It is now possible to compress skin assets from a theme folder, along with the “rules.xml” file, into one single binary file.

This is advantageous for the following reasons:

the overall total payload (bytes to download over the network) is now reduced due to compression;
only one network connection is required, instead of multiple simultaneous connections to the various PNG files;
moving skin assets is now easier since you only need to move one file around;
if embedding skin assets into the application SWF is preferred, this can now be done easily since you only need to embed one single file.

The benefits of using packaged themes will be especially visible when deploying to an environment where slow network connections are expected.

Included in the update is a tool for creating packaged themes. This tool, codenamed “Amber”, allows developers to select skin assets from a theme and pack them into one single binary file.

* For simplicity and cross-platform compatibility, “Amber” was created as a Flash Player 10 SWF. You can run the SWF either directly using Flash Player 10+, or via a web browser (if the web browser has Flash Player 10 plugin installed).

* “Amber” was compiled using the Aspire UI library with the “xp” theme embedded in the SWF.

uiFrame: Drawing Fancy Borders (Frames)

sunny — Mon, 17 Aug 2009 06:28:28 +0000

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:

 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:

 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:

 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

uiBTabView Example Using “classic” Theme

sunny — Fri, 14 Aug 2009 01:52:50 +0000

This demo is the same as that in the previous post uiBTabView Example Using “xp” Theme, but we are using a different theme this time:

Within the application code, a single line of code determines which theme to use:

uiSkins.initialize(theme);

If the uiSkins.initialize() call is omitted, the “default” theme is used.

Aspire UI theme “graylic” released

sunny — Tue, 21 Apr 2009 17:43:24 +0000

A new theme has been added to the Aspire UI library. Below is a screen shot of the theme in use:

The theme has been included in the distributions (v1.1.2) for both the Aspire UI Lite Edition and Aspire UI Standard Edition.

uiWindow Example using “classic” theme

sunny — Thu, 09 Apr 2009 01:19:52 +0000

One of the key features of the Aspire UI library is the ease of skinning which is done via external PNG images. These images are loaded during run-time instead of being compiled into the application SWF. Not only does it make it easy to (re)design component skins, it also makes it easy to try out different themes. As long as a theme is designed and developed correctly, an application can switch themes easily.

The following is the exact same SWF shown in the previous uiWindow Example, but this time it is rendered using the “classic” theme (included in the Aspire UI distribution):

Exact same SWF, just with an additional fvars “classic=true” set.

Within the application code, a single line of code determines which theme to use:

uiSkins.initialize(theme);

If the uiSkins.initialize() call is omitted, the “default” theme is used.

In the example above, we use the following code to detect if the fvars is set and if so use the “classic” theme:

uiSkins.initialize(((loaderInfo.parameters.classic) ? "classic" : "default"));