offset tween path

[dsgsgsg 0 Likes (Newbie)]

I want to tween various movieclips over the same path. My problem is I want them to be offset so that they follow the same path but still are at a distance from each other. I searched the forums but couldn't find any offset path property. Anything you can suggest?

[Carl 11,326 Likes (Superhero)]

Hi and Welcome to the GreenSock forums,

 

I'm no so sure what you mean by a "path". Are you referring to a path created by one of our MotionPath tools? http://api.greensock.com/as/com/greensock/motionPaths/MotionPath.html

 

If so having multiple items follow the same path with a fixed distance between them is fairly straightforward using the distribute() method.

 

*note all the MotionPath tools require a Club GreenSock Membership

 

Is your path created by using the BezierPlugin? If so you could just do a staggerTo() or staggerFrom() tween which would allow multiple objects to use the same Bezier data but start animating at different times. Let me know if you need an example of this.

 

 

Or is your path constructed by a series of tweens inside a TimelineLite/Max()?

 

If you could provide some code that illustrates what type of path you are using, I'm sure we can help you find a solution.

[dsgsgsg 0 Likes (Newbie)]

Thanks for the info. The code I am using is:

 

 

var path01:Array= new Array({x:200, y:350}, {x:100, y:200});
 myTween=TweenMax.to(_shooterEnemy, 10, {bezier:path01}); 
 

 

I want 5 other mc's to follow the same path but at a distance from each other. you can see an example with the pic I attached on the first post. Any ideas?

[Carl 11,326 Likes (Superhero)]

Ok, I somehow missed the image earlier.

 

No, there isn't anything built into the API that would allow you to have multiple objects follow the path with that type of offset. 

 

You could use an onUpdate callback to position the other circles relative to _shooter enemy.

 

 

 

myTween=TweenMax.to(_shooterEnemy, 10, {bezier:path01, onUpdate:bezierUpdate}); 

function bezierUpdate():void {

shooter1.y = _shooterEnemy.y +=50;
shooter2.y = _shooterEnemy.y +=100;
shooter3.y = _shooterEnemy.y +=150;
//etc

}
 

or you could just place the other enemies inside the object that is being tweened at the appropriate y offset. 

 

 

 

shooter1.y = 50;
shooter2.y = 100;
shooter3.y = 150;

_shooterEnemy.addChild(shooter1);
_shooterEnemy.addChild(shooter2);
_shooterEnemy.addChild(shooter3);
 

you would get the same effect with better performance. 

[dsgsgsg 0 Likes (Newbie)]

Thanks for the help. This method worked seamlessly although an offsetPath function would be appreciated.