Consider the following:

[Embed(source="assets/background.png")]
private static const BACKGROUNDIMAGE:Class;

Let’s say that is done within a class named AssetsManager. Then, internally, we actually have a class named “AssetsManager_BACKGROUNDIMAGE” created. The name that comes after the underscore matches whatever you have given to that static member.

We can then write a generic handler function to grab the associated Bitmap image, given the asset name:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

public static function GetImage(name:String):Bitmap
{
	name = name.toUpperCase();
	try
	{
		var cls:Class = getDefinitionByName("AssetsManager_" + name) as Class;
		return new cls() as Bitmap;
	}
	catch (e:Error)
	{
	}
	// ** else return a default 16x16 opaque white square bitmap **
	return new Bitmap(new BitmapData(16,16));
}

Line 3: This is optional, but it is a simple way to eliminate possible naming confusion.

Line 4: Use a try-catch block, because getDefinitionByName() expects the class to exist, but it is possible that during development we have not embedded the assets yet, and this method is crafted to return a default 16×16 opaque white square where the asset is missing.

Line 6: Here it is, concatenating the helper class name, an underscore, and the given name parameter, we get the class name of the embedded bitmap asset.

Line 7: If the class/asset exists, this line will be executed (instantiating and returning the requested Bitmap object), otherwise the try-catch block kicks in.

Example complete class code below:

package  
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.utils.getDefinitionByName;
 
	public class AssetsManager 
	{
 
		// ** START EMBED **
 
		[Embed(source="assets/background.png")]
		private static const BACKGROUNDIMAGE:Class;
 
		[Embed(source="assets/iconfileopen.png")]
		private static const ICONFILEOPEN:Class;
 
		[Embed(source="assets/iconfileclose.png")]
		private static const ICONFILECLOSE:Class;
 
		// ** embed other assets as required **
 
		// ** END EMBED **
 
		/**
		 * Returns a Bitmap display object identified by the specified name.
		 * @param	The name of the bitmap asset to return.  This name must match one of the 
		 * @return	A Bitmap display object.
		 */
		public static function GetImage(name:String):Bitmap
		{
			name = name.toUpperCase();
			try
			{
				var cls:Class = getDefinitionByName("AssetsManager_" + name) as Class;
				return new cls() as Bitmap;
			}
			catch (e:Error)
			{
			}
			// ** else return a default 16x16 opaque white square bitmap **
			return new Bitmap(new BitmapData(16,16));
		}
	}
 
}

The above makes it easy to add more assets later on, compared to just accessing the public static members directly. What is more, if you are compiling a library of embedded images and distributing it as a SWC, this makes it so much easier to modify/update the library, and for other collaborators to use the assets.

The purpose of this post, however, is not to discuss “how” to shuffle arrays. Rather, I would like to bring up the question of “why” (do it) in the first place.

In the non-digital world, the shuffling of a deck of cards is mostly necessary given the circumstances – ie, for convenience. In a card game, you shuffle the deck of cards to randomize the order of the cards, and players draw from the top (or bottom) of the deck in sequence. Why do players draw from the top (or bottom) of the deck? For practical reasons, of course. Convenience.

Imagine a card game where the game designer decides that players must pick a card randomly from the deck each time they need to draw a card – the game will end up taking too long to play, drawing cards become tedious, and the game won’t be very popular.

In both methods of card drawing, the outcome is really the same – whether you (i) shuffle a deck of cards and then draw from the top of the deck sequentially, or (ii) leave a deck as it is and then randomly pick a card from the deck each time you need to draw a card, the probability of a particular card being drawn by a player is exactly the same. Let’s take a look at a deck of 52 cards. If you shuffle the deck rigorously, the chance of a card being positioned at the location it is shuffled into, and therefore being drawn at that particular position, is 1.92% (1/52).

Now, look at the other scenario. Leave the deck as it is without shuffling. When a player randomly picks a card from the deck, the probability of picking a particular card as the first card remains at 1.92% (1/52). What is the probability of a particular card to be drawn as the second card? A common misconception is that with less cards left, the probability for subsequent cards are now skewed. Not really. Let’s look at the calculations. First, for a card to be drawn as the second card, it must not be drawn as the first card – got that? The chance of that happening is 98.08% (51/52). Next, the chance of the card being drawn as the second card in the reduced deck of 51 cards is 1.96% (1/51). The composite probability is… 51/52 x 1/51 = 1/52, which is still 1.92%! You can go on to compute for the third card, which is 51/52 x 50/51 x 1/50 = 1/52, and so on.

Okay, we have established that the probability remains the same for both methods of card drawing. So what?

Well, when it comes to programming, I would debate that it is unnecessary to shuffle a deck of cards. Players no longer need the convenience here, so why not pick a card at random each time you need to draw a card? This approach has a couple of advantages:

(i) Preempt cheating by memory peeking. If you use a shuffled deck, you naturally store the sequence in memory, which means hackers can potentially look at the sequence. If you generate a random number on demand, picking a card at random each time a card is to be drawn, nobody can have fore-knowledge of what is to come.

(ii) Fast. You can jump right into a game session without expensive CPU overhead for shuffling arrays. If you have a large deck, shuffling can be inefficient no matter which algorithm you use. Instead of shuffling the deck, you just write the code to pick a card randomly from the remaining deck. Hassle in the non-digital world, fast in the digital version.

// ActionScript 3.0
function drawNext(deck:Array):*
{
	var j:uint = deck.length;
	var r:uint = Math.random() * j;
	var c:* = deck[r];
	deck.splice(r, 1); // removes item from array
	return c;
}

Therefore, when translating a non-digital game into a digital one, take a step back and ponder over whether it is really necessary to implement the rules literally. As long as the intended outcome (in this case the intended probability of each card being drawn at a certain position) is the same, it would probably be worthwhile exploring more efficient implementations.

To get the tracer to work:

1) Go to Tools -> Program Settings (F10).

2) In the Plugins list on the left of the dialog box, look for FlashLogViewer and click on it.

3) On the right panel, look for the “Start Tracking” property, click on the drop down box and select “OnBuildComplete” (it is set to “Manually” by default).

The output of your trace statements are now shown in the Output Panel after you build your project.

I have finally disabled Spaces on Mac OSX. It’s a little painful to disable it, because I had considered it a very crucial feature, considering that without it the desktop gets cluttered quickly with the way the Mac OS presents applications and their respective windows (all mixed together in one very confusing bucket). However, the slide animation that occurs every time Spaces switches from one space to another has become really nauseating.

It was cool at first, but now it is painful to watch.

So much for Apple’s acclaimed emphasis on the “user experience”. Does nobody in the UX team ever stop to think that not everyone likes gimmicky animation stuff for frequent tasks, and there should be an easy way to disable such animations? Unfortunately, there is just no way to disable the animations – I hope to be proven wrong, but my searches have come up fruitless. A quick google visit shows there are other users who wish to get rid of the animation too (and apparently I am not the only one suffering from motion sickness, although most simply want to get rid of the animation just to save time, keeping multitasking slick and snappy).

So, now that I have disabled Spaces, what do I do now with the cluttered desktop? I am currently solving the issue with a little AppleScript and implementation of keyboard shortcuts via Spark – a free utility to create Hot Keys to launch applications and documents, execute AppleScript, etc.

First, you can use simple AppleScript to hide all other applications except the one you are working on:

tell application "Finder"
	set visible of every process whose visible is true and frontmost is not true to false
end tell

If you are already using a Hot Key utility to execute other AppleScript, you already know the routine. If not, you can download Spark, launch it, and then assign the above AppleScript to a keyboard shortcut.

(click on the Shortcut input field and then type the keyboard shortcut to assign the Hot Key)

With the above, F1 has been assigned as the Hot Key – pressing F1 when any application has focus will hide all other windows except the currently active application (or in AppleScript’s terminology, “frontmost” application).

But that only got rid of the clutter, albeit momentarily (as the clutter builds up, I hit F1 again).

What about jumping around applications? That was what Spaces allowed me to do, and now I need to replicate that functionality. Luckily, it is easy enough to do that with Spark. You can once again write AppleScript, such as the following:

tell application "Finder"
	set visible of every process to false
end tell
 
tell application "Xcode"
	activate
	set visible to true
end tell

However, you don’t even need to do that – Spark allows you to assign Hot Keys to Applications, so let’s do that:

As you can see, the above assigns Command-F1 to Xcode, and Command-F2 to Firefox. With that set up, when you are in another application, hitting Command-F1 will jump to Xcode immediately. If Xcode is not yet launched, it will automatically launch first. Spark also provides the options for hiding all applications when your desired program is launched:

So, that is that. A little manual work to assign frequently used applications to Hot Keys. But at least it no longer gets dizzy working on Mac OSX now.

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.

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!

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