Right angles without bezier points

[leonk 0 Likes (Newbie)]

I am currently tweening an objects x and y coordinates, it needs to move straight in right angles (so no curves or diagonal movement).

 

I have done this so far by using bezier points, adding two beziers for every right angle.

 

However, is there an easier or better way to do this? As I have run into a few problems.

 

Thanks

Leon

[GreenSock 8,117 Likes (Superhero)]

Is there a reason you're trying to avoid using multiple tweens? It seems like you could just do:

 

var timeline:TimelineLite = new TimelineLite();
timeline.append( new TweenLite(mc, 1, {x:100}) );
timeline.append( new TweenLite(mc, 1, {y:100}) );
timeline.append( new TweenLite(mc, 1, {x:0}) );
timeline.append( new TweenLite(mc, 1, {y:0}) );

 

Assuming mc starts at 0,0, this would make it go in a square path and you can easily control the whole sequence because it's in a TimelineLite. If you want to apply an ease across the whole movement, you can make the all the tweens use Linear.easeNone, and then tween the TimelineLite's currentTime property with an ease, like:

 

timeline.pause();
TweenLite.to(timeline, timeline.duration, {currentTime:timeline.duration, ease:Strong.easeOut});

 

Hope that helps.

[leonk 0 Likes (Newbie)]

Thanks, that's brilliant!

 

TimeLineLite, hadn't thought to look at it for some reason, but it's pretty damn cool!

[GreenSock 8,117 Likes (Superhero)]

Yeah, it can really change the way you think about tweening. If you haven't done so already, check out the video at http://blog.greensock.com/timeline-basics/

 

Have fun.