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 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.