Using AS3 to Upload and Encode Images

Since launching Logobama, we’ve had a number of requests for the project source code. The process of saving images from Flash turns out to be a relatively simple one with Actionscript 3, and after some searching, uploading Flash encoded JPEGs to a web server was pretty simple as well.

With the Logobama project, we had three main objectives:

1. Upload an image into a Flash file
2. Encode a JPEG with AS3
3. Post the encoded image to a web server

In the case of Logobama, we also posted the saved image to a Flickr gallery, which was done using the phpFlickr library created by Dan Coulter. Thumbnails are automatically created with phpThumb.

The main engine behind this project is a combination of elements from the Adobe AS3 Corelib, and the very handy UploadPostHelper Class created by Jonathan Marston. There is also a small PHP upload script included in the source, along with TweenLite, which has quickly become our favorite tweening engine.

The basic system within the code nearly mirrors the Logobama project objectives:

1. Use the FileReference Class to upload an image:

var file : FileReference = new FileReference();
file.browse( new Array( new FileFilter( "Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg;*.jpeg;*.gif;*.png" ) ) );

2. Create a snapshot of the flash movie with the BitmapData.draw() method:

// set up a new bitmapdata object that matches the dimensions of the captureContainer;
var bmd : BitmapData = new BitmapData( captureContainer.width, captureContainer.height, true, 0xFFFFFFFF );

// draw the bitmapData from the captureContainer to the bitmapData object;
bmd.draw( captureContainer, new Matrix(), null, null, null, true );

3. Use the Adobe AS3 Corelib to encode a JPEG:

// create a new JPEG byte array with the adobe JPEGEncoder Class;
var byteArray : ByteArray = new JPGEncoder( 90 ).encode( bmd );

4. Post the encoded image to a web server with the help of the UploadPostHelper Class and a basic PHP Upload Script (included in the source files):

// set up the request & headers for the image upload;
var urlRequest : URLRequest = new URLRequest();
urlRequest.url = 'image.php?path=images';
urlRequest.contentType = 'multipart/form-data; boundary=' + UploadPostHelper.getBoundary();
urlRequest.method = URLRequestMethod.POST;
urlRequest.data = UploadPostHelper.getPostData( 'image.jpg', byteArray );
urlRequest.requestHeaders.push( new URLRequestHeader( 'Cache-Control', 'no-cache' ) );

// create the image loader & send the image to the server;
var urlLoader : URLLoader = new URLLoader();
urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
urlLoader.load( urlRequest );

So there you have it, an easy way to upload images into flash, edit them, and post the encoded JPEG result to a web server without the need for any fancy remoting or server-side computation.

Since all the above code is available under a Creative Commons Share Alike license (or similar), we’ve decided to make our source code for this project available as well. The functionality of this example was intentionally minimized to showcase the features outlined in this post. Enjoy, and please feel free to reply with comments, questions, or revisions.