YoYo

[junta]

I am trying to use yoyo and I am having an issue. When you rollover the button the yoyo effect starts but if I rollout and then roll back over before the tween is done the yoyo animation gets screwed up. I assume I need some sort of code that says let the tween finish, but I am not really sure where to start with it. Here is my code below...thanks for the help!

 

 

Wiggle_JFR_Btn.onRollOver = function(){
TweenMax.to(this, .1, {_x:311, yoyo:5});
}

[Carl]

hi junta.

 

in order to see the tween play back and forth you need to:

 

specify how many times the tween should repeat

and in addition set yoyo to true (default is false)

 

Your tween should look like this:

 

TweenMax.to(this, .1, {_x:311, repeat:5, yoyo:true});

 

 

-----

 

however that is not going to prevent things from getting a bit screwy if you rollover your button multiple times in quick succession.

every time you rollover your button a new tween is going start.

 

if you need help with that let us know.

 

Carl

[junta]

Thanks Carl, it did seem like I wasn't doing the YoYo correct. I am still confused about how I stop the tween from acting crazy when rolling in and out though. Can you point me in right direction to correct this? Thanks

[Carl]

please explain the exact behavior you wan your buttons to have on roll over and roll out.

 

should the tween stop on roll out?

should the tween re-start if already in progress on roll over?

 

thx

[junta]

I was thinking that onRollOver the tween would complete even onRollOut. I am not sure what visually would be best when you roll back over. Not sure if it would be better to let the original tween finish or to restart it. So I would be open to either way. Thanks again

[Carl]

here is how you would make sure

 

1:the tween continues even after you roll off

2:the tween will not re-start if it is currently tweening

 

import com.greensock.*;


mc.onRollOver = function()
{
if (TweenMax.isTweening(mc) == false)
{
//the mc isn't tweening so tween it
	TweenMax.to(this,.5,{_x:300, repeat:5, yoyo:true});
}
};

 

just a few pointers. there aren't too many situations where moving the object you rolled over away from the mouse is a great idea, primarily because that will instantly trigger a roll out.

 

with the back and forth movement that you desire it would be very difficult to have the tween seamlessly rewind back to the beginning when you roll out AND if you did there would be a high likelihood that the object would pass under the mouse and just start another roll over tween again. the code given above is probably the safest implementation of a roll over that moves an object back and forth. although its quite possible that when the tween is finished another roll over will trigger and it will keep going and going and going.

[junta]

Thank you for the tips. I tried the code and nothing change for me. When you first rollover it and rollout and roll back over before the tween ends, the sliding motion shortens..basically the image doesn't slide all the way to the x coordinate. If you do it again even after letting the tween finish, the motion gets even shorter. Eventually rolling over the button doesn't trigger any tween at all. Do you have any thoughts on this? Thank you for your time once again!

[Carl]

did you update the mc instance name to reflect the instance name of your button?

 

i wasn't clear about that. you could probably use this as well.

 

import com.greensock.*;


mc.onRollOver = function()
{
  if (TweenMax.isTweening(this) == false)
  {
//the mc isn't tweening so tween it
     TweenMax.to(this,.5,{_x:300, repeat:5, yoyo:true});
  }
};

[junta]

That seemed to work. The first time I tried the code I used the instance name and not "this", would that have effected it at all? Maybe I just didn't type out the code correctly the first time, I am not sure. Thanks for the help