LoaderMax is VG but ...

[scottiescotsman 0 Likes (Newbie)]

hi there

I am new to GreenSock and have made a gallery with the LoaderMax & Queue's. well the gallery works great but I cant figure out

this ..... [10 pics loading inside a container] how do I put a loader bar under each picture that is loading rather than using the same loader bar for all the pictures loaded....here is my as3 code so far ...

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

var i:Number = 1;
var t:Number;
var dir:String = "";
var cont:MovieClip;
var queue:LoaderMax = new LoaderMax({maxConnections:1,
onChildProgress:imageProgressHandler,
onChildComplete:imageCompleteHanlder,
onProgress:queueProgressHandler,
onComplete:queueCompleteHandler,
onError:errorHandler
});

dir = "images/"+i;
pageNum.text = ""+i;
cont = cont_A;
displayQueue();

nextBtn.addEventListener(MouseEvent.CLICK, nextPic);
prevBtn.addEventListener(MouseEvent.CLICK, prevPic);

//////////////////////////////////////////////////////////////////////////////
// DISPLAY QUEUE
//////////////////////////////////////////////////////////////////////////////

function displayQueue():void
{
queue.append(new ImageLoader(dir+"/001.jpg", {container:cont, alpha:0, x:17, y:15, estimatedBytes:90000}));
queue.append(new ImageLoader(dir+"/002.jpg", {container:cont, alpha:0, x:166, y:15, estimatedBytes:90000}));
queue.append(new ImageLoader(dir+"/003.jpg", {container:cont, alpha:0, x:315, y:15, estimatedBytes:90000}));
queue.append(new ImageLoader(dir+"/004.jpg", {container:cont, alpha:0, x:464, y:15, estimatedBytes:90000}));
queue.append(new ImageLoader(dir+"/005.jpg", {container:cont, alpha:0, x:613, y:15, estimatedBytes:90000}));
queue.append(new ImageLoader(dir+"/006.jpg", {container:cont, alpha:0, x:17, y:180, estimatedBytes:90000}));
queue.append(new ImageLoader(dir+"/007.jpg", {container:cont, alpha:0, x:166, y:180, estimatedBytes:90000}));
queue.append(new ImageLoader(dir+"/008.jpg", {container:cont, alpha:0, x:315, y:180, estimatedBytes:90000}));
queue.append(new ImageLoader(dir+"/009.jpg", {container:cont, alpha:0, x:464, y:180, estimatedBytes:90000}));
queue.append(new ImageLoader(dir+"/010.jpg", {container:cont, alpha:0, x:613, y:180, estimatedBytes:90000}));
queue.load();
}

//////////////////////////////////////////////////////////////////////////////
// QUEUE PROGRESS HANDLER
//////////////////////////////////////////////////////////////////////////////

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

//////////////////////////////////////////////////////////////////////////////
// QUEUE COMPLETE HANDLER
//////////////////////////////////////////////////////////////////////////////

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

//////////////////////////////////////////////////////////////////////////////
// ERROR HANDLER
//////////////////////////////////////////////////////////////////////////////

function errorHandler(event:LoaderEvent):void
{
trace("error occured with " + event.target + ": " + event.text);
}

//////////////////////////////////////////////////////////////////////////////
// IMAGE COMPLETE HANDLER
//////////////////////////////////////////////////////////////////////////////

function imageCompleteHanlder(event:LoaderEvent):void
{
var loadedImage:ContentDisplay = event.target.content;
loadedImage.alpha = 0;
TweenLite.to(loadedImage, .5, {alpha:1});
}

//////////////////////////////////////////////////////////////////////////////
// IMAGE PROGRESS HANDLER
//////////////////////////////////////////////////////////////////////////////

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

//////////////////////////////////////////////////////////////////////////////
// CHECK [i]
//////////////////////////////////////////////////////////////////////////////

function check_i():void
{
if (i>10){i=1};
if (i<1){i=10};
}

//////////////////////////////////////////////////////////////////////////////
// NEXT PICTURE
//////////////////////////////////////////////////////////////////////////////

function nextPic(event:MouseEvent):void
{
check_i();
cont_A.x = 0;
cont_A.y = 0;
cont_A.width = 760;
TweenMax.to(cont_A, 1, {x:0, y:0, width:0});
cont_B.x = 760;
cont_B.y = 0;
cont_B.width = 0;
i++
check_i();
pageNum.text = ""+i;
TweenMax.to(cont_B, 1, {x:0, y:0, width:760});
dir = "images/"+i;
cont = cont_B;
displayQueue();
}

//////////////////////////////////////////////////////////////////////////////
// PREVIOUS PICTURE
//////////////////////////////////////////////////////////////////////////////

function prevPic(event:MouseEvent):void
{
check_i();
cont_A.x = 0;
cont_A.y = 0;
cont_A.width = 760;
TweenMax.to(cont_A, 1, {x:760, y:0, width:0});
cont_B.x = 0;
cont_B.y = 0;
cont_B.width = 0;
i--
check_i();
pageNum.text = ""+i;
TweenMax.to(cont_B, 1, {x:0, y:0, width:760});
dir = "images/"+i;
cont = cont_B;
displayQueue();
}

//////////////////////////////////////////////////////////////////////////////
// WAIT
//////////////////////////////////////////////////////////////////////////////

function wait(t){
stop();
var timer:Timer=new Timer(t,1);
timer.addEventListener(TimerEvent.TIMER,waitdone);
timer.start();
}

//////////////////////////////////////////////////////////////////////////////
// WAIT DONE
//////////////////////////////////////////////////////////////////////////////

function waitdone(e:TimerEvent){
e.currentTarget.removeEventListener(TimerEvent.TIMER,waitdone);
play();
}

//////////////////////////////////////////////////////////////////////////////

would I need 10 individual progress bars ?

 

hope someone can help

 

thanks

Steven

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums.

 

If you want 1 progress bar to show totalProgress and 1 other to show the progress of the currently loading image, then you only need 2 progress bars as shown in this tutorial and example: http://www.snorkl.tv/2011/08/loading-images-with-loadermax-load-and-track-the-progress-of-multiple-images/

 

If you want to show 10 images loading at the same time with their own unique progress, then yes, you will need 10 progress bars.

 

What is nice is that you already have your onChildProgress event hooked up to an event listener (good job)

Your imageProgress handler is also being passed an event. That event has lots of juicy info attached to it. For instance event.target is the loader that is being loaded. You can use this info from the event to figure out which progress bar to update.

 

I modified the example from the tutorial above so that there are 4 progress bars on the stage with the instance names crab, lobster, whale and bird.

I gave each ImageLoader these respective names:

 

notice the name property in each ImageLoader

queue.append(new ImageLoader("images/whale.png", {container:this, name:"whale", alpha:0, x:0, y:0,  estimatedBytes:60000}));
queue.append(new ImageLoader("images/crab.png", {container:this, name:"crab", alpha:0, x:320, y:0,estimatedBytes:90000}));
queue.append(new ImageLoader("images/lobster.png", {container:this, name:"lobster", alpha:0, x:0, y:200,  estimatedBytes:90000}));
queue.append(new ImageLoader("images/bird.png", {container:this, name:"bird", alpha:0, x:320, y:200, estimatedBytes:60000}));

and then in my imageProgres handler I use the name of the target of the event to find the right progress bar
 

function imageProgressHandler(event:LoaderEvent):void
{
//use the name of the ImageLoaer to find the progress bar on stage
this[event.target.name].scaleX = event.target.progress;
}

I have attached some cs6 files to better illustrate how this works

 

 

 

uniqueProgress_CS6.zip