AS3 + XMLLoader + CSSLoader
Posted: October 30, 2007 at 4:58 pmSomeone 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
The Discussion
see what everyone is saying
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!
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?
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!!!!!!!!!
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
can't wait to test the new version of the loader!!!!!!!!!!!!
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)
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.
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.
This post is in the wrong place, but thanks. I'll update that in the next update in the next couple days.