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.
Posted on February 25th 2010 at 12:18 am by Rich.
View more posts in Tutorials. Follow responses via the RSS 2.0 feed.
11 Responses
Leave a commentMake yourself heard
Hire Us
All about Photon Storm and our
HTML5 game development services
Recent Posts
OurGames
Filter our Content
- ActionScript3
- Art
- Cool Links
- Demoscene
- Flash Game Dev Tips
- Game Development
- Gaming
- Geek Shopping
- HTML5
- In the Media
- Phaser
- Phaser 3
- Projects
Brain Food
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 ).
Thanks mate. Much appreciated, especially the amfphp thingy.
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!
Is it possible in Action Script 2 ?
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”
Nice share bro,
it’s so usefull for me
thx
oh man you saved my ass
Great man!….this helped me a lot…thanks for sharing..
Absolutely beautiful! Just what I needed, cool site too
Is there a way to a custom button rather than a component button?