How to add multiple items to a BulkLoader Instance
bulkLoader.add(photos[i], { id:"photo-"+i, priority:10 - i} );
This line shows the bulkloader instance (in this case, named “bulkLoader” with a capital L, but you can name it whatever you want. A lot of examples name it “loader”, but for myself, I tend mix that up with the native Flash “Loader” class, so I avoid that).
The “add” function adds an item to be loaded by the Bulkloader class. It starts with the url:
photos[i], which for the first example, photos[0], would be :
"photos/400px-2008-08-22_Skateboarder_floating_in_the_air.jpg"
At this point, I hope you’re still following me, and that your eyes aren’t glazing over with either how simple or complex or just plain boring this is.
You can give each photo an id by writing an id name inside curly braces:
{id: your-id-name-goes-here}
In my example, I give each photo an id of “photo-” plus whatever photo number it is (i), which leads to:
photo-0 // "photo-"+i which is i=0 photo-1 // "photo-"+i which is i=1 photo-2 // "photo-"+i which is i=2...etc photo-3 photo-4
You can also set a priority for loading, which tells the bulkloader instance (bulkLoader with a capital L) which item you would like to prioritize in the loading. For my example, I would like the first photo to show up as soon as possible, so I give that the highest priority (10) and go from there. As the counter, i, increases, it decreases the priority:
10-0 = 10 // i starts at 0 10-1 = 9 // i++ equals 1 10-2 = 8 // i++ again equals 2...etc
I then add two EVENT LISTENERS which listen for when the bulkloader instance finishes loading each item, and if there is any error for any item:
bulkLoader.get("photo-"+i).addEventListener(BulkLoader.COMPLETE, onPhotoLoaded, false, 0, true);
bulkLoader.get("photo-"+i).addEventListener(BulkLoader.ERROR, onPhotoError, false, 0, true);
Error Events
Because I set up an individual event listener for each item added to the bulkloader instance:
bulkLoader.get("photo-"+i).addEventListener(BulkLoader.ERROR, onPhotoError, false, 0, true);
I can then use the event.target property of the event to see which photo by id had the error:
private function onPhotoError(e:Event) {
trace("photo load error:" + e.target);
}
You might have a case where you wrote an incorrect URL for an item…this way you can see which item has the error, which is much more useful than just knowing there is an error in general.
Once each item is loaded by bulkloader
private function onPhotoLoaded(e:Event) {
trace("the current photo loaded is..." + e.currentTarget.id);
e.currentTarget.id should trace out to photo-0, photo-1, photo-2…and so on.
Which is great, but how do use this one function/handler to treat each photo that loads in differently?
We can do this by using the split String method:
var counter:Array = e.currentTarget.id.split("photo-");
I create a variable named counter, which is an Array. This array is filled by taking each e.currentTarget.id that arrives (photo-0, photo-1, photo-2…) and splitting it by the phrase “photo-” which does this:
for "photo-0": counter[0] = "": counter[1] = "0" for "photo-1": counter[0] = "" counter[1] = "1" for "photo-2": counter[0] = "" counter[1] = "2"
You can also, say, try to split it just by the dash (-):
var counter:Array = e.currentTarget.id.split("-");
Which would then give you something like:
for "photo-0": counter[0] = "photo": counter[1] = "0" for "photo-1": counter[0] = "photo" counter[1] = "1" for "photo-2": counter[0] = "photo" counter[1] = "2"
So by now, you should get that calling up counter[1] will give you 0,1,2,3,4…depending on which item the bulkloader instance just loaded.
Since you used an id to reference each item, you can use that same id to create image instances:
var image : Bitmap = bulkLoader.getBitmap(e.currentTarget.id);
Remember, e.currentTarget.id pulls up the id you created before (photo-0, photo-1, photo-2…etc.) Also, be sure to used currentTarget and not just target (which is generic).
Since, in the example I’ve created, I made all the images the same width, I can then place them side-by-side by writing:
image.x = counter[1]*image.width;
That puts the first image at 0
(0*400),
- the next image at 400
(1*400)
- and the next image at 800
(2*400)
Makes sense? By now, you are probably bored out of your skull (especially if you aren’t familiar with counters and loops – if you are, I’m sure you’re just looking for a link to download the source code by now).
All I can say is, after a while you can write and understand this without thinking about it. I just wanted to go through it step-by-step because knowing how to use and manipulate loops, arrays and vectors is a big part of making the bulkloader class work for you, and making the loading of multiple items easier for you in general.
Once you’ve set up the position of each image, you can then add the item to the container MovieClip:
container.addChild(image);
Note: You might have noticed (and been confused by) the fact that I am using the “image” instance to add all five (5) photos. This is because the function/handler, onPhotoLoaded, is used five (5) times! I reuse that function (which of course, are what functions are all about) over and over for the photos. It’s because e.currentTarget.id is different depending on which photo gets loaded that I can use the same code for different images.
This is a point that gets glossed over a lot so let me explain. The first time the function loads, it’s probably the item with the id, “photo-0″ (assuming that the photos are approximately the same size). So the image that loads is the item with the id “photo-0″.
The next time the photo loads, e.currentTarget.id is probably, “photo-1″. So the variable called “image”, because it was created inside the function, can now be the item with the id, “photo-1″ instead of “photo-0″.