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.

After a clean install of Windows 7, trying to use compc and/or mxmlc from the Flex SDK through command line may yield a “System Error” message:

It seems like Microsoft somehow forgot to ship this Microsoft C Runtime Library DLL in Windows 7. When installing some programs, this DLL may be installed by the respective installers. If you encounter this missing DLL problem, the only way to fix it is to install one of these programs, or otherwise grab hold of the DLL from somewhere and place it in the correct folder:

For Windows 7 32-bit, place the DLL in
C:\Windows\System32

For Windows 7 64-bit, place it in
C:\Windows\SysWOW64

WARNING: Do not install DLL obtained from untrusted sources. You can actually copy the DLL from one of your old Windows OS installations. If you want to use my copy, here it is.

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.

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

However, it must be mentioned that embedding a text XML within SWF will get it compressed as part of the SWF compression anyway. Therefore, if compression is the only motivation, don’t convert the XML to binary and embed the binary version – it does not make sense. But if you wish to do some data encryption, then the additional work may be appropriate.

Embedding External Data
You can embed any external source, including any external XML file, within your SWF using the [Embed] tag:

// ActionScript 3.0
 
// assuming you have an XML file named "data.xml" in folder "assets/data/"
 
[Embed(source="assets/data/data.xml", mimeType="application/octet-stream")]
private static const binaryXML:Class;

Back To XML
You can then instantiate the binary data and convert it back to XML in your code:

var xmlData:XML;
 
var bytes:ByteArray = new binaryXML() as ByteArray
if (bytes)
{
	try
	{
		bytes.uncompress();
	}
	catch(e:Error)
	{
	}
	xmlData = XML(bytes);
}

NOTE: The above code will be able to handle both binary XML and text XML files.

ROT128 Encrypted Binary XML
If you had performed ROT128 encryption on the binary XML, you decrypt it accordingly before calling uncompress():

var xmlData:XML;
 
var bytes:ByteArray = new binaryXML() as ByteArray
if (bytes)
{
	// BEGIN ROT128
	var j:int = data.length;
	while (j--)
	{
		data[j] += 128;
	}
	// END ROT128
	bytes.uncompress();
	xmlData = XML(bytes);
}

NOTE: The above code assumes the data is binary and ROT128 encrypted; it will not be able to handle text XML.

BitmapData to ByteArray
To get a byte array representing the BitmapData, all you need to do is to call the getPixels() method. The getPixels() method requires you to specify the rectangular area to capture; the most convenient way to specify this would be to use the rect property of the BitmapData you are serializing.

// ActionScript 3.0
 
// assuming you have a Bitmap object "bitmapImage" that you would like to serialize
var bytes:ByteArray = bitmapImage.bitmapData.getPixels(bitmapImage.bitmapData.rect);

The method returns a ByteArray object, with each pixel in the BitmapData represented by an unsigned integer, ie four (4) bytes, in the ByteArray. This means that you can expect a 20×20 bitmap image to be represented by a ByteArray object that has 1600 bytes (20 x 20 x 4 = 1600) before compression.

After you have the ByteArray object, compress it:

var bytes:ByteArray = bitmapImage.bitmapData.getPixels(bitmapImage.bitmapData.rect);
bytes.compress();

That effectively gives you the lossless compressed binary data of the bitmap image.

Bitmap Dimensions (Width And Height)
So, getting the ByteArray representation of a bitmap image is simple – just call the getPixels() method.

However, in order for the data to be useful, we must be able to re-construct the bitmap image from it. The byte array in itself does not give any clue as to the dimensions of the bitmap image, only the total number of pixels. This means that you must store the dimensions of the bitmap image as well. Actually, you only need to store either the width or the height, because you can compute the other side once you have either one since you also know the total number of pixels.

In the code below, we will store information about the width of the BitmapData in the first four (4) bytes, followed by the byte array representing the image:

var bytes:ByteArray = new ByteArray();
bytes.writeUnsignedInt(bitmapImage.bitmapData.width);
bytes.writeBytes(bitmapImage.bitmapData.getPixels(bitmapImage.bitmapData.rect));
bytes.compress();

Saving To File
Once the above is done, you can save the binary data normally (by posting it to a server script, via AIR local filesystem API, via SharedObject, via FP10 FileReference, etc.).

For this example, we will save the binary data to file using the save() method of the FileReference class (available when targeting Flash Player 10). As a security measure, the save() method will only work in the Flash Player if you call it in response to a user event (for example, MouseEvent.CLICK event). Therefore, you need to create a button, attach a listener to it, and call the save() method in the event handler.

// ** must target Flash Player version 10+ **
function on_buttonClick(evt:MouseEvent):void
{
	var bytes:ByteArray = new ByteArray();
	bytes.writeUnsignedInt(bitmapImage.bitmapData.width); // store width of image
	bytes.writeBytes(bitmapImage.bitmapData.getPixels(bitmapImage.bitmapData.rect)); // store bitmapdata as bytearray
	bytes.compress();
	new FileReference().save(bytes, "image.bmd"); // default name "image.bmd"
}

You can give the file any name, any extension. In the example code above, I gave the saved file a “.bmd” extension (BitmapData), but this is just a fictitious file type. The resulting file has no valid mimeType and does not work as any known file type – it is our own custom binary file format that is useful only for storage and subsequently re-used by our own application code.

ByteArray to BitmapData
As mentioned above, in order for the saved data to be useful, we must be able to re-construct the original bitmap image from it.

First, we load the file normally via URLLoader:

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));

The following shows a simple on_fileLoad handler:

function on_fileLoad(evt:Event):void
{
	if (evt.type == Event.COMPLETE)
	{
		var data:ByteArray = URLLoader(evt.target).data as ByteArray;
		if (data)
		{
			try
			{
				data.uncompress();
			}
			catch(e:Error)
			{
			}
			// data is now the uncompressed byte array
			// ... process data ...
		}
	}
}

We need to recall the dimensions of the bitmap image. Remember that we saved the value of the width in the first four (4) bytes of the binary data:

// after data.uncompress()
var width:int = data.readUnsignedInt(); // first 4 bytes (unsigned integer)

We can then derive the height:

// after data.uncompress()
var height:int = ((data.length - 4) / 4) / width;
// (data.length - 4) ** byte array less the first four bytes gives the representation of the bitmap **
// ((data.length - 4) / 4) ** length of the representation is divided by four because each pixel takes four bytes **
// ((data.length - 4) / 4) / width ** remember, it is a rectangle, so we can get the height this way **

NOTE: If you want to skip “dimension derivation”, you can store both width and height in your binary data. Either way will work, the choice is yours.

Once you know the dimensions, you can re-construct the Bitmap object using the setPixels() method:

var bmd:BitmapData = new BitmapData(width, height, true, 0); // 32 bit transparent bitmap
bmd.setPixels(bmd.rect, data); // position of data is now at 5th byte
 
var bm:Bitmap = new Bitmap(bmd);
addChild(bm);

Conclusion
The above shows how you can convert BitmapData to a ByteArray, save that ByteArray, and re-construct the BitmapData from the saved ByteArray.

Although the basic purpose would be to save bitmap images to server/local storage, there would also be other scenarios where the above technique will be useful. For example, after you obtain the ByteArray representation of the image, you can post it to your server for further processing. You can also use the technique to trim down your external JPEG/PNG image files, stripping away all meta information from the JPEG/PNG encoding leaving behind only the raw image data (possibly resulting in smaller file sizes). Of course, the resulting binary files will no longer work as JPEG/PNG image files, but your applications will be able to reconstruct the images easily during run-time. Actually, you can also consider this as a way to protect your external image files from unwanted hot linking.

First, set up the TextField:

// ActionScript 3.0
var txt:TextField = new TextField();
// new TextFormat(font, size, color)
txt.defaultTextFormat = new TextFormat("DejaVu Sans", 21, 0xFFFFFF);
txt.antiAliasType = AntiAliasType.ADVANCED;
txt.autoSize = TextFieldAutoSize.LEFT;
txt.text = "The quick brown fox jumps over the lazy dog.";
txt.x = 5;
txt.y = 5;
addChild(txt);

Drawing The Outline
To draw an outline around the text glyphs, use the flash.filters.GlowFilter:

// new GlowFilter(color, alpha, blurX, blurY, strength)
txt.filters = [new GlowFilter(0x000000, 1.0, 2, 2, 4)];

Adjusting The Outline Thickness
To thicken the outline, increase the values for “blurX”, “blurY” and “strength”. The value of “blurX”/”blurY” should be the same. You can try various values to suit your needs, but the value of “strength” should be kept at double that of “blurX”/”blurY”. For example, if I were to use value of 4 for “blurX”/”blurY”, I would set “strength” as 8. Setting “strength” too low will cause blurring to be visible; setting it excessively high and the outline may become distorted.

// new GlowFilter(color, alpha, blurX, blurY, strength)
txt.filters = [new GlowFilter(0x000000, 1.0, 4, 4, 8)];

Aspire UI
If you are using the Aspire UI library, this feature is already built-in via the uiTextStyles manager:
http://ghostwire.com/aspireui/docs/textstyles/outline-and-shadow
The “outlineWeight” text style property (v1.2.2+) determines the thickness of the outline.

Part I: “Applying ROT128 Encryption On ByteArray”
Part II: “Applying ROT128 Encryption On Embedded/Module SWFs”

In “Saving XML As Binary”, we looked at how text XML can be stored in a ByteArray object so that it can be compressed and made non-human-readable. In this post, we look at how you can integrate ROT128 into the XML-to-ByteArray-to-XML routines. Binary XML is used only as an example; you can definitely apply the same concept to other binary data.

XML-to-ByteArray:
ROT128 is applied after the XML is stored and compressed as ByteArray.

var data:ByteArray = new ByteArray();
data.writeUTFBytes(xmlData); // xmlData is original XML string
data.compress();
// BEGIN ROT128
var j:int = data.length;
while (j--)
{
	data[j] += 128;
}
// END ROT128
new FileReference().save(data, "bindata.xml"); // default name "bindata.xml"

ByteArray-to-XML:
With ROT128 applied, the saved binary file is no longer a valid compressed ByteArray – it cannot be uncompressed and converted back to XML without first reversing the encryption on the raw data.

// event handler for Event.COMPLETE of URLLoader loading external XML
function on_XML(evt:Event):void
{
	var data:* = URLLoader(evt.target).data;
	if (data is ByteArray)
	{
		try
		{
			// BEGIN ROT128
			var j:int = data.length;
			while (j--)
			{
				data[j] += 128;
			}
			// END ROT128
			data.uncompress();
		}
		catch(e:Error)
		{
		}
	}
	data = XML(data);
	// handle data as XML
}

Partial Encryption
In order to make the process of reversing ROT128 encryption less predictable, you could vary the conditions under which the encryption is to be applied.

Here is an example (alternate bytes):

// BEGIN ROT128
var j:int = data.length;
while (j--)
{
	data[j] += 128;
	j--; // skip next byte
}
// END ROT128

Another example (first 1024 bytes):

// BEGIN ROT128
var j:int = (data.length < 1024) ? data.length : 1024;
while (j--)
{
	data[j] += 128;
}
// END ROT128

Correspondingly, your applications would reverse the encryption under the same conditions. Effectively, these conditions determine the complexity of your cipher and become the “secret key” necessary to decrypt the data.

Conclusion
ROT128 is a weak encryption technique that you should not use to protect sensitive data. However, the light-weight algorithm can be used to make binary blobs inaccessible to unauthorized parties while allowing your applications to easily restore the data when needed.

This method of encryption may seem amateurish, but it does what it is supposed to do well enough while remaining light-weight and flexible.

It worked well enough for Julius Caesar, after all.

Some time back, we posted a simple technique for hiding assets and AS3 code from prying eyes by embedding one SWF within another SWF. In this post, we revisit that topic and look at how ROT128 can be used to provide an additional layer of protection.

Step I: Apply ROT128 To Actual SWF
Using the following code, we will apply ROT128 to the SWF that is going to be embedded:

// assuming the raw data of the SWF has been stored in a variable swfBytes
var j:int = swfBytes.length;
while (j--)
{
	swfBytes[j] += 128;
}

The following shows a simple tool you can create to load a SWF file, apply ROT128 to it, and save the encrypted file.

• Flash Player 10 is required.
• Click the Browse button to bring up a native file dialog.
• Select a Flash Movie (.swf) file.
• Click the Save button that will be shown after loading the SWF file.

(80×80 SWF, 2KB)

You can verify that encryption has been done by running the saved SWF file “ActualSWF.swf” – it should show a blank screen.

Remember, applying ROT128 twice restores the file, so the tool can also be used to restore a previously ROT128-encrypted file if the algorithm used was the same (same n increment, same conditional loop).

The ROT128SWF class:
(please feel free to customize to fit your own requirements)

package 
{
	import flash.display.Sprite;
	import flash.display.Stage;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.IOErrorEvent;
	import flash.net.FileFilter;
	import flash.net.FileReference;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFieldType;
	import flash.text.TextFormat;
 
	public class ROT128SWF extends Sprite 
	{
 
		// ** minimalist text button **
		private var opButton:TextField;
 
		// ** browse/load/save **
		private var swfFile:FileReference;
 
		public function ROT128SWF():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
 
			// entry point
			stage.align			= StageAlign.LEFT;
			stage.scaleMode			= StageScaleMode.NO_SCALE;
			stage.showDefaultContextMenu	= false;
 
			// ** draw minimalist text button **
			opButton			= new TextField();
			opButton.autoSize		= TextFieldAutoSize.LEFT;
			opButton.background		= true;
			opButton.backgroundColor	= 0x000000;
			opButton.defaultTextFormat	= new TextFormat("Tahoma", 14, 0xFFFFFF, true, null, null, null, null, null, 4, 4);
			opButton.selectable		= false;
			opButton.text		= "BROWSE";
			opButton.x			= (stage.stageWidth - opButton.width) * 0.5;
			opButton.y			= (stage.stageHeight - opButton.height) * 0.5;
			addChild(opButton);
 
			// ** button click listener **
			opButton.addEventListener(MouseEvent.CLICK, on_buttonClick, false, 0, true);
		}
 
		/**
		* handle browse or save
		*/
		private function on_buttonClick(evt:MouseEvent):void
		{
			var btn:TextField = evt.target as TextField;
			if (btn)
			{
				if (btn.text == "BROWSE")
				{
					swfFile = new FileReference();
					swfFile.addEventListener(Event.SELECT, on_swfSelect, false, 0, true);
					swfFile.browse([new FileFilter("Flash Movie","*.swf")]);
				}
				else if (btn.text == "SAVE")
				{
					if (swfFile)
					{
						// ** BEGIN ROT128 **
						var j:int = swfFile.data.length;
						while (j--)
						{
							swfFile.data[j] += 128;
						}
						// ** END ROT128 **
						new FileReference().save(swfFile.data, "ActualSWF.swf");
					}
				}
			}
 
		}
 
		/**
		* handle browse, load swf file
		*/
		private function on_swfSelect(evt:Event):void
		{
			swfFile.removeEventListener(Event.SELECT, on_swfSelect);
			swfFile.addEventListener(Event.COMPLETE, on_swfComplete, false, 0, true);
			swfFile.load();
		}
 
		/**
		* handle load, change browse button to save button
		*/
		private function on_swfComplete(evt:Event):void
		{
			swfFile.removeEventListener(Event.COMPLETE, on_swfComplete);
			opButton.text		= "SAVE";
			opButton.x			= (stage.stageWidth - opButton.width) * 0.5;
		}
	}	
}

Step II: Embed Actual SWF In Shell SWF
If you have not done so already, please see “Hiding Assets And Code By Embedding SWF Within Another SWF” for the original discussion on how the technique works.

The following is a MainShell class you can use to embed the ROT128-encrypted SWF:

package
{
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.utils.ByteArray;
 
	public class MainShell extends Sprite 
	{		
		[Embed(source="ActualSWF.swf", mimeType="application/octet-stream")]
		private static const bytes:Class;
 
		/**
		* REMINDER
		* 
		* MAKE SURE THAT THIS SHELL SWF IS PUBLISHED USING THE
		* ORIGINAL WIDTH/HEIGHT DIMENSIONS OF THE EMBEDDED SWF
		*/
 
		public function MainShell()
		{
			var swf:ByteArray = new bytes() as ByteArray;
			if (swf)
			{
				// ** BEGIN ROT128 **
				var j:int = swf.length;
				while (j--)
				{
					swf[j] += 128;
				}
				// ** END ROT128 **
				Loader(addChild(new Loader())).loadBytes(swf);
			}
		}
	}
}

With the above code, the “ActualSWF.swf” file is embedded into the shell SWF. It is then instantiated as a ByteArray during run-time. ROT128 is then applied to the ByteArray before it is loaded into a Loader object.

Why Do This At All?
Hiding assets and code by embedding one SWF within another SWF is simple to implement and so far, there has not been any report on any decompiler overcoming the protection.

In the original post on the technique, I suggested that you could, if you wish, add another layer of protection by encrypting the embedded SWF just in case a decompiler may in future automatically identify a binary blob and “guess” that it is an embedded SWF (and decompile it separately).

I feel that ROT128 is light-weight and simple enough that can achieve that objective. Remember that the objective here is not to overcome meticulous hacking, but merely to thwart possible attempts to implement automatic extraction and identification of embedded binary blobs as separate SWFs.

The above is only an example of how the concept can be applied. As mentioned in the previous post on ROT128, you can also consider applying ROT128 only to part of the file so that the logic for reversing the encryption could be a little less predictable.

Module SWFs
Although the above mentioned only embedded SWFs, you can definitely apply the same concept to module SWFs that will be loaded into your application during run-time. By applying ROT128 to module SWFs, even if they are obtained via unauthorized means such as via the web browser’s cache, they are non-executable (or will just show a blank screen when run) if the ROT128 encryption is not reversed first.