timeline.reverse();

[mrEmpty]

Hello.

 

I'm using TimelineMax to create something very simple, items scroll in from the right and move to the left, one item per button press. Have to say, TimelineMax is making this very easy I'm pausing the timeline after each object tweens, and then using timeline.play(); in a function, called from a button, to play the next tween. It's working well. What I'd like to do is to use another movie clip to play the tweens backwards, again one at a time. However, if I call timeline.reverse(); if plays through the entire timeline ignoring the pauses.

 

I wondered if I should be using labels and some logic to work out where I am, then playing the corresponding labels part of the timeline in reverse?

[mrEmpty]

I've been going through Carl's wonderful video tutorials, and I noticed he was doing something very similar to what I want to do. So I'm using the pause and play method to start and stop my timeline. However, when I get to the last tween in the timeline, it restarts straight away without using the pause:

 

tl.addLabel("Panel1", tl.duration);
		tl.append( TweenMax.fromTo( Panel1, 1, {x:1280}, {x:posX, immediateRender:true}));
		tl.append( TweenMax.fromTo( Panel4, 1, {x:posX}, {x:-1280, alpha:0, onComplete:tl.pause, immediateRender:false}), -1);

		//Panel2
		tl.addLabel("Panel2", tl.duration);
		tl.append( TweenMax.fromTo( Panel2, 1, {x:1280}, {x:posX, alpha:1, immediateRender:true}));
		tl.append( TweenMax.fromTo( Panel1, 1, {x:posX}, {x:-1280, alpha:0, onComplete:tl.pause, immediateRender:false}), -1);

		//Panel3
		tl.addLabel("Panel3", tl.duration);
		tl.append( TweenMax.fromTo( Panel3, 1, {x:1280}, {x:posX, alpha:1, immediateRender:true}));
		tl.append( TweenMax.fromTo( Panel2, 1, {x:posX}, {x:-1280, alpha:0, onComplete:tl.pause, immediateRender:false}), -1);

		//Panel4
		tl.addLabel("Panel4", tl.duration);
		tl.append( TweenMax.fromTo( Panel4, 1, {x:1280}, {x:posX, alpha:1, immediateRender:true}));
		tl.append( TweenMax.fromTo( Panel3, 1, {x:posX}, {x:-1280, alpha:0, onComplete:tl.pause, immediateRender:false}), -1);

 

With regards to my initial problem, I had a thought just now so wil try then and report back.

[mrEmpty]

Well this isn't pretty but it works, kinda:

 

private function createTimeLine():void
	{
		tl = new TimelineMax({/*onComplete:playAgain*/});

		//Panel1 - Attractor
		tl.addLabel("Panel1", tl.duration);
		tl.append( TweenMax.fromTo( Panel1, 1, {x:1280}, {x:posX, immediateRender:true}));
		tl.append( TweenMax.fromTo( Panel4, 1, {x:posX}, {x:-1280, onComplete:tl.pause, immediateRender:false}), -1);

		//Panel2
		tl.addLabel("Panel2", tl.duration);
		tl.append( TweenMax.fromTo( Panel2, 1, {x:1280}, {x:posX, immediateRender:true}));
		tl.append( TweenMax.fromTo( Panel1, 1, {x:posX}, {x:-1280, onComplete:tl.pause, immediateRender:false}), -1);

		//Panel3
		tl.addLabel("Panel3", tl.duration);
		tl.append( TweenMax.fromTo( Panel3, 1, {x:1280}, {x:posX, immediateRender:true}));
		tl.append( TweenMax.fromTo( Panel2, 1, {x:posX}, {x:-1280, onComplete:tl.pause, immediateRender:false}), -1);

		//Panel4
		tl.addLabel("Panel4", tl.duration);
		tl.append( TweenMax.fromTo( Panel4, 1, {x:1280}, {x:posX, immediateRender:true}));
		tl.append( TweenMax.fromTo( Panel3, 1, {x:posX}, {x:-1280, onComplete:tl.pause, immediateRender:false}), -1);
	}

	private function goForward(event:MouseEvent):void
	{
		if (currentPanel < 1)
		{
			currentPanel = 4;
		} else if (currentPanel > 4)
		{
			currentPanel = 1;
		}

		tl.gotoAndPlay("Panel" + currentPanel);
		currentPanel = currentPanel + 1;

		trace("Panel" + currentPanel);
		trace("play");
	}

	private function goBackward(event:MouseEvent):void
	{
		if (currentPanel > 4)
		{
			currentPanel = 1;
		} else if (currentPanel < 1)
		{
			currentPanel = 4;
		}

		tl.gotoAndPlay("Panel" + currentPanel);
		currentPanel = currentPanel - 1;

		trace("reverse");
		trace("Panel" + currentPanel);
	}

 

What I need to work out is why I can't get the labelled tweens to play in reverse. And I'd like to work out why Carl's code works and mine doesn't.

[Carl]

hi mr empty,

 

I'm glad you are enjoying my tutorials. I don't know which code you are referring to when you say

 

I'd like to work out why Carl's code works and mine doesn't.

 

I have quite a few tutorials on this sort of thing:

 

http://active.tutsplus.com/series/timel ... ter-guide/

 

but i don't recall doing anything with pausing a timeline when it is reversed.

 

the reason your initial pauses don't work in reverse is because the onComplete callbacks on individual tweens don't fire when they are nested in a timeline that is reversed.

 

and I'm guessing the reason the timeline restarted is because the timeline had an onComplete that fired after the onComplete in the last tween in the timeline.

 

attached is one way to approach forward and reverse with a pause.

 

here is the code:

 

import com.greensock.*;

var tl:TimelineMax = new TimelineMax();

tl.append(TweenLite.to(mc1, 1, {x:400}) );
tl.addCallback(pauseTl, tl.duration);

tl.append(TweenLite.to(mc2, 1, {x:400}) );
tl.addCallback(pauseTl, tl.duration);

tl.append(TweenLite.to(mc3, 1, {x:400}) );
tl.addCallback(pauseTl, tl.duration);

function pauseTl(){
tl.pause();
trace("paused");
}

fwd.addEventListener(MouseEvent.CLICK, fwdHandler);	

rvr.addEventListener(MouseEvent.CLICK, rvrHandler);


function fwdHandler(e:MouseEvent):void{
tl.play();
}

function rvrHandler(e:MouseEvent):void{
//jump over the previous pause callback
tl.currentTime -= .05
//if the previously line is omitted then the first reverse click will trigger a pause, and then the next click will reverse.

tl.reverse();
}	

[mrEmpty]

Thank you, I forgot about this question.

 

Thanks for that, I'll download and try it out now.

 

One thing, if you click reverse on yours, you have to click forward twice to get it working. This is the problem I currently have.