how to add Click event to a spriteSheet with Easeljs?

Question

as what I stated in the title, easeljs is very new to me, is there any way to add click event or eventlistener to an object like spritesheet for my case in canvas by using the framework Easeljs?

I've done quite a lot of researches and still did'nt get any luck.

Answer 1

A SpriteSheet is just a data format that describes how to draw a Sprite (or BitmapAnimation in earlier versions).

Here is an example SpriteSheet, taken from the example at http://createjs.com/Demos/EaselJS/SpriteSheet.html, which you can find in the GitHub repository (github.com/CreateJS/EaselJS/)

var data = new createjs.SpriteSheet({
    "images": ["images/sprite.png"],
    "frames": {"regX": 0, "height": 292, "count": 64, "regY": 0, "width": 165},
    "animations": {"run": [0, 25, "run", 1.5], "jump": [26, 63, "run"]}
});

Once you have that, you can define a Sprite.

var sprite = new createjs.Sprite(data, "run");
stage.addChild(sprite);
// In earlier versions (0.6.0 and below), you can not specify a start frame/animation
sprite.gotoAndPlay("run");

This will add the sprite to the stage, and play its "run" animation. In order to add a mouse click, use:

sprite.on("click", handleClickFunction);
// Earlier versions (0.6.0 and below) require the use of addEventListener, which still exists in 0.7.0, but is less friendly
sprite.addEventListener("click", handleClickFunction);

More info on Mouse behaviour is available in the tutorial on EaselJS website. http://createjs.com/tutorials/Mouse%20Interaction/