Sunday, September 4, 2011

Capture image from Flash movie or video using AS3

It was very tricky and hard to capture image from Flash in AS2. We need to write a bunch of lines to read the pixels and convert it as a readable bytearray using our code need to send it to a server side script like ASP or PHP to save it as IMAGE (JPG/PNG)

Now the Adobe Image encoder class provide you the ability to capture any part of your movieClip or a Video and then convert it to Image

Following sample code will show you how to use the ImageEncoder class

Encoding the MovieClip

In this example, we are going to assume that our MovieClip of interest is named target_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 target_mc, we use it’s width and height properties. Then by using target_mc as an argument, the draw method draws our MovieClip on to the bitmap.


/************************************************/
import com.adobe.images.JPGEncoder;
var jpgSource:BitmapData = new BitmapData (target_mc.width, target_mc.height);
jpgSource.draw(target_mc);
/************************************************/



Now that target_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.

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.

Final CODE in FLASH

/************************************************/
import com.adobe.images.JPGEncoder;

var jpgSource:BitmapData = new BitmapData (target_mc.width, target_mc.height);
jpgSource.draw(target_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.

PHP - Server side SCRIPT

/************************************************/
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, Creating image from flash is that much easy.


Download Sample Code

Download AS3 Adobe Core Lib (Including JPGEncoder)


- Reference : Henry jones -