Button shrinks when passed over multiple times.

[hexobolic]

Hi guys,

apologize about the simple question, but I am having an issue with my buttons, everytime I roll over the buttons quickly they keep getting smaller and smaller, almost as if the tween isnt able to complete all that way, here is my code for the buttons.

 

case "mouseOver":
     TweenMax.to(e.currentTarget,.3,{height:e.currentTarget.height +10 ,width:e.currentTarget.width +10});
     
     break;
    case "mouseOut":
     TweenMax.to(e.currentTarget,.3,{height:e.currentTarget.height - 10 ,width:e.currentTarget.width - 10});
     break;

 

now I tried just to go with a scale, however I already have the buttons scaled down via xml and when I revert back to a value of 1 it gets the original size of the graphic. If there is another way to do this, any help would be greatly appreciated.

[Carl]

Yup, each time you create a new mouse out tween you are calculating NEW end values relative to and less than the current height values.

 

If you mouseout multiple times quickly, you are going to just keep subtracting and subtracting from the current width and height

 

One approach would be to give each button its own smallHeight, smallWidth, bigHeight etc variables and set them once at the beginning of your app

 

btn1.smallHeight = btn1.height-10;

 

then your tween code would be

 

  TweenMax.to(e.currentTarget,.3,{height:e.currentTarget.smallHeight,width:e.currentTarget.smallWidth});

 

You can do the same for a bigHeight, bigWidth etc.

 

---

 

or you give each btn a tween 

 

btn1.tween = TweenLite.to(btn1, 0.5, {width:btn1.width - 10})

btn2.tween = TweenLite.to(btn2, 0.5, {width:btn2.width - 10})

 

and then in your mouse event handlers use:

 

e.currentTarget.tween.play() and e.currentTarget.tween.reverse()

 

In both cases the key idea is that if you are going to use relative values, you want to make sure you set your variables or tweens only once when the app initializes... not while tweens are running.