Advertisement

Quick Tip: Creating a Snapshot Tool in Flash

by

In this Quick Tip, I'll show you how to create a Shapshot Tool that copies part of the stage and saves the result as a PNG image.


Final Result Preview

This is the final result. Just click the stage and then drag the mouse to take a snapshot.


Step 1: Download the as3corelib Class

Create a new folder for this project and give it any name you want. Go to Github and download the latest version of the as3corelib Class. For this Quick Tip I've used version .93. Extract the ZIP file and go to as3corelib-.93 > src.

Copy the com directory to your newly created folder. This package has a very useful PNGEncoder Class that we will use for encoding the
snapshot into a PNG image.


Step 2: Setup your Flash File

Launch Flash and create a new Flash Document. Make sure it's set to publish to Actionscript 3.0 and Flash Player 10. You can check this in the Properties
panel or by selecting Publish Settings... and then clicking on the Flash tab.

The Flash Properties Panel

Step 3: Content to be Snapped

We need some content in the Flash file to check if the snapshot tool is working properly. We're going to create some circles and place them randomly around the stage. Create a new Document Class called Circles.as and add the following code. Remember to link the Class to the Flash file by writing Circles in the Class field in the the Properties Panel.

Our snapshot function will work with any stage contents, though, so don't feel that you have to restrict yourself to simple shapes!


Step 4: Create the SnapShot Class

Create a new Class file and give it a name of SnapShot.as. This is the Class that will hold all the methods used to take a snapshot. Add the following code to the Class.

Add the following lines of code to the Circles Class. We use the activate() method to pass a reference to the Stage along to the SnapShot Class. We do this to so we can access the content on the Stage.


Step 5: Drawing the Boundaries

Expand the SnapShot Class to include the following methods. These methods are used to draw the boundaries frame, which allows users to select which part of the stage will be copied to the snapshot.

We start by checking if the user has clicked on the Stage. When he clicks on the stage we start running the drawBoundaries() method whenever the mouse is moved. This method draws the boundaries; whatever falls within the thin black line will be part of the snapshot. When the user releases the mouse we stop checking for mouse movements.

Step 6: Stage Content to Bitmap

Import the BitmapData and Matrix Classes and add the _content property to the list of private properties.

Add the following code to the bottom of the Class:

The createBitmap() method creates a new BitmapData object with the width and the height of the content area inside the boundary. The matrix variable transitions (moves) the image so that when the draw() method is called it starts copying from the top left corner of the boundary area.

Step 7: Saving the Bitmap

To save the bitmap we need to import several Classes.

  • The ByteArray Class is used to encode the BitmapData object.
  • The PNGEncoder Class is used to convert the encoded data into a PNG Image.
  • The FileReference Class is used to save the image to the users hard drive.

We've also added an _imageCount property which we use to increment the image names.

Add the following code to the bottom of the SnapShot Class:

The saveBitmap method is fairly easy to understand. We encode the BitmapData object and save it to the user's hard drive.
We use the _imageCount property to make it easier for user to save several images in a row.

Conclusion

The Snapshot Tool is now complete and with just three lines of code can be implemented into any project.

Make sure you're running Flash Player 10 and that you have the as3corelib package in the correct directory.

I hope you enjoyed this Quick Tip, thank you for reading!

Advertisement