mrEmpty Posted November 24, 2011 Share Posted November 24, 2011 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? Link to comment Share on other sites More sharing options...
mrEmpty Posted November 24, 2011 Author Share Posted November 24, 2011 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. Link to comment Share on other sites More sharing options...
mrEmpty Posted November 24, 2011 Author Share Posted November 24, 2011 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. Link to comment Share on other sites More sharing options...
Carl Posted November 25, 2011 Share Posted November 25, 2011 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(); } Link to comment Share on other sites More sharing options...
mrEmpty Posted November 26, 2011 Author Share Posted November 26, 2011 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now