Reverse a Bezier Tween

[swiftmend]

Hi,

 

I'm trying to figure out a way of reversing a bezier tween, and have it loop.

 

So I basically have a series of points that form a circle, I need to be able to on the fly, make the Tween reverse to go in the reversed direction, but I want it to continue looping in a circle. I am using repeat: -1 to make it loop, which works fin going forwards, but it doesn't utilise it when a reverse() is called, it just stops when it gets to zero, how can I get around this and make it loop back to the final pint when it hits the first point?

 

Also, is there a way to change the facing of the tween, I have the Bezier to to orientToBezier: true - but it doesn't seem to care about that when reversing, which I guess is functionality (as it's literally a tween reverse, rather then a path reverse).

[Carl]

hi swiftmend.

 

great question. to work with your existing code you could get away with ditching the repeat:-1 and give your tween an onComplete and onReverseComplete callback functions.

 

the onComplete callback would set the currentProgress of the tween to 0 and play it again.

the onReverseComplete callback would set the currentProgress to 1 and play it again.

 

these 2 callbacks could be simplified into 1 function that resets the currentProgress value of the tween based on the tweens reversed property and then tells the tween to resume as I do below.

 

---

 

since you are using circular motion you should check out CirclePath2D. I hacked the CirclePath2D documentation and came up with this demo that toggles the direction of the tween when you click anywhere on the stage (fla and all files attached)

 

import com.greensock.*;
import com.greensock.easing.*
import com.greensock.plugins.*;
import com.greensock.motionPaths.*;
import flash.display.Shape;
import flash.events.MouseEvent;

TweenPlugin.activate([CirclePath2DPlugin]); //only needed once in your swf, and only if you plan to use the CirclePath2D tweening feature for convenience

var myShape:Shape = createSquare(20, 0xffcc00);


//create a circle motion path at coordinates x:150, y:150 with a radius of 100
var circle:CirclePath2D = new CirclePath2D(275, 150, 100);



//show the path visually by adding it to the display list (optional)
this.addChild(circle);

var circleTween:TweenMax = TweenMax.to(myShape, 4, {circlePath2D:{path:circle, startAngle:0, endAngle:360, direction:Direction.COUNTER_CLOCKWISE}, ease:Linear.easeNone,
		onReverseComplete:playAgain, onComplete:playAgain});

function playAgain(){
circleTween.currentProgress = int(circleTween.reversed);
circleTween.resume();

//the 2 lines above are the same as all this

/*if(circleTween.reversed){
circleTween.currentProgress = 1;
}else{
	circleTween.currentProgress = 0;
	}
circleTween.resume();	*/

}





function createSquare(size:Number, color:uint=0xFF0000):Shape {
var s:Shape = new Shape();
s.graphics.beginFill(color, 1);
s.graphics.drawRect(-size / 2, -size / 2, size, size);
s.graphics.endFill();
this.addChild(s);
return s;
}

stage.addEventListener(MouseEvent.CLICK, reverseTween);

function reverseTween(e:MouseEvent):void{
circleTween.reversed = !circleTween.reversed
circleTween.resume();
}

 

Even if you don't use CirclePath2D, you would apply the onComplete and onReverseComplete callbacks in the same exact way.

 

check the attachments and give it a spin (remember to click the stage)

[swiftmend]

Thanks!

 

I wasn't actually using a round circle, more rather a path that ended where it began, so I opted for adding the onComplete and onCompleteReversed stuff to mine and it works well for the issue of looping.

 

 

Only issue is the remaining is getting the bezier itself to face in the reversed direction, is there any other functionality I'm missing that would do this?

[Carl]

getting the bezier itself to face in the reversed direction,

 

sorry, i don't know what this means. can you provide an image or better description?

[swiftmend]

getting the bezier itself to face in the reversed direction,

 

sorry, i don't know what this means. can you provide an image or better description?

 

I; currently using orientToBezier:true - to have my movie clips face the direction of the tween they are moving in. However when you reverse a bezier tween, it doesn't reverse the direction they face in, they continue to face the correct direction, rather then the new reverse direction.

 

That make sense, or should I get a pic together?

[Carl]

thanks. that description makes more sense. and yes when a bezier tween reverses it just plays backwards, it doesn't flip the object that is rotating.

 

I don't have a solution, perhaps you can have an onUpdate function that inverts the scale and or rotation, not sure if that will work.

[Carl]

i just did a quick test, this works fine:

 

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

var bez:TweenMax = TweenMax.to(mc,3,{bezierThrough:[{x:209,y:183},{x:300,y:345},{x:350,y:320}],orientToBezier:true,onComplete:playAgain,onReverseComplete:playAgain,onUpdate:flipperoo});

function playAgain()
{
bez.reversed = ! bez.reversed;
bez.resume();

}

function flipperoo()
{
if (bez.reversed)
{
	mc.rotation -=  180;
}
}

[swiftmend]

Excellent, that works.

 

Only issue remaining is getting the loops rotation to line up perfectly. But I suspect thats due to my positioning - I don't think there is anyway to seamlessly tween from one bezier to another?

[swiftmend]

I've made a very simple demo showing my current issue.

 

I have several entry points onto the main bezier looping pathway, when they join it, they will continue to loop around (until they break off, which is other code, but what I need to get working perfectly now is the looping of the main loop).

 

Any ideas on how to solve the "jump" when it loops?

 

Check out the fla (codes on the timeline): http://db.tt/pQIOpfn

[swiftmend]

I found this place with some info: http://stackoverflow.com/questions/1448 ... ess-bezier

 

suggestion is using UpdateTo(), but I can't get that to do much.

 

Any clues?

 

Cheers