Saving customized movieclip as an image to local disk (diy generator) - actionscript-3

Question

dropbox.com/s/77euop1luqjreos/FINAL.fla
Ok i just gave up with this already. I cant think of any way to save the image created by a user. Its hard to explain but please check out the fla file of my work. Basically its a diy generator. The only thing missing is a save function. Ive read filereference but its always in a document class. My code is in the timeline. Please help I'm really stuck.
edit: I got a download button that is working now!! But it only saves a small part of the movieclip: Imgur

Answer 1

In order to create images, you need to access the pixel data of the MovieClip object. The data can be obtained by rendering a MovieClip into a BitmapData object and using this data, you can write your own encoder to convert it to any image format you’d like. Writing such encoder is not a trivial task and requires understanding of the image format algorithm, or you can use pre-written libraries. You can download the PNGEncoder and JPGEncoder , which is part of as3corelib, an open source project library.
Using the JPGEncoder, we can convert DisplayObject into ByteArray, suitable for saving into file. If using the JPGEncoder, it’ll look like this:
import com.adobe.images.JPGEncoder;
var jpgEncoder:JPGEncoder = new JPGEncoder(quality);
//remember bitmapData here is just an example (do not try to compile this code without declare this particular variable)
var byteArray:ByteArray = jpgEncoder.encode(bitmapData);
With the PNGEncoder, it’ll look like this:
import com.adobe.images.PNGEncoder;
//remember bitmapData here is just an example (do not try to compile this code without declare this particular variable)
var byteArray:ByteArray = PNGEncoder.encode(bitmapData);
Saving Into User’s Hard Drive
Using the FileReference.save() function, we can prompt the user to save the file with the following call.
var fileReference:FileReference=new FileReference();
//in case of JPGEncoder
fileReference.save(byteArray, ".jpg");
With the two combined, here’s an example how to use:
//remember to import
import flash.net.FileReference;
import com.adobe.images.JPGEncoder; //or import com.adobe.images.PNGEncoder;
import flash.utils.ByteArray;
import flash.display.BitmapData;
//where mc_canvas will be your MovieClip instance name
var bitmapData:BitmapData = new BitmapData(mc_canvas.width, mc_canvas.height);
bitmapData.draw(mc_canvas);
var jpgEncoder:JPGEncoder = new JPGEncoder(quality_slider.value);
var byteArray:ByteArray = jpgEncoder.encode(bitmapData);
//if you want to use PNGEncoder
//var byteArray:ByteArray = PNGEncoder.encode(bitmapData);
var fileReference:FileReference = new FileReference();
fileReference.save(byteArray, ".jpg");