How can you prevent both jumpiness, and interrupting tweens with animated Flash buttons?
- by Kevin Suttle
This is something I've never been able to figure out.
You've got a button offscreen you want to animate in. We'll call it 'btn.'
You've got a hit area that serves as the proximity sensor to trigger btn's animation. We'll call it 'hitZone' (as to not cause confusion with the hitArea property of display objects).
Both btn and hitZone are MovieClips. The listeners go something like this.
import com.greensock.*;
import com.greensock.easing.*;
import flash.events.MouseEvent;
var endPoint:Number = 31;
hitZone.addEventListener(MouseEvent.ROLL_OVER, onHitZoneOver);
hitZone.addEventListener(MouseEvent.ROLL_OUT, onHitZoneOut);
hitZone.addEventListener(MouseEvent.CLICK, onHitZoneClick);
btn.addEventListener(MouseEvent.ROLL_OVER, onBtnOver);
btn.addEventListener(MouseEvent.ROLL_OUT, onBtnOut);
btn.addEventListener(MouseEvent.CLICK, onBtnClick);
btn.mouseChildren = false;
function onHitZoneOver(e:MouseEvent):void
{
TweenLite.to(btn, 0.75, {x:endPoint, ease:Expo.easeOut});
trace("over hitZone");
}
function onHitZoneOut(e:MouseEvent):void
{
TweenLite.to(btn, 0.75, {x:-1, ease:Expo.easeOut});
trace("out hitZone");
}
function onBtnOver(e:MouseEvent):void
{
hitZone.mouseEnabled = false;
hitZone.removeEventListener(MouseEvent.ROLL_OVER, onHitZoneOver);
hitZone.removeEventListener(MouseEvent.ROLL_OUT, onHitZoneOut);
trace("over BTN");
// This line is the only thing keeping the btn animation from being fired continuously
// causing jumpiness. However, calling this allows the animation to be interrupted
// at any point.
TweenLite.killTweensOf(btn);
}
function onBtnOut(e:MouseEvent):void
{
hitZone.mouseEnabled = true;
hitZone.addEventListener(MouseEvent.ROLL_OVER, onHitZoneOver);
hitZone.addEventListener(MouseEvent.ROLL_OUT, onHitZoneOut);
trace("out BTN");
}
function onBtnClick(e:MouseEvent):void
{
trace("click BTN");
}
function onHitZoneClick(e:MouseEvent):void
{
trace("click hitZone");
}
The issue is when your mouse is over both the hitZone and btn. The button continuously jumps unless you call TweenLite.killAllTweensOf(). This fixes the jumpiness, but it introduces a new problem. Now, it's very easy to interrupt the animation of the btn at any point, stopping it before it's totally visible on the stage.
I've seen similar posts, but even they suffer from the same issue. Perhaps it's a problem with how Flash detects edges, because I've never once seen a workaround for this.
