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.

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.

I should also clarify that the term “ROT128″ does not actually exist. The original idea comes from ROT13, a variant of the Caesar Cipher (named after Julius Caesar of ancient Rome who used it to encrypt messages, but it is not clear who first invented or started using the cipher).

ROT13
With ROT13, you obfuscate a piece of text by substituting each character with one that is 13 positions higher up in the English alphabet (A-Z) sequence, with positions wrapping back to the beginning after Z. Therefore, you are rotating the positions (thus the name of the cipher). The choice of 13 positions is used because there are 26 alphabets (positions), which means applying ROT13 twice restores the original text. In other words, the exact same algorithm is used for both encoding and decoding. Effectively, the alphabet A becomes N and vice versa. Likewise, M becomes Z and vice versa, etc.

ROT128
With ROT128, instead of obfuscating text, we will corrupt a ByteArray object by rotating all its byte values by 128 positions each. A byte value has 256 possible positions, and so in the spirit of using the same algorithm for encoding and decoding, we will rotate values by 128 positions. Therefore, 0 becomes 128 and vice versa, 1 becomes 129 and vice versa, 127 becomes 255 and vice versa, etc.

function ROT128(bytes:ByteArray):void
{
	// bytes is ByteArray object to encrypt/decrypt
	// you are modifying the object directly, not a clone
	if (bytes)
	{
		var j:int = bytes.length;
		while (j--)
		{
			bytes[j] += 128;
		}
	}
}

As you can see, the algorithm is very simple. The ROT128 function listed above is intended for reference only. You don’t even really need to create such a function since you can easily sneak the code in-line into the part(s) of your application code where it will actually be used. After all, if your SWF is decompiled, having a function named ROT128() is more likely to alert the hacker to the usage of the cipher.

Partial ROT128
Sometimes, less is more. Instead of applying ROT128 to every byte in the ByteArray object, you may choose to do a variant of that – apply to just the first 50%, last 50%, first and last 1024 bytes, every two bytes, etc. Doing so would make the cipher slightly more complex, and yet requiring only a slight change to the code (the condition of the loop).

ROTn
Instead of rotating by 128 positions, you can choose to rotate by some other number between 1 to 127. Of course, 128 is the only number that will allow you to use the exact same code for encoding and decoding. Using any other number would require opposite operations – if you increment for encoding, then you need to decrement for decoding.

Usage Examples
In the next couple of posts, we will revisit two topics discussed in this blog previously and see how ROT128 can be applied in those scenarios:
(i) Hiding Assets And Code By Embedding SWF Within Another SWF; and
(ii) Saving XML As Binary.

As mentioned in the previous post, you can save XML in binary and get the benefits of compression, but doing so would make it impossible to edit the data through a text editor.

This post explores a simple tool you can create easily using Flash/ActionScript 3, a tool that will allow you (or your clients and end-users) to load, read, edit and save XML in compressed binary format. As shown below, this is a minimalist approach – feel free to beautify and/or customize it to fit your own requirements.

You can find the source code at the end of this post. The code does not use any UI component, not from Aspire UI, Flex or Flash, just plain native Flash Player classes so you can compile the AS3 class alone without any additional library.

(480×480 SWF, 2KB)

• You need Flash Player 10+ to view the above SWF.
• Click the “Browse” button to open a native local filesystem dialog – choose an XML file to load.
• Once loaded, the XML will be displayed in the input text field above.
• After that, click the “Save” button to open a native local filesystem dialog – choose location and file name.
• Look for the saved file in your local storage – notice that the file size is much smaller than the original.
• If you open the saved file in a text editor, you will see garbage text because it is in compressed binary format.
• You can load a binary XML file into the above tool (if it was saved in “.xml” extension).
• You can edit the XML in the text field before saving.

BinaryXMLTool Class

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.net.URLLoader;
	import flash.net.URLRequest;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFieldType;
	import flash.text.TextFormat;
	import flash.utils.ByteArray;
	import flash.xml.XMLDocument;
 
	public class BinaryXMLTool extends Sprite 
	{
 
		// ** minimalist buttons **
		private var browseButton:TextField;
		private var saveButton:TextField;
 
		// ** minimalist editor **
		private var xmlText:TextField;
 
		// ** browse/load/save **
		private var xmlFile:FileReference;
 
		public function BinaryXMLTool():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 editor **
			xmlText				= new TextField();
			xmlText.multiline		= true;
			xmlText.background		= true;
			xmlText.backgroundColor		= 0xEEEEEE;
			xmlText.type			= TextFieldType.INPUT;
			xmlText.width			= 400;
			xmlText.height			= 400;
			xmlText.border			= true;
			xmlText.x			= (stage.stageWidth - xmlText.width) * 0.5;
			addChild(xmlText);
 
			// ** draw minimalist browse button **
			browseButton			= new TextField();
			browseButton.autoSize		= TextFieldAutoSize.LEFT;
			browseButton.background		= true;
			browseButton.backgroundColor	= 0x000000;
			browseButton.defaultTextFormat	= new TextFormat("Tahoma", 14, 0xFFFFFF, true, null, null, null, null, null, 4, 4);
			browseButton.selectable		= false;
			browseButton.text		= "BROWSE";
			browseButton.x			= (stage.stageWidth - browseButton.width) * 0.5;
			browseButton.y			= 420;
			addChild(browseButton);
 
			// ** draw minimalist save button **
			saveButton			= new TextField();
			saveButton.autoSize		= TextFieldAutoSize.LEFT;
			saveButton.background		= true;
			saveButton.backgroundColor	= 0xAAAAAA;
			saveButton.defaultTextFormat	= browseButton.defaultTextFormat;
			saveButton.selectable		= false;
			saveButton.text			= "SAVE";
			saveButton.x			= (stage.stageWidth - saveButton.width) * 0.5;
			saveButton.y			= 460;
			addChild(saveButton);
 
			// ** button listeners **
			browseButton.addEventListener(MouseEvent.CLICK, on_buttonClick, false, 0, true);
			saveButton.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")
				{
					xmlFile = new FileReference();
					xmlFile.addEventListener(Event.SELECT, on_xmlSelect, false, 0, true);
					xmlFile.browse([new FileFilter("XML Documents","*.xml")]);
				}
				else if (btn.text == "SAVE")
				{
					if (xmlFile)
					{
						if (xmlText.text.length)
						{
							// ** saving as binary **
							var data:ByteArray = new ByteArray();
							data.writeUTFBytes(xmlText.text);
							data.compress();
							new FileReference().save(data, "bin" + xmlFile.name);
						}
					}
				}
			}
 
		}
 
		/**
		* handle browse, load XML file
		*/
		private function on_xmlSelect(evt:Event):void
		{
			xmlFile.removeEventListener(Event.SELECT, on_xmlSelect);
			xmlFile.addEventListener(Event.COMPLETE, on_xmlComplete, false, 0, true);
			xmlFile.load();
		}
 
		/**
		* handle load, check if it is binary, uncompress, display XML in editor
		*/
		private function on_xmlComplete(evt:Event):void
		{
			xmlFile.removeEventListener(Event.COMPLETE, on_xmlComplete);
 
			saveButton.backgroundColor = 0x000000;
 
			var data:* = FileReference(evt.target).data;
			if (data is ByteArray)
			{
				try
				{
					ByteArray(data).uncompress();
				}
				catch(e:Error)
				{
				}
 
			}
			data = XML(data);
			xmlText.text = data;
		}
	}	
}

Admittedly, having the XML data in compressed binary format contradicts the original intention of using XML in the first place – to allow human-readable data. Therefore, you will have to decide what exactly is important for your application before proceeding. Perhaps having cryptic external data is indeed what you want – allowing data to be externalized so they can be changed without requiring the SWF to be recompiled, and yet would prefer the data to be non-human-readable.

Converting XML To Binary Data (ByteArray)
First, we look at how to store the XML data in a ByteArray. The following code assumes that you already have the XML data stored as a String value in a variable named “xmlData”:

var data:ByteArray = new ByteArray();
data.writeUTFBytes(xmlData); // xmlData is original XML string
data.compress();

And that does it – the XML data is now in compressed binary.

Saving to File
Now that you have the binary data as a ByteArray object, you can save that object to file as raw data. You can do that either by
(i) posting to a server script;
(ii) using AIR API to save to local storage; or
(iii) using Flash Player 10 API to save to local storage.

We will look at (iii), because that is most accessible to every Flash developer. The class you will use is flash.net.FileReference. The FileReference.save() method is available when targeting Flash Player 10 – it allows you to save the data in the FileReference object to a local file.

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

function on_buttonClick(evt:MouseEvent):void
{
	var data:ByteArray = new ByteArray();
	data.writeUTFBytes(xmlData); // xmlData is original XML string
	data.compress();
	new FileReference().save(data, "bindata.xml"); // default name "bindata.xml"
}

The save() method will open a native dialog box – choose a file name and location and you will save the XML data in your local filesystem. Notice that you can save the file in the “.xml” extension, but you will no longer get a human-readable XML file – you will see garbage text if you open the file in a text editor because the data is in compressed binary.

Loading Binary XML
You can load the binary file the same way you would a normal XML file:

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

Therefore, the code for loading is the same as for normal text XML files, except that you need to set dataFormat to URLLoaderDataFormat.BINARY. Even if you end up loading a normal text XML file, the above code will work just fine.

Converting Binary Data To XML
After the binary XML file is loaded, you convert the binary data back to text XML.

var xmlData:XML;
 
function on_XML(evt:Event):void
{
	if (evt.type == Event.COMPLETE)
	{
		var data:* = URLLoader(evt.target).data;
		if (data is ByteArray)
		{
			try
			{
				ByteArray(data).uncompress();
			}
			catch(e:Error)
			{
			}
		}
		xmlData = XML(data);
	}
}

With the code above, your application will be able to handle both text XML and binary XML files. Therefore, this code is something you can use even if you are not currently using XML stored as compressed binary data. If at a later time you decide to compress your XML in binary format, the application will be able to handle it just fine.

In the next post, we will look at a simple tool you can create easily using Flash/ActionScript 3 to load, read, edit and save XML files in compressed binary format.

Note:
The above technique can be used for any text file, not just XML.

Unfortunately, when targeting Flash Player 9, this clear() method is not available. If you are using a ByteArray object as a data store, keeping a reference to the object and therefore not allowing the object to be garbage collected, do take note that there is no way to clear the contents. This means that the size of ByteArray objects can only be enlarged and never shrunk.

It is important to note that while you can truncate the ByteArray to zero byte by setting its length property to zero, this will not dispose the contents or free up the memory used.

This is actually a rather odd implementation. After you truncate a ByteArray, the bytes stay in memory and is in fact restorable simply by setting the length property back to a non-zero value.

var bytes:ByteArray = new ByteArray();
bytes.writeUTFBytes("ABCDE");
trace(bytes[0]); // 65
trace(bytes[1]); // 66
trace(bytes[2]); // 67
trace(bytes[3]); // 68
trace(bytes[4]); // 69
bytes.length = 0;
trace(bytes[0]); // undefined
trace(bytes[1]); // undefined
trace(bytes[2]); // undefined
trace(bytes[3]); // undefined
trace(bytes[4]); // undefined
bytes.length = 5;
trace(bytes[0]); // 65 ** what the ??? necromancy at work ??? **
trace(bytes[1]); // 66
trace(bytes[2]); // 67
trace(bytes[3]); // 68
trace(bytes[4]); // 69

In my opinion, this implementation is flawed. The Flash Player really should clear the data once the array of bytes is truncated; this should not require a new API method clear() to accomplish. To introduce a new API method that does what setting the length property to zero should have done in the first place really baffles me.

Anyway, rant aside, so that is that – when you truncate a ByteArray, remember that the data is not lost. When targeting Flash Player 10 or AIR 1.5, do remember to call the clear() method instead of attempting to clear the contents by truncating.

Zerofying Bytes
Since the data stays in memory, I reckon it could sometimes be useful to erase the data explicitly, especially if it contains sensitive data:

function zerofy(bytes:ByteArray):void
{
	if (bytes)
	{
		var j:int = bytes.length;
		while (j--)
		{
			bytes[j] = 0;
		}
	}
}

I am not sure if the clear() method in FP10 API does this (or something similar to erase the data in memory) – I sure hope it does.

Finding The First Occurrence Of The Pattern – indexOf()

• We want to know the index position of the first occurrence of the pattern, if any.
• We take the first byte of the sequence we are looking for, and scan through the target ByteArray byte-by-byte to find a match.
• Once a match is found, we take the last byte of the sequence we are looking for, and check if the byte at the corresponding position in the target ByteArray also matches. If not, we have found a false candidate and therefore the bytes in-between need not be tested.
• We continue working backwards until all the bytes in the sequence are tested, aborting if a comparison is false.
• Once all the bytes in the sequence are tested positive, we have found an occurrence of the pattern.

public static function indexOf(target:ByteArray, pattern:*, fromIndex:int = 0):int
{
	var arr:Array, end:Boolean, found:Boolean, a:int, i:int, j:int, k:int;
 
	var toFind:ByteArray = toByteArray(pattern);
	if (toFind == null)
	{
		// ** type of pattern unsupported **
		throw new Error("Unsupported Pattern");
		return;
	}
 
	a	= toFind.length;
	j	= target.length - a;
 
	if (fromIndex < 0)
	{
		i = j + fromIndex;
		if (i < 0)
		{
			return -1;
		}
	}
	else
	{
		i = fromIndex;
	}
	while (!end)
	{
		if (target[i] == toFind[0])
		{
			// ** found a possible candidate **
			found	= true;
			k		= a;
			while (--k)
			{
				if (target[i + k] != toFind[k])
				{
					// ** doesn't match, false candidate **
					found = false;
					break;
				}
			}
			if (found)
			{
				return i;
			}
		}
		if (fromIndex < 0)
		{
			end = (--i < 0);
		}
		else
		{
			end = (++i > j);
		}
	}
	return -1;
}

Defining The Pattern
The indexOf() method has the following signature:

public static function indexOf(target:ByteArray, pattern:*, fromIndex:int = 0):int

If you have the sequence of bytes to find already defined as a ByteArray, you can use that for the pattern parameter (ie, you can look for a ByteArray within a ByteArray):

ByteArrayUtils.indexOf(target, sequence); // where sequence is a ByteArray object

Otherwise, you can define the sequence of bytes as an Array of byte values:

ByteArrayUtils.indexOf(target, [0x72, 0x69, 0x76, 0x76, 0x79]);

You can also define a String to look up:

ByteArrayUtils.indexOf(target, "HELLO");

The toByteArray() method helps to convert Array or String to ByteArray:

public static function toByteArray(obj:*):ByteArray
{
	var toFind:ByteArray;
	if (obj is ByteArray)
	{
		toFind = obj;
	}
	else
	{
		toFind	= new ByteArray();
		if (obj is Array)
		{
			// ** looking for a sequence of target **
			var i:int = obj.length;
			while (i--)
			{
				toFind[i] = obj[i];
			}
		}
		else if (obj is String)
		{
			// ** looking for a sequence of string characters **
			toFind.writeUTFBytes(obj);
		}
		else
		{
			return null;
		}
	}
	return toFind;
}

Specifying Where To Begin Searching – fromIndex

• By default, we will scan from index position zero to the last valid index position (which is “length of target byte array less the length of sequence of bytes to find”).
• To begin searching with an offset, specify the fromIndex parameter.

ByteArrayUtils.indexOf(target, "HELLO", 1000); // skip the first 1000 bytes

Finding Multiple Occurrences – indicesOf()

• The indicesOf() method returns an array containing the index positions found. If no match is found, an empty array is returned.

var indices:Array = ByteArrayUtils.indicesOf(target, [0x72, 0x69, 0x76, 0x76, 0x79]);

public static function indicesOf(target:ByteArray, pattern:*, fromIndex:uint = 0):Array
{
	var arr:Array			= [];
	var toFind:ByteArray	= toByteArray(pattern);
	if (toFind == null)
	{
		// ** type of pattern unsupported **
		throw new Error("Unsupported Pattern");
		return;
	}
	var i:int			= indexOf(target, toFind, fromIndex);
	while (i != -1)
	{
		arr[arr.length] = i;
		i = indexOf(target, toFind, i + 1);
	}
	return arr;
}

Finding The Last Occurrence – lastIndexOf()

• Use the lastIndexOf() method to find the last, instead of the first, occurrence of the pattern.
• The indexOf() method has been coded to search backwards if the fromIndex parameter is a negative integer.
• The lastIndexOf() therefore simply calls the indexOf() method passing -1 for the fromIndex parameter.

Testing By Unsigned Integers
I tried testing four bytes at a time, ie by comparing unsigned integers, but the performance ended up worse off. I have therefore removed that implementation. The following was the idea behind that implementation:

• If the sequence we are looking for is more than five bytes, we will test for matches using unsigned integers (so four bytes at a time). If the sequence is five bytes or less, we stick to byte-by-byte scan because the first and last byte would have been tested (so left three or less bytes to test).
• As long as there are four or more bytes left to test, unsigned integer comparison is used, otherwise byte value comparison is used.

ByteArrayUtils Class
ByteArrayUtils ActionScript 3.0 Class

ByteArrayUtils.zip