changing depth (setItemIndex) after LoaderMax

[rogas]

Hello, i have been using TweenLite for a while and i thought i should work more on the other tools too. So now i want to load 100 thumbnails on a webpage and allow them to scaleUp on mouse over and scale down on mouseOut. The problem im stuck is that i cant change their depth so i cannot bring to front the image that is currently enlarged. Any suggestions?

 

var x1:int = 0;
var y1:int = 80;
var sizeW:int = 60;
var sizeH:int = 60;
var countI:int = 100;



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

for (i=1; i{
queue.append( new ImageLoader("flashImages/ex/ex (" + i + ").jpg", {name:"photo"+i, estimatedBytes:100000, container:this,  width:sizeW,height:sizeH, scaleMode:"proportionalInside",centerRegistration :true,bgColor:0xFFFFFF}) );
}
//prioritize the loader named "photo1"
LoaderMax.prioritize("photo1");
//same as LoaderMax.getLoader("photo1").prioritize();

//start loading
queue.load();

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

function completeHandler(event:LoaderEvent):void
{

for (i=1; i	{

	x1 +=  sizeW;

	if (x1 > 580)      //here i allign the thumbnails as they load
	{
		x1 = sizeW;
		y1+=sizeH;
	}


	var image:ContentDisplay = LoaderMax.getContent("photo" + i);
	image.addEventListener(MouseEvent.MOUSE_OVER,enlarge);
	image.addEventListener(MouseEvent.MOUSE_OUT,shrink);
	TweenLite.to(image, 1, {alpha:1, y:y1,x:x1});


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

}

function errorHandler(event:LoaderEvent):void
{
trace("error occured with " + event.target + ": " + event.text);
}
function enlarge(e:Event):void
{
//setChildIndex(e.target,numChildren - 1);      <--------------------this brings problem
TweenLite.to(e.currentTarget,0.5,{scaleX:3,scaleY:3});
trace(e.currentTarget+" over");                      <------------------trace shows :  [object ContentDisplay]
}
function shrink(e:Event):void
{
TweenLite.to(e.currentTarget,0.5,{scaleX:1,scaleY:1});
}

 

 

[Carl]

since all your ImageLoaders use container:this for where to place each ContentDisplay object, you should be able to do

 

function enlarge(e:Event):void
{
  addChild(e.currentTarget); //place image at top of Display List
  TweenLite.to(e.currentTarget,0.5,{scaleX:3,scaleY:3});

}

 

BTW great job at using LoaderMax!

that is a really nice and clean approach.

 

did you ever think loading 100 images would be this easy?

[rogas]

Thank you a lot for your time but i just tried adding this

addChild(e.currentTarget);

inside the function you showed me and i get again the same compiler error

 

Symbol 'Symbol 40', Layer 'actions', Frame 1, Line 73 1118: Implicit coercion of a value with static type Object to a possibly unrelated type flash.display:DisplayObject.

 

 

thanks for your kind words. No i could never imagine to be so easy to load 100 images. I was really amazed with greensock from day 1!

[GreenSock]

It sounds like that's just Flash complaining because it doesn't know if currentTarget is really a DisplayObject (because technically the Event class defines currentTarget as a generic Object, so it could be anything). You can simply cast it like:

 

addChild(e.currentTarget as DisplayObject);

[rogas]

It sounds like that's just Flash complaining because it doesn't know if currentTarget is really a DisplayObject (because technically the Event class defines currentTarget as a generic Object, so it could be anything). You can simply cast it like:

 

addChild(e.currentTarget as DisplayObject);

 

 

sweet! it works GreaT!

 

i bypassed many problems that are brought up all the time but now im stuck again....

 

i have a movie clip which comes in front as window when i press a button, then i press another button on the window and another window which loads the thumbs i was talking about.

Problem, when i push a button to slide away the window with the thumbnails, all go well but except for those thumbnails that are scaled and to which addChild was affect. any hint?

 

these thumbnails are like are no longer inside the movieClip. Maybe AddChild is not the best solution :-/

[Carl]

i don't fully understand your description of the problem and what you mean by the various windows.

 

It sounds like the images are getting moved around the display list.

 

I would suggest that you have a container (movie clip or sprite) that will hold all of your loaded images.

 

just call it thumbHolder.

 

so instead of using container:this in your swfLoader, use

 

queue.append( new ImageLoader("flashImages/ex/ex (" + i + ").jpg", {name:"photo"+i, estimatedBytes:100000, container:thumbHolder, width:sizeW,height:sizeH, scaleMode:"proportionalInside",centerRegistration :true,bgColor:0xFFFFFF}) );

 

and then in your roll over event handler:

 

thumbHolder.addChild(e.currentTarget as DisplayObject);;

 

----

 

when you want to move all the thumbs off screen you can just move thumbHolder. just think of it as a bunch of movie clips nested inside of one parent clip.

[rogas]

Wonderful!!!!!!! with your help i got what i wanted!

thank you very much )))

 

i also asked before, is there a way to interact with the loaded thumbnails except the functions used?

let's say i want to have one alpha changed cause of a button. How can i refer to the image?

 

the image (ContentDisplay) is now a child of exDetails.thumbHolder

but when i try exDetails.thumbHolder.image.alpha=0;

or exDetails.thumbHolder.photo1.alpha=0;

sorry but im self taught and these are new to me

thanks for your time

[Carl]

you can access any of your loaded images through LoaderMax's getContent() method.

http://www.greensock.com/as/docs/tween/ ... etContent()

 

 

try:

 

LoaderMax.getContent("photo1").alpha = .5

[rogas]

Wonderful! Thanks a lot! My questions will be more advanced next time.