Animate onRollover onRollout with TweenMax

Question

I'm using TweenMax to animate some arrows to move when I roll over a link, and the animate back, when I roll out. But it's not working, it animates on rollover, but not rollout.

function boxLink(mc_function:MovieClip, mc_target:MovieClip) {
mc_function.onRollOver = function() {
 var myTween:TweenMax = new TweenMax(mc_target,0.5,{_x:"2", _alpha:50, ease:Back.easeOut});
};
mc_function.onRollOut = function() {
 myTween.reverse();
};
}

boxLink(link_a1,arrow_a1);

What am I doing wrong?

Is there a better way to write this code?

Answer 1

Are you sure that when onRollOut executes, the variable myTween still exists? Because a variable defined with var in a function should, theoretically, live only inside the function that defined it. So my guess is that you're calling a variable that no longer exists.

Try putting in a trace(myTween); just before myTween.reverse();. If it prints undefined, then that's your problem and you should replace myTween.reverse(); with the oposite transition, but written like var myTween:TweenMax = new TweenMax(*);

Answer 2

Scoping. When the onRollOut is triggered the myTween variable does not exist because it is declared in onRollOver and will therefor only exist in the onRollOver scope. Create the myTween variable in the scope of the mc_function instead so it is available in both onRollOver and onRollOut.

function boxLink(mc_function:MovieClip, mc_target:MovieClip) {
mc_function.onRollOver = function() {
        this.myTween = new TweenMax(mc_target,0.5,{_x:"2", _alpha:50, ease:Back.easeOut});
};
mc_function.onRollOut = function() {
        this.myTween.reverse();
};
}

Answer 3

Luke is absolutely correct, you created a "LOCAL VARIABLE" using the "var" keyword and it's scope is that of the function it is created inside of; Once that function has ran, it is no longer available. Where I differ from Luke is that I would create your variable at the top (The compiler moves variables to the top anyhow), you create it in the class scope, if your developing OOP, otherwise stick it near the top of your actions frame, outside of any function. You do not have to give it a value there, merely declare it and datatype it.

var myTween:TweenMax; //Can be access from anywhere within "this" scope.
mc_function.onRollOver = function()
{
    myTween = new TweenMax(mc_target,0.5,{_x:"2", _alpha:50,  ease:Back.easeOut});
};
mc_function.onRollOut = function()
{
    myTween.reverse();
};

Brian Hodge
blog.hodgedev.com hodgedev.com