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.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.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:
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
November 7th, 2007 at 12:25 pm
Hi,
I tried the XMLLoader class, but I don’t get a loadingprogress state.
the progress event is just triggered once and the loaded percentage is 1.
do you know why?
thx!
November 7th, 2007 at 12:41 pm
I’m getting progress output when I publish my files. Are you simulating download when you test your movie? Could also be that your XML is small?
November 8th, 2007 at 10:58 am
I am simulation via the Flash IDE. The xml has 40kB.
when i am loading a bigger file (700kb) progress is trigger a just before complete is triggered. then I get about 5 progress events triggered all at once! strange!
are you planing to integrate the xml and css loader into Queloader? That would be great!!!!!!!!!
November 8th, 2007 at 12:19 pm
I’ll get your xml offline and check. Yes I am almost finished adding those to the QueueLoader as well as adding items on the fly while a load is runnning
November 8th, 2007 at 12:53 pm
can’t wait to test the new version of the loader!!!!!!!!!!!!
February 14th, 2008 at 5:07 pm
Nice Class…
I get a progress out put of 1 also, after using a larger file I got a 0.69 and a 1 so I looked at your code and it looks liek it just needs a *100 after you calculate the bytes loaded/toal bytes, basically 1 is 100% (kinda like alpha is now in as3)
February 15th, 2008 at 12:15 am
Yes Chris you are correct. The loader is using the as3 convention of percentages instead of 0-100 n as2. Also makes it easier for calculating load bar widths, etc.
March 22nd, 2008 at 6:58 am
Great Work. I’m using this Libs with FB3 since a few days. I Noticed that the Constructor of the LiteEventClass uses the constant filetype.
At the Moment this causes compile a error realted to this compiler bug: http://bugs.adobe.com/jira/browse/ASC-2231.
coriously i changed filetype : int = QueueLoaderLite.FILE_IMAGE to filetype : int = 1 than i could compile.
March 22nd, 2008 at 1:15 pm
This post is in the wrong place, but thanks. I’ll update that in the next update in the next couple days.