How to call a function after tweening effect is completely done on a object.?

Question

How to call a function after tweening effects are completely done. please go through this code. The arrow mark appears the instant i click on start. I dont want that to happen. I want arrow mark to appear after the tweening is completed on start button. Point out where i am going wrong.

        createjs.Tween.get(start_button,{loop:false},true)
        .to({y:-436,alpha:0},800,createjs.Ease.get(1)).call(function()
        {
        l_s.visible=true;
        var arrow_left=new ARROWS(arrowLeft,200,500);
        createjs.Tween.get(cent_cont,{loop:false},true)
        .to({alpha:1},1000,createjs.Ease.get(1))
        .wait(3000).call(function()
        {

          stage.addChild(arrow_left);   

          stage.update();
        })
        })

l_s,cent_cont are shape objects (no thing to do with what i have asked,so dont bother). arrowLeft is the object which is appearing as soon as i click on start_button.

Answer 1

I've made you a fiddle based on your code: http://jsfiddle.net/959TT/5/

What you're missing is this:

createjs.Ticker.addEventListener("tick", function(){stage.update(event);});

This line causes the stage to update continuously (like frames in movies).

In your case, you were updating the stage only after both tweens are finished, so it looks like nothing happens before that.

Updating stage can be a costly operation, so you might consider adding and removing "tick" listener depending on the situation, like this:

function tickHandler(event){
    stage.update(event);
}

When you need tween animation:

createjs.Ticker.addEventListener("tick", tickHandler);

After all animations finished:

createjs.Ticker.removeEventListener("tick", tickHandler);
stage.update(); // to make sure everything is drawn

EDIT: I've updated fiddle for clarity, also it turns out you need to call stage.update() one more time after removing "tick" listener.