Flash CS4/AS3 SnapshotRectangle class

Source files for this posting>>

A few nights ago, as I was at my folks' house in New Jersey, and had a touch of the jet lag. So, checking Facebook, and one of my friends, Bram, had posted a challenge to his wall. He was looking for a Flash guy to create a Flash app to:

• load any Flash video from your hard-drive
• select the frame/location
• drag-resize/reposition a marquee selection
• save a JPG of the selected area to your hard-drive

I realized that this was possible in Flash Player 10 (no AIR required) because of the changes to the FileReference API (summarized by Lee Brimelow here), and that I actually already had all the code for it across several separate project files for courses I teach at the Rich Media Institute. The one limitation is that, with Flash video, you can only seek to keyframes (so, with this video snapshot tool, you can pause it at any time, but if you want to seek, you can only seek to keyframes), but Bram signed off on that proviso and so, in about two hours, I combined all the code snippets to make it work and got it to Bram before I went to bed.

The next day, I realized it would actually be more useful if I encapsulated all of the code that handles the snapshot to a single, reusable class file / library symbol. So that's what I did. And I'm attaching the results here. Full disclaimer: This was just a goof and is not fool-proof code, but does demonstrate the concept nicely.

So, what's included:

• snapper.fla which includes the SnapshotRectangle MovieClip (on top of a sample image of my gorgeous golden, Lelia)
• com.rblank.snapper.SnapshotRectangle.as, to which the SnapshotRectangle MovieClip symbol is linked, and which contains all of the custom code I've written for this sample
• ActionScript 3 Core Libraries, created by the uber-scripters at Adobe, which I use here for JPEGEncoding (not inherent to the Flash Player 10 AS3 API). I'm including it in the download so it will work 'out-of-the-box' but you should of course download and use the most recent from their repository site

As you can see in the sample file (embedded and attached) the SnapshotRectangle has a:

• Textfield instance, tf_dims, to display dimensions of the image that will be created
• A MovieClip instance, named bg, that visually indicates the size of the image that will be created
• A MovieClip instance, named nub, that will be used to resize the snapshot area
• A NumericStepper instance, named ns_quality, that will be used to determine JPG quality
• A Button instance, named btn_snap, that will be the trigger for saving the JPG

The code is fully commented, so check it out. But essentially, you:

1. Create a BitmapData object and draw into it
2. Encode the BitmapData into a ByteArray, using the JPGEncoder class
3. Save the ByteArray (representing a JPG) to the user's computer, using the FileReference class

That's the pseudo-code. The actionscript is:

//create a BitmapData instance, sized to match the width and height of the bg MovieClip instance
_bitmapData =new BitmapData ( bg.width , bg.height );
//draw the entire stage into the BitmapData instance, clipping by the _matrix
_bitmapData.draw( stage );
//create a new JPGEncoder instance (an AS3CoreLib class)
//and pass in the current value of the ns_quality NumericStepper instance as the JPG quality
_jpg= new JPGEncoder(ns_quality.value);
//encode the _bitmapData into JPG data, stored in the _byteArray
_byteArray=_jpg.encode(_bitmapData);
//create the new FileReference instance through which to save the JPG data to the user's machine
_fileRef_save = new FileReference ( );
//save the _byteArray to the users computer, with a default name of 'RBlankSnapshot.jpg',
//which the user will have a chance to rename before saving
_fileRef_save.save( _byteArray , "RBlankSnapshot.jpg" );

You'll note that in the actual code, since this single MovieClip encapsulates all the drawing logic (meaning, it has no idea which specific display objects will actually be visible in the rendered image), so you have to hide this MovieClip while drawing into the bitmap data (otherwise, this SnapshotRectangle GUI will be in the JPG).

Share and enjoy!

-r

Source files for this posting>>