How can I reverse same action?

[learner_7n]

Hi,

 

First I want to animate the following action:

 

var FooterTween:TweenMax = new TweenMax(Content_mc.Introduction.Footer, 5, {y:410});

 

Once it is done... I need to reverse same action. How can I do that with simple code?

 

Thanks.

[Carl]

var FooterTween:TweenMax = new TweenMax(Content_mc.Introduction.Footer, 5, {y:410, repeat:1, yoyo:true});

 

this will play the tween forward once and then in reverse. to repeat indefinitely change the repeat to repeat:-1

 

learn more here:

http://www.greensock.com/as/docs/tween/ ... enMax.html

[Rotty956]

Is there a way to do it without using YoYo? I see the reversed property but haven't seen how it works nor have I been able to get it to work.

[Carl]

reverse() will play a tween backwards.

 

var FooterTween:TweenMax = new TweenMax(Content_mc.Introduction.Footer, 5, {y:410});

someButton.addEventListener(MouseEvent.CLICK, reverseIt)

function reverseIt(e:MouseEvent):void{
FooterTween.reverse();
}

 

i imagine you could also call an onComplete function that uses reverse as well... but that would give you the same things as yoyo, no?

[Rotty956]

Ya for some reason I was having issues reversing the tween. I had something like this.

 

public function TestTween(evt:Event = null)
{
        var sPoint:Array = TweenLineMC.Point1();
		TweenPoint.x = sPoint[0];
		TweenPoint.y = sPoint[1];
		var ePoint:Array = TweenLineMC.Point2();
		var cPoint:Array = TweenLineMC.CurvePoint();
		myTween = new TweenMax(TweenPoint, 3, {bezier:[{x:cPoint[0], y:cPoint[1]}, {x:ePoint[0], y:ePoint[1]}], orientToBezier:true, onUpdateListener:CheckIfStop});

        if(Dir)
		{
			myTween.play();
		}
		else
		{
			myTween.reverse(TweenPoint);	
		}

		Dir = !Dir;
}

 

I had to break the construction code into its own method and just call the second part to play or reverse. I wanted it to reverse from where it was paused at so not always start to end and then back. Also is there a way to add additional points to the tween object? Or do I have to add all the points during construction?

[Carl]

reverse() will play the tween backwards from where ever the tween is currently as demonstrated by my previous example.

I am not so sure what

 

myTween.reverse(TweenPoint);

 

is expected to do.

 

did you try just myTween.reverse() ?

 

 

 

reverse is only equipped to accept a boolean argument of forceResume, as per the documentation:

 

reverse () method

public function reverse(forceResume:Boolean = true):void

Reverses smoothly, adjusting the startTime to avoid any skipping. After being reversed, it will play backwards, exactly opposite from its forward orientation, meaning that, for example, a tween's easing equation will appear reversed as well. If a tween/timeline plays for 2 seconds and gets reversed, it will play for another 2 seconds to return to the beginning.

 

Parameters

forceResume:Boolean (default = true) — If true, it will resume() immediately upon reversing. Otherwise its paused state will remain unchanged.

 

I also see that whether or not the tween plays is dependent on the boolean value of Dir. if the tween has not yet played, I don't think reverse is going to do anything.

It seems the most recent code example is a bit more advanced than the original question, so I apologize if I'm not totally equipped to give a real good answer.

 

 

as for your second question, I believe that once a tween is built, it is built. If you want it to do something different you will have to re-create it.

I could be wrong.

 

In general, if you want to have more control over tweens, look into TimelineLite/Max. There are an abundance of methods for controlling complex animation.

 

Being that it appears that you want to control a tween between various points on a bezier curve, the answer and example that I provided in this discussion: viewtopic.php?f=1&t=3969#p15718

may be of some tangential use.

 

I truly hope this may be of some help and you are able to find a solution that suits your needs.

 

Carl

[GreenSock]

Yep, Carl is right (again).

 

Your code looks like it keeps recreating the tween. Then you immediately reverse() the tween but that's pointless because it hasn't progressed at all yet. Remember, reverse() will make the tween go backwards from wherever it is towards the start. So if you have a 10-second tween and you reverse() it when it hits 6 seconds, it will reverse direction and travel back towards the beginning for 6 seconds. In your case, the tween's virtual playhead was at the very beginning (since you just created the tween) and then you reversed it, telling it to go back towards the start (it's already there!). See the problem?

 

If you want the tween to travel backwards from the end to the beginning, you can simply force it to its end point and then reverse() like:

 

myTween.currentTime = myTween.duration;
myTween.reverse();

 

As far as adding points to the bezier tween on the fly, no, I wouldn't recommend doing that.

[Rotty956]

Cool thanks for all the information ya I got the reverse bit to work and after reading here makes complete sense I was recreating the tween and then try to reverse it. The function was kind of a togglable tween. I just separated the logic one to create and one to play the tween.

 

As for adding new points to the tween I was hoping to loop through an array of points and add them. I don't know how many points there are so cant just hard code it. This can happen at construction actually I prefer at the construction of tween.

 

Thanks for all the information guys I didn't expect this quick of responses!