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