Encoding JPEGs from Flash 10

I love the web. Combine old information and misinformation with a heavy dash of bias, and you have the Internet.

I am working on a project where I want users to be able to export what they have created as either a JPEG or PNG file and save it to their own systems.

When I started I knew flash could not create the Jpeg or Png formats natively, but also knew there was some code out there to get the job done. Most examples of encoding jpg or png files involve two things. First there is the AS3 Core Library, which are a series of classes contributed to the community from Adobe as open source code.

This code can be found at http://code.google.com/p/as3corelib/ , and can then be added to your class path. More on that later.

In a nutshell the way this is supposed to work goes like this...
Using the JPGEncoder class from the as3corelib code, flash is able to produce correct content to create a jpeg compressed bitmap file. This information is then attached to the header of an HttpRequest and sent off to a server-side script. The server script does not have to create the file. It just gathers the incoming data and tells the browser to make the file. The end user just needs to tell the browser what to call it and where to put it. To the user it just looks like they have downloaded the file they were looking at.

My problem is that all the examples out there are in Php. I have nothing against Php. Some of my favorite servers have Php, but the server I am using at the moment is running Coldfusion. I am currently trying to explore the pros and cons of working within Adobe's toolset. I wander off quite a bit, but it would still be nice to know what can be done taking advantage of any synergy available in a collection of applications.

But I digress...

Being what I consider to be a beginner at CF, I have yet to find a concise solution to replicate what is being done in the Php files I have seen. (for an example, go to http://henryjones.us/articles/using-the-as3-jpeg-encoder) This is surprising. Most of the Coldfusion solutions tend to be clear, concise and easy to understand.

What I am leading up to is.... I was mostly a waste of time. The Flash 10 player does not need a server-side helper!

With only a extra Class or two and a few lines of code, Flash Player 10 can let the user save Jpg or Png files based on content in the swf.

Step 1. Download and unzip the code library from http://code.google.com/p/as3corelib/
Step 2. You have two basic options from here. You can use the "src" folder and it's contents as a class library. You can also use the swc file found in the "lib" folder. In either case I like to have one location where I store all third party code. For me, this is a folder on the desktop I call "classes and components". If I'm using the source files I place them in a folder called "as3 classes" and then in the "com" folder. That way when referencing the Actionscript classes I want, I can call them with an import statement like this...

import com.adobe.images.JPGEncoder;

in order for Flash to find the "com" folder go to File>Publish Settings. Go to the Flash tab and the "Settings" button next to the Script combo box.

In "Advanced Actionscript 3.0 Settings" make sure you are on the "Source Path" tab and add a new path to the folder above or parent to your "com" folder. Click Ok to to finish the process and you are ready to add your code.

The other option is to point to the SWC file. A SWC file is a compiled component that can contain classes, graphics and so on. All the class files from AS3 Code Library are available in the SWC file.

In flash CS4, you can attach the SWC file in the same "Advanced Actionscript 3.0 Settings" panel. You use the "Library Path" tab rather than "Source Path" and the SWC file can be located anywhere on your system.

Once you have either source in place, it's time to start adding your code.

I my test file I created a shape on the the desktop and converted it to a MovieClip with the instance name "sketch_mc". I also added a Button from the Components panel and changed the label to read "Save JPG". I gave the button the instance name of "saveJPG_btn". (in hindsight _btn was not the most appropriate choice)

my code begins with the import statement.

import com.adobe.images.JPGEncoder;

This makes the JPGEncoder class available to my code and the compiler to format the bitmap data and compress it.

The next bit of code should be familier.

saveJPG_btn.addEventListener(MouseEvent.CLICK, onSaveJPG, false, 0, true);

...sets up a CLICK mouse event on the saveJPG_btn and calls the function "onSaveJPG".

Now for the function.

function onSaveJPG(e:MouseEvent):void

{

var paintGrab:BitmapData = new BitmapData(sketch_mc.width,sketch_mc.height);

paintGrab.draw(sketch_mc);

var myEncoder:JPGEncoder = new JPGEncoder(85);

var byteArray:ByteArray = myEncoder.encode(paintGrab);

var file:FileReference = new FileReference();

file.save(byteArray,"myimage.jpg");

}

First the paintGrab variable holds a new BitmapData object set to the size of the sketch_mc MovieClip.

We then use the BitmapData draw() method to basically copy the pixels in the rendered MovieClip into the paintGrab variable.

Next, we create an instance of the JPGEncoder object and set the compression rate in the constructor.

In order to save the BitmapData as a JPG file it needs to be converted to a ByteArray, so we use the encode() method of the JPGEncoder instance we created earlier. If we had multiple images to save with the same compression, we could just reuse the myEncoder variable many times again without modification.

We are now storing the new JPEG encoded content as the ByteArray variable called "byteArray".

Up to this point, all of this can be done in Flash CS3. The next part is new to Flash CS4 and FlashPlayer 10.

Create an instance of a FileReference Object. I called mine "file".

Now call the "save" method of the FileReference object.

file.save(byteArray, "myimage.jpg");

The first argument is the data to be stored in the new file. The second argument is the suggested name given to that file in the "Save As..." dialog box that pops up.

That's it. Run your Flash file and test the button. You should be able to save a rasterized copy of your movieclip as a JPG file anywhere you want.

--As a side note; we are starting to run our Adobe CS4 classes. I teach a introductory level Dreamweaver CS4 class at the end of this month and there's also Flash CS4 and Illustrator CS4 classes coming in the next 6 weeks. Check out Ascend's Schedule for more information.