Henry Jones

Using the AS3 Jpeg Encoder

Nov 2, 200750 Comments

Some amazing things can be done with images in ActionScript 3. One of these is the ability to encode a display object as a jpeg, and thanks to the JPEG Encoder included in the AS3 Core Library, doing this is actually quite simple. In this article, I will show you how to create a flash file that encodes a movieclip as a jpeg and allows the user to download it to their own computer.

To give you an idea of how this can be used, try out the sketch pad below:

First Things First

Before we get started, make sure to grab the ActionScript 3 Core Library. The Core Library contains several classes and utilities that make it easy to do things such as MD5 hashing, date formatting, and image encoding to name a few. Once you have the library, just drop it into your classes folder and you are ready to go. Now we can import the JPGEncoder.


import com.adobe.images.JPGEncoder;

Encoding the MovieClip

In this example, we are going to assume that our MovieClip of interest is named sketch_mc. In order to make use of the JPEGEncoder, our MovieClip needs to become a bitmap. To do this, we are going to use the BitmapData class. The contructor for this class requires two arguments: width and height. Since we want our jpeg to be the same size as sketch_mc, we use it’s width and height properties. Then by using sketch_mc as an argument, the draw method draws our MovieClip on to the bitmap.


import com.adobe.images.JPGEncoder;

var jpgSource:BitmapData = new BitmapData (sketch_mc.width, sketch_mc.height);
jpgSource.draw(sketch_mc);

Now that sketch_mc is in bitmap form, we can use the JPGEncoder. When creating a new instance of this class, you can set the level of compression by passing in a number from 1 - 100. Then to create our jpeg, we call the encode method and use our BitmapData instance as the argument. The encode method returns the jpeg in the form of a ByteArray, which is simply an AS3 class that makes working with binary data a little easier.


import com.adobe.images.JPGEncoder;

var jpgSource:BitmapData = new BitmapData (sketch_mc.width, sketch_mc.height);
jpgSource.draw(sketch_mc);

var jpgEncoder:JPGEncoder = new JPGEncoder(85);
var jpgStream:ByteArray = jpgEncoder.encode(jpgSource);

From the Flash Player to the Hard Drive

ActionScript 3 has done all the work neccessary to turn our MovieClip into a jpeg, but it needs a little help in making it available to download. To make this happen, we will need to post our ByteArray to a server side script using the URLRequest class. Since we are posting binary data, we must set the content-type to “application/octet-stream”. It is also important to note that the file being downloaded will need a name, so we pass that to our server side script as a query string.


import com.adobe.images.JPGEncoder;

var jpgSource:BitmapData = new BitmapData (sketch_mc.width, sketch_mc.height);
jpgSource.draw(sketch_mc);

var jpgEncoder:JPGEncoder = new JPGEncoder(85);
var jpgStream:ByteArray = jpgEncoder.encode(jpgSource);

var header:URLRequestHeader = new URLRequestHeader("Content-type", "application/octet-stream");
var jpgURLRequest:URLRequest = new URLRequest("jpg_encoder_download.php?name=sketch.jpg");
jpgURLRequest.requestHeaders.push(header);
jpgURLRequest.method = URLRequestMethod.POST;
jpgURLRequest.data = jpgStream;
navigateToURL(jpgURLRequest, "_blank");

Below is the php script to where we are posting our jpeg. I chose to use php for this example, but any server side script will do.


if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
	// get bytearray
	$jpg = $GLOBALS["HTTP_RAW_POST_DATA"];

	// add headers for download dialog-box
	header('Content-Type: image/jpeg');
	header("Content-Disposition: attachment; filename=".$_GET['name']);
	echo $jpg;
}

That’s it. It really doesn’t get much easier than that. Of course, to make your code more reusable, you probably want to wrap it in a function or create a custom class.

Download Sample Code

Articles

Using the AS3 Jpeg Encoder

First Things First

Encoding the MovieClip

From the Flash Player to the Hard Drive

50 Comments

Leave a Comment

All Articles

About Henry

Recent Articles