Use Javascript to Take a Screenshot of a Flash Movie
I've been doing a lot of research lately on fetching an image of a SWF and embedding it in HTML, downloading it, and copying it to the clipboard. This page details how to take the screenshot and send the data to Javascript. It has been tested in Firefox and IE 6 & 7.
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).
Flash
Image
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);
Simple? Now we need to build the external interface so Javascript can get a hold of the image data.
Getting the bitmap data to Javascript
// setup the interface method in your initialization function private function init():void { ExternalInterface.addCallback('getScreenshot', interfaceIn_getScreenshot); } // this is the function that gets called by Javascript. it returns // the screenshot data as a base64-encoded string private function interfaceIn_getScreenshot():String { var w:Number = 50; var h:Number = 50; var screenshotData:BitmapData = new BitmapData(w, h); screenshotData.draw(this); return Base64.encodeByteArray(PNGEncoder.encode(screenshotData)); }
Note that the code from the section above has been compressed into a single line at the end, there. And that's it for the Flash side of things! Now, in the Javascript of the embedding page, you make a call to getScreenshot and you'll have string representing the screenshot taken in Flash.
// flashElem is a reference to 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.
Delicious
Digg
Reddit
Facebook
Google
Yahoo
Technorati
Comments
thanks for this! i have a feeling i'm going to be needing something like this in the near future.
does any1 know how to do the same thing using as2?
Nifty feature created there!
I have a different issue (and maybe you can give some indication, Daniel): I receive the base64 encoded imagedata in Flash from a webservice, but I don't know how to decode it into an image again in Flash. I have the width and height values as well, but I can't use php, just Flash. Any idea how to show the image based on the known width, height and the (base64 encoded) imagedata string??
(looking for the solution I stumbled onto your site. It's great!)
@Anonymous
If it is possible to do this in AS2 I'm afraid it's going to be a huge amount of work. AS2 doesn't have a ByteArray class and I'm not sure if anybody's made image encoders for AS2.
@Marten
I haven't done it myself but I can give a brief overview of how you would display encoded image data in a Flash movie.
You'll need to decode the base64
ByteArrayinto raw bitmap data using theBase64class mentioned in the tutorial and maybe the PNG/JPEG encoder/decoders (also above) depending on what the webservice is feeding you.Once you've got the raw bitmap data in a
ByteArray, use thesetPixelsmethod to load the image information into an instance ofBitmapData.Finally, call
BitmapData'sdrawmethod to have the image drawn onto aSpriteorMovieClip.Like I said, I haven't gone through and tested this so you'll probably run into kinks but it should work. Let us know how it goes!
Hey this is great!
If there's a way of decoding an image in Flash that would be awesome. I don't know if it's possible... Haven't seen a working example anywhere.
@GagNet
Wow, I was surprised to find that those classes only have one-way functionality. You can encode an image into PNG or JPG but not vice versa.
I did a quick look around and didn't find an existing implementation in AS3 so you might have to port it yourself. Looks like this project, javapng, might have the decoding code—I've only had a brief look, mind you.
Good luck!
I was wondring how can I use these element in a flashlite for a mobile applet. I'm trying to create a portal where I like to add a signature feature. Where the client draw their signature into an flash object. This will be rendered to an jpg and compaired with the first signature. if the signature is 90% the same the client can use it's pay fuction etc. For the pc or mac it already works only for the mobile I still can't get it working. Can you help me out?
gr Tarim
I found a solution for what I was looking for here -
Decoding a byteArray image
@GagNet
Thanks for posting the link to the page and helping others who also want to decode images in Flash.
Heya,
I'm working on a project and I could really use some help. If nothing else, just an arrow in the right direction.
I'm working on version 2 of a Spiral Generator application for Flash. I already have an 'export to ActionScript' code worked out (for AS3, someone's helping me translate it back into AS2 as well) but I also want to allow the finished product to be used in other mediums as well... thus, I want to include an 'export to animated gif' feature for a finished product.
You can find version 1 of the program here if interested: http://www.newgrounds.com/portal/view/445953
hi,
after viewing ur code, i dont quitte understand it. can explain step by step? also, do we need to create our own flash to do this sample? =)
thanks =)
To decode just do this:
var imgB64Str:String = "/9j/4AAQSkZJRgABAQAAkcgSlBFRy....";
var ld:Loader=new Loader();
ld.loadBytes( Base64.Decode(imgB64Str) );
addChild(ld);
A_r_e_s
It would really help explaining all these 3 tutorials step-by-step....
Post new comment