Image Loader and stage positioning

[myFlashBlog]

Okay, digging into the new loaderMax class. I've setup a loaderMax class that loads 8 thumbnails, with each new loaded thumbnail positioned to the right of the previous thumbnail.

 

My question is, instead of hard coding the exact x coordinate for each new thumbnail, is there a way of determining the first x coordinate then position each following thumbnail to the right (50 pixels) of the thumbnail that loaded just before it? And to stagger the load so that they don't all load right away? Below is my current code and thanks in advance for any assistance

 import com.greensock.*;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.*;

//Or you could put the ImageLoader into a LoaderMax. Create one first...
var queue:LoaderMax = new LoaderMax({name:"mainQueue", onProgress:progressHandler, onComplete:completeHandler, onError:errorHandler, onChildComplete:childCompleteHandler});

//append the ImageLoader and several other loaders
queue.append( new ImageLoader("thumbs/ml/thumb01.jpg", {name:"photo1", container:this, x:650, y:450, scaleMode:"proportionalInside", onComplete:onImageLoad}) );
queue.append( new ImageLoader("thumbs/ml/thumb02.jpg", {name:"photo1", container:this, x:700, y:450, scaleMode:"proportionalInside", onComplete:onImageLoad}) );
queue.append( new ImageLoader("thumbs/ml/thumb03.jpg", {name:"photo1", container:this, x:100, y:100, scaleMode:"proportionalInside", onComplete:onImageLoad}) );
queue.append( new ImageLoader("thumbs/ml/thumb04.jpg", {name:"photo1", container:this, x:150, y:100, scaleMode:"proportionalInside", onComplete:onImageLoad}) );
queue.append( new ImageLoader("thumbs/ml/thumb05.jpg", {name:"photo1", container:this, x:200, y:100, scaleMode:"proportionalInside", onComplete:onImageLoad}) );
queue.append( new ImageLoader("thumbs/ml/thumb06.jpg", {name:"photo1", container:this, x:250, y:100, scaleMode:"proportionalInside", onComplete:onImageLoad}) );
queue.append( new ImageLoader("thumbs/ml/thumb07.jpg", {name:"photo1", container:this, x:300, y:100, scaleMode:"proportionalInside", onComplete:onImageLoad}) );
queue.append( new ImageLoader("thumbs/ml/thumb08.jpg", {name:"photo1", container:this, x:350, y:100, scaleMode:"proportionalInside", onComplete:onImageLoad}) );

//start loading
queue.load();
queue.content.index = 100;


 //when the image loads, fade it in from alpha:0 using TweenLite
function onImageLoad(event:LoaderEvent):void { 
 	TweenMax.from(event.target.content, 0.3, {delay:1, alpha:0, x:"25"});
}

function childCompleteHandler(event:LoaderEvent):void
{
 trace("child loaded");
}

function progressHandler(event:LoaderEvent):void {
    trace("progress: " + queue.progress);
}

function completeHandler(event:LoaderEvent):void {
  trace(event.target + " is complete!");
}

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

[GreenSock]

Sure, you could simplify your code to something like:

 

import com.greensock.*;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.*;

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

for (var i:int = 1; i 	queue.append( new ImageLoader("thumbs/ml/thumb0" + i + ".jpg", {name:"photo" + i, container:this, x:(i * 50) + 50, y:100}) );
}

//start loading
queue.load();

//when the image loads, fade it in from alpha:0 using TweenLite
function onImageLoad(event:LoaderEvent):void {
 TweenMax.from(event.target.content, 0.3, {delay:1, alpha:0, x:"25"});
}

function childCompleteHandler(event:LoaderEvent):void {
trace("child loaded: " + event.target);
}

function progressHandler(event:LoaderEvent):void {
 trace("progress: " + queue.progress);
}

function completeHandler(event:LoaderEvent):void {
  trace(event.target + " is complete!");
}

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

 

Note that if you want things to load in sequentially, just set the maxConnections on the LoaderMax instance to 1. By default, it will attempt to have 2 things loading at a time in order to speed things up.

 

Does that give you what you wanted. There are tons of ways you could accomplish this sort of thing.

[myFlashBlog]

Aww, that is some sweet code!

 

Thanks, Jack.

 

And it makes me painfully aware I've got to get better at for loops.

 

Works perfectly.