title: Combining EaselJS and TweenJS for Fade Over Time
body: <p>I have a working animation that uses only EaselJS to load and display images. The whole animation works quite well, but images appear and disappear immediately. I would like them to fade in and out over time. Here's a small jsfiddle that might illustrate the problem better: <a href="http://jsfiddle.net/tNLyx/" rel="nofollow">http://jsfiddle.net/tNLyx/</a></p>
  
  <pre><code>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();
  });
  </code></pre>
  
  <p>When you click the red circle, it simply disappears, immediately. I would like it to fade out slowly. I have done some research but am having trouble finding good documentation - it appears that what I need is the TweenJS "sister" library, and at least some of the following code:</p>
  
  <pre><code>createjs.Ticker.setFPS(30); //Sets frames-per-second for TweenJS
  createjs.Tween.get(shape).to({alpha: 0},1000);
  </code></pre>
  
  <p>I believe the last line is supposed to get the "shape" object which I made previously, then set up an animation which animates its alpha property (which I assume is 1 by default when added to the stage, but I'm not sure), and reduces it to this 0 over 1000 milliseconds. The code doesn't actually do anything - any help would be much appreciated!</p>