Can't get a working progress bar for file download AS3

Question

I'm currently enrolled in an ActionScript course, and cannot seem to get my progress bar to work correctly. We were tasked with creating a simple image loader application, which would access externally hosted images (through use of a PHP proxy script), and then spit the image onto the user's screen (with a progress event and progress bar to track the image's download progress).

However, when I run it, I get these mysterious black graphical glitches everywhere, as well as a non-functioning progress bar. In some browsers I get the following error: "ArgumentError: Error #2109: Frame label NaN not found in scene NaN. at flash.display.MovieClip/gotoAndStop() at Document/imageLoadProgress().

Here is my code - I cant for the life of me figure out what is wrong. I figure it has something to do with the imageLoadProgress() function, or my progress bar (which is just a simple 100-frame movie clip with a motion tween and a "stop()" command at the beginning).

public function loadImage()
    {
        var imageURL:String = imageArray[currentImageIndex];
        if(loaderInfo.url.substr(0,4) == "http")
        {
            trace("we're online");
            //use the proxy script
            //escape() will replace spaces in file names with %20
            imageURL = "./image_proxy.php?filename=" + escape(imageArray[currentImageIndex]);
        }

        var imageRequest:URLRequest = new URLRequest(imageURL);
        this.imageLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, this.imageIOError);
        this.imageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, this.imageLoadProgress);
        this.imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, this.imageLoadComplete);
        this.imageLoader.load(imageRequest);
        //end loadImage
    }

    public function imageIOError(e:Event)
    {
        trace("ImageIOError called. Error=" + e);
        //end imageIOError
    }

    public function imageLoadProgress(e:ProgressEvent)
    {
        var percentLoaded:Number = e.bytesLoaded/e.bytesTotal;
        percentLoaded = Math.round(percentLoaded * 100);
        //this.progress_mc.scaleY = percentLoaded;
        if (percentLoaded < 1)
        {
            this.progressBar.gotoAndStop(1);
        }
        else
        {
            this.progressBar.gotoAndStop(percentLoaded);
        }
        //end imageLoadProgress
    }

weltraumpirat weltraumpirat · Accepted Answer · 2011-12-08T19:58:12

Your loader script seems absolutely fine to me, except for a tiny flaw: The only way the NaN(== not a Number) in your error message makes sense to me is if your ProgressEvent's bytesTotal property equals 0 - because division by zero doesn't produce valid results, as we all know.

I can't say for sure why this happens, not knowing any of your server-side code, but I assume it would occur if your PHP proxy script does not set the Content-Length HTTP response header correctly. If you were loading an actual image file, the web server would automatically set the header for you - in the case of your proxy script, it seems you have to take care of it yourself.

Anyway, you can make your loader script more error-proof by testing for NaN, and making sure the frame you jump to is never greater than 100:

var frame:int = isNaN (percentLoaded) || percentLoaded < 1 ? 1 : 
                         percentLoaded > 100 ? 100 : percentLoaded;
progressBar.gotoAndStop(frame);

(I chose shorthand notation, but this is essentially the same as writing two if statements and an else).

Can't get a working progress bar for file download AS3

1 Answers