Bulkloader: A simple Photo example

Here is a simple example of how to use Bulkloader to upload a single image. In the future, I’ll post a more useful example about how to load multiple images, both from inside the Document Class and an XML file.

The steps are pretty simple, but below is a full example to show how it all fits together.

Create a new bulkloader instance.

bulkLoader = new BulkLoader("main-site", BulkLoader.LOG_VERBOSE);.

In the above example, I set the logging to “VERBOSE” – this is helpful when you are debugging. Bulkloader will tell you then if you are trying to load something that doesn’t exist – for example, if you wrote the path to the image incorrectly.

Add the item to the “bulkloader”:

bulkLoader.add(photoURL, { id:results[0], priority:10 } );.

For convenience, I created a string called “photoURL” which is the path to the photo and I also use it as the “id” by removing the “.jpg”. Bulkloader lets you assign an id to each loading item, which is useful when you are loading multiple items.

You can also set the priority of loading. Here I set it to 10, which isn’t really necessary since I am only loading one photo, but if you wanted to have an item load before another, you just give it a higher priority (say, priority:11).

Then you can add event listeners (say, to check for errors, and also to tell flash what to do with the item once you have loaded it).

bulkLoader.get(results[0]).addEventListener(BulkLoader.COMPLETE, onPhotoLoaded, false, 0, true);

The above uses the array “results” to get the “id” of the item:

bulkLoader.get("the-id-you-created-goes-here").addEventListener(BulkLoader.COMPLETE, onPhotoLoaded, false, 0, true);

This is an example of why unique id’s for each loaded item are handy. In many cases you want to handle each loaded item differently (for example, to place each photo you load in a different place on the stage, or to queue up music to get ready to play from a list).

Anyhow, more on the full example below.

Create a .fla file. Name it main.fla.

Then create a .as file in the same folder, name it BulkLoaderPhoto. In the .as file, copy-and-paste the following code:

package
{
/**
* Simple photo example
*/
  import flash.display.MovieClip;
  import flash.events.Event;

  import flash.display.Bitmap;

  // import the bulkloader classes
  import br.com.stimuli.loading.*;

  public class BulkLoaderPhoto extends MovieClip
  {

	private var bulkLoader:BulkLoader;
	private var bulkLoaderName:String = "main";

	private var photoURL:String = "skateboarder.jpg"

    public function BulkLoaderPhoto():void
    {
      if (stage) init();
      else addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(e:Event = null):void
    {
    removeEventListener(Event.ADDED_TO_STAGE, init);

	// start a new bulkloader
    bulkLoader = new BulkLoader("main-site", BulkLoader.LOG_VERBOSE);

	// for the id, just remove .jpg
	var results:Array = photoURL.split(".jpg");
	trace(results[0]); // outputs "skateboarder"
	bulkLoader.add(photoURL, { id:results[0], priority:10 } );
	bulkLoader.get(results[0]).addEventListener(BulkLoader.COMPLETE, onPhotoLoaded, false, 0, true);
	bulkLoader.get(results[0]).addEventListener(BulkLoader.ERROR, onPhotoError, false, 0, true);

	 // start the loading
	bulkLoader.start();
    }

	private function onPhotoError(e:Event) {
		trace("photo load error:" + e.target);
	}

	private function onPhotoLoaded(e:Event) {
		trace("loading...");
		var image : Bitmap = bulkLoader.getBitmap(e.currentTarget.id);

		//Add the image to the holder
		addChild(image);

		// remove the listener so it doesn't suck up memory
		e.target.removeEventListener(BulkLoader.COMPLETE, onPhotoLoaded);
	 }
  }
}

In the same folder with the .fla file and the .as file, download the bulkloader classes and unzip them.

So, in the folder, it should look like

-main.fla

-BulkLoaderPhoto.as

-skateboarder.jpg

--br

---com

----stimuli

-----loading

-------all the other Bulkloader files...