Home » Flash & Action Script, Flex » Save Images from Flash – Actionscript 3, Filereference.save, JPGEncoder

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.

24 Comments

  1. Syscl says:

    Thanks for sharing ;)

  2. Jonathan Beck says:

    Thanks alot just wath i needed!!

  3. baiba says:

    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

  4. Hardik says:

    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

  5. Brian says:

    Very nice piece of code. Thanks for including the source!

  6. Rick Cope says:

    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!

  7. Aneeska says:

    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;

  8. Rick Cope says:

    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.

  9. habib says:

    Thanks for sharing

  10. HaunGO says:

    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.

  11. Aneeska says:

    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

  12. mehran says:

    Thanks for your attention , That’s very usefull and helpfull . very very Excellent .
    Thanks a lot .

  13. AtomR says:

    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.

  14. AtomR says:

    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

  15. joana says:

    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

  16. alireza says:

    tnx from this post

  17. soli says:

    how i can hide saving dialog

  18. gman says:

    hi guy very cool but its not what i was hoping for how do i make this work where it saves what is on the timeline frame where the save button is that it will save that area of the whole swf as a picture jpeg,,png so on ……..thank you if you know can you send me a working fla to show me ????? at macboss100@yahoo.com thank you so much
    Gman

  19. Yusuf says:

    Thanks a lot. I needed that!

  20. Diffuser says:

    Hi! Can you give a little help
    How can the image be saved directly to a folder?
    Thanks!

  21. Daniel says:

    Hi, thank you for this great code. How to i save the file in applicationStorage directory on android device? I am using air for android.

Leave a Reply

Page optimized by WP Minify WordPress Plugin