前回の第1回は，
たが，
CreateJS新バージョンに対応した修正を加える
第1回には，
第1回 コード2 時間と位置をランダムに定めてトゥイーンアニメーションする
var stage;
var myBitmap;
var top = 0;
var bottom;
var right;
function initialize() {
canvasObject = document.getElementById("myCanvas");
var file = "images/Pen.png";
var loader = new createjs.PreloadJS(false);
right = canvasObject.width;
bottom = canvasObject.height;
stage = new createjs.Stage(canvasObject);
loader.onFileLoad = draw;
loader.loadFile(file);
}
function draw(eventObject) {
var myImage = eventObject.result;
var halfWidth = myImage.width / 2;
var halfHeight = myImage.height / 2;
top += halfHeight;
bottom -= halfHeight;
right -= halfWidth;
myBitmap = new createjs.Bitmap(myImage);
myBitmap.regX = halfWidth;
myBitmap.regY = halfHeight;
myBitmap.x = halfWidth;
myBitmap.y = (top + bottom) / 2;
stage.addChild(myBitmap);
stage.update();
setRandomTween(myBitmap);
createjs.Ticker.addListener(window);
}
function setRandomTween(target) {
var nextY = Math.random() * (bottom - top) + top;
var nextPoint = new createjs.Point(right, nextY);
var randomTime = Math.random() * 5000 + 1000;
setTween(target, nextPoint, randomTime, createjs.Ease.bounceOut);
}
function setTween(target, myPoint, time, easing) {
createjs.Tween.get(target)
.to({x:myPoint.x, y:myPoint.y}, time, easing);
}
function tick() {
stage.update();
}
まず，
<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.4.0.min.js"></script>
第1回コード2のJavaScriptをそのままにして実行すると，
しかし，
オブジェクト.イベント = ハンドラ
けれども，
オブジェクト.addEventListener(イベント名, リスナー)
すると，
function initialize() {
canvasObject = document.getElementById("myCanvas");
var file = "images/Pen.png";
// var loader = new createjs.PreloadJS(false);
var loader = new createjs.LoadQueue(false);
right = canvasObject.width;
bottom = canvasObject.height;
stage = new createjs.Stage(canvasObject);
// loader.onFileLoad = draw;
loader.addEventListener("fileload", draw);
loader.loadFile(file);
}
前掲第1回コード2では，
function draw(eventObject) {
// createjs.Ticker.addListener(window);
createjs.Ticker.addEventListener("tick", tick);
}
function tick() {
stage.update();
}
上記のようにステートメントを書き替えれば，
addEventListener()メソッドの第2引数には，
コード1 新CreateJSで時間と位置をランダムに定めてトゥイーンアニメーションする
var stage;
var myBitmap;
var top = 0;
var bottom;
var right;
function initialize() {
canvasObject = document.getElementById("myCanvas");
var file = "images/Pen.png";
var loader = new createjs.LoadQueue(false);
right = canvasObject.width;
bottom = canvasObject.height;
stage = new createjs.Stage(canvasObject);
loader.addEventListener("fileload", draw);
loader.loadFile(file);
}
function draw(eventObject) {
var myImage = eventObject.result;
var halfWidth = myImage.width / 2;
var halfHeight = myImage.height / 2;
top += halfHeight;
bottom -= halfHeight;
right -= halfWidth;
myBitmap = new createjs.Bitmap(myImage);
myBitmap.regX = halfWidth;
myBitmap.regY = halfHeight;
myBitmap.x = halfWidth;
myBitmap.y = (top + bottom) / 2;
stage.addChild(myBitmap);
stage.update();
setRandomTween(myBitmap);
createjs.Ticker.addEventListener("tick", stage);
}
function setRandomTween(target) {
var nextY = Math.random() * (bottom - top) + top;
var nextPoint = new createjs.Point(right, nextY);
var randomTime = Math.random() * 5000 + 1000;
setTween(target, nextPoint, randomTime, createjs.Ease.bounceOut);
}
function setTween(target, myPoint, time, easing) {
createjs.Tween.get(target)
.to({x:myPoint.x, y:myPoint.y}, time, easing);
}
- ※1
- TickerクラスはaddEventListener()メソッドをEventDispatcherクラスから受継いでいる。EventDispatcher.
addEventListener()メソッドについて詳しくは， 「EaselJSでイベントリスナーを扱うEventDispatcherクラス」 をお読みいただきたい。
