Sindre Sorhus
Sindre Sorhus

Reputation: 63477

Animate onRollover onRollout with TweenMax

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?

Upvotes: 1

Views: 1599

Answers (3)

Brian Hodge
Brian Hodge

Reputation: 2135

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();
};

Upvotes: 2

Luke
Luke

Reputation: 21286

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();
};
}

Upvotes: 2

evilpenguin
evilpenguin

Reputation: 5478

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(*);

Upvotes: 1

Related Questions