Starling framework AS3 Fade-Out Image on Removal Timer not working?

Question

I'm trying to to get my logo image to fade-out when the onLogoComplete timer stops and calls the onCompleteNukerLogo timer to run the Starling animation fadeTo on the logo image. However, I can't figure out why the image isn't fading-out when the timer is called. There are no errors in FlashBuilder and the code in my eyes seems correct.

What I'm trying to achieve. The logo fades in, pauses for a second for viewers to see it, and then the kill-timers (removal timers) are called and when the last timer runs it's supposed to fade the logo out and then it removes the child. However, instead it's just running and then removes the logo image without fading out.

Here's my code. What am I doing wrong? And or is this not possible with Starling to both do a fadeIn and fadeOut?

package screens
{
import flash.events.TimerEvent; 
import flash.utils.Timer;
import screens.DesktopScreenTitle;
//
import starling.display.Button;
import starling.display.Image;
import starling.display.Sprite;
import starling.events.Event;
import starling.animation.Transitions;
import starling.animation.Tween;
import starling.core.Starling;
import starling.animation.Juggler;

public class StudioScreen extends Sprite
{
    //--Images
    private var bg:Image;
    private var logo:Image;
    //--Tweens
    private var logoTween:Tween;
    //--Timers
    private static var callLogoKill:Timer;
    private static var nukeLogo:Timer;

    public function StudioScreen()
    {
        super();
        this.addEventListener(starling.events.Event.ADDED_TO_STAGE, stageSetup);
    }
    //-------------------------------------------------------------------------|
    //||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
    //##setup stage------------------------------------------------------------|
    private function stageSetup(event:Event):void 
    {
        drawTitle();
        callLogoKill = new Timer( 5000 );
        callLogoKill.addEventListener( TimerEvent.TIMER, onLogoComplete);
        callLogoKill.start();
    }

    public function onLogoComplete(e:TimerEvent) {
        callLogoKill.stop(); 
        nukeLogo = new Timer ( 1000 );
        nukeLogo.addEventListener( TimerEvent.TIMER, onCompleteNukeLogo )
        nukeLogo.start();
    }

    public function onCompleteNukeLogo(e:TimerEvent) {
        logoTween = new Tween(logo, 1, Transitions.EASE_OUT);
        logoTween.fadeTo(0);
        Starling.juggler.add(logoTween);
        this.removeChild(logo);
        nukeLogo.stop();
    }

    private function drawTitle():void {
        drawBG();
        drawLogo();
    }

    private function drawLogo():void {
        //Draw Logo
        logo = new Image(Assets.getTexture("logoJoyhype"));
        logo.x = (stage.stageWidth - logo.width) /2;
        logo.y = (stage.stageHeight - logo.height) /2;
        logo.alpha = 0;
        this.addChild(logo);
        //--Tween Logo
        logoTween = new Tween(logo, 1, Transitions.EASE_IN);
        logoTween.fadeTo(1);
        Starling.juggler.add(logoTween);
    }

    private function drawBG():void {
        bg = new Image(Assets.getTexture("yellowBG"));
        this.addChild(bg);
    }

    public function nuke() 
    {
        this.removeChild(bg);
    }
}
}

Thanks!

Answer 1

As i see you remove the logo from the display list at the same time as you launch the fade out:

your code:

public function onCompleteNukeLogo(e:TimerEvent) {
    logoTween = new Tween(logo, 1, Transitions.EASE_OUT);
    // you start fade out here
    logoTween.fadeTo(0);  
    Starling.juggler.add(logoTween);
    // you remove logo here ?
    this.removeChild(logo);
    nukeLogo.stop();
}

maybe try something like:

public function onCompleteNukeLogo(e:TimerEvent) 
{
    logoTween = new Tween(logo, 1, Transitions.EASE_OUT);
    // add on complete callback
    logoTween.onComplete = oncompleteFadeOut;
    logoTween.fadeTo(0);  
    Starling.juggler.add(logoTween);
    nukeLogo.stop();
}
/** called at the end of the fadeOut of the logo **/
public function oncompleteFadeOut():void
{
    // remove logo
    this.removeChild(logo);
}