Jump to content
Search Community

TimelineMax "gotoAndStop in insertMultiple"

ilanb test
Moderator Tag

Recommended Posts

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 !

 

:-)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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);
	}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...