Permalink
Browse files

Updates to tutorials: Updated to latest available CDN lib (0.8.1). Al…

…so fixed a few issues.
  • Loading branch information...
lannymcnie committed Dec 4, 2015
1 parent 11df5aa commit 093d7d8128fb0355f09aff5a75d20595c575000b
@@ -65,4 +65,31 @@ code {
padding: 1px 3px;
font-family: Courier New, Courier, serif;
font-weight: bold;
}
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
@@ -21,7 +21,7 @@
<h1>EaselJS <em>Animation and Ticker</em></h1>
<p>
<strong>Synopsis:</strong> Create a simple programmatic animation, and learn about the Ticker class.<br>
<strong>Topics:</strong> animation, Ticker, setFPS, timingMode, getTime, setPaused,
<strong>Topics:</strong> animation, Ticker, framerate, timingMode, getTime, paused,
requestAnimationFrame, Stage.update, time based animation<br/>
<strong>Target:</strong> EaselJS v0.6.0 and above
</p>
@@ -84,8 +84,8 @@ <h2>Ticker</h2>
</p>
<textarea class="brush: js;" readonly>
// these are equivalent, 1000ms / 40fps = 25ms
createjs.Ticker.setInterval(25);
createjs.Ticker.setFPS(40);
createjs.Ticker.interval = 25;
createjs.Ticker.framerate = 40;
</textarea>
<p>
Let's combine all of that to make a circle move across the stage at 30 frames per second. And don't
@@ -176,7 +176,7 @@ <h2>Timing Modes</h2>
</p>
<textarea class="brush: js;" readonly>
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
createjs.Ticker.setFPS(30);
createjs.Ticker.framerate = 30;
</textarea>
</section>
@@ -186,7 +186,7 @@ <h2>Pausing</h2>
</header>
<p>
<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
Ticker are "pauseable". Calling <code>Ticker.paused = true;</code> will stop <code>Ticker</code> from
calling <code>tick</code> on all pauseable listeners.
</p>
<p>
@@ -198,7 +198,7 @@ <h2>Pausing</h2>
green "unpauseable" circle does not. You can also see how the total pauseable time stops updating when
<code>Ticker</code> is paused.
</p>
<iframe src="pausing.html" class="demo" data-description="showing Ticker.setPaused() at work. Click to toggle pause." width="100%" height="245px"></iframe>
<iframe src="pausing.html" class="demo" data-description="showing Ticker.paused at work. Click to toggle pause." width="100%" height="245px"></iframe>
</section>
<section>
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: DisplayObject.onTick</title>
<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script>
var stage, circle;
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: Ticker.setPaused()</title>
<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script>
var stage, pauseCircle, goCircle, output;
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: Simple animation</title>
<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script>
var stage, circle;
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: Time based animation</title>
<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script>
var stage, timeCircle, tickCircle;
@@ -7,7 +7,7 @@
<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Dorsa' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script type="text/javascript">
WebFont.load({
google: {
@@ -12,13 +12,11 @@
position: relative;
left: 0px;
width: 800px;
height: 220px;
}
.box {
position: relative;
float: left;
width: 150px;
height: 250px;
}
</style>
@@ -53,7 +51,7 @@ <h2>CSS: Font Primer</h2>
on the viewers machine. Lucky for us CSS has a fallback system: if the font
you have selected is not installed, the browser will choose a similar font from a generic font set.
</p>
<div class="container">
<div class="container cf">
<div class="box" style="left: 0px">
<p align="center">
<b>SERIF</b>
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: Getting started</title>
<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script>
function init() {
var stage = new createjs.Stage("demoCanvas");
@@ -22,7 +22,7 @@ <h1>EaselJS <em>Getting Started</em></h1>
<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.7.0
<strong>Target:</strong> EaselJS v0.8.1
</p>
</header>
<p class="highlight">
@@ -41,7 +41,7 @@ <h2>Setting up your html document</h2>
<!DOCTYPE html>
<html>
<head>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script>
function init() {
// code here.
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: globalToLocal</title>
<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script>
var stage, holder;
function init() {
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: hitTest</title>
<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script>
var stage, circle;
function init() {
@@ -22,7 +22,7 @@ <h1>EaselJS <em>Using HitTest</em></h1>
<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.7.0
<strong>Target:</strong> EaselJS v0.8.1
</p>
</header>
<p class="highlight">
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: localToLocal</title>
<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script>
var stage, arm;
function init() {
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: onClick</title>
<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script>
function init() {
var stage = new createjs.Stage("demoCanvas");
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: bubbling events</title>
<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script>
var stage, output, lastPhase;
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: Dragging</title>
<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script>
var stage, output;
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: Mouse Events</title>
<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script>
var stage, output;
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: onClick</title>
<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script>
var stage;
function init() {
@@ -3,7 +3,8 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EaselJS Tutorial: Mouse Interaction</title>
<link href="../_shared/tutorial.css" rel="stylesheet" type="text/css">
<link href="../../_assets/css/shared.css" rel="stylesheet" type="text/css" />
<link href="../_shared/tutorial.css" rel="stylesheet" type="text/css" />
<script src="../_shared/tutorial.js"></script>
<!-- SyntaxHighlighter-->
@@ -22,7 +23,7 @@ <h1>EaselJS <em>Mouse Interaction</em></h1>
<strong>Synopsis:</strong> Learn about mouse events on display objects and the stage.<br>
<strong>Topics:</strong> MouseEvent, addEventListener, on, click, dblclick, mouseover, mouseout,
mousemove, mousedown, enableMouseOver, drag and drop, mouseMoveOutside<br>
<strong>Target:</strong> EaselJS v0.7.0
<strong>Target:</strong> EaselJS v0.8.1
</p>
</header>
<p class="highlight">
@@ -3,7 +3,7 @@
<head>
<title>EaselJS demo: Mouse Events on Stage</title>
<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script>
var stage, label, shape, oldX, oldY, size, color;

0 comments on commit 093d7d8

Please sign in to comment.