Combining EaselJS and TweenJS for Fade Over Time

Question

I have a working animation that uses only EaselJS to load and display images. All animation works quite well, but images appear and disappear immediately. I would like them to disappear gradually. Here's a little jsfiddle that could better illustrate the problem: http://jsfiddle.net/tNLyx/

var stage = new createjs.Stage("canvas");
var shape = new createjs.Shape(new createjs.Graphics().f("#f00").dc(0,0,100)).set({x:100,y:100});
stage.addChild(shape);
stage.update();

shape.addEventListener("click", function(){
     //Shape will now disappear quickly. I would like it to fade out, by tweening its alpha or opacity or something. Any help would be greatly appreciated!
     stage.removeChild(shape);
     stage.update();
});

When you click the red circle, it just disappears, right away. I would like it to slowly disappear. I did some research, but it's hard for me to find good documentation - it seems like I need a TweenJS sister library and at least the following code:

createjs.Ticker.setFPS(30); //Sets frames-per-second for TweenJS
createjs.Tween.get(shape).to({alpha: 0},1000);

, "shape", , , - ( , ), 0 1000 . - !

Answer 1

, .

. , . http://jsfiddle.net/lannymcnie/FVw7E

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

, , ​​ , , . - call .

createjs.Tween.get(shape).to({alpha: 0},1000).call(doneAnimating);

function doneAnimating() {
    createjs.Ticker.removeEventListener("tick", stage);
}

.