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:

Latest Release

AssetLoader_v1.2.zip

Archive

AssetLoader_v1.zip

 

Documentation (v1.0)

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

 

Update Log

[March 10 2009] Uploaded latest revision that has support for stopping loaders, fixed memory leaks, and fixed a major bug that in some cases caused the same file to be loaded twice.

[July 25 2008] Uploaded documentation for v1.0


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 more than 1 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 } );

Example 5: Stopping the AssetLoader

AssetLoader.stopQueued();

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.
Ayan wrote this on Thursday, January 15, 2009 @maurico I am working on a new version that has your requested feature. It is a really good idea but it is going to take a code upheaval to change it. Thanks for your nice comments and I am glad this is becoming a useful little class!
damarev wrote this on Tuesday, March 10, 2009 Thanks for sharing, works great! I have a simple question: how would you stop a loader? I've tried this but doesnt work: var a = new AssetLoader( myImageUrl ); a.stop();
Ayan wrote this on Tuesday, March 10, 2009 Hey Damarev, Sorry for not updating to the latest revision on this blog post. I really need to switch to google code for this project. Anyways, I've updated this page so you can download the latest version, which includes the command "stopQueued()". This allows you to stop all items loading and stored in the AssetLoader static array of urls.
damarev wrote this on Tuesday, March 10, 2009 On previous version assets are loaded secuentially, in the order they are added to the queue. But on this new version are loaded in no particular order, i guess as soon as are available. Is there any way to load assests secuentially in this new version like the old one? thx a lot!
Ayan wrote this on Tuesday, March 10, 2009 Hey damarev, I did some testing and I figured it out. Unfortunately, this has to do mostly with how Flash creates objects. When creating an object, Flash allocates space for the content arbitrarily and not in order. So, if you try to load multiple objects using example 2 from above, you lose control over loading in the order you created the object. There is an immediate solution though if you want to load your files in order, which is a little excessive (I'll try to fix it in version 2 now that you have brought it up). What you can do is call "new AssetLoader(url, extrasObject)" for every url you want to load in the order of which you want to load. The AssetLoader will then start loading each one as they are added to the queue list and some will understandably finish before others and thus begin loading the next one, etc. For the next version, I will implement some way of ordering your external assets - either by an array or some tag in your extra obj. I'll have to see which is the easiest to use and most efficient. Thanks for your feedback. It makes it easier to design the next version.
damarev wrote this on Wednesday, March 11, 2009 Actually, this is my code: for (var i:int = 0; i < photos_obj.length; i++) { new AssetLoader( photos_obj[i].thumb , {onComplete: assetLoaded} ); } But doesnt load the images sequentially, keeps loading the images at random order. For next version, what about using an array of objects instead of an object as a container? var arr = new Array(); arr.push({path:"http://www.ayanray.com/myimage1.jpg", onComplete: handleImageLoadComplete}); arr.push({path:"http://www.ayanray.com/myimage2.jpg", onComplete: handleImageLoadComplete}); arr.push({path:"http://www.ayanray.com/myimage3.jpg", onComplete: handleImageLoadComplete}); new AssetLoader( arr ); or in case you want to load just one asset: new AssetLoader( {path:"http://www.ayanray.com/myimage1.jpg", onComplete: handleImageLoadComplete} ); Maybe combined with this other syntax: var arr = new Array(); arr.push({path:"http://www.ayanray.com/myimage3.jpg", onComplete: handleImageLoadComplete, priority:3}); arr.push({path:"http://www.ayanray.com/myimage1.jpg", onComplete: handleImageLoadComplete, priority:1}); arr.push({path:"http://www.ayanray.com/myimage2.jpg", onComplete: handleImageLoadComplete, priority:2}); new AssetLoader( arr ); First one is more simple (if no priority passed as parameter, index position in the array defines priority) and second gives move control.
Ayan wrote this on Thursday, March 12, 2009 Hey Damarev, you should try this test: Change the AssetLoader Class code where the function "load" is. This function is basically where the loading commences. Trace out what urls you are loading and check for the order of the loading. I tried this out just now and it seems to be working correctly for me. If you try tracing out the URL, or checking some incremented id that you store in your extras vars after you completed loading, I think you will see that the order is random because files have different sizes and are thus loaded at different speeds than others, which justifies the random loading. Anyways, let me know! I will most likely incorporate the array feature in the next version. It's a good idea to add it I think. Thanks!

Add a Message

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