Saving an image from a flash movie to user’s local machine hard-disk was a hectic task sometime back. To save Dynamic movie clips (which could be images or any bitmapData) on the stage as Images we had to send the whole pixel data to the server and process it to create an image, then download it on to the user machine.
This task has now become very simple with ActionScript3, Flash Player 10 and as3CoreLibrary. We don’t need to send the BitmapData back to the server to process and create the image. A file can be saved direct from the flash to the user computer. This is possible of a cool new FileReference.save() feature added to Flash Player 10. hich allows the Flash Player to write to the local file system as long as the save request is requested by the user. Upon calling FileReference.save() the default file system dialog will open and user can save the data from the flash movie to their local machine. No server processing needed!
Please note that FileReference.save() can be only invoked if the invoke call is associated with an OnClick event.
Additionally we are using JPEGEncoder which comes with the as3corelib. You can download this library here: http://code.google.com/p/as3corelib/
After downloading copy the source files (the com folder) on to your Class path or your application root directory. Apart from the JPEGEncoder, this library is packaged with a lot of other classes related to Hasing, Text, Date etc.
This is how we save an image from a flash movie to a local machine.
1) Create a BitmapData object out of the MovieClip or the Loader.
2) Encode the BitmapData using the JPEGEncoder and form a ByteArray.
3) Use FileReference.save() to download the image on to the User machine.
See an example:
Create a blank Flash movie and name it as “ImageSave.fla”. In the same folder create “ImageSave.as” file and copy the below code in to it. You need the “com” folder copied from the as3corelib to this folder. I have a button on the stage named “save_mc” which triggers the saveImage function.
package {
import flash.display.MovieClip;
import flash.display.BitmapData;
import flash.display.Loader;
import flash.utils.ByteArray;
import flash.net.FileReference;
import flash.net.FileFilter;
import flash.events.*;
import flash.net.URLLoader;
import flash.net.URLRequest;
import com.adobe.images.JPGEncoder;
public class ImageSave extends MovieClip {
private var imgFile:URLRequest;
private var img:MovieClip;
private var imgLoader:Loader;
private var file:FileReference;
public function ImageSave() {
imgFile = new URLRequest("coffee.jpg"); //change it to your image path
imgLoader = new Loader();
imgLoader.load(imgFile);
imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
save_mc.addEventListener(MouseEvent.CLICK, saveImage);
}
private function onLoaded(evt:Event):void {
imgLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, onLoaded);
imgLoader.cacheAsBitmap = true;
addChild(imgLoader);
}
function saveImage(e:MouseEvent):void {
var myBitmapData:BitmapData = new BitmapData(imgLoader.width, imgLoader.height);
myBitmapData.draw(imgLoader);
var jpgEncoder:JPGEncoder = new JPGEncoder(80);
var imgByteData:ByteArray = jpgEncoder.encode(myBitmapData);
file = new FileReference();
file.browse(new Array(new FileFilter("Images (*.jpg, *.jpeg)", "*.jpg;*.jpeg")));
file.save(imgByteData, "test.jpg");
}
}
}
For your convenience you can download a working copy of this sample here:
Download ‘SaveImagefromFlash’ SourceCode – CS4 [ZIP]
This sample contains the as3CoreLib, so you don’t need to download it separate. The FLA source can be opened only in CS4. However you can still open the AS file and explore the code.
Please let me know if you have any questions.
Thanks for sharing
Thanks alot just wath i needed!!
I need your help please. I have an assignment using actionscript3 and FlasgCS4 I have to click upon the stage to select a series of 6 waypoints. As each of the 6 waypoints is selected a movieClip (such as redX)should be placed on the stage to visually mark the positions of the way points. The x and y value of the position of each waypoint should be stored in memory, how is this done for when one clicks on these position a shape will appear this is what is confusing me. ??Baiba
How to create jpg file from center align movieClip (MovieClip with center registration point).
pls mail me if u find any solution. thanx
ravalhardix@gmail.com
Very nice piece of code. Thanks for including the source!
Happy to Share
I can get YOUR fla to load and run faultlessly but when I try to apply the ImageSave.as to my project I keep getting a 5001: name of package does not reflect the location of the file. I’ve tried putting the com pfolder and ImageSave.as into both my Classes folder and the root folder of the FLA I’m creating but, alas, no joy.
Any ideas? I’ve looked at all sorts of websites for advice and they all give good ideas but none of them seem to work.
Yours hopefully!
Copy the ImageSave.as and the com folder to the same folder where your FLA is. Remove it from any other class paths. Open your FLA and in Movie Properties, Click on the ‘Edit class definition’ pencil icon next to the Document Class text box and make sure that it loads the AS from the same folder. If it loads the AS from the same folder, no package name or path needs to be defined in the AS.
It should look like,
package {
import flash.display.MovieClip;
…
Brilliant. It works. I am relatively new to AS3 and sometimes bite off more than I can chew, but thats the best way to learn. Up to now I’ve been putting all my code in the main project and have not got to grips with ‘packages’ so I was a bit lost. However, I made a few changes to the AS file to blend it in with some of the variable definitions in the main project and it’s working really well. I’ve even by-passed the browsing problem so I can give it a filename with a .jpg extension.
Thanks for your help. Your comments opened up a new area for me.
Thanks for sharing
Excellent !! Thanks for sharing. Is there anything that could allow the user to drag an image directly onto the desktop? like in html ? ? That’s what I really want.
I don’t think this is possible from flash to desktop. A wild thought would be to create the image and show it in an overlay on top of the flash and allow the user to drag it to the desktop
There is a new functionality being introduced in AS but this will work only in AIR environment. Check out, http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/flash/desktop/NativeDragManager.html
Thanks,
Anees
Thanks for your attention , That’s very usefull and helpfull . very very Excellent .
Thanks a lot .
Good morning. Thank you for the tutorial. I am sorry if this is slightly offtopic but I am having a problem because my project is coded in the timeline so I don’t have a document class. It says that ‘packages cannot be nested’ when I use the jpgencoder class. Is there a way to use that class when you are coding in the timeline or do i need to convert all my project to a document class. I have been coding this for a few weeks so its not a trivial task to convert everything to a document clas
Thanks for your atention.
Found my problem. I was including com.adobe.image and then importing “JPGencoder.as”.
Replaced it with “import com.adobe.image.JPGencoder” and problem was fixed. Thanks
hi, do you have any idea how can i change the saving path..
i want my image to be save directly in my database and not in the desktop pls help me. Thank you in advance
tnx from this post