Individual Preloaders for multiple Images

[LeoJK]

Hi

 

I'm attempting to replicate the preloader functionality of the demo for LoaderMax,

 

Basically I'm loading multiple images to form a scrolling gallery, with each individual image having its own preloader.

 

I've got a container with the preloader for each image, awaiting the image to load, this is so I can animate that container around whilst the image is loading and the user can see the progress bar in the mean time.. I'm just struggling to get multiple images loading simultaneously to display progress bars at the same time like in the LoaderMax demo.... any advice?

 

 

 

var categoryName:String = "portrait";
var maxCons:Number = 2;
var  numImages:int = 4;
var clipArray:Array = [];
var imgContainer:MovieClip;
var progressBar:MyProgressBar;

var queue:LoaderMax = new LoaderMax({maxConnections:maxCons,
onProgress:queueProgressHandler,
onComplete:queueCompleteHandler,
onChildProgress:imageProgressHandler,
onChildComplete:imageCompleteHandler });

for (var i:int=0; i<numImages; i++)
{
queue.append(new ImageLoader("gallery/"+categoryName+"/pictures/" + i + ".jpg", {container:containerMC, x:650, y:0}));
imgContainer = new MovieClip();
progressBar = new MyProgressBar();

// Add the preloader to the future image container, then to the array

progressBar.name = "progressBar" + i.toString();
imgContainer.addChild(progressBar);

imgContainer.name = "imgContainer" + i.toString();
clipArray.push(imgContainer);
}


queue.load();

function imageProgressHandler(event:LoaderEvent):void
{
/////// give each loader its own Preloader
///////
////// How to find which loaders are loading to call their respective preloaders?		 <<---------------------
////// And set Priority to that loader when button clicked?

clipArray(/* select Loader */).progressBar.scaleX = event.target.progress;

}

function handleClick(event:MouseEvent):void
{
  // Set loading priority to clip
}

function imageCompleteHandler(event:LoaderEvent):void
{
/// add loader to container, remove the preloader
/// remove the loader
/// etc...
}
/// Other functions for loaderMax listeners

 

 

 

Thanks for your time

[Carl]

Hi and Welcome to the forums.

 

Have you downloaded and investigated the source of the LoaderMax demos that is available here:

http://www.greensock.com/as/LoaderMax_Demo_Source.zip

 

You will find that all the functionality that you request has already been coded. The approach is a little different than yours but it may be helpful to see how the demos were made.

 

It is very possible to continue in the direction you have started as well. To add all the necessary functionality to your existing code would take me a bit of time.

 

Currently there are few holes in your code. Most notably is that there is no connection between the images you are loading and the imgContainers you are creating. You need a way of letting each ImageLoader know which imgContainer to put the loaded image and progressBar in.

 

Perhaps I will have some time later to make a working a demo, but for now I would suggest looking at the demo files and seeing if they give you some ideas.

 

-c

[Carl]

I was able to conform some existing files to use individual progress bars for each thumbnail in a way similar to the way your file is set up.

 

Take a look here:

http://snorkl.tv/dev...ividualLoaders/

 

code:

 

 

import com.greensock.*;
import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.display.*;
import flash.display.MovieClip;


totalProgressBar_mc.bar_mc.scaleX = 0;

var queue:LoaderMax = new LoaderMax({maxConnections:1,
onProgress:queueProgressHandler,
onComplete:queueCompleteHandler,
onChildProgress:imageProgressHandler,
onChildComplete:imageCompleteHandler
});


var images:Array = ["whale","crab","lobster","bird"];

for (var i:int = 0; i < images.length; i++) {
var imgContainer = new MovieClip();
var progressBar = new ProgressBar();
progressBar.scaleX = 0;
progressBar.y = 115;
//note I'm telling the ImageLoader which progressBar to use as a custom var
queue.append(new ImageLoader("images/"+ images[i] + "_small.png", {container:imgContainer, progressBar:progressBar, alpha:0, noCache:true}));
imgContainer.x = i * 201;
imgContainer.addChild(progressBar);
addChild(imgContainer);
}


function queueProgressHandler(event:LoaderEvent):void {
totalProgressBar_mc.bar_mc.scaleX = event.target.progress;
}

function queueCompleteHandler(event:LoaderEvent):void {
trace("all images have loaded");
}

 

Giving each thumbnail its own progress can probably be done 6 different ways, I think the above approach should be pretty straight-forward to follow. The main concept to understand is that each ImageLoader can be given custom vars. I'm choosing to tell each ImageLoader which progressBar to use. Also every time any LoaderEvent fires, you can access the loader that fired the event and thus any data or info associated with that loader. LoaderMax is very flexible.

 

With that in mind you could also tell each thumbnail ImageLoader what the name of the large image is that should load when clicked.

 

attached is a cs5 zip of the fla and images (use your latest greensock files)

individualLoaders.zip

[LeoJK]

Hey Carl,

 

Thanks for replying - I wanted to thank you for your tutorials and clear advice too, very much appreciated.

 

With regards to your code can one effectively add any arbitrary "variable" properties they like when creating the imgLoader eg the "progressBar:progressBar" property in the above code?

 

I looked in the api documentation and couldnt find any progressBar property, so I'm assuming so?

 

 

I took a look at the Demo code and still working it out, thanks!

[Carl]

Glad you have enjoyed the turorials. You're welcome.

 

With regards to your code can one effectively add any arbitrary "variable" properties they like when creating the imgLoader eg the "progressBar:progressBar" property in the above code?

 

Yup, you can add anything you want to the ImageLoader vars (or the vars object of any loader type).

 

The following would be totally valid

 

var crab:ImageLoader = new ImageLoader("crap.png", {container:this, caption:"best crab ever", clickThruURL:"http://www.crabworld.com", photographer:"Simon", weight:"10lbs", favoriteFood:"smaller crabs"});

 

I can totally understand how this functionality may not be obvious. Was always hoping to touch on this in a tutorial. Perhaps the docs can be clarified. Thanks for pointing it out.

 

-c

[LeoJK]

That's great, Thanks again