Question

I am working on my first big Actionscript 3 website and trying to decide on the best loading sequence. I am currently using BulkLoader, since filesize wasn’t much of an issue for a larger website, but I am definitely open to other approaches.

I am trying to figure out which external assets to measure progress {1 swf, 1 css file, multiple images}, but can’t quite figure out how to group/order them because of their dependency on a loaded XML file.

What are the best practices for program initialization and chain loading of assets in AS3, particularly when the site structure is created from an XML file?

First and foremost, I am loading a single SWF and an XML file containing the site structure, page-ids, copy, and image filenames (background images and also page slideshows). I am currently bulk-loading the XML and a CSS file up front, and then generating the whole program. I have to retrieve image filenames out of the XML and then load them, however that is really a two-part process. Is there a way to somehow create a single preloader for all of this bulk-loading?

A few notes about my initialization process: there is 1 frame in the timeline, and only the preloader exists on the stage. The pages + other details (navigation, background images, slideshows, etc.) are all added/created as new objects after parsing of XML, and then I remove the preloader clip. This can be somewhat processor intensive when loading all up front, but prevents having to preload again and again as users click through the website. I will also be implementing SWFAddress, so the preloading sequence is critical to master.

Answer 1

I ended up using AS3 QueueLoader — it enabled me to add assets to the queue after the XML was loaded, and still kept my preloading as one process. Sweet!

I hope this helps somebody. Let me know if you have any questions about it!

Here is some code that adds images to the queue after the XML has loaded (a lot of details omitted):

private function init():void {
    _oLoader = new QueueLoader();
    _oLoader.addItem(PATH+cssURL, css, {title:'cssContent'});
    _oLoader.addItem(PATH+"xml/copy.xml", pageXML, {title:'pageXML'});

    _oLoader.addEventListener(QueueLoaderEvent.ITEM_PROGRESS, onItemProgress, false, 0, true);
    _oLoader.addEventListener(QueueLoaderEvent.ITEM_COMPLETE, onItemComplete, false, 0, true);
    _oLoader.addEventListener(QueueLoaderEvent.QUEUE_PROGRESS, onQueueProgress, false, 0, true);
    _oLoader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete, false, 0, true);

    _oLoader.execute();
}
private function onItemComplete(evt:QueueLoaderEvent):void {
 if (evt.title == 'cssContent') {
    css = StyleSheet(evt.content);
}
if(evt.title == 'pageXML'){
    pageXML = XML(evt.content);

    processXML(); // creates page objects based on XML

    for(var i:int=0; i<pageXML.PARENT.length(); i++){
         //loops through XML for background images and adds them to various
         //sprite layers for simple turning on and off
        numSubPages = pageXML.PARENT[i].PAGE.length();

        var pageImgHolder = new Sprite();
        pageImgHolder.name = 'page'+i;
        pageImgHolder.x = 0; pageImgHolder.y = 0;
        bgImgHolder_mc.addChild(pageImgHolder);

        for(var j:int=0; j<numSubPages; j++){
            if(String(pageXML.PARENT[i].PAGE[j].@IMAGE) !== ''){
            bgImg = new Sprite();
            bgImg.name = 'page'+i+'img'+j;
            bgImg.alpha = 0;

            pageImgHolder.addChild(bgImg);

            _oLoader.addItem(PATH+'images/'+pageXML.PARENT[i].PAGE[j].@IMAGE, bgImg, {title:'page'+i+'img'+j})
            trace(pageImgHolder.parent.name+'/'+bgImg.parent.name+'/'+bgImg.name+' = '+pageXML.PARENT[i].PAGE[j].@IMAGE);
            }
        }
        }
    xmlLoaded = true;
    } 
}
private function onQueueComplete(evt:QueueLoaderEvent):void {
    trace("** "+evt.type);
    imgHolderLoaded = true;

    Preloader.instance.spinnerDone();
    startMovie();

    bgImgHolder_mc.turnOnImg(0, 0);
    //turns on image for page 0, subpage 0 (i have a very complicated architecture)
}