TimelineMax "gotoAndStop in insertMultiple"

[ilanb 0 Likes (Newbie)]

Hello,

 

I have ten movieClip on stage (img_1, img_2...) each have 10 key (different color).

 

I try to change color for each movieClip when rotation of movieClip is ended

 

here is my test: actually color of movieClip change when timeline is completed not when rotation of movieClip is ended.

 

function onClickItem(e:MouseEvent):void
{
	num = int(e.target.name.split("img_")[1]);

	var timeline:TimelineMax = new TimelineMax({onComplete:function()
						{
							 var tmp:MovieClip;
							 for (var i:int = 1; i <= 10; i++)
								{	
									tmp = getChildByName("img_" + i) as MovieClip;
									tmp.gotoAndStop(num);
								}
						}});
	var clicked_img:MovieClip;
	for (var i:int = 1; i <= 10; i++)
	{	
		clicked_img = getChildByName("img_" + i) as MovieClip;
		var listArray:Array = new Array();
		listArray.push(img_1, img_2, img_3, img_4, img_5, img_6, img_7, img_8, img_9, img_10);
		timeline.insertMultiple( TweenMax.allFrom(listArray, .5, {transformAroundCenter:{rotationY:clicked_img.rotationY - 180}, ease:Cubic.easeOut}, .06), .5);

	}
}

 

Thx for point me to the right direction !

 

[Carl 10,825 Likes (Superhero)]

i don't understand why you are doing this loop:

 

  for (var i:int = 1; i       {   
        clicked_img = getChildByName("img_" + i) as MovieClip;
        var listArray:Array = new Array();
        listArray.push(img_1, img_2, img_3, img_4, img_5, img_6, img_7, img_8, img_9, img_10);
        timeline.insertMultiple( TweenMax.allFrom(listArray, .5, {transformAroundCenter:{rotationY:clicked_img.rotationY - 180}, ease:Cubic.easeOut}, .06), .5);

 

that means you are creating an array 10 times and tweening each item in the array 10 times which means you are generating 100 tweens.

 

i think you want something more like:

 

//create the array once
var listArray:Array = new Array();
listArray.push(img_1, img_2, img_3, img_4, img_5, img_6, img_7, img_8, img_9, img_10);

for (var i:int = 0; i       {   

//rotate each image and then change the color
        clicked_img = listArray[i]

        timeline.insertMultiple( [
TweenMax.from(clicked_img, .5, {transformAroundCenter:{rotationY:clicked_img.rotationY - 180}, ease:Cubic.easeOut}),
TweenMax.to(clicked_img, 0, {frame:i, immediateRender:false})], 0, "sequence",  0);

}

 

you may need to change the timeOrLabel and stagger values of insertMultiple for the effect you want. Both are set to 0 in the code above.

 

also you probably want to remove the loop that tells each clip to gotoAndStop(num) as that value is the same as the value being generated in the loop above.

[ilanb 0 Likes (Newbie)]

Hi Carl,

 

Thanks for reply, I have tested your solution, but don't make what I need, you can look my attached file to see what i would like. All movieClip turnaround and all movieClip colors changes when tween is finished.

 

But I need change color when a rotation movieClip is finished. Sorry for my poor english

 

File is more explicit

 

Ilan

[Carl 10,825 Likes (Superhero)]

i couldn't open your fla, but I looked at your swf.

 

is the swf doing what you want?

 

it appears to be working as all movie clips are rotating and then changing color.

 

i am having difficulty understanding what you need in addition to what that swf is doing.

 

you could insert one TweenMax.allTo() that rotates every clip in your array. when that sequence finishes you can add one TweenMax.allTo that tells each clip to go to the proper frame.

 

it appears that is what is happening.

[ilanb 0 Likes (Newbie)]

Hi Carl,

 

i am having difficulty understanding what you need in addition to what that swf is doing.

 

I would like to have color change for one movieClip when rotation of this movieClip is finished, actually color are change when rotation of all movieClip is ended (see onComplete function in code)

 

Sorry for poor english...

 

thx

 

num = int(e.target.name.split("img_")[1]);

	var timeline:TimelineMax = new TimelineMax({onComplete:function()
						{
							 var tmp:MovieClip;
							 for (var i:int = 1; i <= 10; i++)
								{	
									tmp = getChildByName("img_" + i) as MovieClip;
									tmp.gotoAndStop(num);
								}
						}});
	var clicked_img:MovieClip;
	var listArray:Array = new Array();
		listArray.push(img_1, img_2, img_3, img_4, img_5, img_6, img_7, img_8, img_9, img_10);
	for (var i:int = 1; i <= 10; i++)
	{	
		clicked_img = getChildByName("img_" + i) as MovieClip;
		timeline.insertMultiple( TweenMax.allFrom(listArray, .5, {rotationY:clicked_img.rotationY - 180, ease:Cubic.easeOut}, .06), .5);
	}

[Carl 10,825 Likes (Superhero)]

i made an example where

 

box1 will rotate then change color

then box 2 will rotate and then change color

and then box 3 will rotate and then change color.

 

function createTimeline(e:MouseEvent = null):void {

trace("createTimeline");

//do not allow a new timeline to be created if the current one is still playing
if (tl.currentTime == tl.duration) {

	// increase currentColor which will be used as a frame number;
	// you can change the color/frame value however you chose.
	if (currentColor 			currentColor++;
	}
	else {
		currentColor = 1;
	}


	tl.clear();

	tl.insertMultiple(TweenMax.allTo(boxes, .5, {rotation:360}), 0, "sequence");
	tl.insertMultiple(TweenMax.allTo(boxes, 0, {frame:currentColor, immediateRender:false}), .5, "sequence", .5);

	tl.restart();

}
}

 

you could also use a for loop to loop through the array and append tweens for each box that:

-rotates the box

-changes the frame of the box

 

please see attached file.

[ilanb 0 Likes (Newbie)]

Thx Carl ! very useful example !

 

try this and adapt for my need !