AS3: Loading bytes from multiple sources

Question

Hello,

I am loading multiple images into a class instance and I would like to keep track of how large the complete amount of loaded data is at any given point. I have grabbed the totalbytes from my directory of images via a PHP script... but collecting the new bytes from the ProgressEvent on each image seems tricky for some reason. Let's assume that the totalBytes variable is correct and that I am totally unfamiliar with the way that ProgressEvent works...

Does an event get fired every time ProgressEvent gets a new byte?
If not, how do I keep track of the current total bytes?

I'm sure I've got it wrong, but here's what I am trying:

public function thumbProgress(e:ProgressEvent):void
{
    //trying to check for a new data amount, in case the progress event updates
    //insignificantly
    if(e.bytesLoaded != this.newByte)
    {
        this.newByte = this.currentLoadedBytes - e.bytesLoaded;
        this.currentLoadedBytes += this.newByte;
        this.textprog.text = this.currentLoadedBytes.toString() + "  / " + this.totalBytes.toString();
        this.newByte = e.bytesLoaded; 
    }

    if(this.currentLoadedBytes >= this.totalBytes)
    {
        this.textprog.text = "done loading.";
    }
}

Answer 1

Are you using a flash.display.Loader to load your images? Then you can use the Loader.contentLoaderInfo.bytesTotal property, which should contain the right number of bytes once the image has finished loading. The Loader.contentLoaderInfo property references the LoaderInfo instance of the loaded content, which contains a lot of data about the file, such as total size, the amount that have finished loading, and the URL from which it was loaded. Check out the LoaderInfo reference.

Sum the values of this property for all of your loaders, to get the total amount of loaded data, e.g. in the COMPLETE handler for each loader.

Cheers

Answer 2

Maybe this isn't exactly an answer to your question, but I suggest that you take a look at bulk-loader library. It will greatly simplify loading multiple assets. Here is a quick and dirty example of usage. We've got simple application with progressbar and we want to update progressbar as images are downloaded.

<mx:Script>
    <![CDATA[
        import br.com.stimuli.loading.BulkProgressEvent;
        import br.com.stimuli.loading.BulkLoader;


        private function init():void {
            loadImages();
        }
        private function loadImages():void {

            var loader : BulkLoader = new BulkLoader("main-site");
            loader.add("http://www.travelblog.org/Wallpaper/pix/tb_turtle_diving_sipadan_malaysia.jpg", {id:"a"});
            loader.add("http://www.travelblog.org/Wallpaper/pix/tb_fiji_sunset_wallpaper.jpg", {id:"b"});   
            loader.addEventListener(BulkLoader.COMPLETE, onAllLoaded);
            loader.addEventListener(BulkLoader.PROGRESS, onAllProgress);
            loader.addEventListener(BulkLoader.ERROR, onAllError);    
            loader.start();                 

        }

        private function onAllLoaded(evt : BulkProgressEvent):void {

        } 

        private function onAllProgress(evt : BulkProgressEvent):void {

            progressBar.setProgress(evt.ratioLoaded * 100, progressBar.maximum);

        }

        private function onAllError():void {

        }

    ]]>
</mx:Script>


<mx:ProgressBar x="304" y="360" width="582" id="progressBar" mode="manual" minimum="0" maximum="100"/>