as3, doing tasks in certain order

Question

Hey,

I have a simple function going here.

import fl.transitions.Tween;
import fl.transitions.easing.*;

function goBack (e:MouseEvent):void{ 
var backAlpha:Tween = new Tween(MovieClip(parent).blueOverlay, "alpha", Strong.easeOut, 1, 0, 2, true);
MovieClip(parent).gotoAndStop("home");
}
btnBack.addEventListener(MouseEvent.CLICK, goBack);

What it is doing right now is: it is going to the "home" label as soon as btnBack is clicked, which means it is completely disregarding the alpha part.

What I need it to do is: do the alpha part first, then right after it's finished that, do the second part where it jumps to the "home" frame.

Thanks, Wade

Answer 1

Look at the documentation for fl.transtions.Tween

Specifically, look at the motionFinish event.

Basically, what you want to do is something like this:

import fl.transitions.Tween;
import fl.transitions.easing.*;

function goBackStart (e:MouseEvent):void{ 
    var backAlpha:Tween = new Tween(this.parent.blueOverlay, "alpha", Strong.easeOut, 1, 0, 2, true);
    backAlpha.addEventListener("motionFinish", goBackFinish);
}

function goBackFinish(e:Event) {
    removeEventListener(e.target.obj, goBackFinish);
    this.parent.gotoAndStop("home");
}

btnBack.addEventListener(MouseEvent.CLICK, goBackStart);

I am not a fan of how the built-in Tweening class works, so I use either of these:

TweenLite - My new favorite

Tweener - My goto library of years past

Both of these libraries have similar APIs and use an onComplete property to handle completion.

Using Tweener you could do:

import com.caurina.transitions.Tweener;

btnBack.addEventListener(MouseEvent.CLICK, goBack);

function goBack(e:MouseEvent):void {
    Tweener.addTween(this.parent.blueOverlay, {alpha:0, time:2.0, transition:"easeOutQuad", onComplete:function() {this.parent.gotoAndStop("home")}});
}