easeljs splitting an image into pieces

Question

I'm new to easeljs and was wondering how would you split an image into a given number of pieces. From what I've gathered so far, I'm supposed to use SpriteSheets to accomplish this. However, the only tutorials I've seen are ones with multiple images in one Spritesheet, not one image divided into multiple images and put into a SpriteSheet. This is my code so far (I know that the variable frames is undefined since I cannot properly access the spriteSheet array yet):

  var data = {
    images: ["/images/teemo.png"],
    frames: {width:50, height:50}
  };
  var spriteSheet = new createjs.SpriteSheet(data);
  console.log(spriteSheet);
  console.log(spriteSheet[frames]);
  var frames = spriteSheet[frames];
  console.log(frames);
  for (var i=0; i<frames.length; i++){
    var bmp = new createjs.Bitmap(SpriteSheet[frames][i]);
  }

Answer 1

A spritesheet is an interesting way (although not really the intent of the class). Your usage is wrong though.

1. Create a Spritesheet
2. Create Sprite instances (called BitmapAnimation in EaselJS 0.6.1 and earlier), each pointing at the same SpriteSheet instance
3. Use sprite.gotoAndStop(frame) to have each instance show a different piece

Here is an example:

for (var i=0; i< numberOfImages; i++) {
    var sprite = new createsjs.Sprite(spriteSheetData);
    sprite.gotoAndStop(i);
    stage.addChild(sprite);
    // Other stuff
}

You can also crop out a piece of an image using a Bitmap and the sourceRect property, which takes a Rectangle to define the crop area. This ends up being roughly the same as the above approach, but might be more work to determine each Rectangle dimensions.

Cheers.