EaselJS: Stagemouse events

This script makes your average drawing type thing, where dragging on the screen draws, and releasing the mouse stops the drawing.

1) I think this is needed to make the stage mouse events work.
2) This shape will contain the drawing.
3) Make sure you add it to the stage!
4) This will be the colour of the pen.
5) This will be the thickness of the line.
6) Ensures that the drawing only starts when the person presses down on the stage.
7) Gives a starting point for the drawing, so it doesn't pick up from where the last one finished.
8) See 6.
9 and 10) Makes sure the drawing stops when the mouse is released.
11) I gave the function a proper name so it would be easy to remove. Technically, this function could have been declared outside the init function, but it still works.
12) I guess the if statement isn't really necessary with this version because oldX should always exist... sorry.
13) Draws a line from 'moveTo' to 'lineTo'.
14) Make sure to update the stage after each line.
15) Gives a new starting point for the next line.

(That last stage.update() isn't needed either, sorry.)

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.

EaselJS: The Tick Event

(Click the image to see a larger version.)

You can attach 'tick' event handlers to individual shapes, but there has to be a master tick event, of sorts, that tells them all when to go. It can also pass them information about the tick event, in this example I have used the delta event.

1) After adding the circle to the stage, I have not updated the stage, because that will get done by the tick event.
2) Having set the frames per second to 40, this means that there are 25ms between each tick.
3) This is what I am referring to as the master tick event. Without it, none of the others will occur.
4) This is function that the tick event initially calls.You'll note that I have made the event (and therefore its properties) available to the function.
5) 'delta' is a property of the tick event - it tells you how many milliseconds have passed since the last tick. Since the frame rate is meant to be 40 per second, it should be approximately 25ms.
6) The update has to be called here, if you try to call it in the other ticks, everything won't work. Also, the stage.update can be used to pass info to other tick events.
7) Now you can add a tick event to other objects, that will be called by stage.update.
8) This contains the info sent by stage.update
9) This is how you access that info.

EaselJS: Animation 2 (Pausing)

So apparently, you can tell Tick to pause, and it just keeps on going... But it will tell any animation that cares to know, that they should pause if they wish. Seems a bit odd, but maybe it will make sense later.

9) Adds a button below the canvas that will tell the Ticker it should/should not be paused.
5) The function that does the pausing/unpausing.
6) A variable that sets itself to be the opposite of Ticker's paused status.
7) Changes Ticker's paused status.
8) Changes the text on the button to say pause/unpause, accordingly.
1) Animates the normal circle.
2) Checks the pause status of the Ticker
3) Animates the pauseable circle, but only if the Ticker is not paused
4) Updates the image on the canvas - needs to be outside of the pausable code, or normal circle will keep going round, but you won't see it happening.

EaselJS: Animation 1

A simple animation of a circle looping across the stage.

1) I have declared 'circle' outside of the init function so that other functions can access it.
2) Likewise with 'circleRadius' - I will need to use it in the looping code.
5) Ticker is a class that exists (you don't need to create it, it exists to handle framerate etc), and to use it, you add an event listener to it.
4) You have to say "tick" as the type of event it will listen for.
3) The name of the function that will be called at every 'tick'.
6) Allows you to determine the frame rate, an alternative method is commented out below.
8) Gives you the width of your canvas, so you can check if the circle has moved across it.
7) Adding the circleRadius makes sure the circle is completely off-stage before it goes back to the beginning.
9) This positions the circle just off stage, before it moves on.
10) Call the update in the ticking function so that you can see the change with every tick.