EaselJS SpriteSheet isn't responding to gotoAndPlay

Question

I'm developing a Fez-based HTML5 Canvas game using EaselJS and I've found a problem, that I can't solve myself, while trying to implement SpriteSheets to the hero.

The problem is that I've defined three animations to my hero ("stand", "jump" and "run") and when I try to change from one animation to another using hero.gotoAndPlay("run") or hero.gotoAndStop("stand") the animations don't change, change but show the first frame only or change to the wrong animation.

Can someone help me? What I'm doing wrong and how can I fix it? Thanks.

Here's the relevant JavaScript code I'm using to create the hero Sprite:

var data = {
     images: ["http://i.imgur.com/M0GmFnz.png"],
     frames: {width:34, height:46},
     animations: {
         stand:0,
         run:[0,12,true,0.25],
         jump:13
     }
 };
var spriteSheet = new createjs.SpriteSheet(data);
var hero = new createjs.Sprite(spriteSheet, "stand");
hero.offset = 4 + 1; // "+1" is important, change the first number only.
hero.regX = hero.offset + 2;
hero.regY = hero.offset;
hero.width = 34 - (hero.offset*2) - 12;
hero.height = 46 - (hero.offset*2);
hero.x = 0;
hero.y = 0;
hero.jumping = true;
stage.addChild(hero);

And the code I'm using to change the animation:

if(!left && !right){ // User isn't pressing left arrow or right arrow
    hero.gotoAndStop("stand");
}else{
    hero.gotoAndPlay("run");
}

JSFiddle

Official Site

Answer 1

If you are calling gotoAndStop or gotoAndPlay in a tick (or similar) then it will constantly reset to the first frame. You have to ensure you only call these functions one time when the animation changes.

A good way to set this up is to store the current animation, store it, and only change it up if the animation changes. Something like:

var animation;
if(!left && !right){ // User isn't pressing left arrow or right arrow
    animation = "stand";
}else{
    animation = "run";
}
if (currentAnimation != animation) {
    hero.gotoAndStop(animation); 
}

This is just an example, but should give you an idea. You should only call these methods one time to kick off an animation.