Archive for October 30th, 2007

AS3 + XMLLoader + CSSLoader

Someone suggested the great idea of adding CSS and XML loading to QueueLoader. I plan on doing this, but first I thought I’d share a method I use to load those two items.

I personally tend to load XML first (I put the path to the css in the XML file), then I load the CSS, and then I start my QueueLoader. The reason for this is that I almost always store the paths for QueueLoader in the XML. If that’s a method you tend to follow as well, then these utilities will help if you haven’t built them already.

In the spirit of sequential loading and monitoring, I totally plan on adding this to the next revision. However, I would not suggest setting up a separate QueueLoader just for XML and CSS. If you need to load them separately, here are a couple of utilities for doing that. They will save you a bit of overhead, and are cousins of QueueLoader so they should be brainless to implement.

XMLLoader

import com.hydrotik.utils.XMLLoader;
import com.hydrotik.utils.XMLLoaderEvent;

var xmlLoader:XMLLoader = new XMLLoader(_sAdminPath + xmlFilename);
xmlLoader.addEventListener(XMLLoaderEvent.COMPLETE, onXMLComplete);
xmlLoader.addEventListener(XMLLoaderEvent.ERROR, onXMLError);
xmlLoader.addEventListener(XMLLoaderEvent.PROGRESS, onXMLProgress);

function onXMLError(event:XMLLoaderEvent):void {
    trace(“XMLLoader error: “+event);
}

function onXMLProgress(event:XMLLoaderEvent):void {
    trace(“XMLLoader progress: “+event.percentage);
}

function onXMLComplete(event:XMLLoaderEvent):void {
    xml = event.xml;
}

CSSLoader

import com.hydrotik.utils.CSSLoader;
import com.hydrotik.utils.CSSLoaderEvent;

var cssLoader:CSSLoader = new CSSLoader(_sAdminPath + xmlFilename);
cssLoader.addEventListener(CSSLoaderEvent.COMPLETE, onXMLComplete);
cssLoader.addEventListener(CSSLoaderEvent.ERROR, onXMLError);
cssLoader.addEventListener(CSSLoaderEvent.PROGRESS, onXMLProgress);

function onXMLError(event:CSSLoaderEvent):void {
    trace(“CSSLoader error: “+event);
}

function onXMLProgress(event:CSSLoaderEvent):void {
    trace(“CSSLoader progress: “+event.percentage);
}

function onXMLComplete(event:CSSLoaderEvent):void {
    css = event.css;
}

I didn’t include any fla files in the download, just the packages, since this should be pretty easy to implement. But here’s an example of how I use these before running my main block of code:

private function loadConfigration():void{
    var xmlLoader:XMLLoader = new XMLLoader(_sAdminPath + xmlFilename);
    xmlLoader.addEventListener(XMLLoaderEvent.COMPLETE, onXMLComplete);
    xmlLoader.addEventListener(XMLLoaderEvent.ERROR, onXMLError);
    xmlLoader.addEventListener(XMLLoaderEvent.PROGRESS, onXMLProgress);
}

private function onXMLError(event:XMLLoaderEvent):void {
    trace(“XMLLoader error: “+event)
}

private function onXMLProgress(event:XMLLoaderEvent):void {
    trace(“XMLLoader progress: “+event.percentage)
}

private function onXMLComplete(event:XMLLoaderEvent):void {
    trace(“:: onXMLComplete:”);
    _xml = event.xml;

    var cssLoader:CSSLoader = new CSSLoader(CacheKiller.file(“includes/admin/” + _xml.attribute(“css”), “../”, “/”));
    cssLoader.addEventListener(CSSLoaderEvent.COMPLETE, onCSSComplete);
    cssLoader.addEventListener(CSSLoaderEvent.ERROR, onCSSError);
    cssLoader.addEventListener(CSSLoaderEvent.PROGRESS, onCSSProgress);
}

private function onCSSError(event:CSSLoaderEvent):void {
    trace(“CSSLoader error: “+event)
}

private function onCSSProgress(event:CSSLoaderEvent):void {
    trace(“CSSLoader progress: “+event.percentage)
}

private function onCSSComplete(event:CSSLoaderEvent):void {
    trace(“:: onCSSLoaded:”);
    _css = event.css;
    buildInterface();
}

Pretty simple:) Just runs one after the other then you can run a QueueLoader with loaded items pulled from the XML. Just one way of doing, but like I said I will add css and xml to the next revision.

Thanks to Jesse for the idea!

XMLLoader and CSSLoader Source Rev1

Tuesday, October 30th, 2007

AS3, Flash, QueueLoader, Source Code 9 Comments