a problem with sequencing

[AndrewK]

Hello

I've been playing with tweenMax for a bit and wanted to say that its absolutely great!.

 

I'm having this problem though:

 

Here is what im trying to do i have an object in center of a grid made from 50 by 50 pixels squares:

 

| | | |

| |obj| |

| | | |

 

I want the object to go right and then down like this:

 

Step1

 

| | | |

| | |obj|

| | | |

 

Step2

 

| | | |

| | | |

| | |obj|

 

 

Here is the code:

 

 

public function onMouseClick(e:MouseEvent):void
{
objX = obj.x;
objY = obj.y;

animateRight(obj);	

animateDown(obj);
}

 

 

 

	function  animateRight(mc:MovieClip):TimelineLite 
			{
				var tl:TimelineLite = new TimelineLite();
				tl.append( new TweenMax(mc, 1, {x:(objX + 50), y:objY, ease:Linear.easeNone, onComplete:onCompleteTween}) );
				return tl;
			}

 

function  animateDown(mc:MovieClip):TimelineLite 
			{
				var tl:TimelineLite = new TimelineLite();
				tl.append( new TweenMax(mc, 1, {x:objX, y:(objY + 50), ease:Linear.easeNone, onComplete:onCompleteTween) );
				return tl;
			}

function onCompleteTween():void
	{

		objX = obj.x;
		objY = obj.y;

 

but instead of how i thought the object would move it moves like this:

Step1

 

| | | |

| |obj| |

| | | |

 

Step2

 

| | | |

|obj| | |

| | | |

 

It goes a tiny bit down and then left

 

any ideas on what I'm doing wrong????

[Carl]

yes, the issue is that you are creating 2 timelines at the same time that do different things.

both timelines are running at the same time and NOT in succession.

 

since you have var:tl defined inside 2 functions you are creating 2 timelines with the same name but different scopes.

 

what you ultimately want is 1 timeline that contains 2 tweens.

 

hopefully that helps. in the meantime I will code up a basic fix using your structure.

 

Carl

[AndrewK]

Hey Carl thanks for the reply this is what i did based on your suggestion:

 

 

public function onMouseClick(e:MouseEvent):void
{
objX = obj.x;
objY = obj.y;
tl:TimeLineLite = new TimeLineLite();
tl.append( new TweenMax(mc, 1, {x:(objX + 50), y:objY, ease:Linear.easeNone, onComplete:onCompleteTween}) );
tl.append( new TweenMax(mc, 1, {x:objX, y:(objY + 50), ease:Linear.easeNone, onComplete:onCompleteTween}) );
}

 

function onCompleteTween():void
     {

        objX = obj.x;
        objY = obj.y;}

 

It works better but still no how i want it to, the object goes right and then instead of down goes left and down like this:

step1

| | | |

| | |obj|

| | | |

step2

| | | |

| | | |

| |obj| |

[Carl]

here is a sort of simplified version.

note an important change

 

x:"50" is the same as x:obj.x + 50

import com.greensock.*;
import com.greensock.easing.*;





function onMouseClick(e:MouseEvent):void {


var tl:TimelineLite = new TimelineLite();

tl.append(animateRight(obj));

tl.append(animateDown(obj));
tl.play();
}

obj.addEventListener(MouseEvent.CLICK, onMouseClick);


function animateRight(mc:MovieClip):TimelineLite {

//you could just create a TweenLite instance instead of TimeliteLite if you are only doing 1 tween
var rightTl:TimelineLite = new TimelineLite();

//by puttin x:"50" in quotes it means move 50 pixels relative to mc starting position.
rightTl.append( new TweenMax(mc, 1, {x:"50", ease:Linear.easeNone, onComplete:onCompleteTween}) );
return rightTl;
}


function animateDown(mc:MovieClip):TimelineLite {
var downTl:TimelineLite = new TimelineLite();
downTl.append( new TweenMax(mc, 1,  {y:"50", ease:Linear.easeNone, onComplete:onCompleteTween}) );
return downTl;
}


function onCompleteTween() {

}

[Carl]

i hope you see my answer above... i made it right after your most recent response.

 

the reason your recent code is going down AND left is because in your down tween you are passing in the original x of objX.

to keep things simple just tween the properties you need to change. tweenlite/max is very smart and won't tween anything unless you tell it to.

you'll see in my most recent code the right tween only tweens the x and the down tween only tweens the y.

 

welcome to the greensock world. you will have a lot of fun.

 

Carl

[AndrewK]

Thanks for the help!

 

But i noticed that when i used the code you posted abowe when i trace the x and y values of obj it changes more then the given value :

 

when i use animateLeft 3 times

 

the x values goes from 250 to 301 to 352 to 353

the y value goes from 300 to 352.5 to 405 to 407.5

 

whats going on?

[Carl]

i traced out obj.x and obj.y and they are consistently showing intervals of 50 pixels.

 

the only way to break this is if you click WHILE the timeline is playing as that will reset the start values thus impacting the end values such as

 

if the obj is moving from 0 to 50 and click while its at 10... the end value will then be 60.

 

are you double clicking or is something else triggering the timeline to reset/restart?

[AndrewK]

Yes it was my fault i still had

objX = obj.x;

objY = obj.y;

in the onComplete function

 

Now it works flawlessly thank you so much!