Wait until transition between two images finish

I'm developing an ActionScript 3.0 app for Blackberry Playbook.

I have twelve images loaded with a Loader class. I use Event.ENTER_FRAME to fade in and fade out images using this event handler:

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

When a user click on an image its thrown the following click handler:

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

I have the following problem:

If user clicks on another image before the previous image hasn't reached to alpha = 1.0 it lefts that image with an alpha less than 1.0.

In other words, I have to make something to left onEnterFrame function set alpha to 1.0.

Any ideas?

I have tried with stage.hasEventListener(Event.ENTER_FRAME) but it doesn't work.

Try to set the event listener on the imageToFront and also one on the imageToBack like this :

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 functions should look like to :

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

** replace (inf) by < ** I don't know why it's getting truncated if I set it...

For tweening values, you should look at different tweening engines like TweenLite.

My solution:

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

When a user click on an image its thrown the following click handler:

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

I have added a faddingCard Boolean class variable to control when onImageClick is thrown.