Saving images from Flash with .NET

We finally recently got to create a 'Fuzzy Felt' style drag and drop application. It's one of those things that's been sitting on our 'please ask us to build this' list for a while, right after the 'Website build for Agent Provocateur' entry.

Our lovely client Shelter came to us asking if we could build them an application that would allow users to build their own home. After the initial shock and the realisation that this didn't necessarily mean writing a CAD application in Flash, we put our thinking caps on, made it a little more light hearted and something more achievable given the budget and timescales.

The application we created allows you to select from a number of backgrounds and cut-out graphics loaded from the server on request. These can then be dragged, dropped and arranged on stage allowing you to create a custom image that can then be saved to both your desktop (using Flash) and to the server with the power of ASP.NET as a GIF, PNG or JPEG. We choose JPEG, given the photographic style of the graphics used and to keep the file size down.

This isn't particularly new but if have a look online you'll find most of the examples are in PHP, and you'll probably also find it difficult to get all of the Flash and ASP.NET source code in one place. We've done the heavy lifting (well actually Adobe and Microsoft have if you want to get technical) and being the nice bunch that we are we've decided to pull it all together for you. Not the drag and drop part of the wider application but the core part that allows you to save a JPEG from Flash with .NET.

How it works

Thanks to some hard working people @Adobe, the job of encoding a JPEG (along with several other jobs) has been made infinitely easier. Simply download and install AS3Corelib (http://code.google.com/p/as3corelib/). This open source library contains a number of very useful ActionScript 3 utilities. In this tutorial we focus on the JPGEncoder Class.

Once you've downloaded and placed the Library files in the appropriate location you're ready to start coding.

The following is not the complete code; it simply illustrates how to import the Class you need and how to use it to create a ByteArray from an existing MovieClip instance on the stage. The ByteArray can then be sent to an ASP.NET handler for further processing on the server, where you could save the image and perhaps any additional data you may require for future use in a database of your choice.

If you would like the complete source code for this, skip to the end of the tutorial.

Import and usage of the JPGEncoder Class

--------------------------------------------------------------------------------------------------------------------------

//add to top of your ActionScript code or Document Class
import com.adobe.images.JPGEncoder;

//add to your main Classes constructor method, or other appropriate method
//create a Bitmap Data object and draw your MovieClip

var jpgSource:BitmapData = new BitmapData (your_mc.width, your_mc.height);
jpgSource.draw(your_mc);
//set jpg quality, encode as ByteArray
var jpgEncoder:JPGEncoder = new JPGEncoder(72);
var jpgStream:ByteArray = jpgEncoder.encode(jpgSource);

--------------------------------------------------------------------------------------------------------------------------
 

Here are the key steps to follow in Flash;

1. Create a new BitmapData object (the JPGEncoder Class requires a BitmapData object)
2. Pass a MovieClip instance to the draw method of that BitmapData object (tip: make sure the registration point of the movieclip object on stage is set to the top right hand corner)
3. Create a new JPGEncoder object (setting the appropriate quality)
4. Create a ByteArray which is a stream or string of data representing the image. This is what is posted to the server (in our case ASP.NET)
5. Create a URLRequest Object (setting the data property as the stream (ByteArray) and the URLMethod as POST) to send the data to ASP.NET.
6. Create a URLLoader object which detects when the ASP.NET file loads and handles the response

What we do in ASP.NET

1. Import drawing classes
2. Set response type as text/xml
3. Create image from input Stream sent from Flash as ByteArray
4. If the image doesn't already exist, save the image to the appropriate place on your web server
5. Respond with Strings as variables (to be read back in by flash URLLoader) These values are traced to the output window in Flash so you can see the results coming back from ASP.NET

Tips:

• Once you download the files you will need to setup a site in IIS.
• Initially the jpg file 'my_image.jpg' file does not exist. The first time the application is run the file will be created. You will have to delete the images and run the flash again to re-create the image. The ASP.NET handler 'save-tut.ashx' checks to see if the file exists, if it doesn't the file is created. You may want to save additional and create a unique file name for each individual user.
• After the site is setup in IIS, the application will work by running the 'tut_JPGEncoder.swf' file in a browser.
• To test the application within the Flash authoring environment you can modify the aspHandler property within the Document Class 'tut_jpgEncoder.as' to point to the site on your local server e.g. http://localhost/save-tut.ashx, allowing you to call the script from within the Flash authoring environment.

Source

The following source files contain the basic functionality required to save a MovieClip instance from the stage, to the server using Flash and ASP.NET.
Download Flash and ASP.NET source files.