In the demo below, you can draw a masterpiece on the Flash canvas (left) and see it embedded in the webpage as an image (right).
Take a picture with ActionScript 3.0
ActionScript 3.0 makes the initial task of acquiring the image quite simple. Assume the variable
canvas_sp contains the Sprite that holds the user's artwork. All we have to do is create an instance of
BitmapData and draw the sprite onto it.
var screenshotData:BitmapData = new BitmapData(450,300); screenshotData.draw(canvas_sp);
At this point we have some raw bitmap data which we're going to encode as a PNG. Then, to ensure that it transmits safely as a string, we'll encode the PNG data in base64. You'll need the As3 Core Library for the PNG encoding and any one of a number of Base64 libraries. All free.
// first, convert the BitmapData into a PNG ByteArray var pngBytes:ByteArray = PNGEncoder.encode(screenshotData); // and then convert that into base64 var screenshotBase64:String = Base64.encodeByteArray(pngBytes);
// flashElem is the Player's <embed> or <object> tag var screenshotBase64 = flashElem.getScreenshot();
That's it for this little guide. In the next part I'll go into embedding the base64 image into the web page.