Tweening with actionscript 3

Question

I have been working on this one a while. I have an object in this case a movieClip called "mcBall". I set up two buttons "btnLeft" and "btnRight"with a tween so that the mcBall will ease between the two points smoothly. Works fine, but where it gets glitchy is the the two buttons are still active an if the user clicks on either button of course the ball goes back to the starting point like it's supposed to. My question is this ... What is the best way to have the buttons be de-activated while the "mcBall" object is moving. Would it be best to use a removeEventListener for the buttons and then have it added again. Would it be better to use an if statement like "If (mcBall.x = >=81 || <=469) removeEventListener"? Maybe use the tweenEvent.MOTION_FINISH to set up the eventListener again.

Any help would be greatly appreciated. Thanks

using Flash cs3

In this code I managed to turn off one button so that while the ball is moving it remains inactive but the other is still active. I'm not sure of the placement of the removeEventListener.

import fl.transitions.Tween;
import fl.transitions.easing.*;

function moveBallRight(evt:MouseEvent):void {
    var moveBall:Tween=new Tween(mcBall,"x",Regular.easeOut,80,470,4,true);
    btnRight.removeEventListener(MouseEvent.CLICK,moveBallRight);
    btnLeft.addEventListener(MouseEvent.CLICK,moveBallLeft);

}
btnRight.addEventListener(MouseEvent.CLICK,moveBallRight);


function moveBallLeft(evt:MouseEvent) {
    var moveBall:Tween=new Tween(mcBall,"x",Regular.easeOut,470,80,4,true);
    btnRight.addEventListener(MouseEvent.CLICK,moveBallRight);
    btnLeft.removeEventListener(MouseEvent.CLICK,moveBallLeft);


}

btnLeft.addEventListener(MouseEvent.CLICK,moveBallLeft);

Answer 1

I would recommend not using the native Tween class from fl.transitions.Tween. Its not very good. The industry standard is TweenMax from greensock.

Using TweenMax it is trivially easy to respond to end-of-tween events. You simply add an onComplete:myhandlerfunction to your tween. An example from your above code would look like this: Instead of

 var moveBall:Tween=new Tween(mcBall,"x",Regular.easeOut,80,470,4,true);

You would have:

TweenMax.to(mcBall, 4, {x:470, ease:Expo.easeOut, onComplete:onBallMovedLeftComplete};

Hope that helps. And I hope you never have to use those native tween classes again. They are the pits.

Answer 2

Personally, I would recommend using the Actuate tween library. Unlike TweenLite/Max, it is fully opensource, and has most of the features, and is faster, with no pro/pay version.

I also like Actuate's interface much better than TweenLite. It is very similar so easy for people to start using it, but I like how tween modifiers are added in a more explicit way.

Simple example:

Actuate.tween(mySprite, 1, { alpha:1 });

Then is you want to specify an easing equation, just chain it on the end:

Actuate.tween(mySprite, 1, { alpha:1 }).ease(Quad.easeOut);

Want a delay as well? Add that to the chain:

Actuate.tween(mySprite, 1, { alpha:1 }).delay(1).ease(Quad.easeOut);

Of course you can also call a function onComplete, even with parameters:

Actuate.tween(mySprite, 1, { alpha:1 }).onComplete(trace, 'Tween finished');

Check out the Actuate Google Code page linked above for the full list of methods with examples.

Answer 3

I agree that you should use TweenLite or TweenMax as the other answers suggests.

From what I gather though, the question is the best approach in activating/deactivating your event listeners for the buttons.

I'd say the best approach is to have a function for adding your button listeners and another function for removing them.

Then, whenever you call a tween, you first call the removal function before executing the tween.

Then upon completion, you call the function to add them again. You can use the onComplete parameter with Tweenlite to specify the function to add the button listeners.

for example :

function moveBallRight(evt:MouseEvent):void
{
    removeButtonListeners();
    TweenLite.to(mcBall, 4, {x:470, ease:Expo.easeOut, onComplete:addButtonListeners};
}

function moveBallLeft(evt:MouseEvent):void
{
    removeButtonListeners();
    // do your tween
    TweenLite.to(mcBall, 4, {x:80, ease:Expo.easeOut, onComplete:addButtonListeners};
}

function addButtonListeners():void
{
   // add both listeners here
}

function removebuttonListeners():void
{
  // remove both listeners here
}

Also, you'd obviously want to call addButtonListeners at the beginning of your program as well, so that the listeners are initially active when the program runs.