Fade in after loading

[9thGhost]

hi all i love loaderMax

it's working great.

 

i'm sure this an easy fix... i'm sequential loading several images into several containers on my stage. I'm loading them all through the cue. i want each image to fade in after it's loaded (one at a time).

right now they pop in or fade in all at once.

 

function loadSection()

{

var queue:LoaderMax = new LoaderMax({name:"mainQueue", onProgress:progressHandler, onComplete:completeHandler, onError:errorHandler, maxConnections:1});

queue.prepend( new ImageLoader("characters/characters_01.jpg", {name:"Royce", estimatedBytes:77894, container:btn0.royce , alpha:0}) );

queue.append( new ImageLoader("characters/characters_02.jpg", {name:"Hektor", estimatedBytes:114070, container:btn1.hektor , alpha:0}) );

queue.append( new ImageLoader("characters/characters_03.jpg", {name:"Dog", estimatedBytes:40581 , container:btn5.dog , alpha:0}) );

queue.append( new ImageLoader("characters/characters_04.jpg", {name:"Clint", estimatedBytes:48966 , container:btn2.clint , alpha:0}) );

queue.append( new ImageLoader("characters/characters_05.jpg", {name:"Rogers", estimatedBytes:57136 , container:btn3.rogers , alpha:0}) );

queue.append( new ImageLoader("characters/characters_13.jpg", {name:"Dreg", estimatedBytes:82260 , container:btn4.dreg , alpha:0}) );

queue.append( new ImageLoader("characters/characters_12.jpg", {name:"Valaria", estimatedBytes:111251 , container:btn6.valaria , alpha:0}) );

 

LoaderMax.prioritize("Royce");

 

queue.load();

TweenLite.to(progress_mc, 1, {alpha:0});

 

 

function progressHandler(event:LoaderEvent):void

{

 

var ProgressWidth:Number = Math.round( 1 * (progress_mc.progressBar_mc.width));

progress_mc.progressBar_mc.width = event.target.progress * 100;

 

trace(ProgressWidth);

preloader.gotoAndStop(ProgressWidth);

 

}

 

 

function completeHandler(event:LoaderEvent):void

{

var image:ContentDisplay = LoaderMax.getContent("mainQueue");

TweenLite.to(image, 1.5, {alpha:1});

 

/// i tried doing this for each item but it makes them all fade in at once.

how do i target "royce" or "hektor"

 

trace(event.target.name + " is complete!");

}

 

function errorHandler(event:LoaderEvent):void

{

trace("error occured with " + event.target + ": " + event.text);

}

}

 

loadSection()

[Carl]

its late so I don't have time to test this but give your queue an onChildComplete handler like:

 

var queue:LoaderMax = new LoaderMax({name:"mainQueue", onProgress:progressHandler, onComplete:completeHandler, onError:errorHandler, maxConnections:1, onChildComplete:imageLoaded});

 

and then:

 

function imageLoaded(e:LoaderEvent):void{
TweenLite.to(e.target.content, 1, {alpha:1});
}

 

each image will fade in as soon as it loads. since your maxConnections is 1 they should all fade in in sequence.

 

///////

if you want to wait til they all are loaded, you can tweak your completeHandler().

 

to get an array of all the loaders:

 

var allMyLoaders = queue.getChildren();

 

then you could loop the through the array of loaders and do a TweenLite on each loader and increment the delay

 

the first option should work fine for you.

[9thGhost]

thanks for getting back to me

i need to look into the onChildComplete

 

i got it to work by adding an onComplete function like so

 

queue.prepend( new ImageLoader("characters/characters_01.jpg", {name:"Royce", estimatedBytes:77894, container:btn0.royce , alpha:0, onComplete:fadeIn}) );

 

function fadeIn (event:Event):void

{

var imageFade:ContentDisplay = LoaderMax.getContent(event.target.name);

TweenLite.to(imageFade, 1.5, {alpha:1});

}

 

my main issue was targeting the items in the loader Queue.

calling the function from the item was the best quick fix i could think of.

 

thanks for your help