EaselJS: EASY Drag Method

I have seen an example of a drag method, which used an offset object that constantly calculated the difference between the position of the mouse and the position of the initial click, I think. But this is way easier.

1) The mousemove event listener has to be added to the mousedown event in order to work.

2) Position the object using the stageX and Y properties of the mousemove event.

3) Be sure to update the stage!

A mouse up event occurs when you release the mouse, so if you need something to occur then, add a mouseup event listener to the mousedown event.

EDIT: I came across this method somewhere else later - oh well, I guess I'm not a programming genius...

EaselJS: Mouseover and Mouseout

1) Because it would slow your computer down to be checking for mouse movements all the time, you have to enable hte ability of the stage to check for these events.

2) The mouseover event, note the use of stage update so that the change is visible.

3) Ditto for the mouse out event.

EaselJS: How to use the mouseup event

The mouseup event isn't as straight forward to use as the other click type events.

It has to be an event listener of a mousedown event, as shown above.

I believe the mousemove event is used in the same way (in fact, I figured out how to attach a mousedown event by looking at a mousemove event from the tutorials).

EaselJS: Simple Mouse Events

Basic Clicks

In the example above, if you double click on the circle, you will see an alert that gives you information about where the mouse was (relative to the whole stage) when the clicking was done.

These can be accessed by using event.stageX, and event.stageY.

This also works with click, and mousedown.