Flash AS3: Sequential loading with BulkLoader
BulkLoader is an open source AS3 Library created by Arthur Debert that enables easy loading of multiple assets. This behavior is exactly what I needed for a recent project. I needed to break a large flash website into multiple swfs so that the site preload remained small. I wanted the remaining site pages (individual SWFs) to load in the background, one at a time, after the initial site load. If a user requested a page that hadn’t loaded yet, the background loading would pause and the requested page would load immediately. BulkLoader is designed for exactly this sort of heavy lifting and it saved me a lot of development time.
I’ve created a picture loading demo below to show exactly how this works:
As you can see, I have used BulkLoader as a sequential loader (loading only one image at a time). After bulk loading has begun, you can request any of the images immediately. At this point, BulkLoader will pause the current download and switch to loading the requested image. As soon as that is complete, it will resume the previous download.
There are a few important caveats when using the BulkLoader library:
- BulkLoader behaves differently on a web server than in the Flash IDE. When testing BulkLoader, it is important to test it on a web server to get accurate results. The Flash IDE is not able to correctly simulate functions such as pause() and loadNow(), so they should be tested in a browser.
- BulkLoader behavior also varies slightly between browsers . In Firefox3 and Safari, paused downloads are restarted from the beginning when they resume. Internet Exploder 7 actually pauses and resumes downloads correctly (go figure!).
As always, you can download source files here. The code is fairly straightforward and I have added lots of comments. Please note that this sample is designed as a demo only – I sacrificed a lot of elegance in the code for the sake of simplicity.
You can get the latest version of BulkLoader here. You will also find online docs and a very helpful discussion list moderated by Arthur Debert himself. It’s a great place to get help using BulkLoader or just drop in and say thanks to Arthur.
Hi Andy.
Thanks for the write up, and the compliments!
Just one small detail, it’s not BulkLoader that behaves differently on the IDE over browsers. It’s the flash player’s api, that interfaces with the browser in a inconsistent way. This means that using BulkLoader or not will carry the same problems.
Cheers
Arthur
Hi Arthur,
I’ve updated the post to reflect this information.
Thanks,
Andy
Nice article. I’m just learning flash, but this is definitively bookmarked.
Hi,
Sweet!
I have question. I load media via xml list. I want to bulkload a sequence of media so the user does not have to wait everytime media is loaded…
?
How those the code bulkLoader.start(1) work? I mean how does it now what to load? How do I specify what to load
Thanks!
Krgds
Robert
@Robert Eriksson
O sorry… This must be it:
bulkLoader.add(“images/image1.jpg”, {id:”item1″, priority:100});
Question: How can I use this for every item in my xml list? Is there a way to implement this dynamically for the whole xml list?
Hi Andy,
Thanks for sharing! I’ve written similar classes for downloading the media content referenced by XML files. This looks like it’ll be a real time-saver.
Matt
@Robert Eriksson
Simple… just loop through each item in the list and use the bulkLoader.add command on each iteration of the loop.
Good Luck,
Andy
I iterate through all nodes in a xmllist to load thumbs and add register image loaders for each image:
imageLoader.add(imagesSrc[i], {id: “i”+i});
imageLoader.get(“i”+i).addEventListener(Event.COMPLETE, onImageLoaded);
then, on a method called clickThumb(), i call the method loadNow to load and display the corresponding image:
imageLoader.loadNow(“i”+i);
but that make it load all the images. why that happens?
thanks in advance!
I am not sure, but I *THINK* that loadNow() loads a specific item in the queue and then resumes bulk loading everything else in the queue. So, the first time you call loadNow(), it is loading that specific image and then it starts loading all of the other images automatically. I am not sure if there is a function to simply load a single item and stop.
You may not want to use bulkLoader for this. It might be easier to simply use a standard flash Loader to load one image at a time. bulkLoader is really useful if you want to load a lot of items automatically in the background.