« FlexCamp Presentation (part 2 of 3) : Pixel Bender | Main | Deep Linking Experiment »
FlexCamp Presentation (part 3 of 3) : FileReference save()
| By Rich Tretola | September 10, 2009 | |
| 9,431 views |
In part 1 of this series, I showed how to load a file into the Flash Player by using the FileReference load() method. In part 2, I showed how to use PIxel Bender to filter the loaded image.
In this part, I will show how to use the FileReference save() method to save the image back to the file system.

Click here to run the application (View source is enabled)
So, here is how it works. Lets review the code below.
- On line 19, I create an instance of FileReference called saveFileRef.
- Line 142 contains a save button that calls the capture() when clicked
- The capture() method on line 112 does the following: creates an instance of the BitmapData class passing in the height and width of the image component. Next, the BitmapData’s draw() method is called with the image component being passed in as the target to draw. Using the PNGEncoder originally instantiated on line 11, a byteArray is then created by encoding the BitmapData. Note: you could also have used the JPEGEncoder class. The original extension of the image is then read so that we can replace it with the png extension and avoid any corrupted files. Finally, on line 118, we call the FileReference save() method, passing in the ByteArray and suggested file name. Calling the FileReference save() method launches the file system browser allowing the user to overwrite the suggested file name and change the location.
- Security Alert: The save() method on the FileReference class must be called by direct user interaction (button click, etc). Calling the method programatically will result in a Flash Player security violation.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 | <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="0xFFFFFF" applicationComplete="init();" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.formatters.NumberFormatter; import mx.graphics.codec.PNGEncoder; // encoder to create file to save private var png:PNGEncoder = new PNGEncoder(); // allowed file types private var fileTypes:FileFilter = new FileFilter("Image", "*.jpg;*.jpeg;*;*.gif;*.png;*"); // FileReference classes for upload and download [Bindable] private var loadFileRef:FileReference = new FileReference(); private var saveFileRef:FileReference = new FileReference(); // filter objects [Embed("filters/pixelate.pbj", mimeType="application/octet-stream")] private var PixelateFilterClass:Class; [Embed("filters/SmartNormalMap.pbj", mimeType="application/octet-stream")] private var SmartNormalMapFilterClass:Class; [Embed("filters/twirl.pbj", mimeType="application/octet-stream")] private var TwirlFilterClass:Class; [Embed("filters/ZoomBlurFocus.pbj", mimeType="application/octet-stream")] private var ZoomBlurFocusClass:Class; // Shaders private var pixelateShader:Shader; private var smartNormalMapShader:Shader; private var twirlShader:Shader; private var zoomBlurFocusShader:Shader; // ShaderFilters private var pixelateFilter:ShaderFilter; private var smartNormalMapFilter:ShaderFilter; private var twirlFilter:ShaderFilter; private var zoomBlurFocusFilter:ShaderFilter; // format file size private var numberFormatter:NumberFormatter = new NumberFormatter(); // timers to track upload time private var startTime:Date; private var endTime:Date; // call on applicationComplete private function init():void { // add event listeners for upload loadFileRef.addEventListener(Event.SELECT, fileSelected); loadFileRef.addEventListener(ProgressEvent.PROGRESS, loadProgress); loadFileRef.addEventListener(Event.COMPLETE, loadCompleted); loadFileRef.addEventListener(IOErrorEvent.IO_ERROR, ioerror); // create new shaders and filters pixelateShader = new Shader(new PixelateFilterClass() as ByteArray); pixelateFilter = new ShaderFilter(pixelateShader); smartNormalMapShader = new Shader(new SmartNormalMapFilterClass() as ByteArray); smartNormalMapFilter = new ShaderFilter(smartNormalMapShader); twirlShader = new Shader(new TwirlFilterClass() as ByteArray); twirlFilter = new ShaderFilter(twirlShader); zoomBlurFocusShader = new Shader(new ZoomBlurFocusClass() as ByteArray); zoomBlurFocusFilter = new ShaderFilter(zoomBlurFocusShader); } // launch the file system browse dialog and filter file types private function browseAndUpload():void { log.text=""; image.source=null; removeFilters(); loadFileRef.browse([fileTypes]); } // called after a file has been selected within the file system browser private function fileSelected(evt:Event):void { log.text += "file size: " + numberFormatter.format(loadFileRef.size) +" bytes\n"; log.text += "file name: " + loadFileRef.name +"\n"; startTime = new Date(); loadFileRef.load(); } // load progress captured for progress bar private function loadProgress(evt:ProgressEvent):void { progressBar.visible = true; progressBar.setProgress( Number(evt.bytesLoaded / evt.bytesTotal), 1 ); progressBar.label = numberFormatter.format(evt.bytesLoaded) + " of " + numberFormatter.format(evt.bytesTotal) + " bytes uploaded"; } // load has completed private function loadCompleted(evt:Event):void { image.source = loadFileRef.data; progressBar.setProgress(1,1); progressBar.visible = false; endTime = new Date(); log.text += "upload time: " + (endTime.time - startTime.time) + " milliseconds"; } // load error public function ioerror(evt:IOErrorEvent):void{ Alert.show(evt.text,"Error"); } // capture image and save back to client private function capture():void{ var bitmapData:BitmapData = new BitmapData(image.width, image.height); bitmapData.draw(image); var ba:ByteArray = png.encode(bitmapData); // split off the original extension and replace with png var ext:String = loadFileRef.name.split(".").pop(); saveFileRef.save(ba,loadFileRef.name.replace(ext,"png")); } // add PixelBender filter private function addFilter(filter:ShaderFilter):void{ var filters:Array = image.filters; filters.push(filter); image.filters = filters; } // remove all filters private function removeFilters():void{ image.filters = null; } // return true when image is available private function buttonsEnabled(bytes:ByteArray):Boolean{ if(bytes.length)return true; return false; } ]]> </mx:Script> <mx:HBox> <mx:Button label="Load file" click="browseAndUpload()"/> <mx:Button label="Save file" click="capture()" enabled="{buttonsEnabled(loadFileRef.data)}"/> <mx:Button label="Pixelate" click="addFilter(pixelateFilter)" enabled="{buttonsEnabled(loadFileRef.data)}"/> <mx:Button label="SmartNormalMap" click="addFilter(smartNormalMapFilter)" enabled="{buttonsEnabled(loadFileRef.data)}"/> <mx:Button label="Twirl" click="addFilter(twirlFilter)" enabled="{buttonsEnabled(loadFileRef.data)}"/> <mx:Button label="ZoomBlurFocus" click="addFilter(zoomBlurFocusFilter)" enabled="{buttonsEnabled(loadFileRef.data)}"/> <mx:Button label="Remove All Filters" click="removeFilters()" enabled="{buttonsEnabled(loadFileRef.data)}"/> </mx:HBox> <mx:TextArea id="log" width="700" height="60" /> <mx:ProgressBar id="progressBar" visible="false" mode="manual"/> <mx:Image id="image" maxHeight="600" maxWidth="800"/> </mx:Application> |
I hope this short series was informative for you.
Topics: Flash Player, Flex, Tutorials | 7 Comments »









September 12th, 2009 at 4:39 am
thank you very much good very beautiful work
Reply to this comment
September 12th, 2009 at 4:47 am
thanks for you
Reply to this comment
September 14th, 2009 at 10:21 am
http://www.musdepo.com/soft/ программы для n73 скачать бесплатно
Reply to this comment
October 31st, 2009 at 3:50 am
hi All,
Any chance to to set default save location for this image in local system?
Reply to this comment
November 2nd, 2009 at 1:29 am
Any chance to to set default save location for this image in local system?I like the post a lot!!!
Reply to this comment
March 31st, 2010 at 12:01 am
is there any way to set the default saving file type to “jpg” instead of “all files”?
thks
Reply to this comment
March 7th, 2011 at 8:56 am
Hi Friends,
I want to know one thing is that, i am able to execute above functionality successfully. But while saving the file which is in xls format, i am not able to see the xls extension while saving the file though i have extension with the file name.
Please let us if any…
Thanks,
Krunal Panchal
Reply to this comment