Tweening Filters

[Axonn]

Hello ::- ). I got quite a terrible issue on my hands. This was messed up when I used Tweener and it's still messed up in TweenMax.

 

So... I got a button which has a Shadow filter on it. The problem is that after the first tween takes place, the Shadow or button somehow get messed up and you can throw the button in an infinite animation loop by gently moving your mouse to the top-right of the button.

 

You can reproduce it here:

 

http://www.gamaddiction.com/GAS3.html

 

If you move your mouse really slowly to the top - right of the button, the first time, it will work. But the second and next times, it may enter an infinite loop due to the fact that the MOUSE OUT event is dispatched because the FILTER acts as a hit-test area and when I switch the "Neutral State" Sprite with the "Over State" Sprite, something gets messed up.

 

My question would be... how can I tween the Filter as well? How does the Tween affect the Filter? Does it affect the button start/final size? If so, why? Because I always restore the button to its original scale, like this:

 

Mouse Over:

TweenLite.to(_ButtonOverState, TWEENER_BUTTON_ANIM_TIME, { scaleX: TWEENER_BUTTON_SCALE_X, scaleY: TWEENER_BUTTON_SCALE_Y, overwrite: false } );

Mouse Out:

TweenLite.to(_ButtonNeutralState, TWEENER_BUTTON_ANIM_TIME, { scaleX: 1, scaleY: 1, overwrite: false } );

 

Thanks for any clues regarding this issue ::- D.

[GreenSock]

That's a bug in Flash. The only thing you might be able to do is add some conditional logic to your ROLL_OVER/ROLL_OUT handlers that only run the code if more than 1 frame has passed (or a certain amount of time or the object's scale is more than or less than a certain amount, whatever).

 

Also, I would NOT recommend setting overwrite:false on your over/out tweens - you're allowing multiple tweens to conflict with each other that way. Imagine the mouse rolling over/out/over/out quickly - that'll spawn 4 tweens that are all battling for control of the same properties of the same object. Not good. Button rollovers/outs are exactly the type of situation where you'd want overwrite:true. And make sure you're using ROLL_OVER/ROLL_OUT, not MOUSE_OVER/MOUSE_OUT (the latter can fire many times on a single rollover because it gets triggered when the mouse goes over/out any of the children).

[Axonn]

Hey Green One ::- D. Thanks for answering ::- ).

 

Why must there always be Flash Player bugs that destroy my life & productivity? ::- (. I wasted 8 hours trying to fix that thinking that it is my fault somewhere.

 

I have mousechildren = false, so I don't need to use ROLL_OVER / ROLL_OUT. As for overwriting: initially, I did not have that property. If I remove it, it doesn't work right: www.gamaddiction.com/GAS3Broken.swf (compare that to the normal functionality you see in the previous link - and I only have 2 simultaneous tweens max, I think it's not such an issue?).

[GreenSock]

There must be some other problem in your code then. Please strip just that funky pair of buttons out (the ones at the top that go crazy) and put them into a separate FLA and post it here so that we can add trace()'s and troubleshoot. Obviously make sure that the funky behavior is reproduced in the FLA that you post. I'm sure we can get it figured out. And you're POSITIVE that it's not a MOUSE_OVER/MOUSE_OUT vs. ROLL_OVER/ROLL_OUT issue? Just checkin'

[Axonn]

I can't possibly put this in a FLA. I'm working at an UI library and the interdependencies are huge. That button involves 10 different classes, all with inheritance and other things around them ::- ). My UI library isn't closed source but it's not really open source yet either ::- ). I am targeting a type of licensing similar to yours, because I happen to believe that you are correct in your strategy. But my stuff is still very young.

 

Anyway, the problem was indeed in my code. Here it is:

 

On Mouse Out:

        TweenLite.to(_ButtonNeutralState, TWEENER_BUTTON_ANIM_TIME, { scaleX: 1, scaleY: 1 } );
       TweenLite.to(_ButtonNeutralState, TWEENER_BUTTON_ANIM_TIME, { x:0, y:0 } );

 

Well, DUUH, of course it works like crap because I am using 2 Tweens to do the stuff that only 1 Tween should do! Tweener didn't argue about this because it didn't have an Overwrite manager. Don't ask me why I separated them in 2 tweens *grin*. For the life of me, I can't remember why.

 

Anyway, I changed that to:

 

TweenLite.to(_ButtonNeutralState, TWEENER_BUTTON_ANIM_TIME, { scaleX: 1, scaleY: 1, x:0, y:0  } );

 

And all works perfectly.

 

EXCEPT the shadow filter thing which started this entire thread... that is still screwed even if in the new version...

 

Yes, I am sure there is nothing related to ROLL events because I traced the number of times the events occur. They occur only in batches of 1 / button state change, and because the PARENT has mouseChildren = false, there is no risk of getting multiple events from children. ALSO, VERY IMPORTANTLY, I have disabled the shadow and EVERYTHING WORKS GREAT! The stupid shadow messes everything up though............... God dammit......

 

I think I'm going to use a transparent clip for hit testing when a shadow is present. I'll make it 1 pixel longer than the shadow and that's that... *pissed off*.

[GreenSock]

Yeah, the Flash bug is pretty annoying.

 

Oh, and you might want to do OverwriteManager.init() once in your swf so that TweenLite uses the AUTO overwrite mode. That'll get you the same kind of behavior as Tweener (it analyzes each tween of the same object and only overwrites individual overlapping properties) but there's a slight performance penalty (I doubt you'd notice ANY degradation unless you've got thousands of tweens going simultaneously, most of which have overlapping properties). Either way, it's much faster than Tweener (not knocking Tweener, just stating a fact about the speed -

[Axonn]

If I would be rich I'd give you a prize for the most helpful & involved project leader ever ::- D. RespeKt!

 

Right now I'm perfectly happy with how the default TweenLite works, no need for OverwriteManager. I already visited the page with the speed bragging rights ::- D *grin*. RespeKt again ;;- ). And I already read all that page (twice actually) about the OverwriteManager ::- D.

[GreenSock]

If I would be rich I'd give you a prize for the most helpful & involved project leader ever ::- D. RespeKt!

 

I'll remember you said that when you become rich and famous. I'll be expecting that prize. Just don't give me an iPhone or iPad

[Axonn]

*laugh* if you ever see me giving or buying anything from those jerks at Apple, you'll know that I've been brainwashed by aliens (which is the only kind of brainwashing technology which could make me buy their crap).