Home > Actionscript/AS3, BulkLoader, Flash > Flash AS3: Sequential loading with BulkLoader

Flash AS3: Sequential loading with BulkLoader

April 23rd, 2009

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.

Be Sociable, Share!

  1. April 26th, 2009 at 08:51 | #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
    April 28th, 2009 at 08:47 | #2

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

    Thanks,
    Andy

  3. January 16th, 2010 at 06:54 | #3

    Nice article. I’m just learning flash, but this is definitively bookmarked. :)

  4. Robert Eriksson
    March 12th, 2010 at 04:25 | #4

    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
    March 12th, 2010 at 04:30 | #5

    @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. March 12th, 2010 at 06:28 | #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
    March 17th, 2010 at 10:59 | #7

    @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
    May 4th, 2010 at 15:43 | #8

    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
    May 4th, 2010 at 15:53 | #9

    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. February 1st, 2011 at 08:57 | #10

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

  11. hemant
    March 25th, 2011 at 04:01 | #11

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

  12. admin
    March 25th, 2011 at 07:07 | #12

    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
    October 21st, 2011 at 01:23 | #13

    good job!

  1. January 21st, 2010 at 08:18 | #1
  2. February 2nd, 2010 at 18:19 | #2
  3. September 17th, 2010 at 09:08 | #3

Top