Here is a list of 3rd party compression libraries and other good stuff:

• AS3 Zip: ActionScript 3 based library for reading and writing zip files
• FZip: FZip is an Actionscript 3 class library to load, modify and create standard ZIP archives.
• ASZip: ActionScript 3 library to generate ZIP files
• LZMA Encoder: AS3 class to compress data using LZMA algorithm.
• LZMA Decoder: A part of the apparat framework.
• GZIP: ActionScript GZIP compression library
• Gzip for HTTPService/URLLoader: Adding Gzip support for Flex/AIR HTTPService/URLLoader
• airxzip: Zip library for ActionScript3 on AIR

If you know some more, please let me know.

The resulting bytes are 32-bit unsigned integers for each pixel represented by AARRGGBB format, followed by another pixels and so on e.g.:

AA RR GG BB:
-- -- -- --
FF FF 00 00
00 00 FF 00

First pixel is full opaque red color, second pixel is full transparent green color. That sounds good enough to use with imagesetpixel(), that requires color in almost identic format, however PHP GD library recognizes alpha values from 0 to 127 in reversed logic (127 full transparent, 0 full opaque). So we only need to change the alpha value and we are good to go:

AA -> AA (php)
--    --
FF -> 00
00 -> 7F

What are we going to do is:

• this format does not know about width and height of image, we have to define it manualy
• access pixels (unsigned integers) from byte array (unpack() is the fastest method for this in PHP i guess)
• iterate over each pixel / color
• get color value and transform to PHP alpha logic
  • $color>>24 returns alpha value (0-255), what we need is to divide it by two (0-127 for php) so $color>>25 works fine
  • inversed logic requires values to be changed from 0-127 to 127-0: 0x7f-AA
  • shift alpha value back to its correct position AA<<24
  • add original RRGGBB values to our new alpha AA|($color&0xffffff)
• pass transformed color value into imagesetpixel() with correct x, y coordinate

This process should return correct image identifier. Lets have a new PHP function imagecreatefrombmdstring()

<?php
function imagecreatefrombmdstring($bytes, $width, $height)
{
	$img=imagecreatetruecolor($width, $height);
	imagealphablending($img, false);
	imagesavealpha($img, true);

	$x=0;
	$y=0;
	$colors=unpack("N*", $bytes);
	foreach($colors as $color)
	{
		imagesetpixel($img, $x, $y, (0x7f-($color>>25)<<24)|($color&0xffffff));
		if(++$x==$width)
		{
			$x=0;
			$y++;
		}
	}
	return $img;
}

The ActionScript code may look something like this, this method is in fact very fast on client side:

var bitmapData:BitmapData = ...
var bytes:Bytes=bitmapData.getPixels(bitmapData.rect);
var loader:URLLoader = new URLLoader();
var request:URLRequest = new URLRequest();
request.url = "our.php";
request.contentType = "application/octet-stream";
request.method = URLRequestMethod.POST;
request.data = bytes;
loader.load(request);

To optimize it even more, use ByteArray.compress() to compress bytes before sending, now you should get binary request not much bigger than length of the same request containing PNG encoded image bytes. On PHP side use gzuncompress() to get raw bytes.

Why did I developer/used this method of sending image to server? Well, I was not able to find fast enought/asynchronous PNG encoder. By using this technique, I was able to scale the getPixels+compress process into multiple frames (asynchronously) in order to create smooth upload process (using MultipartURLLoader).

Pixel Bender for Flash Player lets you play some more advanced games. Based on your needs you can force your kernels to “eat” not only BitmapData, but also ByteArray-s or Vector-s. With this knowledge, you can simply use Pixel Bender kernels for some fast math or processing like 3D engines (3D to 2D projection) etc. Lets have a look at some simple demos, how to push vector and raw bytes directly into shader via ShaderJob:

Vector.<Number>

Simple (one-dimension) vector may be recognized by pixel bender as 3-channel input just as simple as providing correct width/height for shader:

var src:Vector.<Number> = new Vector.<Number>();
while(someLooping)
{
    src.push(x);
    src.push(y);
    src.push(z);
}

var shader:Shader = new Shader(code);
shader.data.src.input = src;
shader.data.src.width = src.length / 3; // forces pixel bender to use image3 as input
shader.data.src.height = 1;

var res:Vector.<Number> = new Vector.<Number>();
var job:ShaderJob = new ShaderJob(shader, res, src.length / 3, 1);
job.start(true);

for(var i:uint=0; i<src.length; i+=3)
{
    x = res[i];
    y = res[i+1];
    z = res[i+2];
}

ByteArray

If you are more in “low-level” things, try using raw bytes as input. Do not forget to setup LITTLE_ENDIAN for source and result variables. Also make sure width*height*4 results in source bytes length.

var src:ByteArray = new ByteArray();
src.endian = Endian.LITTLE_ENDIAN;
src.position = 0;
while(someLooping)
{
    src.writeFloat(x);
    src.writeFloat(y);
    src.writeFloat(z);
}

var shader:Shader = new Shader(code);
shader.data.src.input = src;
shader.data.src.width = 256; // e.g.
shader.data.src.height = src.length/4/256;

var res:ByteArray = new ByteArray();
res.endian = Endian.LITTLE_ENDIAN;

var job:ShaderJob = new ShaderJob(shader, res, 256, src.length/4/256);
job.start(true);

res.position = 0;
for(var i:uint = 0; i<src.length/4; i++)
{
    x = res.readFloat();
    y = res.readFloat();
    z = res.readFloat();
}

Lets have a look at how pixel bender handles input and outputs. As with current version of pixel bender/flash player it seems like:

'res' : cannot have 1 or 2 channel outputs

… but you can use 3 or 4 channel outputs (float3, pixel3).

<languageVersion : 1.0;>
kernel threed <namespace : "sk.yoz";vendor : "Yoz";version : 1;>
{
    input image3 src;
    output float3 res; // or pixel3
    void evaluatePixel()
    {
        res = sample(src, outCoord());
        // we have res.x, res.y and res.z
    }
}

Where to go from here:

• Using Pixel Bender to calculate information
• Number crunching with as3 and pixelbender
• Using Pixel Bender with Flash Builder 4 as a number crunching engine
• Flash 10, Massive amounts of 3D particles with Alchemy (source included).

Have you ever heard about inline images? Inline images use the data URI scheme to embed images directly within web pages. As defined by RFC 2397, data URIs are designed to embed small data items as “immediate” data, as if they were referenced externally. This basicaly means, you can insert base64 encoded byte code of any image directly into html file. Using inline images saves HTTP requests over externally referenced objects. Data URIs can potentially store any type of data, not just images!

This example creates snapshot of flash application (on left side) and dynamicly (using javascript) creates inline image (right side) with base64 encoded bytes in src attribute. (right side is html <img>)

Application source:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    enterFrame="enterFrame()" borderStyle="solid" borderColor="#000000"
    backgroundColor="#ffffff">
<mx:Script>
<![CDATA[
    import com.adobe.images.PNGEncoder;
    import com.dynamicflash.util.Base64;

    private function enterFrame():void
    {
        if(!container || !container.width)
            return;

        container.graphics.beginFill(Math.random() * 0xffffff, Math.random());
        container.graphics.drawCircle(
            Math.random() * container.width,
            Math.random() * container.height, Math.random() * 30);

    }

    private function makeSnapshot(source:DisplayObject):void
    {
        var script:String = 'var img = document.getElementById("img");'
            + 'if(!img)'
            + '{'
                + 'img = document.createElement("IMG");'
                + 'img.id="img";'
                + 'document.body.appendChild(img);'
            + '}'
            + 'img.src="' + getSrc(source) +'";';
        ExternalInterface.call("function(){" + script + "}");
    }

    private function getByteArray(source:DisplayObject):ByteArray
    {
        var bitmapData:BitmapData = new BitmapData(source.width, source.height);
        bitmapData.draw(source);
        var bitmap:Bitmap = new Bitmap(bitmapData);
        return PNGEncoder.encode(bitmapData);
    }

    private function getSrc(source:DisplayObject):String
    {
        var byteArray:ByteArray = getByteArray(source);
        return 'data:image/png;base64,'
            + Base64.encodeByteArray(byteArray);
    }
]]>
</mx:Script>
<mx:Container id="container" width="100%" height="100%"/>
<mx:Button label="Make Snapshot" click="makeSnapshot(this)"/>
</mx:Application>

Data URLs save HTTP requests. When combined with CSS sprites, data URLs can save numerous HTTP requests. It would be interesting to see if data URLs can be combined with USEMAPS or make a data URL CSS sprite. Data URLs are a convenient way to create self-enclosed web pages that don’t rely on external objects to render.

• Save HTTP requests, avoids adding to object overhead
• Save concurrent thread – browsers default to two simultaneous connections per hostname
• HTTPS requests are simplified and performance improved

Well, for now I have no idea how can flash benefit from data urls but if I come to something I let you know.

How would you convert / compress 64 character long hex string (0-9a-f) into shortest possible web-safe-char string? (base64 chars is fine) The reverse algorithm must be able to “uncompress” resulting string back into original hex.

I have created p16Top64() compress algorithm and p64Top16() uncompress (reversed) algorithm based on ByteArray class and writeUnsignedInt(), readUnsignedInt() methods. Both p16Top64() and p64Top16() methods are now part of sk.yoz.data.Serialization class. By using p16Top64() method I was able to compress original 64 chars into 44 chars. But, is it possible to compress it into less than 44 char long base64 (0-9a-Z/=) string?

To be more specific lets assume your original string is:

295eb2c90b37696bb9256d05e404ad037078092214ce73cbe838302a04818507

My compress and uncompress methods:

import com.dynamicflash.util.Base64; // !use this Base64 class!

public static function p16Top64(p16:String):String
{
    var b:ByteArray = new ByteArray();
    var s:String = p16;
    while(s.length)
    {
        b.writeUnsignedInt(parseInt("0x" + s.substr(0, 8), 16));
        s = s.substr(8);
    }
    b.position = 0;
    return Base64.encodeByteArray(b);
}

public static function p64Top16(p64:String):String
{
    var r:String = "";
    var b:ByteArray = Base64.decodeToByteArray(p64);
    var x:String = "";
    b.position = 0;
    while(b.position < b.length)
    {
        x = b.readUnsignedInt().toString(16);
        r += String("00000000").substr(x.length) + x;
    }
    return r;
}

Lets test it:

Serialization.p16Top64("295eb2c90b37696bb9256d05e404ad037078092214ce73cbe838302a04818507")
// returns 64 chars.: KV6yyQs3aWu5JW0F5AStA3B4CSIUznPL6DgwKgSBhQc=

This is more less first time I have used ByteArray this way, so maybe there is even a better usage. If you can think of one, just let me know.

Lets see how to convert between Bitmap, BitmapData and ByteArray in few examples:

• DisplayObject to BitmapData
• BitmapData to Bitmap
• BitmapData to ByteArray
• URL (image) to ByteArray (asynchronous)
• URL (image) to BitmapData (asynchronous)
• ByteArray to BitmapData (asynchronous)

DisplayObject to BitmapData. FYI DisplayObject is any visible object in flash (Sprite, MovieClip, Bitmap, UIComponent, Video etc…):

import flash.display.BitmapData;
var bitmapData:BitmapData = new BitmapData(button.width, button.height, false, 0xFFFFFF);
bitmapData.draw(button);
// result: bitmapData

BitmapData to Bitmap:

import flash.display.Bitmap;
var bitmap:Bitmap = new Bitmap(bitmapData);
// result: bitmap

BitmapData to ByteArray. Requires jpeg / png or any other encoder. Read more about JPEG encoding here:

import mx.graphics.codec.JPEGEncoder;
import flash.utils.ByteArray;
var encoder:JPEGEncoder = new JPEGEncoder(90);
var byteArray:ByteArray = encoder.encode(bitmapData));
// result: byteArray

URL (image) to ByteArray. Asynchronous operation:

import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.events.Event;
import flash.net.URLRequest;
import flash.utils.ByteArray;

var loader:Loader = new Loader();
loader.load(new URLRequest("banner1.jpg"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);

private function loaderComplete(event:Event):void
{
    var loaderInfo:LoaderInfo = LoaderInfo(event.target);
    var byteArray:ByteArray = loaderInfo.bytes;
    // result: byteArray
}

URL (image) to BitmapData. Asynchronous operation:

import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.events.Event;
import flash.net.URLRequest;
import flash.display.BitmapData;

var loader:Loader = new Loader();
loader.load(new URLRequest("banner1.jpg"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);

private function loaderComplete(event:Event):void
{
    var loaderInfo:LoaderInfo = LoaderInfo(event.target);
    var bitmapData:BitmapData = new BitmapData(loaderInfo.width, loaderInfo.height, false, 0xFFFFFF);
    bitmapData.draw(loaderInfo.loader);
    // result: bitmapData
}

ByteArray to BitmapData. Asynchronous operation:

import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.events.Event;
import flash.display.BitmapData;

var loader:Loader = new Loader();
loader.loadBytes(byteArray);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);

private function loaderComplete(event:Event):void
{
    var loaderInfo:LoaderInfo = LoaderInfo(event.target);
    var bitmapData:BitmapData = new BitmapData(loaderInfo.width, loaderInfo.height, false, 0xFFFFFF);
    bitmapData.draw(loaderInfo.loader);
    // result: bitmapData
}

Synchronous JPEG ByteArray to BitmapData can be found here

• sk.yoz.data.Serialization
• com.dynamicflash.util.Base64

sk.yoz.data.Serialization containst public static classes only, that lets you convert between objects, bytearrays and strings:

package sk.yoz.data
{
    import flash.utils.ByteArray;
    import com.dynamicflash.util.Base64;

    public class Serialization
    {
        public static function objectToString(data:Object):String
        {
            var bytes:ByteArray = objectToBytes(data);
            return bytesToString(bytes);
        }

        public static function stringToObject(data:String):Object
        {
            var bytes:ByteArray = stringToBytes(data);
            return bytesToObject(bytes);
        }

        public static function objectToBytes(data:Object):ByteArray
        {
            var bytes:ByteArray = new ByteArray();
            bytes.writeObject(data);
            bytes.position = 0;
            return bytes;
        }

        public static function bytesToString(bytes:ByteArray):String
        {
            return Base64.encodeByteArray(bytes);
        }

        public static function stringToBytes(data:String):ByteArray
        {
            return Base64.decodeToByteArray(data);
        }

        public static function bytesToObject(bytes:ByteArray):Object
        {
            bytes.position = 0;
            return bytes.readObject();
        }
    }
}

com.dynamicflash.util.Base64 is class from Steve Webster, and I use it in Serialization while Base64Encoder and Base64Decoder did not worked for me (flex sdk 3.4):

/*
Base64 - 1.1.0

Copyright (c) 2006 Steve Webster

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions: 

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

package com.dynamicflash.util {

	import flash.utils.ByteArray;

	public class Base64 {

		private static const BASE64_CHARS:String = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

		public static const version:String = "1.1.0";

		public static function encode(data:String):String {
			// Convert string to ByteArray
			var bytes:ByteArray = new ByteArray();
			bytes.writeUTFBytes(data);

			// Return encoded ByteArray
			return encodeByteArray(bytes);
		}

		public static function encodeByteArray(data:ByteArray):String {
			// Initialise output
			var output:String = "";

			// Create data and output buffers
			var dataBuffer:Array;
			var outputBuffer:Array = new Array(4);

			// Rewind ByteArray
			data.position = 0;

			// while there are still bytes to be processed
			while (data.bytesAvailable > 0) {
				// Create new data buffer and populate next 3 bytes from data
				dataBuffer = new Array();
				for (var i:uint = 0; i < 3 && data.bytesAvailable > 0; i++) {
					dataBuffer[i] = data.readUnsignedByte();
				}

				// Convert to data buffer Base64 character positions and
				// store in output buffer
				outputBuffer[0] = (dataBuffer[0] & 0xfc) >> 2;
				outputBuffer[1] = ((dataBuffer[0] & 0x03) << 4) | ((dataBuffer[1]) >> 4);
				outputBuffer[2] = ((dataBuffer[1] & 0x0f) << 2) | ((dataBuffer[2]) >> 6);
				outputBuffer[3] = dataBuffer[2] & 0x3f;

				// If data buffer was short (i.e not 3 characters) then set
				// end character indexes in data buffer to index of '=' symbol.
				// This is necessary because Base64 data is always a multiple of
				// 4 bytes and is basses with '=' symbols.
				for (var j:uint = dataBuffer.length; j < 3; j++) {
					outputBuffer[j + 1] = 64;
				}

				// Loop through output buffer and add Base64 characters to
				// encoded data string for each character.
				for (var k:uint = 0; k < outputBuffer.length; k++) {
					output += BASE64_CHARS.charAt(outputBuffer[k]);
				}
			}

			// Return encoded data
			return output;
		}

		public static function decode(data:String):String {
			// Decode data to ByteArray
			var bytes:ByteArray = decodeToByteArray(data);

			// Convert to string and return
			return bytes.readUTFBytes(bytes.length);
		}

		public static function decodeToByteArray(data:String):ByteArray {
			// Initialise output ByteArray for decoded data
			var output:ByteArray = new ByteArray();

			// Create data and output buffers
			var dataBuffer:Array = new Array(4);
			var outputBuffer:Array = new Array(3);

			// While there are data bytes left to be processed
			for (var i:uint = 0; i < data.length; i += 4) {
				// Populate data buffer with position of Base64 characters for
				// next 4 bytes from encoded data
				for (var j:uint = 0; j < 4 && i + j < data.length; j++) {
					dataBuffer[j] = BASE64_CHARS.indexOf(data.charAt(i + j));
				}

      			// Decode data buffer back into bytes
				outputBuffer[0] = (dataBuffer[0] << 2) + ((dataBuffer[1] & 0x30) >> 4);
				outputBuffer[1] = ((dataBuffer[1] & 0x0f) << 4) + ((dataBuffer[2] & 0x3c) >> 2);
				outputBuffer[2] = ((dataBuffer[2] & 0x03) << 6) + dataBuffer[3];

				// Add all non-padded bytes in output buffer to decoded data
				for (var k:uint = 0; k < outputBuffer.length; k++) {
					if (dataBuffer[k+1] == 64) break;
					output.writeByte(outputBuffer[k]);
				}
			}

			// Rewind decoded data ByteArray
			output.position = 0;

			// Return decoded data
			return output;
		}

		public function Base64() {
			throw new Error("Base64 class is static container only");
		}
	}
}

Usage:

var s:Object = {hallo:"hallo"};
var r:Object = Serialization.stringToObject(Serialization.objectToString(s));
trace(r); // equals to s

First, you can use original adobe mx.graphics.codec.JPEGEncoder. Sadly, this encoder is the slowest. There were attemps to make it faster by otpimizing code by bytearray.org, that resulted into two times faster org.bytearray.images.JPEGEncoder. Usage is pretty simple:

import org.bytearray.JPEGEncoder;

function encode():ByteArray
{
    var bitmapData:BitmapData = new BitmapData(this.width, this.height, false);
    bitmapData.draw(this);
    var encoder:JPEGEncoder = new JPEGEncoder(80);
    return encoder.encode(bitmapData);
}

But not fast enough . Since Flash Player 10 introduced alchemy (compiled C and C++ code within flash apps), it was possible to use optimized C++ encoder to do the work. Encoding time is more than 30 times faster than the original JPEGEncoder, pretty cool huh? Code looks like this

import cmodule.jpegencoder.CLibInit;

function encode():ByteArray
{
    var bitmapData:BitmapData = new BitmapData(this.width, this.height, false);
    bitmapData.draw(this);
    var init:CLibInit = new CLibInit();
    var lib:Object = init.init();
    var byteArray:ByteArray = new ByteArray();
    var byteArrayOut:ByteArray = new ByteArray();
    byteArray = bitmapData.getPixels(bitmapData.rect);
    byteArray.position = 0;
    lib.encode(byteArray, byteArrayOut, bitmapData.width, bitmapData.height, 80);
    return byteArrayOut;
}

You can also run your encoding in asynchronous mode… Read more and see tests here:

• Alchemy – asynchronous jpeg encoding
• Speed up JPEG encoding using Alchemy
• Alchemy technology