Save MovieClip as PNG Example

A couple of guys on Twitter asked me if I would write-up how I generate PNG files from MovieClips in my SWF, at run-time. So I put this example together and am sharing it here.

We use this technique in our virtual world WebbliWorld to save a PNG version of the users avatars after they have customised them. But there are all kinds of other reasons you may need this. My example includes two methods: Saving the PNG locally using the local file system, and Saving the PNG to a web server using AMFPHP.

This technique requires Flash Player 10 and the Adobe AS3 Core Lib.

Here’s a very simple example (included in the zip download below):

Essentially it all boils down to this:

1) When you are ready to save your image, create a Bitmap version of your MovieClip.

[as]
private function getMovieClipAsBitmap():Bitmap
{
var bounds:Rectangle = theMovieClip.getBounds(theMovieClip);

//    The * 2 is because we’re scaling the clip up by a factor of two, to result in a larger PNG
//    If you don’t need this, remove it and comment out the m.scale call below
var theBitmap:Bitmap = new Bitmap(new BitmapData(bounds.width * 2, bounds.height * 2, true, 0x0));

var m:Matrix = new Matrix(1, 0, 0, 1, -bounds.x, -bounds.y);

//    Simply scale the matrix to make a bigger PNG. Here we are doubling it. Comment this out if you don’t need it.
m.scale(2, 2);

//    Need to crop the PNG to a given size? Pass it a Rectangle as the 5th parameter to draw()
//var r:Rectangle = new Rectangle(0, 0, 50, 40);

theBitmap.bitmapData.draw(theMovieClip, m, null, null, null, true);

return theBitmap;
}
[/as]

2) Convert this Bitmap to a ByteArray.

[as]
private function getMovieClipAsByteArrayPNG():ByteArray
{
var data:Bitmap = getMovieClipAsBitmap();

var ba:ByteArray = PNGEncoder.encode(data.bitmapData);

return ba;
}
[/as]

3) Send this ByteArray to either the local filesystem, or AMFPHP.

[as]
//    Uses FileReference to save the PNG locally to the hard drive (see “saveToServer” for an alternative)
private function saveLocalPNG(event:MouseEvent):void
{
var ba:ByteArray = getMovieClipAsByteArrayPNG();

file.save(ba, “BirdyNamNam.png”);
}
[/as]

Complete source code is included in the zip file including an AMFPHP PHP script for saving on a web server.

Hope someone finds this useful.

Download the Soure Code zip.

Posted on February 25th 2010 at 12:18 am by .
View more posts in Tutorials. Follow responses via the RSS 2.0 feed.


10 Responses

Leave a comment
  • February 25th 2010 at 12:54 am

    It’s nice, but it’s not really a game is it.

    Oh bugger, wrong entry to be ranting in.

    ( To make this not total spam, there are some alchemy based encoders out there which may be worth trying ).

  • February 25th 2010 at 9:55 am

    Thanks mate. Much appreciated, especially the amfphp thingy. :)

  • March 2nd 2010 at 4:13 am

    Thanks so much for this Rich, amongst being a tasty feature to have, you’ve just saved me a bunch of time manually making screenshots for each arena in my game, cropping them and then saving them again each time! Phew! Absolute time-saver man! :)

  • alan
    November 7th 2010 at 2:10 pm

    Is it possible in Action Script 2 ?

  • harilalkm
    October 22nd 2011 at 1:42 pm

    hi it’s great tool . am looking for it ..

    I have one doubt? how to save the masked movieclip . actually the mask resides inside the “theMovieclip”

  • May 20th 2012 at 8:21 am

    Nice share bro,
    it’s so usefull for me

    thx

  • February 21st 2013 at 12:02 am

    oh man you saved my ass

  • Abinash
    March 11th 2013 at 6:22 pm

    Great man!….this helped me a lot…thanks for sharing..

  • Peter
    May 26th 2013 at 10:48 pm

    Absolutely beautiful! Just what I needed, cool site too

Make yourself heard