GhostWire Studios - Flash/Flex UI Components Development And Consulting Services
Quality User Interface Controls For Flash Application DevelopmentAspireUI Components

May 13 2008

Aspire UI Components: Preview

Published by at 4:09 am under Aspire UI,Flash

GhostWire Studios is pleased to unveil Aspire UI Components. Written in Actionscript 3.0 from the ground up, the components are intended to be used in an “all-code” environment. No visual Flash IDE components will be shipped.

Let’s first take a look at a demo:

The above is a simple SWF, but it demonstrates quite a few of the features in Aspire. I will elaborate on the features of Aspire over the next few posts, but I will give a summary here:

Easy Skinning
In Aspire, skinning of components is done completely via PNG bitmap images. You can either embed the bitmap assets within your SWF, or you can let Aspire load from external PNG files (as the above demo does). This means that skin designers do not need to write a single line of code (I will elaborate in the next post). The following is the exact same SWF using a different “classic” theme:

Layout Management
Components in Aspire have “layout hints” properties such as alignX, alignY, fillX, fillY, padding and margin. The first set of Aspire UI Components will ship with a uiBox class, which is a container that automatically arranges its child objects sequentially horizontally or vertically. In the demo above, the components are positioned and sized automatically using uiBox containers and layout hints. For example, the following shows the code for the gender selection portion of the demo:

var genderText:uiText = new uiText("GENDER");
genderText.margin = "8,0,0,0";
genderText.textStyle = "header";
profileBox.addChild(genderText);
var genderBox:uiBox = new uiBox();
genderBox.spacing = 8;
profileBox.addChild(genderBox);
var genderMale:uiRadioButton = new uiRadioButton("Male");
genderMale.data = "maleIcon.png";
var genderFemale:uiRadioButton = new uiRadioButton("Female");
genderFemale.data = "femaleIcon.png";
var genderUnknown:uiRadioButton = new uiRadioButton("Unknown");
genderUnknown.data = "unknownIcon.png";
genderGroup = new uiButtonGroup(genderMale,genderFemale,genderUnknown);
genderGroup.selectedButton = genderMale;
genderBox.addChild(genderMale);
genderBox.addChild(genderFemale);
genderBox.addChild(genderUnknown);

Tab Focus Chain Management
Aspire has its own focus manager that overrides the native behavior of the Flash Player. The focus chain is set up automatically based on the containment hierarchy – it is unnecessary to assign any tabIndex in your application code. In other words, you just need to decide on the child index order, and the tab focus chain will follow that order.

Text Styles
In Aspire, you can define text styles via an external css file. By default, Aspire will load a text.css file stored in the theme’s folder. In addition to the usual text format properties, you can define an “outline” and a “shadow” property (both are color properties). The “outline” property when defined will cause the an outline to be drawn on the text glyphs. This is commonly seen in video subtitles. The “shadow” property when defined will cause the text cast a subtle shadow, resulting in either a raised or lowered look depending on the color combinations.
The following shows the code for the “Aspire UI Components Preview” title text in the demo SWF:

var titleText:uiText = new uiText("Aspire UI Components Preview");
titleText.alignX = ALIGN.CENTER;
titleText.textStyle = "title";
titleText.padding = "6,12";
titleText.background = {color:0x819A98,cornerRadius:12}
topLevelBox.addChild(titleText);

And the css in text.css for the textStyle “title” is:

title
{
	fontSize:16;
	color:#ffffff;
	outline:#000000;
	shadow:#333333;
}

Availability
Coming soon! To be very clear, as the title of this post says, the above is just a preview based on pre-release code. Aspire UI Components have NOT YET been released. The components that are currently being sold on the GhostWire Studios website are the old Actionscript 1.0 Flash components.

Please feel free to leave a comment if you have any questions.

Thanks!

pixelstats trackingpixel
Be Sociable, Share!
           

    2 responses so far

    2 Responses to “Aspire UI Components: Preview”

    1. zon 14 May 2008 at 5:14 am

      Awesome work!!

      If I don’t right-click, I can’t tell whether it’s a Flash app or a native Windows program!

    2. GhostWire Studios » Aspire UI Preview: Skinningon 14 May 2008 at 8:55 am

      [...] I showed two different skins in the preview demo. I post the demo here again for easy reference: // [...]

    Trackback URI | Comments RSS

    Leave a Reply

    *
    To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
    Click to hear an audio file of the anti-spam word