Дождитесь окончания перехода между двумя изображениями

Question

Я разрабатываю приложение ActionScript 3.0 для Blackberry Playbook.

У меня есть двенадцать изображений, загруженных с помощью класса Loader. Я использую Event.ENTER_FRAME, чтобы постепенно увеличивать и уменьшать изображения, используя этот обработчик событий:

private function onEnterFrame(event:Event):void
{
    imageToFront.alpha += 0.1; // slow fade
    imageToBack.alpha -= 0.1;

    if( imageToFront.alpha >= 1.0 )
    {
        imageToFront.alpha = 1.0;

        // hide the first image
        imageToBack.alpha = 0.0;
        imageToBack.visible = false;

        // remove the enter frame event listener
        stage.removeEventListener( Event.ENTER_FRAME, onEnterFrame );
    }
}

Когда пользователь нажимает на изображение, он бросает следующий обработчик клика:

private function onImageClicked(event:MouseEvent):void
{
    switch((event.currentTarget as Loader).name)
    {
        case imageCell11Back.name:
            imageToFront = imageCell11Front;
            imageToBack = imageCell11Back;
            break;
        case imageCell11Front.name:
            imageToFront = imageCell11Back;
            imageToBack = imageCell11Front;
            break;
        case imageCell12Back.name:
            imageToFront = imageCell12Front;
            imageToBack = imageCell12Back;
            break;
        case imageCell12Front.name:
            imageToFront = imageCell12Back;
            imageToBack = imageCell12Front;
            break;
        case imageCell13Back.name:
            imageToFront = imageCell13Front;
            imageToBack = imageCell13Back;
            break;
        case imageCell13Front.name:
            imageToFront = imageCell13Back;
            imageToBack = imageCell13Front;
            break;
        case imageCell21Back.name:
            imageToFront = imageCell21Front;
            imageToBack = imageCell21Back;
            break;
        case imageCell21Front.name:
            imageToFront = imageCell21Back;
            imageToBack = imageCell21Front;
            break;
        case imageCell22Back.name:
            imageToFront = imageCell22Front;
            imageToBack = imageCell22Back;
            break;
        case imageCell22Front.name:
            imageToFront = imageCell22Back;
            imageToBack = imageCell22Front;
            break;
        case imageCell23Back.name:
            imageToFront = imageCell23Front;
            imageToBack = imageCell23Back;
            break;
        case imageCell23Front.name:
            imageToFront = imageCell23Back;
            imageToBack = imageCell23Front;
            break;
    }
    stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
    imageToFront.visible = true;
}

У меня есть следующая проблема:

Если пользователь нажимает на другое изображение до того, как предыдущее изображение не достигло альфа = 1,0, оно оставляет это изображение с альфа-каналом менее 1,0.

Другими словами, я должен сделать что-то, чтобы оставить onEnterFrame Функция установить альфа на 1,0.

Есть идеи?

Я пробовал с stage.hasEventListener(Event.ENTER_FRAME) но это не работает

Answer 1

Мое решение:

private function onEnterFrame(event:Event):void
{
    imageToFront.alpha += 0.1; // slow fade
    imageToBack.alpha -= 0.1;

    if( imageToFront.alpha >= 1.0 )
    {
        imageToFront.alpha = 1.0;

        // hide the first image
        imageToBack.alpha = 0.0;
        imageToBack.visible = false;

        // remove the enter frame event listener
        stage.removeEventListener( Event.ENTER_FRAME, onEnterFrame );
        faddingCard = false;
    }
}

Когда пользователь нажимает на изображение, он бросает следующий обработчик клика:

private function onImageClicked(event:MouseEvent):void
{
    if (faddingCard) return;

    switch((event.currentTarget as Loader).name)
    {
        case imageCell11Back.name:
            imageToFront = imageCell11Front;
            imageToBack = imageCell11Back;
            break;
        case imageCell11Front.name:
            imageToFront = imageCell11Back;
            imageToBack = imageCell11Front;
            break;
        case imageCell12Back.name:
            imageToFront = imageCell12Front;
            imageToBack = imageCell12Back;
            break;
        case imageCell12Front.name:
            imageToFront = imageCell12Back;
            imageToBack = imageCell12Front;
            break;
        case imageCell13Back.name:
            imageToFront = imageCell13Front;
            imageToBack = imageCell13Back;
            break;
        case imageCell13Front.name:
            imageToFront = imageCell13Back;
            imageToBack = imageCell13Front;
            break;
        case imageCell21Back.name:
            imageToFront = imageCell21Front;
            imageToBack = imageCell21Back;
            break;
        case imageCell21Front.name:
            imageToFront = imageCell21Back;
            imageToBack = imageCell21Front;
            break;
        case imageCell22Back.name:
            imageToFront = imageCell22Front;
            imageToBack = imageCell22Back;
            break;
        case imageCell22Front.name:
            imageToFront = imageCell22Back;
            imageToBack = imageCell22Front;
            break;
        case imageCell23Back.name:
            imageToFront = imageCell23Front;
            imageToBack = imageCell23Back;
            break;
        case imageCell23Front.name:
            imageToFront = imageCell23Back;
            imageToBack = imageCell23Front;
            break;
    }
    faddingCard = true;
    stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
    imageToFront.visible = true;
}

Я добавил булеву переменную класса faddingCard, чтобы контролировать, когда выдается onImageClick.

Answer 2

Попробуйте установить прослушиватель событий на imageToFront, а также один на imageToBack следующим образом:

imageToFront.removeEventListener(Event.ENTER_FRAME, fadeIn);
imageToFront.addEventListener(Event.ENTER_FRAME, fadeIn);

imageToBack.removeEventListener(Event.ENTER_FRAME, fadeOut);
imageToBack.addEventListener(Event.ENTER_FRAME, fadeOut);

Fade функции должны выглядеть так:

private function fadeIn(event : Event) : void {
    var currentLoader : Loader = event.target as Loader;
    currentLoader.alpha += .1;

    if(currentLoader.alpha >= 1) {
        currentLoader.removeEventListener(Event.ENTER_FRAME, fadeIn);
    }
}

private function fadeOut(event : Event) : void {
    var currentLoader : Loader = event.target as Loader;
    currentLoader.alpha -= .1;

    if(currentLoader.alpha (inf)= 0) {
        currentLoader.visible = false;
        currentLoader.removeEventListener(Event.ENTER_FRAME, fadeOut);
    }
}

** заменить (inf) на <** Я не знаю, почему это обрезается, если я его установил...

Для значений твининга вы должны взглянуть на разные движки твининга, такие как TweenLite.