Bulkloader example: loading multiple Photos

Moving the images around

This is probably the trickiest part. So now, you have a container MovieClip with 5 photos:

The first photo starts at x=0. The next photo is laid out at x=400 (remember, imageSize = 400 so the photos are spaced out in multiples of 400).

All the photos are inside the container MovieClip, so if you want the photos to slide, you just slide the container MovieClip left or right.

So…(this is the tricky part)…if you want to see the next photo, which is at x=400, you have to slide the entire container to the LEFT:

In pseudo-code...when you click on the "photo",
slide the entire container LEFT 400 pixels

Which is real Actionscript code, equals:

if (container.x > -400) {
container.x = -400
}

However, if this is all you wrote, the container would just JUMP across the page to the next photo, which is what you don’t want at all.

So then, you have to use a combination of the onEnterFrame Event (which fires every time the movie enters a new frame, which is all the time!) and the MouseEvent.

Checking if the user clicked the image

private function onClick (e:MouseEvent) {
click = true;
trace("target was" + e.target)
}

Earlier on I created a variable that stores whether the user has clicked or not:

private var click:Boolean = false;

The onEnterFrame event (which, remember…runs ALL THE TIME)…keeps checking the click variable:

private function moveIt (e:Event) {
		if (click == true) {

It then checks to see if the container has reached it's destination:

if (container.x > -(clickCounter*imageSize)) {

And then step-by-step only moves itself 10 pixels every frame until it reaches it's target (say, 2x400, which is two clicks times the image width):

container.x -= 10;

Keep in mind, moving the container to the left shows more of the container on the right.

This is a fairly basic example that omits a lot code for illustration purposes. For example, you would probably like to add some padding between the photos:

var padding:Number = 10;
image.x = (counter[1]*image.width)+padding;

And also write code for next and back buttons...that's for another tutorial.

Here is the complete code:

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

  import flash.display.Bitmap;

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

  public class BulkLoaderMultiplePhoto extends MovieClip
  {

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

	// vectors are like arrays, but more strict
	// in this example everything the the vector "array"
	// must be a string
	private var photos:Vector. = new Vector.;

	private var moveThis:Bitmap;

	private var container:MovieClip;

	private var click:Boolean = false;
	private var clickCounter:int = 1;

	// make every photo the same size for the example

	private var imageSize:Number = 400;

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

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

	// photos thanks to the Wiki Commons
	photos[0] = "photos/400px-2008-08-22_Skateboarder_floating_in_the_air.jpg";
	photos[1] = "photos/800px-Canal_St._Skateboarders_2.jpg";
	photos[2] = "photos/Eiseisugimoto.jpg";
	photos[3] = "photos/Retrato-jura1.jpg";
	photos[4] = "photos/Skateboarder_grinding_public_bench_2005.jpg";

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

    for (var i:int = 0; i < photos.length; i++) { 	// use a loop to "add" each photo to the loader with a unique id 	bulkLoader.add(photos[i], { id:"photo-"+i, priority:10 - i} ); 	bulkLoader.get("photo-"+i).addEventListener(BulkLoader.COMPLETE, onPhotoLoaded, false, 0, true); 	bulkLoader.get("photo-"+i).addEventListener(BulkLoader.ERROR, onPhotoError, false, 0, true); 	 	addEventListener(Event.ENTER_FRAME, moveIt); 	 } 	 // start the loading 	bulkLoader.start();     } 	private function onPhotoError(e:Event) { 		trace("photo load error:" + e.target); 	} 	 	private function onPhotoLoaded(e:Event) { 		trace("the current photo loaded is..." + e.currentTarget.id); 		var counter:Array = e.currentTarget.id.split("photo-"); 		trace("counter[1] is " + counter[1]); // outputs just the "count" of the photo 		// bulkloader loads each image by the id 		var image : Bitmap = bulkLoader.getBitmap(e.currentTarget.id); 		image.width = imageSize; 		image.height = imageSize; 		image.x = counter[1]*image.width; 		//Add the image to the holder 		container.addChild(image); 		 		// do something when you click on the images 		container.addEventListener(MouseEvent.CLICK, onClick); 		 		// add the hand cursor so people know it's clickable 		container.buttonMode = true 		 		// remove the listener for the bulkloader so it doesn't suck up memory 		e.target.removeEventListener(BulkLoader.COMPLETE, onPhotoLoaded); 	 }   	private function onClick (e:MouseEvent) { 		click = true; 		trace("target was" + e.target) 	} 	 	private function moveIt (e:Event) { 		if (click == true) { 		 if (container.x > -(clickCounter*imageSize)) {
			container.x -= 10;
			}
		 if (container.x == -(clickCounter*imageSize)) {
			click = false;
			clickCounter++;
			}
		}
    	}

	}
 }