FlashCS6 Toolkit for CreateJSを使ってみる（1）

FlashCS6 Toolkit for CreateJSを使ってみる

FlashCS6 Toolkit for CreateJSとは

FlashCS6からswfの代わりにJavaScriptでアニメーションを行うための変換ツールが用意されました。
Toolkit for CreateJSというものです。
この機能は最初から用意されているものではなく、プラグインとして用意されています。
導入は非常に簡単です。以下のサイトからダウンロードしてそれを実行するとExtensionが起動して導入されます。

Flash Professional CC / Toolkit for CreateJS

簡単な作成例です

Flashで簡単なアニメーションを作成します。基本的にはクラシックトゥイーンで作成したものが変換可能となっていますが、簡単なものならモーショントゥイーンでも可能です。
Flashのメニューから「ウインドウ」→「Toolkit for CreateJS」の順に選択します。

後はToolkit for CreateJSのパネルからパブリッシュボタンをクリックするだけでHTMLファイルとjsファイルが出来上がります。

サンプル
＊ＩＥ８以下のバージョンでは見れません。Web標準ブラウザでご覧ください。

このサンプルはFlashCS6を使用してベクトルで作成したITdogのイラストで簡単なアニメーションを作成しました。すごいのはこのサンプルページ用にビットマップのイラストは一切使用してないことです。JavaScriptですべて描画されている点です。

JavaScriptのライブラリ

Toolkit for CreateJS で作成したアニメーションはJavaScriptのライブラリファイルが必要になります。今回のsampleでは「easeljs-0.6.0.min.js」「tweenjs-0.4.0.min.js」「movieclip-0.6.0.min.js」３つのライブラリが使用されています。サンプルではネット上のそれぞれのライブラリとリンクしています。
easeljs-0.6.0.min.jsのようにminが付いたものはコンパクト版です。こちらはライブラリをある程度まとめたものです。通常はこちらを使用しますが、スクリプトの内容を解読する場合は非常に解読しづらいものとなっています。

<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.4.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.6.0.min.js"></script>

ライブラリをあらかじめ用意して使用する場合は、以下からダウンロードすることができます。
CreateJS CDN Libraries

このサンプルのHTML内のJavaScriptは以下のとおりです。

var canvas, stage, exportRoot;

function init() {
	canvas = document.getElementById("canvas");
	exportRoot = new lib.dog();

	stage = new createjs.Stage(canvas);
	stage.addChild(exportRoot);
	stage.update();

	createjs.Ticker.setFPS(24);
	createjs.Ticker.addEventListener("tick", stage);
}

onloadイベントハンドラ

function init()はbody要素の中でonload=”init();” で実行します。
つまりこれはHTMLの読み込みが終了したらブラウザはonloadイベントを生成します。Windowオブジェクトのonloadイベントハンドラとして登録されたJavaScript　ここではfunction init(){　}で定義された内容を実行する事になります。

DOMで特定のノードを取得

ドキュメントでなにかしらの操作を行う場合、まず目的の要素を取得しなければなりません。
そのなかでも頻繁に使用される方法がIDで検索する方法です。

DOMとは、文書に含まれる要素や属性、テキストをそれぞれオブジェクトにみなし、オブジェクトの集合体と考えます。そして文書の構成要素である、要素や属性、テキストといったオブジェクトを「ノード」と呼びます。

そして取得したい要素が明確な場合はその要素にid属性を設定して　getElementById( )を使用します。idは一意のはずですからgetElementById( )はid属性の値が一致したものだけを返します。なお、getElementById( )はDocumentオブジェクトのメソッドになります。

canvas要素はHTML5から新しく増えた要素です。canvas要素は透明な矩形領域が定められ、属性のwidthとheightで幅と高さを決める事ができます。

canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);

Stage( );引数には直接id名を指定することもできますので以下のようにしてもOKです。

stage = new createjs.Stage("canvas");

これでcanvasに表示リストの頂点となるStageオブジェクトを作成しました。

Stageが頂点となる表示リストという考え方です。ActionScriptで使い慣れた考え方ですね。

Stageオブジェクトの下にContainerオブジェクトがあり、その下にShapeオブジェクト、またはBitmapオブジェクトが存在します。

Actionscript3での表示リストについて