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

Filed under:
|

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).

btn is off stage and hitZone is the white box with the blue border

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

Related posts about flash

Related posts about actionscript-3