Fast Scrolling Over Button Problem! [SOLVED]

[Guest schnitzelmrc]

Hey folks,

 

N00b here. I am having a frustrating time with some roll over buttons I've created. Essentially, when you roll over the button it increases in size and when you roll out they shrink back to their original size. This all works perfectly fine until you quickly roll over and roll out of the button multiple time (like twice or three times a second). When I do this the button either multiplies in size or shrinks and inverts itself. On these multiple rollovers the tweens seem to overlap and therefore the button does not end up in its original position. I'm wondering if this have to do with the Overwrite Management but I can't seem to figure it out. Can anyone please help me with the proper coding so that my button increases and returns to the sizes specified, despite multiple rollovers.

 

Here is my code as it stands:

import com.greensock.*;
import com.greensock.easing.*;
import flash.events.MouseEvent;

aboutUsText_mc.addEventListener(MouseEvent.ROLL_OVER, overHandler);
aboutUsText_mc.addEventListener(MouseEvent.ROLL_OUT, outHandler);


function overHandler(event:MouseEvent):void
{
TweenLite.to(event.currentTarget, 0.5, {scaleX:"1.5", scaleY:"1.5", ease:Bounce.easeOut});

}

function outHandler(event:MouseEvent):void
{
TweenLite.to(event.currentTarget, 0.5, {scaleX:"-1.5", scaleY:"-1.5", ease:Bounce.easeOut});
}

 

Cheers people, I appreciate your help!

[GreenSock]

The problem is that you cast your scaleX/scaleY values as Strings (you put quotes around them) which tells TweenLite/Max to interpret them as RELATIVE values instead of absolute (this is a feature, not a bug). So every time you roll over your button it's taking the current scale and adding 1.5 to it, and on roll out, it is subtracting 1.5.

 

Walk through the logic...let's say the scale starts at 1 and you rollover. It starts going towards 2.5 (1 + 1.5). Then when it hits 1.4 (before the tween has finished), you roll off. The new destination scale is 1.4 minus 1.5 which is -0.1! And maybe you roll over again right away when it's at 1.35. That means the new destination scale is 2.85 (1.35 + 1.5). See the problem? It's not a bug/problem with TweenLite/Max - it's just a logic issue with how you've set up your tweens.

 

It'd be much better to use absolute values in your tweens, like:

 

function overHandler(event:MouseEvent):void {
      TweenLite.to(event.currentTarget, 0.5, {scaleX:2.5, scaleY:2.5, ease:Bounce.easeOut});
}

function outHandler(event:MouseEvent):void {
      TweenLite.to(event.currentTarget, 0.5, {scaleX:1, scaleY:1, ease:Bounce.easeOut});
}

[Guest schnitzelmrc]

That you so much. You have no idea how frustrated I was. That makes perfect sense.

The code works perfectly now. Thank you again!!!