Progress indicator using flash.display.Loader

Question

I need to do a simple progress indicator while loading an image on background. I’m using the flash.display.Loader class in what seems to be the standard way. The problem is that even though I can see that flash.display.LoaderInfo fires the ProgressEvent.PROGRESS at regular intervals using tracing, a dynamically updated text (or any other graphics object) is updated only once when the loading finishes. It looks like if the display update queued and caused only one update at the end. This is a simplified version of the function which initiates the loading:

public function init()
{
    var loader : Loader = new Loader(); 
    var request : URLRequest = new URLRequest(this.imageSrc); 
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
    loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, updateProgress);
    loader.load(request);
}

and this is the event handler:

private function updateProgress(event : ProgressEvent) : void
{
    progressIndicator.text = event.bytesLoaded + " / " + event.bytesTotal;
    trace(event.bytesLoaded + " / " + event.bytesTotal);
}

I apologize for probably an elementary question. I don’t use Flash very often. But it seems to me that I’m doing a sensible and intuitive thing. It must be some 101 Flash pitfall.

Answer 1

Hi,

I just pasted your code in a new fla an tried it, with minor tweaks (from class to timeline code, nothing major ).

    import flash.events.ProgressEvent;

var progressIndicator:TextField = new TextField();
addChild(progressIndicator);
progressIndicator.autoSize = "left";
progressIndicator.border = true;

var loader : Loader = new Loader(); 
    var request : URLRequest = new URLRequest("kernel_params.swf"); 
    loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, updateProgress);
    loader.load(request);

function updateProgress(event : ProgressEvent) : void
{
    progressIndicator.text = event.bytesLoaded + " / " + event.bytesTotal;
    trace(event.bytesLoaded + " / " + event.bytesTotal);
}

everthing seems fine. Are you getting any errors , any messages in the outputpanel ? Maybe there's type-o o something somewhere else in the code, because the part you sent looks fine.

Answer 2

It seems that the answer is rather dull. My problem was that during the development work, I was using the standalone Flash player (I double clicked on the SWF file or ran it in Adove Flash CS3). The problem apparently was that the images were already cached which resulted in several quick successive invocations of Event.PROGRESS. When I later tried the SWF file in a browser and regularly cleaned the browser cache, the images were loaded as expected every time.

I guess the puzzling thing was that even though the images were cached, I got several Event.PROGRESS events (about 3 or so) and I assumed that it was just a matter of very coarse granularity. If I measured the time between the events, I would have probably discovered sooner what was going on.