If we knew you were comin', we'd've baked a cake

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.

Previous

Flash AS3: target vs. currentTarget

Next

Flash AS3: Smooth lines with the Drawing API

13 Comments

  1. 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

  2. admin

    Hi Arthur,
    I’ve updated the post to reflect this information.

    Thanks,
    Andy

  3. Nice article. I’m just learning flash, but this is definitively bookmarked. 🙂

  4. Robert Eriksson

    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

  5. Robert Eriksson

    @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?

  6. 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

  7. admin

    @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

  8. zak

    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!

  9. admin

    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.

  10. The new kid on the block for bulk loading is LoaderMax.
    http://www.greensock.com/loadermax/
    It is awesome!

  11. hemant

    This Bulk loaders is nice but i want a loader that will load All images in parallel.

  12. admin

    You can load images in parallel with BulkLoader, but Flash will only allow a limited number of parallel connections – and the more parallel connections you have, the slower they all load. I prefer sequential loading because it gets some content to the user immediately.

    As Adrian mentioned, LoaderMax is pretty sweet and does a lot of what BulkLoader does, plus a few other things.

  13. wsz

    good job!

Powered by WordPress & Theme by Anders Norén