I am using the sprite sheet builder to generate a SpriteSheet type object from a generic MovieClip. After that, I use the SpriteSheet to create a Sprite type of object, containing a timeline, which I add to a SpriteStage like this:
var spriteStage = new createjs.SpriteStage(canvas);
var sprite = new createjs.Sprite(spriteSheet);
spriteStage.addChild(sprite);
sprite.play();
createjs.Ticker.addEventListener("tick", spriteStage);
The problem is: what results from this is a broken animation. It looks like only a few of the frames are displayed and the animation is either looping those few frames very fast or not doing anything at all.
Using console.log(sprite.currentFrame) on the tick update function I can see that all the frames are incremented at a rate of 30 per second, but what is actually displayed does not correspond with this.
Please note that this works well using a normal Stage to add and play the Sprite animation. Also, according to Chrome://gpu, the WebGL is enabled, so that is not the issue either.
The SpriteStage requires SpriteContainers, which reference a single image that sprites can use. http://www.createjs.com/docs/easeljs/classes/SpriteContainer.html
It is an older WebGL approach --so you might be interested in StageGL, a new EaselJS approach which we are beta testing and should be released soon. Basically it works the same as Stage, but accepts way more content (and is way faster!). Note that your approach above is more inline with how StageGL works.
There is a branch in GitHub: https://github.com/CreateJS/EaselJS/tree/StageGL-beta
We are still polishing up docs and demos (which has been delayed due to other priorities), but hope to get this tagged soon.