How can you prevent both jumpiness, and interrupting tweens with animated Flash buttons?
Posted
by
Kevin Suttle
on Stack Overflow
See other posts from Stack Overflow
or by Kevin Suttle
Published on 2011-02-03T23:15:03Z
Indexed on
2011/02/03
23:26 UTC
Read the original article
Hit count: 268
flash
|actionscript-3
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.
© Stack Overflow or respective owner