Learning easeljs Day#4

So, I decided that I wanted to practice and learn my JavaScript skills doing video games. I wasn't sure with what I should begin, as I have try this several times and fail.

So I found this library easeljs. It's really easy to use it.
This post and the future ones, are to share, part of the code and explain some of the things I had issues to manage, probably this can help somebody.

See the Pen Running-Scripts V2 by Diego (@diegotc) on CodePen.

    function init() {    
    stage = new createjs.Stage("demoCanvas");
    circle = new createjs.Shape();
    spriteSheet = new createjs.SpriteSheet({
        framerate: 5,
        "images": ["man2_rt1.gif","man2_rt2.gif","man2_Up_rt1.gif","man2_Up_rt2.gif","man2_Down_rt1.gif","man2_Down_rt2.gif"],
        "frames": {"regX": 16, "height": 32, "count": 6, "regY": 0, "width": 32},
        "animations": {
           "runRight":{
               frames: [1,0],
               next: "runRight",
               speed: 1
           },
           "runUp":{
                frames: [3,2],
                next: "runUp",
                speed: 1
           },
           "runDown":{
            frames: [5,4],
            next: "runDown",
            speed: 1
       },
           "stopRight": [0,"stopRight",0],
           "stopUp": [2,"stopUp",2],
           "stopDown": [4,"stopUp",4]
        }
    });

    grant = new createjs.Sprite(spriteSheet, "stopRight");
    grant.x = 50;
    grant.y = 50;
    
    circle.graphics.beginFill("black").drawCircle(x,y,10);
    
    stage.addChild(grant);
    stage.addChild(circle);
    createjs.Ticker.addEventListener("tick", tickFn);
    createjs.Ticker.on('tick',tick);
    createjs.Ticker.setFPS(15);
    stage.update();
};

When I create new spreadsheet, I select the first frame, that I want the sprite to begin, so in this is the stop image

grant = new createjs.Sprite(spriteSheet, "stopRight");