make a simple transition in easelsjs - easeljs

Question

I'm using easelsjs and I need to make a simple transition.
Just change the opacity of the stage gradually.
I'm using the alpha property and the Ticker but I don't see the transition but only the last stage of it.
Is there a simple example for this - I tried to look but couldn't find

Answer 1

I don't know if you want to change the stage opacity or the shape opacity, but if you want your entire canvas to have less opacity, you can simply use JavaScript + CSS transitions to do it. No need for EaselJS in this case.
But if you want to create alpha transitions on canvas objects you should take a look at TweenJS, it simplifies the animation process a lot.
Also, if you want to continue using EaselJS only (or with TweenJS), you'll need to implement the ticker properly, here's how I create my ticker function:
createjs.Ticker.on("tick", tick);
createjs.Ticker.setFPS(60); // This will call the tick() function at every 1000/60ms
function tick() {
stage.update();
}
And then you'll need to say when your button was clicked to your ticker function, so it can decrease your object's alpha every frame. I highly recommend using TweenJS instead of doing this (I've put a TweenJS demonstration at the end of this answer):
$(document).ready(function () {
var stage = new createjs.Stage(canvas);
var s = new createjs.Shape();
s.graphics.beginStroke("#F00").beginFill("#FF0000").drawRect(150.5, 100.5, 300, 300);
stage.addChild(s);
$("#d").click(function () {
s.fadeOut = true;
});
// Tick:
createjs.Ticker.on("tick", tick);
createjs.Ticker.setFPS(60);
function tick() {
if(s.fadeOut){
s.alpha -= 0.01;
s.fadeOut = (s.alpha > 0.4);
}
stage.update();
}
});
I've simplified your code a little bit too. Here's how the code inside the click event handler would look using TweenJS:
createjs.Tween.get(s).to({alpha: 0.4},1000);
Note that both EaselJS and TweenJS work together.