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/

Small caps are typically used for titles, headlines, column headings, etc. They are also good for any text that you would usually use all capitals. This is because the use of small caps makes the run of capital letters seem less jarring, and would also often require less space than all caps.

While many word processors and text formatting systems include an option to format text in small caps (which leaves uppercase letters as they are but converts lowercase letters to small caps), this is a feature that is lacking in most graphics editing software.

Some fonts have inherent small caps, ie they use smaller capital letters in place of the lowercase characters. These fonts are useful when you wish to use small caps to bring distinction to your designs.

Here are some fonts with inherent small caps:

The sample text used is:
“The Quick Brown Fox Jumps Over The Lazy Fox”

• Berlin Small Caps
  
• Copperplate Gothic Bold
  
• Copperplate Gothic Light
  
• Lithos Pro Regular
  
• Orator Std
  
• Trajan Pro
  
• Pericles
  
• Pericles Light
  

Please feel free to leave a comment to mention any other small caps font(s) not listed above.

Thanks!

If you are looking to compile SWFs into cross-platform desktop applications, leveraging powerful desktop-only APIs, you may want to consider MDM Zinc 3.0. Available for Windows & Mac OSX, Zinc™ 3.0 is the fastest, most powerful and most feature-rich Rapid Application Development Tool for Adobe® Flash® and Flex®. With Zinc 3.0, you can rapidly create stunning commercial Applications, Screensavers, Widgets, CD Roms, DVD’s, Kiosks and More.

There is no better time than now to consider picking up Zinc 3.0 – MDM is currently offering a 25% discount for the following products:

• Zinc 3.0 Plug-In Windows
• Zinc 3.0 Plug-In Mac OSX
• Zinc 3.0 Plug-In Linux
• Zinc 3.0 Development Suite (contains Windows/Mac OSX/Linux Plug-Ins)

Promotion ends 23:59 GMT 30th December 2009.

http://www.multidmedia.com/shop/

* 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.

It is important to note that the technique saves the ByteArray “as is” in a flat binary file without any header or any block of metadata – this means that the file will in itself not be able to communicate its data structure and therefore, proper usage of the data requires prior knowledge of how the data has been packed (we used the first four bytes for storing the value of the width of the image). As a result, that method may be deemed as an “unorthodox” hack and unsuitable in team development.

In this post, we look at how you can employ the same basic idea while making the saved data more “consumable” by other developers.

Action Message Format (AMF)
ByteArray objects store ActionScript objects using the AMF format. So instead of saving the binary bitmap data in raw form in the way we described previously, we will put the serialized data in an Object and write that object to a ByteArray:

// assume you have Bitmap object "bitmapImage" you want to save
 
// convert the BitmapData to ByteArray
// this time, do not pack any other data in the same ByteArray object
var data:ByteArray = new ByteArray();
data.writeBytes(bitmapImage.bitmapData.getPixels(bitmapImage.bitmapData.rect));
 
// create a new data object
var bmObj:Object = new Object();
bmObj.width = bitmapImage.bitmapData.width;
bmObj.height = bitmapImage.bitmapData.height;
bmObj.data = data;
 
// create a new ByteArray object for saving
var bytes:ByteArray = new ByteArray();
bytes.writeObject(bmObj);
bytes.compress();

So that does it – you can now save the binary data normally (by posting it to a server script, via AIR local filesystem API, via SharedObject, via FP10 FileReference, etc.). Although we are still saving our data in a flat binary file, the difference here is that developers consuming the data only need to know that they must read in an Object – they do not need to have the low-level knowledge of how exactly the data is packed.

ByteArray To BitmapData
Let’s look at how the binary data can now be consumed in an application.

First, load the file as normal:

var ldr:URLLoader	= new URLLoader();
ldr.dataFormat	= URLLoaderDataFormat.BINARY; // ** make sure you do this **
ldr.addEventListener(Event.COMPLETE, on_fileLoad);
ldr.addEventListener(IOErrorEvent.IO_ERROR, on_fileLoadError);
ldr.load(new URLRequest(pathToBitmapDataFile));

Process the loaded data:

private function on_fileLoad(evt:Event):void
{
	if (evt.type == Event.COMPLETE)
	{
		var bytes:ByteArray = URLLoader(evt.target).data as ByteArray;
		if (bytes)
		{
			try
			{
				bytes.uncompress();
			}
			catch(e:Error)
			{
			}
			// bytes is now the uncompressed byte array
			// ... process bytes ...
			var obj:Object = bytes.readObject();
 
			// obj now has the properties "width", "height" and "data" as saved previously
 
			var bmd:BitmapData = new BitmapData(obj.width, obj.height, true, 0); // 32 bit transparent bitmap
			bmd.setPixels(bmd.rect, obj.data);
 
			var bm:Bitmap = new Bitmap(bmd);
			addChild(bm);
		}
	}
}

Bundle of Bitmaps
What if you have multiple images you want to save and use later? You can consider serializing the bitmaps and store them together in a single binary file. To do that, we will give each image a unique id (such as the path of the image file if you are attempting to load and serialize external image files), store the serialized data in a hash, write that hash to a ByteArray, and then write that ByteArray to file.

// for storing the serialized images
private var imgLibrary:Object = { };
 
private function saveImage(id:String, image:Bitmap):void
{
	if (id == null || id == "")
	{
		return;
	}
 
	if (image == null)
	{
		imgLibrary[id] = null; // ** remove previously stored data **
		return;
	}
 
	var data:ByteArray = new ByteArray();
	data.writeBytes(image.bitmapData.getPixels(image.bitmapData.rect));
 
	// create a new data object
	var bmObj:Object = new Object();
	bmObj.width = image.bitmapData.width;
	bmObj.height = image.bitmapData.height;
	bmObj.data = data;
 
	imgLibrary[id] = bmObj; // ** will overwrite previously stored data **
}
 
saveImage("iconA", imageIconA);
saveImage("iconB", imageIconB);
saveImage("iconC", imageIconC);
// imgLibrary now contains three data objects each representing an image

Now, write imgLibrary to file:

// ** must target Flash Player version 10+ **
private function on_buttonClick(evt:MouseEvent):void
{
	var bytes:ByteArray = new ByteArray();
	bytes.writeObject(imgLibrary); // store width of image
	bytes.compress();
	new FileReference().save(bytes, "image.bmd"); // default name "image.bmd"
}

In another application, we load the saved binary file as usual:

var ldr:URLLoader	= new URLLoader();
ldr.dataFormat	= URLLoaderDataFormat.BINARY; // ** make sure you do this **
ldr.addEventListener(Event.COMPLETE, on_fileLoad);
ldr.addEventListener(IOErrorEvent.IO_ERROR, on_fileLoadError);
ldr.load(new URLRequest(pathToFile));

And process and use the loaded binary data as follows:

private var imgLibrary:Object;
 
private function on_fileLoad(evt:Event):void
{
	if (evt.type == Event.COMPLETE)
	{
		var bytes:ByteArray = URLLoader(evt.target).data as ByteArray;
		if (bytes)
		{
			try
			{
				bytes.uncompress();
			}
			catch(e:Error)
			{
			}
			// bytes is now the uncompressed byte array
			// ... process bytes ...
			imgLibrary = bytes.readObject();
 
			// imgLibrary is now initialized and contains data objects each representing a bitmap image
		}
	}
}

After populating the imgLibrary hash, you can use a method like the one below to query it:

private function getImage(id:String):Bitmap
{
	if (id == "" || id == null || imgLibrary == null || imgLibrary[id] == null)
	{
		return null;
	}
	var obj:Object = imgLibrary[id];
	try
	{
		// obj now has the properties "width", "height" and "data" as saved previously
 
		var bmd:BitmapData = new BitmapData(obj.width, obj.height, true, 0); // 32 bit transparent bitmap
		bmd.setPixels(bmd.rect, obj.data);
 
 		return new Bitmap(bmd);
	}
	catch(e:Error)
	{
	}
	return null;
}
 
getImage("iconA"); // returns a Bitmap with BitmapData constructed from saved byte array

The getImage() method can also be improved such that the ByteArray-to-BitmapData conversion is only done once per image:

private function getImage(id:String):Bitmap
{
	if (id == "" || id == null || imgLibrary == null || imgLibrary[id] == null)
	{
		return null;
	}
	var obj:* = imgLibrary[id];
 
	if (obj is BitmapData)
	{
		return new Bitmap(BitmapData(obj).clone());
	}
 
	try
	{
		// obj now has the properties "width", "height" and "data" as saved previously
 
		var bmd:BitmapData = new BitmapData(obj.width, obj.height, true, 0); // 32 bit transparent bitmap
		bmd.setPixels(bmd.rect, obj.data);
 
		imgLibrary[id] = bmd;
 
 		return new Bitmap(bmd.clone());
	}
	catch(e:Error)
	{
	}
	return null;
}

Note: If you are confident that the BitmapData is not going to be modified by instances, remove the clone() calls above – it will save memory since that means all Bitmap instances with the same id will be using the exact same BitmapData.

Embedding Image Asset(s)
After you have saved the binary file, remember that you are not limited to using it only as an external resource – you can also embed the file into your SWF:

// ActionScript 3.0
[Embed(source="assets/images/icons.bin", mimeType="application/octet-stream")]
private static const iconsBundle:Class;
 
private var imgLibrary:Object;
 
private function initIcons():void
{
	var bytes:ByteArray = new iconsBundle() as ByteArray;
	if (bytes)
	{
		try
		{
			bytes.uncompress();
		}
		catch(e:Error)
		{
			// data not compressed
		}
		imgLibrary = bytes.readObject();
		// imgLibrary is now initialized and contains data objects each representing a bitmap image
	}
}

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

<Window 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.

When using external bitmap images (GIF/JPG/PNG), the uiImage class will load from the external source only once and use cached data if the same source is requested subsequently again by the same or other uiImage instances. This is efficient because the same BitmapData is used across different uiImage instances that use the same image source. This is why image icons in Aspire UI scrollable lists do not suffer from the “flickering” symptom (which you will experience when using Flash/Flex components).

The uiImage class does not have any specific API for preloading external bitmap images. However, you can preload images easily using a dummy uiImage object:

var img:uiImage = new uiImage();
img.source = "ImageToPreload.png";

The loading of an external image begins once the “source” property is set, even if the uiImage instance is never actually added to the display list.

It may also be worthwhile to note that as of v1.2.4, the uiImage class will load an external resource only once, even if multiple instances request the same resource at the same time before it has been loaded. In other words, only one connection to an external image source will be made. Once the image is loaded, all instances using that same source will be updated.

uiImage dispatches an Event.CHANGE event when the external image is fully loaded, therefore you can listen to this event to be notified when the (pre)loading has completed.

var img:uiImage = new uiImage();
img.addEventListener(Event.CHANGE, on_imgLoad);
img.source = "ImageToPreload.png";
 
function on_imgLoad(evt:Event):void
{
    evt.target.removeEventListener(evt.type, on_imgLoad);
    // 
}

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.