AS3 / Flash: Introducing the AssetLoader Class

The day is Sunday, February 17, 2008 ...

In Actionscript 3, there are many different ways to load external assets from the Internet. Unfortunately, this can become cumbersome to find different ways to load each one in it's own individual way. With this difficulty in mind, I have created the AssetLoader class.

Description

The asset loader class let's you use the same method to load sound, video, pictures, swf's,  XML and CSS.  The goal for this project is to make loading external assets as simple and clean as possible and give the user all the control they could every possibly need. And even better yet, this class is licensed with the M.I.T. license, so you can do whatever you want with it! Sweet isn't it.

The only official download link:

AssetLoader_v1.zip

UPDATE: Preliminary Documentation: http://www.ayanray.com/assetloader/

 

Update Log

[July 25 2008] I uploaded my documentation that was on my SVN. Sorry for uploading it so late and I can only hope it is useful. 


How Does It Work?

The AssetLoader uses a very simple concept. Items you want to load from the internet have extensions, and with these extensions, the AssetLoader can determine how to load the object. So, when you use the AssetLoader, you only need to pass the URL for loading to begin. Of course, simply loading an object is not enough. You must pass callbacks to listen to such events such as loading complete, progress events, and error messages. So what happens if you are trying to load an xml file that has a php extension? Well you can also explicity tell the AssetLoader what type of asset it is. So you could technically tell AssetLoader to load an image as a text file, and it will try to do it (and probably fail). Finally, the last key functionality of the AssetLoader is that it acts as a queue. It will load as many or as few as you want at any given time, and then when that download is complete, it will move to the next one in the queue. Set it to 1, and it will load one at a time until all the urls you passed to it are complete. Awesomeness. 


What File types are Currently Supported?

Currently, XML, JPG, and Raw Text is supported. I have plans to add support for MP3, WAV, FLV, and other loaders, but because of school and work, I simply don't have the time to make the final version. You can however EASILY add your own supported types and custom support by creating a new handler in the handlers folder in com.ayanray.loaders using the convention [FileExtension]Loader.as. AssetLoader will also automatically recognize your handler once you have added it there. Please, please contact me if you make your own handler because it is helpful for EVERYONE and that is why I am doing this, to help you.


What Callbacks are Supported?

Currently, the following callbacks are supported generally: onError (general use for almost anything that will stop it from loading your file), onComplete, onInit, onUpdate (File Download Progress), onTimeout, and onStart. This is not an exhaustive list, but is the most basic one. Each extension might have certain other properties that you can pass to the AssetLoader. For example, when loading an external SWF, you can assign an Application Domain. This is specific to the SWF loader in AssetLoader only and is not used in the XML. See the Documentation for more specific loaders. 


Examples

For all examples, make sure you include the package ;). com.ayanray.loaders.*

 

Example 1: Loading 1 Asset

 new AssetLoader( http://www.ayanray.com/myimage.jpg,{onComplete: handleImageLoadComplete} );

Example 2: Loading 2 or more Assets

var obj = new Object();
obj["http://www.ayanray.com/myimage.jpg"] = {onComplete: handleImageLoadComplete};
  obj["http://www.ayanray.com/gallerylist.xml"] = {onComplete: handleXMLLoadComplete};
new AssetLoader( obj );

Example 3: Queue Loader

AssetLoaderSettings.MAXLOAD = 1;
var obj = new Object();
obj["http://www.ayanray.com/myimage.jpg"] = {onComplete: handleImageLoadComplete};
  obj["http://www.ayanray.com/gallerylist.xml"] = {onComplete: handleXMLLoadComplete};
new AssetLoader( obj );

Example 4: Loading XML with PHP extension 

new AssetLoader( http://www.ayanray.com/xmlgenerator.php,{onComplete: handleImageLoadComplete,
filetype: AssetLoaderTypes.XML } );

 



Questions, Concerns, or Comments?

Please leave a comment if you find this is helpful! Feedback is always appreciated.

Message Wall

John wrote this on Tuesday, February 19, 2008 Thanks for this. It is great! When will sound be available?
Ayan wrote this on Tuesday, February 19, 2008 Sound will be available eventually... I hope someone wants to do it for me because school is killing me! Thanks and I hope you use it as prominently as I have been.
Pete wrote this on Saturday, March 8, 2008 Can you post an example how to integrate this good stuff?? how can i instance it or tell them a target to load the img or whatever to?? maybe some hints for a newbie... thx a lot!
Ayan wrote this on Saturday, March 8, 2008 ok ok... first, you do not need to save an instance of it. Once you pass something into the new AssetLoader( ___) it starts right away. It depends on you adding callbacks to what you send AssetLoader. If you add the onComplete callback, it calls that function when it is done doing that. Try doing Example #1, if there's more problems, email me at ayan [at] ayanray.com and I'll help you get through it.
snowboardfoo wrote this on Wednesday, March 12, 2008 AS2 Version?
ekv wrote this on Sunday, March 16, 2008 looks great. in looking through the code, it's not clear that an array can be passed to the AssetLoader. AssetLoader(["http://www.ayanray.com/myimage.jpg", "http://www.ayanray.com/myimage.jpg"]); or AssetLoader(xmlloader.gallery.@image); thanks!
Ayan wrote this on Sunday, March 16, 2008 @ekv - Actually, an array was never intended to be passed through the AssetLoader. Only an object containing multiple items with the id as the URL and the value as the object callbacks and settings OR just 2 variables: a string with the URL and an object with the callbacks and settings. Perhaps I added that functionality by mistake ;) but I might remove it as the two current ways to use the AssetLoader are suffice for anything you want to do. @snowboardfoo - Sorry, no plans for an AS2 version. I have the necessary classes for it but I believe spending time on an AS2 version is time that could be better spent on adding Sound or AVM1 support. If you would like to partake on the AS2 version due to requirements set by your clients, please email me and I will send you the AssetLoader in AS2 form with enough code to get it working for the major media types.
Eric Chan wrote this on Saturday, April 12, 2008 Yo Ayan, AssetLoader hmm looks cool man! I'm currently diving into eepmon v4... need to brush up my Papervision skills see u for sushi!
Ayan wrote this on Thursday, April 17, 2008 Thanks Eric! Yes man lets chat it up about Papervision over some sushi. I am sure its a hot topic at the all you can eat sushi joints! Hell lets fly back to Tokyo and enjoy some real fish. Also, feedback on the assetloader is much appreciated!
rich wrote this on Tuesday, April 22, 2008 hi, how would I go about implement this, let say I have created a carousel type of 3D menu and has8 containers, and I want to load images that's coming from a XMl source. So do I use ur loader class to: 1. load XML and trigger a call back 2. parse necessary data from XML 3. use ur loader class for each image (but how)? Please help, thanks.
Ayan wrote this on Friday, April 25, 2008 Hi Rich, yes you are correct. That is exactly how you would do it. First, new AssetLoader( myxmlfile.xml, {onComplete: onXMLLoadComplete} );. Second, loop through XML file. Your onComplete handler passes one variable, which is an object. I.e. function onXMLLoadComplete( obj:Object ) { trace(obj.asset); }. That asset is your data, either a bitmap, xmllist, etc. Third, call another new AssetLoader( obj ); where obj is in the format url:{handlers}, which you should create during your loop of your XML list. Hope this helps!
Nick R. wrote this on Saturday, May 10, 2008 Good work Ayan. This is solid - saves me a considerable amount of work. Thanks!
Özgür Altay wrote this on Friday, July 25, 2008 Good class... Thanks for sharing! BTW, a documentation should be useful.
mauricio wrote this on Wednesday, September 17, 2008 I'm using your class and it has helped me out a lot; Thank you so much. I have a doubt though: I understand the queue loader loads a batch of assets, 1 at the time. But how about the order they are loaded? I am doing several tests and the same array of assets (a bunch of swf's) loads in an unpredictable order. I'm tracking which loads first with the onStart call back. Is there a way to have them load in a rigorous order. Thanks for all your efforts.

Add a Message

Name
E-mail (View Privacy Policy)
Spam Number Please write the result of 2 + 9 in the box :o)
Comment
Website (optional)