How do I show the save progress of a FileStream in Flex? - actionscript-3

Question

I'm making a simple tool that will let the user eventually save a image to the disk.
To make this, I'm using the FileStream class and its writeBytes() method.
This is working nicelly. The problem occurrs when I tried to show the save progress with a simple mx:ProgressBar. I've tried some approaches, but none seems to work.
Here is the ActionScript piece of code:
private function save(file:File, image:MyImageClass):void {
var data:BitmapData = new BitmapData(width, height, true, 0x000000);
image.draw(data, _cols);
var bytes:ByteArray = new PNGEncoder().encode(data);
fileStream = new FileStream();
fileStream.addEventListener(OutputProgressEvent.OUTPUT_PROGRESS, onProgress);
fileStream.addEventListener(Event.CLOSE, onClose);
try {
fileStream.openAsync(file, FileMode.WRITE);
fileStream.writeBytes(bytes);
} catch (e:Error) {
Alert.show("Error trying to save the image: " + e.message);
} finally {
fileStream.close();
}
}
private function onProgress(event:OutputProgressEvent):void {
var progressRatio:Number = (1 - (event.bytesPending / event.bytesTotal));
progressBar.setProgress(progressRatio, 1);
trace(progressRatio);
if (event.bytesPending == 0)
event.target.close();
}
private function onClose(event:Event):void {
trace("closed");
}
And the mxml for the progress bar:
<mx:ProgressBar id="progressBar" mode="manual"/>
Executing this I got a frozen interface that is released when the file is totally saved and on the console I get all the traces at the same time. The progress bar stays on 0% until the interface is unfrozed and it goes to 100%.
I know that Flash is single thread, but I thought that the FileStream.openAsync() method should do the dirty work to make my interface responsible. It shouldn't be that hard to do this simple and (I think) common task.
The question is: what I'm doing wrong?
Thanks in advance

Answer 1

How big is the file being saved?
You code seems fine, in terms of saving the file. However, what I suspect is actually taking a long time is encoding the file to PNG format. Unfortunately, the PNGEncoder doesn't dispatch any progress events. But you should check out this project from Lee Burrows, or consider using Actionscript Workers to do the encoding in a different thread.
Quick way to prove it: add trace statements before/after you encode to PNG. Does the big delay correspond to this phase, or to the actual save?
If that doesn't help, please specify how big your file is, and whether you getting 0, 1, or multiple OUTPUT_PROGRESS events.

Answer 2

I agree with Sunil, but I'd like to add a thing or two.
First of all I'd suggest using the new method of the BitmapData class for encoding an image, because it's faster and easier. So your code would change to something like this:
var data:BitmapData = new BitmapData(width, height, true, 0x000000);
image.draw(data, _cols);
var bytes:ByteArray = data.encode(data.rect, new PNGEncoderOptions());
You can track the progress of the writing the file (although I suspect this isn't taking much time, like Sunil said) like this:
bytes.position = 0;
while(bytes.bytesAvailable > 0) {
fileStream.writeByte(bytes.readByte());
trace("progress:", bytes.position / bytes.length * 100); // multiply by 100 for percentage
}
Please note that you'll need a worker for this approach, else the progress will only update visually when the save is done.

Answer 3

Sunil is correct. Writing the file hardly takes a moment. It's decoding the byte array that's blocking the application. I implemented the following code to test it out.
private function save(file:File):void
{
var bytes:ByteArray = new ByteArray();
//233348 - very fast (requires 6000 x 10000 bitmap pixels)
//252790 - very fast (requires 6500 x 10000 bitmap pixels)
//2488990 - need a whole magnitude more of data in order to show the progress messages
for (var i:int = 0; i < 2488990; i++)
{
bytes.writeByte(1);
}
var fileStream:FileStream = new FileStream();
fileStream.addEventListener(OutputProgressEvent.OUTPUT_PROGRESS, onProgress);
fileStream.addEventListener(Event.CLOSE, onClose);
try {
fileStream.openAsync(file, FileMode.WRITE);
fileStream.writeBytes(bytes);
} catch (e:Error) {
//Alert.show("Error trying to save the image: " + e.message);
} finally {
fileStream.close();
}
}
You're going to need a progress indicator on the decoding task rather than on the file writing task. Workers seem like the best solution to this, but it depends upon which version of the runtime you need to target.