これからのWebはHTML5だ。とはいわれるものの,
そこで本連載では,
また,
ということで,
- ※1
- 先月末に開かれたデジタルクリエイターためのイベント
「FITC Tokyo 2013」 にはGrant Skinner氏も来日し, 「CreateJS:オープンウェブでリッチインタラクティブエクスペリエンスを構築」 と題して講演している。
お題:読込んだ画像をランダムにトゥイーンアニメーションさせる
早速,
お題のjsdo.
長いコードのほとんどは,
なお,
画像ファイルを読込んでCanvasに描く
では,
まず,
<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.2.0.min.js"></script>
つぎに,
<body onLoad="initialize()">
<canvas id="myCanvas" width="240" height="180"></canvas>
</body>
そして,
new createjs.Stage(canvas要素)
canvas要素の参照はJavaScriptのdocument.
var stage;
function initialize() {
canvasObject = document.getElementById("myCanvas");
stage = new createjs.Stage(canvasObject);
}
PreloadJSライブラリでは,
- PreloadJSオブジェクトをつくる
- ファイルが読み込み終わったとき呼び出す関数
(ハンドラ) を定める - ファイルを読込む
まず,
PreloadJSオブジェクト = new createjs.PreloadJS(XMLHttpRequestの使用)
つぎに,
PreloadJSオブジェクト.onFileLoad = ハンドラ
そして,
PreloadJSオブジェクト.loadFile(ファイルのURL)
PreloadJSライブラリを用いた処理も,
function initialize() {
var file = "images/Pen.png";
var loader = new createjs.PreloadJS(false);
loader.onFileLoad = draw;
loader.loadFile(file);
}
ファイルを読み込み終えたとき呼び出される関数
- ※2
JavaScrit
(JS) ファイルをダウンロードしたいときは, ライブラリごとに 「DOWNLOAD」 ページから落とせる (図3)。 - ※3
- AbstractLoader.
onFileLoad は,AbstractLoaderクラスに備わるイベント。だが, PreloadJSクラスは 「継承」 という仕組みにより, AbstractLoaderクラスに定められたプロパティやメソッド, イベントをすべて自らに備わっているのと同じように使うことができる。プログラミングでは一般に, 継承される親を 「スーパークラス」, 受継ぐ子を 「サブクラス」 と呼ぶ。