Stroep » ImageSaver

Process rendering Actionscript to PNG to Video

Mark Knol — Thu, 20 Nov 2008 23:31:48 +0000

I’ve created a new video, and this one isn’t rendered like I said in the previous post (using flash > export movie > .mov), but I used the ImageSaver class every frame. I added an event listener to the class. So I started rendering frame 1. When frame 1 is completed, I call the save function. The ImageSaver class saves the images and dispatches an Event. When this Event.COMPLETE is being dispatched, I just render another frame. After rendering I call the save function again and wait till the Event.COMPLETE is being dispatched again. etcetera. Well, I think I’ve got my own mini-render engine. It works perfect for creating sequences of images (or just videos which use a lot of CPU or cannot be displayed at real-time). While rendering I counted the frames and stopped saving after 1000 frames.

So, now we can render more heavy effects and create videos, right? In this video 1000 images are rendered by actionscript, using additive blending and a BlurFilter. The movements are based on a Perlin noise. Not very heavy, but when running it in the FlashPlayer, I’ve cannot reach more than 11fps. The full version is 800×600 with transparency, 30fps.

Single image:

Video output:
Yes, this video is created with actionscript

I used Premiere to merge all those images into a video.

AS3 ImageSaver Class updated

Mark Knol — Wed, 10 Sep 2008 20:42:35 +0000

The ImageSaver Class is updated.

Download
» ImageSaver (latest)

Fixed:
- You can use a bitmapdata as input too. First you only could use a displayObject, but I believe it’s better to use an IBitmapDrawable (interface).
- Bug quality JPG
- Added optional rect

AS3 ImageSaver Class v1.0

Mark Knol — Fri, 29 Aug 2008 22:06:50 +0000

My ImageSaver() Class is ready for download.

Download
» ImageSaver v1.0

Features

Save a MovieClip, Sprite, Shape, Bitmap, Textfield or other kinds of displayObjects.
It doesn’t matter where or how your object is positioned on the stage, it gets the right bounds.
Never worry about bytearray’s / encoding anymore.
Save your displayobject as JPG or PNG (using Adobe’s encoders)
Ready-to-install PHP file.

How to use
1. Copy the ‘save-my-image.php’ file to your server or testing environment (I use WAMP for testing)
2. Use ImageSaver like this example.

// Create saver instance + point to php file on server
var imageSaver:ImageSaver = new ImageSaver("http://localhost:8080/save-my-image.php");       
// additional: Add eventlisteners.
 imageSaver.addEventListener ( Event.COMPLETE, onSaveComplete );
 imageSaver.addEventListener ( IOErrorEvent.IO_ERROR, onSaveError );
// Save textfield as JPG with red background
 imageSaver.save ( myTextField, "myfilename1.jpg", 0xFFFF0000 );
// Save bitmap as JPG with red background in low JPG quality (15)
 imageSaver.save ( myBitmap, "myfilename2.jpg", 0xFFFF0000, 15 );
// Save a shape as transparent PNG
 imageSaver.save ( myShape, "myfilename3.png" );
// Save a movieclip as half-transparent (red) PNG
 imageSaver.save ( myMovieClip, "myfilename4.png", 0xCCFF0000 );
// handle events
         
 private function onSaveError( e:IOErrorEvent ):void {
     trace ( "Image save failed. Error while saving: " + e.text );
 }
private function onSaveComplete( e:Event ):void {
     trace ( "Image save completed"  );
 }

The save-function works like this:

public function save( displayobject:DisplayObject, filename:String, backgroundColor:Number = 0x00FFFFFF, JPGquality:int = 85 ):void
        

I love to hear your suggestions. Feel free to use it too.

Creative Commons Licence