Little big issue with concurrent tweens

[cgastrell]

Hi everyone, i'm new to the forum.

 

I'll try to explain my problem in a simple manner.

I'm building a tiny site for a friend who's trying to start his bussines (well... aren't we all? xD). I work mostly with Flash, build the graphics on the UI and then focus on the script. This is the site: http://www.probiomasa.com.ar/index.php .I post it so you can check what my problem is (the only working buttons are the first 2):

 

The sidebar buttons have a OVER and OUT handlers, both made with TweenMax:

 

private function sideBarButtonOver(e:MouseEvent):void
{
var thisButton = e.currentTarget;
if(thisButton.activeLabel) return;//if we are here, it stays like it is
TweenMax.killAll(thisButton);
TweenMax.to(thisButton.backColor,0.25,{x:0, ease:Expo.easeOut,overwrite:0});
}
private function sideBarButtonOut(e:MouseEvent):void
{
var thisButton = e.currentTarget;
if(thisButton.activeLabel) return;//if we are here, it stays like it is
TweenMax.killAll(thisButton);
TweenMax.to(thisButton.backColor,1,{x:-thisButton.backColor.width + 10, ease:Expo.easeOut,overwrite:0});
}

 

The buttons work flawlessly, very responsive and well tweened. Check it on the site.

Then i have the click handler, which hides the previous "page" and tweens in the new one. Again, this works like a charm.

 

private function makeTransitionTo(mc):void
{
var transition = new TimelineLite({onComplete:endTransition,onCompleteParams:[mc],overwrite:0});
if(mc.name == "respaldoStage")
{
	//var entrance = new TimelineLite();
	transition.appendMultiple([
		TweenMax.to(respaldoStage,0.05,{autoAlpha:1}),
		TweenMax.from(respaldoStage.titulo,.5,{alpha:0})
	]);
	transition.append(TweenMax.from(respaldoStage.frameRespaldo.miniFrame,0.5,{y:-500,ease:Expo.easeOut}));
	transition.append(TweenMax.from(respaldoStage.frameRespaldo.miniFrame.respaldoSideBar,0.5,{x:197,ease:Expo.easeOut}));
}else{
	transition.append(TweenMax.to(mc,.05,{autoAlpha:1}));
	transition.append(TweenMax.from(mc.titulo,0.5,{alpha:0}));
	transition.append(TweenMax.from(mc.placa,0.5,{alpha:0}));
}
}

Note on this: respaldoStage has a special tween because of its contents, the problem occurs with any page transition.

 

As soon as clicked, if I let the mouse still, the tweens go smoothly, but if i play around the sideBar buttons, the tweens break up. So far (so you see i've made my home work) i tried changing overwrite settings and, finally, changed

TweenMax.killAll(thisButton);

to

TweenMax.killTweensOf(thisButton);

 

That seems to fix the issue, but then the buttons' over and out handlers are SO very less responsive -> http://www.probiomasa.com.ar/index.html

(sorry, it is a work in progress, it's not optimized and has no loader, bare with me)

 

I have tried some different options with no results. I'd like to keep the responsiveness of the killAll but get rid of the breaking tweens, any ideas?

 

PS: biomasa.zip

[Carl]

first off, very nice looking site and the tweens work very well under the conditions you mentioned.

 

the big problem here is killAll. you are passing in a reference to button such as TweenMax.killAll(button)... but kill all does not need to know what object it should kill the tweens of. It automatically kills the tweens of ALL objects.

 

in the version from the first link, if you roll off a button very slow and dont rollover another button you will see that the active button's green bg tweens back to the left.

if you rolloff quickly and onto another button it doesn't... it just snaps back. this is because when you roll over the next button you kill all tweens. I don't think killAll is the solution you want.

 

I think the repetitive killAll calls that are being made when you rollover buttons during a timelinetransition is what is causing the flickering as well... but I'm not totally sure.

furthermore i think the onComplete:endTransition may be firing often which creates the "flicker" effect. even though you are killing tweens, it seems that whatever is handling the fading in of the next scene is still happening.

 

I haven't looked at your file yet. might do that later.

 

one thing i would do troubleshoot is slow down all the tweens so that you can better see exactly what is happening and also add some traces to your functions to see when they are firing.

[cgastrell]

thanks for the reply!

 

i will start tomorrow with your suggestions to slow the tweens, hadn't thought about that.

 

endTransition only sets a couple of booleans like "isAnimating" or "inTransition", nothing fancy. I'll check it out anyway, and start placing traces.

 

I'm kinda glad with your answer, I was afraid I would get some "didn't you see the endless loop you're firing?" kind of reply that would've been embarrasing.

 

Thanks, i'll keep posting any results.

[Carl]

my apologies on the killAll comments... i was totally focusing on the big sections of code and missed the whole part about how you changed it to killTweensOf.

 

I finally got to looking at your file. One issue really had me pulling at straws. Instead of focussing on the transitions, I wanted to figure out why sometimes when you rolled over a button the green bar would quickly disappear. It seemed as if a a rogue mouse_out was taking place. I had an interesting time tracking it down. instead of writing out a whole bunch of stuff I made a quick screencast.

 

 

please excuse the sleepy rambling. once you understand the rollOver issue/bug, you can jump to 4:57 for the solution

 

this video is unlisted meaning only people who view this thread can see it. I'm hoping the steps I went through can hopefully save you or other people some valuable time.

if for any reason you don't want your file exposed in this fashion I will take it down... no problem.

 

 

 

the final solution to the odd nav behavior was removing the init of OverwriteManager and the overwrite props in the over/out tweens.

I don't know why that is. I've done quite a bit with the GreenSock platform and have never had a reason to overwrite anything different than the default settings so I don't have any input on why the behavior was happening or what the OM has to do with it.

 

again, your project looks really great and is a very good example of how much can be done with the gs platform.

 

Carl

[cgastrell]

Wow! that was some production!

 

Yep, nice review, sorry my code gets a little messy at some points. You're right, those overwrite were messing things up, i guess i don't keep much track of my fix attempts.

Now that's cleared, i'm still checking about the erratic tweens, i guess someone will point out some messy function or i'll get to the bottom of it and post about it.

Thanks for your effort and time, i'll keep you posted.

 

EDIT:

I don't think this deserves another reply...

turn out i did one more test, and all of a sudden the tweens aren't breaking anymore. As I predicted, i was gonna feel embarrassed xD

I'd swear i was initially testing it like that, seems i was wrong.

 

A huge thanks! I really need to be more careful not to break things up while trying to fix some others, i end up messing the code for not paying attention.

All i can say is, at least, i was honest i wrote exactly the order of changes... just didn't tried them by separate...:

i tried changing overwrite settings and, finally, changed

TweenMax.killAll(thisButton);

to

TweenMax.killTweensOf(thisButton);

 

Thanks a lot, i don't thing deleting the post would do any use to no one. I mod/admin thinks it should be deleted it's fine, but i don't care about my file being here, and don't worry about the youtube video either, i don't mind.

Thanks, cheers

[Carl]

very glad you got it fixed. i make a mess all the time. nothing to worry about. that's why there are forums and how we all learn.

i hope the rest of your project goes smoothly.

 

best,

 

Carl

[GreenSock]

Hey guys. I'll jump in and try to clarify why things were happening that way and why it actually makes a lot of sense...

 

[disclaimer]

 

When the overwrite mode is set to 0 (false), it basically tells TweenLite/Max to turn off all overwrite management and offload that responsibility to you as the developer. Be very careful about this. The overwrite management stuff is there for a reason (to avoid situations exactly like this). In fact, it's one of the strengths of the GreenSock system (many other engines don't have robust overwrite management and some have absolutely none). Let's walk through a simple rollover/rollout scenario in your file:

 

On rollover, you start a 0.5-second tween that affects the "x" property. Then on rollout, you start a 1-second tween of the SAME property of the same object. Normally TweenMax would say "hey, there's another tween trying to control that property, so we better kill that to avoid conflicts" but since you set overwrite:0, TweenMax says "okay, cool...whatever...I won't care about the conflict." That first rollover tween keeps going but you don't really notice it because as it renders on each frame, the new (rollout) tween also renders and since the duration is longer, everything looks fine. But let's say you rollout and start that 1-second tween but immediately rollover again which starts the 0.5-second tween. Now you've got a 1-second "out" tween happening AND a 0.5-second "over" tween fighting with each other. The latest one wins while it's rendering but when that 0.5-second "over" tween finishes, the "out" tween still hasn't finished because its duration was 1 second. So that last little portion of the tween renders at the end, making the "x" property jump to the out position!

 

So again, this is all expected behavior and it demonstrates why overwrite:0 is NOT the default mode. As Carl indicated, it's typically best to just leave the default AUTO mode that TweenMax uses because it intelligently analyzes the tweens and shields you from these issues by overwriting conflicts when necessary.

 

Also, I noticed that you had TweenMax.killTweensOf(thisButton) but your tweens were actually affecting the thisButton.backColor object. You'd need to do TweenMax.killTweensOf(thisButton.backColor)

 

Does that clear things up?

[cgastrell]

Does that clear things up?

 

Indeed it does.

 

I feel the need to explain myself on the overwrite-gate issue. I usually don't mess with that since, as you stated, TweenMax handles it very nicely by default. The problem started at this point:

 

TweenMax.killAll(thisButton);

 

I don't know how, I can't explain right now, but as I was typing that line I thought "hey, ok to killTweensOf, but what if I have delayed calls? Oh, here's another method, let's use "killAll"! That will surely do what I want"... shame on me

Truly, I just GUESSED what killAll was gonna do and never checked it, I simply was sure I knew by some kind of jedi power. So, when Tweens got crazy, I never even thought about it, I immediately GUESSED (WRONG again) it was some issue with the overwrite and started testing. Carl put me on the right track with his observations and noticed the irresponsible use of killAll. After he posted I corrected the kills, but let the overwrite's behind.

 

Again, so sorry. I completely overlooked it. It's all working now except the contact form, maybe it is some simple little project, not even paid, but I like to do things the best I can.

As soon as I complete the contact form I'll leave the URL and a zip with all the files here for whom ever want to use it as a skeleton or example.

 

Thanks for all the help