Как вы можете предотвратить как прыгание, так и прерывание анимации с помощью анимированных кнопок Flash?

Question

Это то, что я никогда не мог понять.

У вас есть кнопка за кадром, которую вы хотите анимировать. Мы назовем ее «btn». У вас есть область попадания, которая служит датчиком приближения для запуска анимации btn. Мы назовем его «hitZone» (чтобы не вызывать путаницу со свойством hitArea экранных объектов).

И btn, и hitZone являются мувиклипами. Слушатели идут примерно так.

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

Проблема в том, что ваша мышь находится над хитзоной и btn. Кнопка непрерывно перемещается, если только вы не вызываете TweenLite.killAllTweensOf (). Это устраняет нервозность, но создает новую проблему. Теперь очень просто прервать анимацию btn в любой момент, остановив ее до того, как она будет полностью видна на сцене.

Я видел похожих сообщений, но даже они страдают от той же проблемы. Возможно, это проблема с тем, как Flash распознает края, потому что я никогда не видел обходного пути для этого.

Answer 1

IIRC, чтобы решить эту проблему, при работе с зонами близости я использовал положение мыши, чтобы показать / скрыть содержимое (кнопка).Я бы использовал hitZone, чтобы вызвать слушателя движения мыши.Когда позиция мыши находится за пределами зоны действия HitZone: спрячьте кнопку и удалите слушателя перемещения мыши.

import com.greensock.*;
import com.greensock.easing.*;
import flash.events.MouseEvent;
var endPoint:Number = 31;

hitZone.addEventListener(MouseEvent.ROLL_OVER, onHitZoneOver);
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});
    stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoved);
    hitZone.removeEventListener(MouseEvent.ROLL_OVER, onHitZoneOver);
    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
{
    trace("over BTN");
}

function onBtnOut(e:MouseEvent):void
{
    trace("out BTN");
}

function onBtnClick(e:MouseEvent):void
{
    trace("click BTN");
}

function onHitZoneClick(e:MouseEvent):void
{
        trace("click hitZone");
}

function onMouseMoved(e:MouseEvent):void
{
        if( !hitZone.hitTestPoint(mouseX, mouseY) )
        {
            trace("Sacrebleu!");
            TweenLite.to(btn, 0.75, {x:-41, ease:Expo.easeOut});
            stage.removeEventListener( MouseEvent.MOUSE_MOVE, onMouseMoved );
            hitZone.addEventListener(MouseEvent.ROLL_OVER, onHitZoneOver);
        }
}

Answer 2

Не знаю, правильно ли я понял, но, возможно, вам следует немедленно удалить слушателя onHitZoneOver и подождать, пока завершится анимация кнопки, чтобы вы могли запустить его снова;

Примерно так:

hitZone.addEventListener(MouseEvent.MOUSE_OVER, hitAreaOver);<br/> hitZone.addEventListener(MouseEvent.MOUSE_OUT, hitAreaOut);<br/></p> <p>function onHitZoneOver(event:MouseEvent):void<br/> {<br/> hitZone.removeEventListener(MouseEvent.MOUSE_OVER, hitAreaOver);<br/> TweenLite.to(btn, 0.75, {x:endPoint, ease:Expo.easeOut});<br/> trace("over hitZone");<br/> }<br/></p> <p>function onHitZoneOut(e:MouseEvent):void<br/> {<br/> TweenLite.to(btn, 0.75, {x:-1, ease:Expo.easeOut});<br/> trace("out hitZone");<br/> hitZone.addEventListener(MouseEvent.MOUSE_OVER, hitAreaOver);<br/> }<br/>