v10 reverse, onReverseComplete, reversed

[blase]

if i have this:

 

var hMaskTween:TweenMax = TweenMax.to(_hMask, _time, {height: value3, ease: _ease, onComplete: doneTransition });

 

and then this:

 

hMaskTween.reverse();

 

how do i use this?

 

onReverseComplete
onReverseCompleteParams

 

and can you give me example where and how could i use this?

 

reversed

 

thanks!

[GreenSock]

Are you asking how to define onReverseComplete and onReverseCompleteParams?

 

var myTween:TweenMax = new TweenMax(mc, 1, {x:100, onReverseComplete:myFunction, onReverseCompleteParams:["param1", 2]});
myTween.currentTime = myTween.duration; //force it to the end
myTween.reverse(); //start playing in reverse
function myFunction(param1:String, param2:Number):void {
   trace("reverse complete. param1: "+param1+", param2: "+param2);
}

 

As far as how you could use the "reversed" parameter, there are several ways:

 

if (myTween.reversed) {
   //do stuff here if the tween is reversed. Use the property to determine if the tween is reversed.
}

 

or

 

myTween.reversed = true; //same as myTween.reverse()

 

Does that answer your question(s)?

[rustproof]

Greensock,

 

I am a little confused. I was looking for how to reverse a timeline actually and found this post. Currently I made a presentation and use a back button that takes the whole timeline in reverse up to the next pause function in the timeline. It works fairly well. All though I was hoping in using your code I wouldn't have rewrite the entire timeline backwards. But currently when I do this I end up resetting the "slides" before and after the nested timelines to make sure they are in the sequence where the user left them. So far when tracing, the nested timelines never fire the onReverseComplete function which would be so much neater.

 

Looking at this post, I noticed this section.

 

myTween.currentTime = myTween.duration; //force it to the end

 

Would that be necessary for forcing a TimeLineMax to the end for proper reversing. Does the timelineMax need to be told or forced to the end before reversing.

[GreenSock]

When you reverse a timeline, it simply makes the virtual playhead go back towards the beginning from wherever it is currently. So if the currentTime is 2 when you reverse(), it will travel back towards the beginning which will take 2 seconds (unless the timeScale isn't 1). If the currentTime is 0, you won't see anything happen because it's already at the beginning. See what I mean? So if you are wanting it to play backwards from the very end, you should set the currentTime to the duration and then reverse().

 

Nested tweens/timelines aren't supposed to fire their onReverseComplete when the parent is going backwards because technically those tweens aren't oriented backwards (reversed isn't true for them). Reversing isn't just a matter of comparing the previous playhead position with the new one (that could cause problems that I won't explain because it'll probably bore you). For onReverseComplete to fire, that timeline/tween itself must have been reversed (its "reversed" property true).

 

Also, just to be clear, onReverseComplete is only available in v11 and later, NOT v10.

[fatBannerPaul]

Hi i've worked up a mad timeline using timeLineMax, i have my onComplete functions all working but have run into trouble when the timeline is reversed.

 

can i use both onComplete and onReverseComplete at the same time?

 

new TweenLite(home6, tweenOnSpeed, {_alpha:100, _x:onPos[6][0], _y:onPos[6][1], _xscale:endScale, _yscale:endScale,ease:zoomUpEase,onComplete:callPause, onCompleteParams:[5,"home",1], onReverseComplete:callPause, onReverseCompleteParams:[5,"home",1]})

 

before the timeline moves, a function is called to determine whether we're going forwards or backwards and in that function i'm doing this:

 

function moveToSection(targetSection){

if(whichWay == "forwards"){

timeline.reversed = false

timeline.tweenFromTo(currentSeciton, targetSection, {ease:Expo.easeOut});

}else{

timeline.reversed = true

timeline.tweenFromTo(currentSeciton, targetSection, {ease:Expo.easeIn});

}

}

 

i know the correct condition is met because i can see the ease is different when the timeline goes in reverse but for what ever reason the onReverseComplete doesn't seem to call the callPause function...

 

any help or ideas would be greatly appreciated!

[GreenSock]

Sure, you can use onComplete and onReverseComplete. If you believe they're not working properly, please post an FLA that demonstrates the issue so we can see it clearly reproduced. No need to post your production files - just a super simple example would be great. And I assume you're using the latest v11, right?

[fatBannerPaul]

thanks for replying. ok here is mocked up version, i've left quite a few of my original functions etc in just in case these are potentially the cause of the problem.

 

http://www.naturalbornbanners.com/clien ... totype.zip

 

but.. the long and short of it is.....If the timeline is moving forward then the onComplete works and you'll see the traces but if the timeline is in reverse it looks like the onReverseComplete doesn't fire. This could of course be my poor code but hopefully not, also i'm a little worried that this prototype doesn't actually work the way my production files do, but hopefully if we can determine if the problem is with onReverseComplete on not then i'll know where to start looking.

 

Also could it perhaps have something to do with the use of addLabel, I'm wondering if that's what gets missed and perhaps causes the onReverseComplete to fail. You'll see a few functions that check and decide which direction the timeline is moving in and if you change the ease type in the moveToSection function in the whichWay == "backwards" condition you'll see that the the timeline does appear to know that it's now in reverse, so would suggest that the functions i have are doing what i need them to do..... and if anyone feels like optimizing my code feel free! I'm not really a developer, I'm a designer who pretends to know how to code

 

Anyway... i've gone quite insane trying to get this work and would very much appreciate any help.

[fatBannerPaul]

ah, interestingly enough.. if you change the easeType in the backwards bit of moveToSection function to ease:Back.easeOut then it all works. This i imagine is because the timeline goes back beyond the label a tiny bit then forward again so the onReverseComplete does get called.. wondering if then, all i need to do is when moving the timeline in reverse just move it back past the frame label by a few milliseconds, or just leave the easeType on Back and problem solved.

[GreenSock]

I think you've waaaaay overcomplicated things. I've attached a reworked FLA that cuts 157 lines of code down to 52 and the logic works much better.

 

For the record, the reason the onReverseComplete stuff wasn't firing was because your tweens weren't reversed. The TimelineMax in which you nested them was reversed, but that doesn't reverse the tweens themselves. If you reverse tweens inside a reversed TimelineMax, they'd appear to go forwards (reversing reversed = forwards). I know, it can get a little confusing. If you need a function to get called at a particular time on a TimelineMax regardless of direction (reversed or not), just use addCallback().

 

Anyway, you shouldn't need to use the onReverseComplete stuff anymore - see the attached file.

[fatBannerPaul]

WOW! you see.... this is why i love the Flash community, not only was this not a problem with greensock which is now solved you've re-coded a project that really is of no commercial or financial benefit to you... and all because you want to help! i thank you a million times! some day i'll know enough to post back and help someone else.

 

but what we have here is some serious coding.. i'm not sure i fully understand what's going on, where is the callBack and what is this

var nextSection:Number = (backwards) ? currentSection - 1 : currentSection + 1;

 

i'm not familiar with the usage of '?'... but before you spend further time explaining it i'll have dig around and see if i can work it out. If i get really stuck i'll post back begging for more help

 

Once again many many thanks for looking into this.... fatbannerpaul thinks you're a genius!

[GreenSock]

Sorry about the confusion - I mentioned you could use addCallback() but I never used it in the code I reworked for you because it wasn't necessary. I should have mentioned that. I just wanted you to know that it's there if you need it.

 

As far as this:

var nextSection:Number = (backwards) ? currentSection - 1 : currentSection + 1;

 

it evaluates the statement in the parenthesis first (in this case "backwards") and if it's true, it will assign the code right after the "?" but if it's false, it'll assign the code right after the ":". It's a shorter way of doing this:

 

var nextSection:Number;
if (backwards == true) {
   nextSection = currentSection - 1;
} else {
   nextSection = currentSection + 1;
}

 

Don't feel bad - the () ? : stuff totally confused me for a long time too.

 

Glad to hear it was helpful. I don't normally rewrite entire chunks of code like that for people (otherwise I'd never get any of my own work done) but it actually seemed a bit easier to just rework your FLA instead of trying to explain all the problems and solutions/techniques.

 

Once you dissect what I did with your file, I think it'll start to get clearer and clearer. A lot of programming just has to do with structuring things in the right way and figuring out how to make it flexible while at the same time as simple as possible. I look back at old projects of mine and wonder what the heck I was thinking - I made things way too complicated too. The more I program, the more I appreciate elegant, simple solutions (not that mine always are).

 

Good luck.