Cocos Creator js animate sprite

I have animated a sprite using a sprite sheet and the update function, like so:

Note: I have dragged the plist into the atlas field of the sprite node (the same node the monster.js script is attached to) in the Ccos Creator UI.

//monster.js
onLoad: function(){
// change monsters face
            this.faces['1'] =  'monster1';
            this.faces['2'] =  'monster2';
            this.faces['3'] =  'Rmonster1';
            this.faces['4'] =  'Rmonster2';

}
    update: function (dt) {


    this.timekeep += dt;

    if(this.timekeep > 0.1){

var self = this;
          cc.loader.loadRes('monsters', cc.SpriteAtlas, function (err, atlas) {
  self.getComponent(cc.Sprite).spriteFrame = atlas.getSpriteFrame(self.faces[self.monstersN]);
});     

                this.timekeep = 0;

                this.monstersN++;
                if(this.monstersN > 4){

                    this.monstersN = 1;

                }
            }

It actually works fine. I have already thought I should export the cc.loader.loaderRes into the onLoad function and save the atlas as a global var instead of loading every time the update is called.

However…seeing that there are built in animation functions, this can’t be the correct solution. So I tried this:

onLoad: function () {
            // change monster face
            this.faces['1'] =  'monster1';
            this.faces['2'] =  'monster2';
            this.faces['3'] =  'Rmonster1';
            this.faces['4'] =  'Rmonster2';
            var self = this;
                  cc.loader.loadRes('monsters', cc.SpriteAtlas, function (err, atlas) {
var sprite = self.getComponent(cc.Sprite);

        var animFrames = [];
 for (var i = 1; i < 4; i++) {   
     var spriteFrame = atlas.getSpriteFrame(self.faces[i]);
        var animFrame = new cc.AnimationFrame();
            animFrame.initWithSpriteFrame(spriteFrame, 1, null);
        animFrames.push(animFrame);
 }      
 var animation = sprite.Animation.create(animFrames, 0.2, 100);
    var animate   = sprite.Animate.create(animation); 

    sprite.runAction(animate); 
              });    


        },

I get this error:

cc.AnimationFrame is not a constructor

So then I tried this:

onLoad: function () {

            // change monster face
            this.faces['1'] =  'monster1';
            this.faces['2'] =  'monster2';
            this.faces['3'] =  'Rmonster1';
            this.faces['4'] =  'Rmonster2';
            var self = this;
                  cc.loader.loadRes('monsters', cc.SpriteAtlas, function (err, atlas) {
self.atlasA = atlas;
              });    

 var sprite = this.getComponent(cc.Sprite);

        var animFrames = [];
 for (var i = 1; i < 4; i++) {   
     var spriteFrame = this.atlasA.getSpriteFrame(this.faces[i]);
    var animFrame = new cc.AnimationFrame();
        animFrame.initWithSpriteFrame(spriteFrame, 1, null);
    animFrames.push(animFrame);
 }      
 var animation = sprite.Animation.create(animFrames, 0.2, 100);
var animate   = sprite.Animate.create(animation); 

sprite.runAction(animate); 

        },

I get this error:

Cannot read property ‘getSpriteFrame’ of undefined

How can I use cc.animate to change the sprite using the spritesheet I have. All I want to achieve is to move through the plist in the order the images are in the plist, repeated until the monster is put back into the pool it came from.

Here is the solution for anyone who may still be looking.....

cc.AnimationClip.createWithSpriteFrames([sf1, sf2, ...], fps)