前の記事で紹介した Flash Professional Toolkit for CreateJS は、CreateJS と呼ばれるオープンソースのフレームワーク群の使用を前提としています。そのため、Flash Pro から書き出された html ファイルと js ファイルは、Canvas の API を利用する代わりに CreateJS の API を呼び出します。
デモビデオ内で紹介されたコードは、こんな感じでした。
(lib.shadow2 = function() {
this.initialize();
this.shape = new Shape();
...
ということで、書き出されたコンテンツの編集をするには、CreateJS の使い方を学ばないとダメそうです。 （単純なタイムラインアニメーションは別として...）
ただし、これは、AS3 の知識がある人には、むしろ良い話かもです。というのは、CreateJS の API は Flash Player の API を意識して設計されているからです。
そこで、今回は CreateJS の中心となるフレームワーク EaselJS の概要を紹介します。
なお、現在公開されている EaselJS のバージョンは v0.4 です。CreateJS 公開時には、何らかのアップデートが行われるかもしれませんが、とりあえず。
主要なクラス
以下は v4.0 時点の EaselJS の主なクラスです。AS3 を書いたことがあれば、最後の Ticker 以外は見ただけで使い方が分かりそうな名前になってます。
- DisplayObject
画面に表示される要素のベースとなるクラス。表示オブジェクトに共通の属性 （x, y, rotation, scaleX, scaleY, skewX, skewY, alpha, 等） を持つ - Container
表示オブジェクトの階層を作る。複数の表示オブジェクトをまとめて扱いたい時に利用 - Stage
表示リストの最上位となる Container。update() メソッドを呼ぶと Canvas が更新される - Text
テキストを表示する - Shape
ベクター画像を表示する - Graphics
ベクターグラフィックスを描くための API を提供する - Bitmap
画像やビデオを表示する - Ticker
指定された間隔で tick イベントを発行する。
「あれ、MovieClip が無い？」 と思った方へ： デモビデオを良く見ると、画面のコード内にはちゃんと存在していたようです。なので、「何らかのアップデート」 が進められているものと思われます。
ハローワールド
さて、下は EaselJS を使う場合の HTML ファイルの基本的な構造です。ファイルが読み込まれると （下の例では） init() が呼び出されます。
<html>
<head> <script src="libs/easel.js"></script> <script> function init() { // ここにCreateJSのコードを記述... } </script> </head> <body onload="init();"> <canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>
init() メソッドでは、最初に Canvas 要素を取得して、それを元に Stage オブジェクトを生成します。ここまでは、どのプログラムでも同じです。
今回は、"Hello World" というテキストを表示したいので、Text オブジェクトを生成して、それを Stage オブジェクトに追加します。
function init() {
// 描画するCanvas要素を取得
var canvas = document.getElementById("canvas");
// Stageオブジェクトを生成
var stage = new Stage(canvas);
// Textオブジェクトを生成
var text = new Text("Hello World", "24px Arial", "#000");
text.x = 100;
text.y = 100;
// TextオブジェクトをStageに追加
stage.addChild(text);
stage.update();
}
Stage に表示オブジェクトを追加するメソッドは addChild() です。最後に update() メソッドを呼ぶと、Canvas にテキストが表示されます。
ベクター画像
次は、Shape と Graphics を使って、ベクター図形を表示する例の紹介です。
まず、図形を Graphics のオブジェクトに描画して、それを Shape オブジェクトに渡すのが基本的な手順です。Graphics には描画用の様々な （なんとなく見慣れた） API が用意されています。
function init() {
var canvas = document.getElementById("canvas");
var stage = new Stage(canvas);
// Graphicsオブジェクトの生成と描画
var g = new Graphics();
g.setStrokeStyle(1);
g.beginStroke(Graphics.getRGB(0,0,0));
g.beginFill(Graphics.getRGB(255,0,0));
g.drawCircle(0,0,30);
// Shapeオブジェクトを生成
var shape = new Shape(g);
shape.x = 50;
shape.y = 50;
stage.addChild(shape);
stage.update();
}
Shape オブジェクトを stage に追加して update() を呼ぶ箇所は、Text のときと一緒です。
ここまでを見ての印象はいかがでしょうか？ 最初の 1 行だけ除けば、ActionScript のコードだと言われても違和感の無い感じです。
Ticker と Tween.js を使ったアニメーションの話は次回に続きます。
コメントする