Downloading Files with Adobe AIR, HTML and JS Part 2. Adding a Progress Bar with Canvas

Just a quick follow up to my previous post about downloading files with Adobe AIR. Reader Jason asked "How would you create a progress bar to go with the download." If this is something you've been asking for, then read on. You can also download the complete source for this project.

Here's how this works. The URLStream class fires off several events while it's downloading your selected file. We're already listening for the COMPLETE event; it's how we capture the complete data stream and save the file off. But if we take a look at the AIR API we'll see that there's also a PROGRESS event that we can listen for by calling air.ProgressEvent.PROGRESS. The PROGRESS event has two key values passed along with that we're using: bytesLoaded and bytesTotal. Having those two values allow us to calculate just how much of the file has been download.

Finally, because we're using webkit which has excellent Canvas support, we can draw a rectangle which displays our progress. This is a simple implementation, but it could be made as complex as you desired, or just about any shape you can imagine. What sorts of things are doing with AIR and HTML/JS? Are you using the Canvas tag for any portion of your application?