I have a movieClip which has a rollover effect , when you roll over it, it expands to 1.5 of its size.
when you roll out of it, it shrink back to regular size.
at first it looked like this:
function overMenuItem(e:MouseEvent):void {
e.target.removeEventListener(MouseEvent.ROLL_OVER, overMenuItem);
TweenLite.to(e.target, tweenTime, { scaleX: 1.5, scaleY: 1.5 });
e.target.addEventListener(MouseEvent.ROLL_OUT, outMenuItem, false, 0, true);
}
function outMenuItem(e:MouseEvent):void {
e.target.removeEventListener(MouseEvent.ROLL_OUT, outMenuItem);
TweenLite.to(e.target, tweenTime, { scaleX: 1, scaleY: 1 });
e.target.addEventListener(MouseEvent.ROLL_OVER, overMenuItem, false, 0, true);
}
this meant that when you rolled out before tween finished, it would reverse its animation.
everything fine here but I wanted to make it so that when you roll over it always finished its animation to the end regardless of whether you stay over it or immeditely roll out.
and then ofcourse it you had immeditely rolled out, when it finished its animation it would reverse, if you stayed over it, it would stay on roll over state until you roll out.
I have made this, but its half way there:
function overMenuItem(e:MouseEvent):void {
e.target.removeEventListener(MouseEvent.ROLL_OVER, overMenuItem);
TweenLite.to(e.target, tweenTime, { scaleX: 1.5, scaleY: 1.5, onComplete: giveRollOut, onCompleteParams: [e.target] });
}
function giveRollOut( target:DisplayObject ):void {
target.addEventListener(MouseEvent.ROLL_OUT, outMenuItem, false, 0, true);
}
function outMenuItem(e:MouseEvent):void {
e.target.removeEventListener(MouseEvent.ROLL_OUT, outMenuItem);
TweenLite.to(e.target, tweenTime, { scaleX: 1, scaleY: 1 });
e.target.addEventListener(MouseEvent.ROLL_OVER, overMenuItem, false, 0, true);
}
now it always finished its animation but, if i roll out before it does that, it doesnt get back.