Skip to content
Browse files

Updated tutorials.

Mainly updated to the new event model.

Signed-off-by: Lanny McNie <lanny@gskinner.com>
  • Loading branch information...
1 parent 3ebee24 commit 22e5d6dac0e90ee4b9ccfc1719d62a2269f11b2a @lannymcnie lannymcnie committed Feb 12, 2013
View
34 tutorials/Animation and Ticker/index.html
@@ -21,7 +21,7 @@
<p>
<strong>Synopsis:</strong> Create a simple programmatic animation, and learn about the Ticker class.<br>
<strong>Topics:</strong> animation, Ticker, setFPS, useRAF, getTime, setPaused, requestAnimationFrame, Stage.update, time based animation<br>
- <strong>Target:</strong> EaselJS v0.5.0
+ <strong>Target:</strong> EaselJS v0.6.0
</p>
</header>
@@ -52,12 +52,12 @@
<h2>Ticker</h2>
</header>
<p>
- The <code>Ticker</code> class provides a simple static interface (meaning, you don't ever create a <code>new Ticker()</code>) to propagate a tick to various objects. To use it we just add a listener with <code>addListener(listener)</code>. The listener can be a function, or an object with a <code>tick</code> function defined.
+ The <code>Ticker</code> class provides a simple static interface (meaning, you don't ever create a <code>new Ticker()</code>) to propagate a tick to various objects. To use it we just add a event listener with <code>addEventListener("tick", handler)</code>. The listener can be a function, or an object with a <code>tick</code> function defined.
</p>
<p>
The code below adds the window as a listener, and defines a tick function that will be called 20 times per second (<code>Ticker</code>'s default framerate):
<textarea class="brush: js;" readonly>
-createjs.Ticker.addListener(window);
+createjs.Ticker.addEventListener("tick", tick);
function tick() { console.log("TICK!!!"); }
</textarea>
<p>
@@ -86,9 +86,9 @@
</p>
You can make your animation time based by simply factoring in the elapsed time when we make our property changes.
<textarea class="brush: js;" readonly>
-function tick(elapsedTime) {
+function tick(event) {
// move 100 pixels per second (elapsedTimeInMS / 1000msPerSecond * pixelsPerSecond):
- circle.x += elapsedTime/1000*100;
+ circle.x += event.delta/1000*100;
// this will log a steadily increasing value:
console.log("total time: "+createjs.Ticker.getTime());
}
@@ -107,18 +107,10 @@
<h2>Pausing</h2>
</header>
<p>
- <code>Ticker</code> also provides the ability to pause all of your animations. By default, any listener you add to Ticker is "pauseable". Calling <code>Ticker.setPaused(true);</code> will stop <code>Ticker</code> from calling <code>tick</code> on all pauseable listeners.
+ <code>Ticker</code> also provides the ability to pause all of your animations. All listener you add to Ticker are "pauseable". Calling <code>Ticker.setPaused(true);</code> will stop <code>Ticker</code> from calling <code>tick</code> on all pauseable listeners.
</p>
<p>
- You can also register a listener as not pauseable, but passing <code>false</code> as the second parameter, like so:
- <textarea class="brush: js;" readonly>
-createjs.Ticker.addListener(myListener, false);
- </textarea>
- <p>
- These listeners will continue to be ticked even when <code>Ticker</code> is paused. They will also be passed a second parameter when called, that indicates whether <code>Ticker</code> is currently paused. As an example, you could use this to keep UI animations running, even when a game is paused.
- </p>
- <p>
- Finally, the <code>getTime</code> method accepts a <code>pauseable</code> parameter, and will return the appropriate time total based on it.
+ The <code>getTime</code> method accepts a <code>pauseable</code> parameter, and will return the appropriate time total based on it.
</p>
<p>
In the following demo, play with toggling pause, and see how the red "pauseable" circle stops, where the green "unpauseable" circle does not. You can also see how the total pauseable time stops updating when <code>Ticker</code> is paused.
@@ -128,16 +120,20 @@
<section>
<header>
- <h2>onTick</h2>
+ <h2>Tick</h2>
</header>
<p>
- When you call <code>stage.update()</code>, it calls <code>onTick()</code> on every display object before drawing to the canvas. Any parameters passed to <code>update()</code> will be passed on to <code>onTick()</code> handlers. This lets you handle your animation in the context of your display object.
+ When you call <code>stage.update()</code>, it will tick any descendants exposing a tick method and render
+ its entire display list to the canvas. Any parameters passed to <code>update()</code> will be passed on to
+ <code>tick()</code> handlers. This lets you handle your animation in the context of your display object.
</p>
<textarea class="brush: js;" readonly>
-circle.onTick = function() { this.x += 5; }
+circle.addEventListener("tick", function() { this.x += 5; });
</textarea>
<p>
- You can also add your stage directly as a listener to <code>Ticker</code>, because <code>Stage</code> has a <code>tick</code> method that shortcuts to <code>update</code>. It's rare that you would want to use this, but it can be handy for quick tests. See the source of <a href="onTick.html">onTick.html</a> for an example.
+ You can also add your stage directly as a listener to <code>Ticker</code>, because <code>Stage</code>
+ has a <code>handleEvent</code> method that shortcuts to <code>update</code>. It's rare that you would
+ want to use this, but it can be handy for quick tests. See the source of <a href="onTick.html">onTick.html</a> for an example.
</p>
</section>
View
22 tutorials/Animation and Ticker/onTick.html
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: DisplayObject.onTick</title>
<link href="../shared/demo.css" rel="stylesheet" type="text/css">
- <script src="../../lib/easeljs-0.5.0.min.js"></script>
+ <script src="../../lib/easeljs-0.6.0.min.js"></script>
<script>
var stage, circle;
@@ -15,15 +15,21 @@
circle.y = 50;
stage.addChild(circle);
- // Ticker will pass elapsedTime and paused params when it calls stage.update()
- // which will pass them to onTick() handlers for us in time based animation.
- circle.onTick = function(elapsedTime) {
- this.x += elapsedTime/1000*100;
- if (this.x > stage.canvas.width) { this.x = 0; }
- }
+ // Stage will pass delta when it calls stage.update(arg)
+ // which will pass them to tick event handlers for us in time based animation.
+ circle.addEventListener("tick", function(event) {
+ var delta = event.params[0];
+ circle.x += delta/1000*100;
+ if (circle.x > stage.canvas.width) { circle.x = 0; }
+ })
- createjs.Ticker.addListener(stage);
+ createjs.Ticker.addEventListener("tick", tick);
}
+
+ function tick(event) {
+ var delta = event.delta;
+ stage.update(delta);
+ }
</script>
</head>
<body onLoad="init();">
View
24 tutorials/Animation and Ticker/pausing.html
@@ -3,10 +3,11 @@
<head>
<title>EaselJS demo: Ticker.setPaused()</title>
<link href="../shared/demo.css" rel="stylesheet" type="text/css">
- <script src="../../lib/easeljs-0.5.0.min.js"></script>
+ <script src="../../lib/easeljs-0.6.0.min.js"></script>
<script>
var stage, pauseCircle, goCircle, output;
+
function init() {
stage = new createjs.Stage("demoCanvas");
@@ -19,18 +20,10 @@
goCircle.graphics.beginFill("green").drawCircle(0, 0, 40);
goCircle.y = 150;
stage.addChild(goCircle);
-
-
- // we'll register a listener to move our "pauseCircle" that is pauseable:
- createjs.Ticker.addListener(function() {
- pauseCircle.x += 10;
- if (pauseCircle.x > stage.canvas.width) { pauseCircle.x = 0; }
- }, true);
-
- // and register our main listener to be not pauseable:
- createjs.Ticker.addListener(window, false);
-
-
+
+ // and register our main listener
+ createjs.Ticker.addEventListener("tick", tick);
+
// UI code:
output = stage.addChild(new createjs.Text("", "14px monospace", "#000"));
output.lineHeight = 15;
@@ -42,6 +35,11 @@
function tick() {
goCircle.x += 10;
if (goCircle.x > stage.canvas.width) { goCircle.x = 0; }
+
+ if (!createjs.Ticker.getPaused()) {
+ pauseCircle.x += 10;
+ if (pauseCircle.x > stage.canvas.width) { pauseCircle.x = 0; }
+ }
output.text = "getPaused() = "+createjs.Ticker.getPaused()+"\n"+
"getTime(true) = "+createjs.Ticker.getTime(true)+"\n"+
View
4 tutorials/Animation and Ticker/simple.html
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: Simple animation</title>
<link href="../shared/demo.css" rel="stylesheet" type="text/css">
- <script src="../../lib/easeljs-0.5.0.min.js"></script>
+ <script src="../../lib/easeljs-0.6.0.min.js"></script>
<script>
var stage, circle;
@@ -15,7 +15,7 @@
circle.y = 50;
stage.addChild(circle);
- createjs.Ticker.addListener(window);
+ createjs.Ticker.addEventListener("tick", tick);
createjs.Ticker.setFPS(30);
}
View
8 tutorials/Animation and Ticker/timeBased.html
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: Time based animation</title>
<link href="../shared/demo.css" rel="stylesheet" type="text/css">
- <script src="../../lib/easeljs-0.5.0.min.js"></script>
+ <script src="../../lib/easeljs-0.6.0.min.js"></script>
<script>
var stage, timeCircle, tickCircle;
@@ -20,13 +20,13 @@
tickCircle.y = 150;
stage.addChild(tickCircle);
- createjs.Ticker.addListener(window);
+ createjs.Ticker.addEventListener("tick", tick);
createjs.Ticker.setFPS(20);
}
- function tick(elapsedTime) {
+ function tick(event) {
// time based
- timeCircle.x = timeCircle.x + elapsedTime/1000*100;
+ timeCircle.x = timeCircle.x + (event.delta)/1000*100;
if (timeCircle.x > stage.canvas.width) { timeCircle.x = 0; }
// not time based:
View
2 tutorials/Getting Started/demo.html
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: Getting started</title>
<link href="../shared/demo.css" rel="stylesheet" type="text/css">
- <script src="../../lib/easeljs-0.5.0.min.js"></script>
+ <script src="../../lib/easeljs-0.6.0.min.js"></script>
<script>
function init() {
var stage = new createjs.Stage("demoCanvas");
View
4 tutorials/Getting Started/index.html
@@ -21,7 +21,7 @@
<p>
<strong>Synopsis:</strong> Set up an HTML document with a canvas tag and the EaselJS libraries, and draw a shape to the stage.<br>
<strong>Topics:</strong> linking libraries, Stage, Shape, addChild, Stage.update(), CDN, source files<br>
- <strong>Target:</strong> EaselJS v0.5.0
+ <strong>Target:</strong> EaselJS v0.6.0
</p>
</header>
@@ -36,7 +36,7 @@
<!DOCTYPE html>
<html>
<head>
- <script src="../../lib/easeljs-0.5.0.min.js"></script>
+ <script src="../../lib/easeljs-0.6.0.min.js"></script>
<script>
function init() {
// code here.
View
4 tutorials/HitTest/globalToLocal.html
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: globalToLocal</title>
<link href="../shared/demo.css" rel="stylesheet" type="text/css">
- <script src="../../lib/easeljs-0.5.0.min.js"></script>
+ <script src="../../lib/easeljs-0.6.0.min.js"></script>
<script>
var stage, holder;
function init() {
@@ -19,7 +19,7 @@
holder.addChild(shape);
}
- createjs.Ticker.addListener(this);
+ createjs.Ticker.addEventListener("tick", tick);
}
function tick() {
View
4 tutorials/HitTest/hitTest.html
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: hitTest</title>
<link href="../shared/demo.css" rel="stylesheet" type="text/css">
- <script src="../../lib/easeljs-0.5.0.min.js"></script>
+ <script src="../../lib/easeljs-0.6.0.min.js"></script>
<script>
var stage, circle;
function init() {
@@ -14,7 +14,7 @@
circle.x = 0;
circle.y = 0;
- createjs.Ticker.addListener(this);
+ createjs.Ticker.addEventListener("tick", tick);
}
function tick() {
View
2 tutorials/HitTest/index.html
@@ -21,7 +21,7 @@
<p>
<strong>Synopsis:</strong> Using the DisplayObject.hitTest method with globalToLocal and localToLocal.<br>
<strong>Topics:</strong> hitTest, globalToLocal, localToLocal, hit detection<br>
- <strong>Target:</strong> EaselJS v0.5.0
+ <strong>Target:</strong> EaselJS v0.6.0
</p>
</header>
View
4 tutorials/HitTest/localToLocal.html
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: localToLocal</title>
<link href="../shared/demo.css" rel="stylesheet" type="text/css">
- <script src="../../lib/easeljs-0.5.0.min.js"></script>
+ <script src="../../lib/easeljs-0.6.0.min.js"></script>
<script>
var stage, arm;
function init() {
@@ -22,7 +22,7 @@
arm.x = 180;
arm.y = 100;
- createjs.Ticker.addListener(this);
+ createjs.Ticker.addEventListener("tick", tick);
}
function tick() {
View
17 tutorials/Inheritance/Button.js
@@ -29,15 +29,18 @@ p.initialize = function(label, color) {
text.x = width/2;
text.y = 10;
- this.addChild(this.background,text);
-}
+ this.addChild(this.background,text);
+ this.addEventListener("click", this.handleClick);
+ this.addEventListener("tick", this.handleTick);
+}
-p.onClick = function() {
- alert("You clicked on a button: "+this.label);
-}
+p.handleClick = function (event) {
+ var target = event.target;
+ alert("You clicked on a button: "+target.label);
+}
-p.onTick = function() {
- this.alpha = Math.cos(this.count++*0.1)*0.4+0.6;
+p.handleTick = function(event) {
+ p.alpha = Math.cos(p.count++*0.1)*0.4+0.6;
}
window.Button = Button;
View
4 tutorials/Inheritance/demo.html
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: Inheritance</title>
<link href="../shared/demo.css" rel="stylesheet" type="text/css">
- <script src="../../lib/easeljs-0.5.0.min.js"></script>
+ <script src="../../lib/easeljs-0.6.0.min.js"></script>
<script src="Button.js"></script>
<script>
var stage, holder;
@@ -24,7 +24,7 @@
btn1.x = btn2.x = btn3.x = 20;
- createjs.Ticker.addListener(stage);
+ createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>
View
2 tutorials/Inheritance/index.html
@@ -21,7 +21,7 @@
<p>
<strong>Synopsis:</strong> Creating custom classes that extend display objects.<br>
<strong>Topics:</strong> inheritance<br>
- <strong>Target:</strong> EaselJS v0.5.0
+ <strong>Target:</strong> EaselJS v0.6.0
</p>
</header>
View
8 tutorials/Mouse Interaction/basic.html
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: onClick</title>
<link href="../shared/demo.css" rel="stylesheet" type="text/css">
- <script src="../../lib/easeljs-0.5.0.min.js"></script>
+ <script src="../../lib/easeljs-0.6.0.min.js"></script>
<script>
function init() {
var stage = new createjs.Stage("demoCanvas");
@@ -13,9 +13,9 @@
circle.x = 100;
circle.y = 100;
- circle.onClick = function() {
- alert("Click!");
- }
+ circle.addEventListener("click", function() {
+ alert("clicked");
+ });
stage.addChild(circle);
stage.update();
View
9 tutorials/Mouse Interaction/container.html
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: Container events</title>
<link href="../shared/demo.css" rel="stylesheet" type="text/css">
- <script src="../../lib/easeljs-0.5.0.min.js"></script>
+ <script src="../../lib/easeljs-0.6.0.min.js"></script>
<script>
var stage, output;
@@ -31,13 +31,14 @@
button.addChild(background, label);
stage.addChild(button);
- background.onClick = label.onClick = handleClick;
+ background.addEventListener("click", handleClick);
+ label.addEventListener("click", handleClick);
// if we define a handler on button, then it will be called, but handlers
// on the children will not. You can comment out the next line to test:
- button.onClick = handleClick;
+ button.addEventListener("click", handleClick);
- createjs.Ticker.addListener(stage);
+ createjs.Ticker.addListener("tick", stage);
stage.update();
}
View
16 tutorials/Mouse Interaction/drag.html
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: Dragging</title>
<link href="../shared/demo.css" rel="stylesheet" type="text/css">
- <script src="../../lib/easeljs-0.5.0.min.js"></script>
+ <script src="../../lib/easeljs-0.6.0.min.js"></script>
<script>
var stage, output;
@@ -26,18 +26,18 @@
dragger.addChild(circle, label);
stage.addChild(dragger);
- dragger.onPress = function(evt) {
+ dragger.addEventListener("mousedown", function(evt) {
var offset = {x:evt.target.x-evt.stageX, y:evt.target.y-evt.stageY};
-
+
// add a handler to the event object's onMouseMove callback
// this will be active until the user releases the mouse button:
- evt.onMouseMove = function(ev) {
- ev.target.x = ev.stageX+offset.x;
+ evt.addEventListener("mousemove",function(ev) {
+ ev.target.x = ev.stageX+offset.x;
ev.target.y = ev.stageY+offset.y;
- }
- }
+ stage.update();
+ });
+ });
- createjs.Ticker.addListener(stage);
stage.update();
}
</script>
View
13 tutorials/Mouse Interaction/events.html
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: Mouse Events</title>
<link href="../shared/demo.css" rel="stylesheet" type="text/css">
- <script src="../../lib/easeljs-0.5.0.min.js"></script>
+ <script src="../../lib/easeljs-0.6.0.min.js"></script>
<script>
var stage, output;
@@ -31,8 +31,15 @@
stage.addChild(square);
// add a handler for all the events we're interested in:
- circle.onClick = circle.onPress = circle.onDoubleClick = circle.onMouseOver = circle.onMouseOut = handleMouseEvent;
- square.onClick = square.onPress = square.onDoubleClick = square.onMouseOver = square.onMouseOut = handleMouseEvent;
+ circle.addEventListener("click", handleMouseEvent);
+ circle.addEventListener("dblclick", handleMouseEvent);
+ circle.addEventListener("mouseover", handleMouseEvent);
+ circle.addEventListener("mouseout", handleMouseEvent);
+
+ square.addEventListener("click", handleMouseEvent);
+ square.addEventListener("dblclick", handleMouseEvent);
+ square.addEventListener("mouseover", handleMouseEvent);
+ square.addEventListener("mouseout", handleMouseEvent);
stage.update();
}
View
23 tutorials/Mouse Interaction/hitArea.html
@@ -3,11 +3,12 @@
<head>
<title>EaselJS demo: onClick</title>
<link href="../shared/demo.css" rel="stylesheet" type="text/css">
- <script src="../../lib/easeljs-0.5.0.min.js"></script>
+ <script src="../../lib/easeljs-0.6.0.min.js"></script>
<script>
+ var stage;
function init() {
- var stage = new createjs.Stage("demoCanvas");
- stage.enableMouseOver();
+ stage = new createjs.Stage("demoCanvas");
+ stage.enableMouseOver(10);
var label1 = new createjs.Text("text without hitArea", "48px Arial", "#F00");
label1.x = label1.y = 10;
@@ -23,14 +24,20 @@
var hit = new createjs.Shape();
hit.graphics.beginFill("#000").drawRect(0, 0, label2.getMeasuredWidth(), label2.getMeasuredHeight());
label2.hitArea = hit;
+
+ label1.addEventListener("mouseover", handleInteraction);
+ label2.addEventListener("mouseover", handleInteraction);
- label1.onMouseOver = label2.onMouseOver = function(evt) { evt.target.alpha = 1; }
- label1.onMouseOut = label2.onMouseOut = function(evt) { evt.target.alpha = 0.5; }
+ label1.addEventListener("mouseout", handleInteraction);
+ label2.addEventListener("mouseout", handleInteraction);
stage.addChild(label1, label2);
-
- createjs.Ticker.addListener(stage);
- stage.update();
+ stage.update();
+ createjs.Ticker.addEventListener("tick", stage);
+ }
+
+ function handleInteraction(event) {
+ event.target.alpha = (event.type == "mouseover") ? 1 : 0.5;
}
</script>
</head>
View
51 tutorials/Mouse Interaction/index.html
@@ -20,8 +20,8 @@
<h1>EaselJS: Mouse Interaction</h1>
<p>
<strong>Synopsis:</strong> Learn about mouse events on display objects and the stage.<br>
- <strong>Topics:</strong> MouseEvent, onClick, onPress, onDoubleClick, onMouseOver, onMouseOut, onMouseMove, onMouseDown, onMouseUp, enableMouseOver, drag and drop, mouseMoveOutside<br>
- <strong>Target:</strong> EaselJS v0.5.0
+ <strong>Topics:</strong> MouseEvent, click, dblclick, mouseover, mouseout, mousemove, mousedown, mouseup, enableMouseOver, drag and drop, mouseMoveOutside<br>
+ <strong>Target:</strong> EaselJS v0.6.0
</p>
</header>
@@ -32,12 +32,12 @@
<p>
At its core, the EaselJS mouse interaction model is very simple to use - just assign a function handler for one of the mouse events on a display object:
<textarea class="brush: js;" readonly>
-circle.onClick = function(evt) { alert("clicked"); }
+circle.addEventListener("click", function(event) { alert("clicked"); })
</textarea>
</p>
<iframe src="basic.html" class="demo" longDesc="the onClick handler" width="100%" height="220px"></iframe>
<p>
- There are a number of events you can listen for on display objects: <code>onPress</code>, <code>onClick</code>, <code>onDoubleClick</code>, <code>onMouseOver</code>, and <code>onMouseOut</code>.
+ There are a number of events you can listen for on display objects: <code>click</code>, <code>mousedown</code>, <code>mouseup</code>, </code><code>dblclick</code>, <code>mouseover</code>, and <code>mouseout</code>.
</p>
<p>
The latter two events have some overhead associated with them, so you need to enable them with <code>stage.enableMouseOver(frequency)</code>. The <code>frequency</code> parameter indicates how many times per second EaselJS should calculate what is currently under the pointer. A higher number is more responsive, but also more computationally expensive. It defaults to 20 times per second.
@@ -51,9 +51,9 @@
<p>
When a mouse handler is triggered, it is called with a single parameter holding a MouseEvent instance. You can use this object to see what <code>type</code> of event it was, what the <code>target</code> was, get access to the <code>nativeEvent</code> object it was based on, and to check the pointer's <code>stageX</code> and <code>stageY</code> coordinates.
<textarea class="brush: js;" readonly>
-circle.onClick = function(evt) {
+circle.addEventListener("click", function(evt) {
alert("type: "+evt.type+" target: "+evt.target+" stageX: "+evt.stageX);
-}
+});
</textarea>
</p>
<iframe src="events.html" class="demo" longDesc="demonstrating the different mouse event types on display objects" width="100%" height="220px"></iframe>
@@ -67,11 +67,12 @@
When you assign a mouse event handler on a <code>Container</code> instance, it will block all mouse events to its children, even if they have their own listeners.
</p>
<p>
- The example below has a "button", which is a <code>Container</code> instance containing two children: a background shape, and a text label. All three of these display objects have <code>onClick</code> handlers, but if you click the button, only its handler is called.
+ The example below has a "button", which is a <code>Container</code> instance containing two children: a background shape, and a text label.
+ All three of these display objects have <code>click</code> handlers, but if you click the button, only its handler is called.
</p>
<iframe src="container.html" class="demo" longDesc="mouse event handlers on containers" width="100%" height="120px"></iframe>
<p>
- If you edit the code for container.html to remove the <code>onClick</code> handler on button, the handlers on background and label will be active.
+ If you edit the code for container.html to remove the <code>click</code> handler on button, the handlers on background and label will be active.
</p>
<p>
You can also block mouse events to children without assigning a handler by setting <code>mouseChildren</code> to <code>false</code>.
@@ -82,7 +83,7 @@
<p>
Similarly, you can disable mouse events on any display object without removing its handlers by setting <code>mouseEnabled</code> to <code>false</code>.
<textarea class="brush: js;" readonly>
-circle.onClick = function() { alert("Clicked!"); }
+circle.addEventListener("click", function() { alert("Clicked!"); });
circle.mouseEnabled = false;
</textarea>
</section>
@@ -114,21 +115,21 @@
If you assign a normal mouse event handler to the stage, it will block mouse events to all of its children. Also, just like every other display object, you will only get events when the mouse is over a non-transparent pixel.
</p>
<p>
- Stage has a few special mouse events that come in handy for responding to general mouse interactions anywhere within your canvas. <code>onMouseDown</code>, <code>onMouseUp</code> and <code>onMouseMove</code> are called any time a relevant mouse interaction happens anywhere on the canvas.
+ Stage has a few special mouse events that come in handy for responding to general mouse interactions anywhere within your canvas. <code>stagemousedown</code>, <code>stagemouseup</code> and <code>stagemousemove</code> are called any time a relevant mouse interaction happens anywhere on the canvas.
<textarea class="brush: js;" readonly>
-stage.onMouseDown = function(evt) {
+stage.addEventListener("stagemousedown", function(evt) {
alert("the canvas was clicked at "+evt.stageX+","+evt.stageY);
-}
+})
</textarea>
<p>
The following demo demonstrates using these events to let you finger paint on the canvas:
</p>
- <iframe src="stage.html" class="demo" longDesc="using stage.onMouseDown, onMouseUp & onMouseMove." width="100%" height="220px"></iframe>
+ <iframe src="stage.html" class="demo" longDesc="using stagemousedown, stagemouseup & stagemousemove." width="100%" height="220px"></iframe>
<p>
- By default, you will stop getting <code>onMouseMove</code> events whenever the pointer is outside of the canvas. You can check of this has happened with <code>stage.mouseInBounds</code>.
+ By default, you will stop getting <code>stagemousemove</code> events whenever the pointer is outside of the canvas. You can check of this has happened with <code>stage.mouseInBounds</code>.
</p>
<p>
- If you'd like to keep getting <code>onMouseMove</code> events when the pointer leaves the canvas, just set <code>mouseMoveOutside</code> to <code>true</code>. The <code>stageX</code> & <code>stageY</code> properties of <code>MouseEvent</code> will always return a value normalized to within your stage bounds, but you can use <code>rawX</code> and <code>rawY</code> to get values that haven't been normalized (this can cause errors if you aren't careful).
+ If you'd like to keep getting <code>stagemousemove</code> events when the pointer leaves the canvas, just set <code>mouseMoveOutside</code> to <code>true</code>. The <code>stageX</code> & <code>stageY</code> properties of <code>MouseEvent</code> will always return a value normalized to within your stage bounds, but you can use <code>rawX</code> and <code>rawY</code> to get values that haven't been normalized (this can cause errors if you aren't careful).
<textarea class="brush: js;" readonly>
stage.mouseMoveOutside = true;
stage.onMouseMove = function(evt) {
@@ -144,23 +145,27 @@
<h2>Drag and drop</h2>
</header>
<p>
- EaselJS makes drag and drop functionality very easy to implement. When an <code>onPress</code> handler is called, the <code>MouseEvent</code> that is passed to it has two special mouse handlers of its own, <code>onMouseMove</code> and <code>onMouseUp</code>
+ EaselJS makes drag and drop functionality very easy to implement. When an <code>click</code> handler is
+ called, the <code>MouseEvent</code> that is passed to it has two special mouse handlers of its own,
+ <code>mousemove</code> and <code>mouseup</code>.
</p>
<p>
- These handlers work exactly the same as their equivalents on <code>Stage</code> with one major difference - they are only active until the user releases the pointer. It sounds a little strange, but it's really simple to use.
+ These handlers work exactly the same as their equivalents on <code>Stage</code> with one major difference -
+ they are only active until the user releases the pointer. It sounds a little strange, but it's really simple to use.
</p>
<textarea class="brush: js;" readonly>
-circle.onPress = function(evt) {
+circle.addEventListener("mousedown", function(evt) {
// add handlers directly to the event object:
- evt.onMouseMove = function(evt) {
+ evt.addEventListener("mousemove", function(evt) {
evt.target.x = evt.stageX;
evt.target.y = evt.stageY;
- }
- evt.onMouseUp = function(evt) { console.log("up"); }
-}
+ });
+ evt.addEventListener("mouseup", function(evt) { console.log("up"); })
+})
</textarea>
<p>
- Check out the source for the demo below for a simple example of this in action. It's also a great place to test out the <code>mouseMoveOutside</code> property.
+ Check out the source for the demo below for a simple example of this in action. It's also a great place
+ to test out the <code>mouseMoveOutside</code> property.
</p>
<iframe src="drag.html" class="demo" longDesc="implementing drag and drop" width="100%" height="220px"></iframe>
</section>
View
19 tutorials/Mouse Interaction/stage.html
@@ -3,13 +3,13 @@
<head>
<title>EaselJS demo: Mouse Events on Stage</title>
<link href="../shared/demo.css" rel="stylesheet" type="text/css">
- <script src="../../lib/easeljs-0.5.0.min.js"></script>
+ <script src="../../lib/easeljs-0.6.0.min.js"></script>
<script>
var stage, label, shape, oldX, oldY, size, color;
function init() {
stage = new createjs.Stage("demoCanvas");
-
+ stage.enableDOMEvents(true);
label = new createjs.Text("finger paint", "24px Arial");
label.x = label.y = 10;
@@ -21,14 +21,17 @@
size = 2;
// add handler for stage mouse events:
- stage.onMouseDown = function() {
+ stage.addEventListener("stagemousedown", function(event) {
size = 10;
- }
- stage.onMouseUp = function() {
+ })
+
+ stage.addEventListener("stagemouseup", function(event) {
color = createjs.Graphics.getHSL(Math.random()*360, 100, 50);
size = 2;
- }
- stage.onMouseMove = function(evt) {
+ })
+
+
+ stage.addEventListener("stagemousemove",function(evt) {
if (oldX) {
shape.graphics.beginStroke(color)
.setStrokeStyle(size, "round")
@@ -38,7 +41,7 @@
}
oldX = evt.stageX;
oldY = evt.stageY;
- }
+ })
stage.update();
}

0 comments on commit 22e5d6d

Please sign in to comment.
Something went wrong with that request. Please try again.