Save MovieClip as PNG Example

rich — Thu, 25 Feb 2010 00:18:58 +0000

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.

PLAIN TEXT

Actionscript:

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

2) Convert this Bitmap to a ByteArray.

PLAIN TEXT

Actionscript:

private function getMovieClipAsByteArrayPNG():ByteArray
{
var data:Bitmap = getMovieClipAsBitmap();
var ba:ByteArray = PNGEncoder.encode(data.bitmapData);
return ba;
}

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

PLAIN TEXT

Actionscript:

// 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");
}

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.

Flod Beginners Guide now available for easy .mod replay in AS3

rich — Fri, 30 Oct 2009 01:18:26 +0000

As the AS3 Soundtracker replay library Flod gains traction, so I have been receiving more emails saying "Help!". Apparently people are having trouble dissecting just the replay sections from FlodPro (the full player interface). So to address this I have created the Beginners Guide to Flod. This download offers you source code that does nothing but replay a mod file. No file browser, no FlodPro, no UI, no hassle!

The guide includes source for both FlexSDK + FlashDevelop users, and also for Flash CS4 (if you really must code on the timeline.) I have included examples for plain vanilla replay, and also replay with the flectrum active: the funky looking vu-meter seen in the screen shot above. Pick whichever is most useful for your production.

You can download the Beginners Guide from the updated Flod page.

Photon Storm » Tutorials

Save MovieClip as PNG Example

Flod Beginners Guide now available for easy .mod replay in AS3