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
    }

Answer 1

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).