Progress bar for loading xml data in actionscript 3

Question

I'm using Flash CS5 and FlashDevelop to build a game in ActionScript 3. I'm trying to have the game as much datadriven as possible. So most of the game information is stored in XML files that are loaded when required by the game.

This loading works fine, but as it happened some files have become rather big so that loading can take a number of seconds (~3 at the moment on my PC, but I expect it to become even longer). So I wanted to add a loading screen with progress information (at the very least a bar with percentage).

The later part is the one that confuses me. Here's the code where I ask for the XML file to be loaded:

public function load( a_FileName:String, a_Callback:Function, a_LoadingScreen:MovieClip ):void
{
    m_Callback = a_Callback;

    m_LoadingScreen = a_LoadingScreen;

    var t_URLLoader:URLLoader = new URLLoader();

    t_URLLoader.addEventListener( Event.COMPLETE, fileLoadComplete );
    t_URLLoader.addEventListener( ProgressEvent.PROGRESS, fileLoadProgress );


    t_URLLoader.load( new URLRequest( a_FileName ) );

}

The following code shoudl be called on each ProgressEvent.PROGRESS

public function fileLoadProgress( e:ProgressEvent ):void 
{
    m_LoadingScreen.txtPercentage.text = Math.floor( ( e.bytesLoaded / e.bytesTotal ) * 100 ) + "%";


}

The problem is that my program seems to load the file first (not doing anything else while its busy) and only then shows the loading screen.

If I put a trace in the fileLoadProgress function I do get a number of updates in my output window, but the screen does not update.

When using MouseEvents I know you can use the updateAfterEvent() function to force a draw call, but this method doesn't seem available to me when using ProgressEvents.

Any way to force my screen to update while loading the xml file?

---EDIT----

I made a small sandbox to further test this problem: A single FLA file with just a dynamic textfield on frame one and the following code:

var t_URLLoader:URLLoader = new URLLoader();

t_URLLoader.addEventListener( Event.COMPLETE, fileLoadComplete );
t_URLLoader.addEventListener( ProgressEvent.PROGRESS, fileLoadProgress );

t_URLLoader.load( new URLRequest( "data/TerritoryData.xml" ) );

stop();

function fileLoadProgress( e:ProgressEvent ):void 
{
    trace( Math.floor( ( e.bytesLoaded / e.bytesTotal ) * 100 ) + "%" );
    txtPercentage.text = Math.floor( ( e.bytesLoaded / e.bytesTotal ) * 100 ) + "%";
}

function fileLoadComplete( a_Event:Event ):void
{
    trace( "done!" );
    txtPercentage.text = "done!";
}

This is about as bear bones as I can make it, but it still shows the same problem. In my output window the traces show:

28% 56% 84% 100% done!

but in the screen it goes from blank to "done". If I put breakpoints in fileLoadProgress function the screen doesn't update either. If I Close() the URLLoader in the fileLoadProgress function it does end up with a "28%" text.

Any ideas? This is driving me nuts...

Answer 1

As Dave Hart mentioned in the comment on the original question. The answer is that Flash will not update the screen unless the xml file is loaded is from an external website.

With the XML on my website, the game would show one or two updates in the textfield, with the screen updates stalling in between (I used a simple animation in the background to keep track of the framerate). This is still not by far the amount of trace outputs I receive in the debug window, but at least it shows that it can indeed output stuff to the screen with an update about once every second.

Also the first time I tried it, it seemed to work better than subsequent times, but this is perhaps due to the file being stored locally temporarily?

Unfortunately it's of zero use to me as my files are going to be loaded locally. So I guess I'll have to live with loading screens that have no animation whatsoever.

Answer 2

Have you tried setting up everything in first frame but loading it in the second one? So it actually would take:

t_URLLoader.load( new URLRequest( "data/TerritoryData.xml" ) );
stop();

to the second frame. I think the txtPercentage does not refresh in between.