In order to load images from a different domain, the Flash Player will need to read a crossdomain.xml file from the foreign domain (and this file must grant permission to your domain to access the required resources). Typically, you would expect to need to specify a checkPolicyFile property somewhere. In the case of the uiImage component, there is no checkPolicyFile property to set because this would be unnecessary.

In order to load an image from a foreign domain, you would specify the source with a “url:http://” prefix. This prefix is sufficient to let the component know that you are loading from a foreign domain (you would omit the http:// otherwise).

Internally, the uiImage component sets the checkPolicyFile property automatically, as necessary. The rationale here is that, since the flag must always be TRUE for Flash applications deployed over the web (sandboxType is Security.REMOTE) whenever the Flash Player attempts to load resources from foreign domains, we might as well have the component set this automatically rather than having to expose a superfluous API. To be very clear, the checkPolicyFile flag is FALSE by default – the policy file is checked only if the application is deployed over the web (ie application’s sandboxType is Security.REMOTE), because checking the policy file is unnecessary when deployed on the desktop.

A GroupBox displays a border/frame around a group of controls, with or without a caption/title. This is typically done to provide visual feedback to end-users that a collection of controls on a form is logically grouped.

When using the Aspire UI toolkit in ActionScript 3.0 projects, you can use the uiFrame component for the same results.

// ActionScript 3.0
var fruit0:uiCheckBox = new uiCheckBox("Apple");
var fruit1:uiCheckBox = new uiCheckBox("Banana");
var fruit2:uiCheckBox = new uiCheckBox("Orange");
 
var fruitsBox:uiBox    = new uiBox();
fruitsBox.vertical    = true;
fruitsBox.spacing    = 4;
 
fruitsBox.addChild(new uiText("You can choose one or more fruits!"));
fruitsBox.addChild(fruit0);
fruitsBox.addChild(fruit1);
fruitsBox.addChild(fruit2);
 
var frm:uiFrame = new uiFrame();
frm.content = fruitsBox;
frm.x = 10;
frm.y = 10;
 
frm.title = new uiText("Fruits");
 
addChild(frm);

Using the “graylic” theme, the result would be as follows:

Notice that the caption (title) is left aligned by default. You can adjust the alignment by specifying the alignX property:

frm.title = new uiText("Fruits");
frm.title.alignX = ALIGN.CENTER;

Using the “classic” theme with background set to gray, the result would be as follows:

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.

For more information, please click here.

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

By default, the component uses the following set of colors:

We can define an alternative colors array for the popup palette:

private static const COLORS_CONTINUOUS_TONE:Array = [
0xCCFFFF, 0xCCCCFF, 0xCC99FF, 0xCC66FF, 0xCC33FF, 0xCC00FF, 0xFF00FF, 0xFF33FF, 0xFF66FF, 0xFF99FF, 0xFFCCFF, 0xFFFFFF,
0xCCFFCC, 0xCCCCCC, 0xCC99CC, 0xCC66CC, 0xCC33CC, 0xCC00CC, 0xFF00CC, 0xFF33CC, 0xFF66CC, 0xFF99CC, 0xFFCCCC, 0xFFFFCC,
0xCCFF99, 0xCCCC99, 0xCC9999, 0xCC6699, 0xCC3399, 0xCC0099, 0xFF0099, 0xFF3399, 0xFF6699, 0xFF9999, 0xFFCC99, 0xFFFF99,
0xCCFF66, 0xCCCC66, 0xCC9966, 0xCC6666, 0xCC3366, 0xCC0066, 0xFF0066, 0xFF3366, 0xFF6666, 0xFF9966, 0xFFCC66, 0xFFFF66,
0xCCFF33, 0xCCCC33, 0xCC9933, 0xCC6633, 0xCC3333, 0xCC0033, 0xFF0033, 0xFF3333, 0xFF6633, 0xFF9933, 0xFFCC33, 0xFFFF33,
0xCCFF00, 0xCCCC00, 0xCC9900, 0xCC6600, 0xCC3300, 0xCC0000, 0xFF0000, 0xFF3300, 0xFF6600, 0xFF9900, 0xFFCC00, 0xFFFF00,
0x66FF00, 0x66CC00, 0x669900, 0x666600, 0x663300, 0x660000, 0x990000, 0x993300, 0x996600, 0x999900, 0x99CC00, 0x99FF00,
0x66FF33, 0x66CC33, 0x669933, 0x666633, 0x663333, 0x660033, 0x990033, 0x993333, 0x996633, 0x999933, 0x99CC33, 0x99FF33,
0x66FF66, 0x66CC66, 0x669966, 0x666666, 0x663366, 0x660066, 0x990066, 0x993366, 0x996666, 0x999966, 0x99CC66, 0x99FF66,
0x66FF99, 0x66CC99, 0x669999, 0x666699, 0x663399, 0x660099, 0x990099, 0x993399, 0x996699, 0x999999, 0x99CC99, 0x99FF99,
0x66FFCC, 0x66CCCC, 0x6699CC, 0x6666CC, 0x6633CC, 0x6600CC, 0x9900CC, 0x9933CC, 0x9966CC, 0x9999CC, 0x99CCCC, 0x99FFCC,
0x66FFFF, 0x66CCFF, 0x6699FF, 0x6666FF, 0x6633FF, 0x6600FF, 0x9900FF, 0x9933FF, 0x9966FF, 0x9999FF, 0x99CCFF, 0x99FFFF,
0x00FFFF, 0x00CCFF, 0x0099FF, 0x0066FF, 0x0033FF, 0x0000FF, 0x3300FF, 0x3333FF, 0x3366FF, 0x3399FF, 0x33CCFF, 0x33FFFF,
0x00FFCC, 0x00CCCC, 0x0099CC, 0x0066CC, 0x0033CC, 0x0000CC, 0x3300CC, 0x3333CC, 0x3366CC, 0x3399CC, 0x33CCCC, 0x33FFCC,
0x00FF99, 0x00CC99, 0x009999, 0x006699, 0x003399, 0x000099, 0x330099, 0x333399, 0x336699, 0x339999, 0x33CC99, 0x33FF99,
0x00FF33, 0x00CC33, 0x009933, 0x006633, 0x003333, 0x000033, 0x330033, 0x333333, 0x336633, 0x339933, 0x33CC33, 0x33FF33,
0x00FF00, 0x00CC00, 0x009900, 0x006600, 0x003300, 0x000000, 0x330000, 0x333300, 0x336600, 0x339900, 0x33CC00, 0x33FF00,
];

And then assign the colors array as follows:

var myColorPicker:uiColorPicker = new uiColorPicker();
 
myColorPicker.colors = COLORS_CONTINUOUS_TONE;

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.

For more information, please click here.

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

In this post, we look at how to get the popup to cast a drop shadow, by simply adding some directives in the “rules.xml” of the theme you are using.

The uiColorPicker component uses three skin assets:
ColorPicker.png
ColorPickerFrame.png
ColorPickerInput.png

The ColorPicker.png is the image that will be used to render the rectangular button. This skin asset is mandatory. If it is missing, the component will not show.

The ColorPickerInput.png is optional, affecting the look of the text input field in the popup palette. This skin is usually pointed to the same skin asset used by the uiTextInput component:

<ColorPickerInput clone="TextInput" prefs="width|74|focusPadding|1|padding|0" />

The ColorPickerFrame.png is the image that will be used to render the background of the popup palette. You can specify styling directives for the popup, such as padding, in the “rules.xml”:

<ColorPickerFrame edge="2" prefs="padding|3" />

Therefore, to get the popup to cast a drop shadow, all you need to do is to add the directive as such:

<ColorPickerFrame edge="2" prefs="padding|3|background|shadow,0x000000" />

The result will be as shown below:

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.

For more information, please click here.

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

With this update, the uiColorPicker component has been added to the Standard Edition.

In addition, we have streamlined component instance alignment with the following:

(i) new childAlignX and childAlignY properties help to define a default alignment for child objects contained within the same container.

(ii) a new qualified value for alignX and alignY properties – setting the property to ALIGN.FILL will indicate that the object is expected to fill its whole allocated space (horizontally for alignX or vertically for alignY), and therefore alignment does not apply.

(iii) as a result of (ii), it is no longer necessary to define fillX and fillY properties (since ALIGN.FILL and other alignment values should be mutually exclusive).

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.

For more information, please click here.

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

A Site License grants all developers located at the same site, working for the same organization, the rights to use the toolkit, royalty-free. It doesn’t matter how many developers work at the site, it doesn’t matter how many projects the developers will be using the toolkit in, and it doesn’t matter how many copies of your applications get distributed.

A “Site” is defined as a single location with the same mailing address. In other words, the developers must work in the same country, city, building, and on the same floor. This entitlement extends to temporary and freelance developers working at the site, as long as they remained engaged by your organization.

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.

For more information, please click here.

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

ActiveCaptain
The application allows boaters to share their knowledge and experience. Registered members can provide information about fuel pricing, slip fees, a favorite anchorage, or some local knowledge, as well as read marina reviews written by other Captains, write reviews, add points of interest, or correct inaccurate information.

Let’s take a look at some screen shots of the application:

pressing and holding down the mouse on the map brings up a contextual popup menu

a resizable modal dialog with some common UI controls

searching for marinas

Testimonial
The following is what the developers at ActiveCaptain have to say about the Aspire UI Components toolkit:

At ActiveCaptain (www.activecaptain.com) we started re-writing our Interactive Cruising Guidebook over a year ago. Early on, we decided that there was only one integrated UI toolkit for ActionScript 3 that had enough capability and quality – and that was the Aspire UI Components. We loved the way it looked and the consistent way of accessing them made coding easy to learn.

All Flash apps would benefit from the Aspire UI Components toolkit.

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.

In this short tutorial, we will look at how you can use the AspireUI library in Zinc™ 3.0 projects, and how you can easily swap component themes by simply changing one line of code.

mdm.Application.path
When using Zinc™ 3.0, it is important to remember that relative paths to external assets do not work well. To ensure that your Zinc™ 3.0 compiled applications work as expected, you should always prefix paths with mdm.Application.path so that the application knows where to look for external assets (to be loaded during run-time).

When using the AspireUI library in a normal Flash AS3 project, we would usually initialize the uiSkins manager as follows:

uiSkins.initialize("default", "assets/skins/");
// use "default" theme folder from the relative path "assets/skins/"

When coding for Zinc™ 3.0 projects, the following will be used:

uiSkins.initialize("default", mdm.Application.path + "assets/skins/");

Likewise, in order for the uiImage class to work properly in Zinc™ 3.0 applications, the following path must be set:

uiImage.path = mdm.Application.path + "assets/images/";

That will make it possible for uiImage instances to load from the “assets/images/” folder. For example, the following will create a uiImage instance with image source loaded from “assets/images/icon.png”:

var imgIcon:uiImage = new uiImage("icon.png");

MyZincApp Class
Let’s now look at a simple MyZincApp class:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import com.ghostwire.ui.containers.uiScrollPane;
	import com.ghostwire.ui.containers.uiWindow;
	import com.ghostwire.ui.controls.uiImage;
	import com.ghostwire.ui.enums.WINDOW;
	import com.ghostwire.ui.managers.uiCursors;
	import com.ghostwire.ui.managers.uiSkins;
	import mdm.*;
 
	public class MyZincApp extends Sprite 
	{
		public function MyZincApp():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		private function init(evt:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
 
			// in order to work with Zinc, we need to specify
			// correct paths to external assets
			uiSkins.initialize("default", mdm.Application.path + "assets/skins/");
 
			uiImage.path = mdm.Application.path + "assets/images/";
 
			// listen to uiSkins manager to get notified when
			// theme assets have been fully loaded
			uiSkins.manager.addEventListener(Event.INIT, main);
		}
		private function main(evt:Event):void
		{
			// ** initializes uiCursors class **
			uiCursors.initialize(stage);
 
			// ** initializes uiWindow class **
			uiWindow.initialize(stage);
 
			// ** img window **
			var img:uiImage = new uiImage("flower.jpg");
 
			var imgsp:uiScrollPane	= new uiScrollPane();
			imgsp.fillX = true;
			imgsp.fillY = true;
			imgsp.content.addChild(img);
 
			var imgWin:uiWindow	= new uiWindow();
			imgWin.title		= "flower.jpg";
			imgWin.content.addChild(imgsp);
			// ** end img window **
 
			imgWin.open();
		}
	}
}

After compiling the above class, you will get a SWF that you can then run through the Zinc Builder software to create a desktop application (for Windows, Mac or Linux). If you run the compiled Zinc application, you will see something like the following:

Changing Theme I
Now, let’s see how we can easily change the component theme. The themes are stored in their respective folders in the “assets/skins/” folder. By changing one line of code, we can switch to using another theme:

uiSkins.initialize("vista", mdm.Application.path + "assets/skins/");

With that, we will now use the “vista” theme instead of the default “xp” theme. After re-compiling the SWF and running the new SWF through the Zinc Builder software, we will see something like the following:

Changing Theme II
Next, we look at how we can change the theme without even changing any code, without re-compiling the SWF, and without re-building the Zinc application. We do this by swapping the contents of the “default” folder with the contents from the “classic” folder, and then run the Zinc application without re-building. You will see something like the following:

The above is possible because by default, the AspireUI library uses run-time skin assets (and is what we are using in this introductory tutorial). This means that by changing the PNG image assets in the “assets/skins/default” folder, you will change the look of your Zinc application. The library also supports the option to embed the skin assets within the SWF, if so desired. There is also a tool to package all the skin assets within a folder into one compressed binary file.

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.

MDM Zinc™ 3.0
MDM Zinc™ 3.0, available for Windows and Mac OSX, is the only development tool in its class to offer X-Platform, X-Compile™ to Windows, Mac OSX & Linux Systems. Rapid Application Development for Adobe® Flash® and Flex®. You may download MDM Zinc™ 3.0 Builder for Windows & Mac OSX at:
http://www.multidmedia.com/software/zinc/download/

* The trial version is strictly for evaluation purposes.

* Compiled SWFs will stop working after a few minutes.

* This trial version is based off Aspire UI Standard Edition v1.3.4.

* Includes the assets for “classic”, “graylic” and “xp” themes.

* Aspire UI is an ActionScript 3.0 library – compiled SWFs must target Flash Player 9+.

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.

The AS3 API Reference is available at
http://ghostwire.com/aspireui/docs/api/

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.