今週は、Flash CS6の新機能、Toolkit for CreateJSについてご紹介します。
このToolkit for CreateJS（オープンソースのCreateJS JavaScriptライブラリ）は、Flash CS6の拡張キットにあたるもので、Flash CS6で作成したアニメーションから、HTML5やJavaScriptの書き出しを可能にするものです。ご存知の通り、iPhone非対応のswfですが、このToolkit for CreateJSを使用することで、Flashからcanvasの中で動作するJavaScriptの書き出しができるようになります！
さっそくやってみよう！
Toolkit for CreateJSは、ベクター、ビットマップ、クラシックトゥイーン、サウンド、JavaScriptタイムラインスクリプトなど、アニメ・イラストの大部分をサポートしており、1クリックでステージ上やライブラリ内のコンテンツをHTML5とJavaScriptに書き出します。あとは、書き出したソースをコピーペーストするだけです。
まずは、このToolkit for CreateJSという拡張キットをダウンロードする必要があります。以下のサイトからダウンロード可能です。ダウンロード後、Adobe Extension Manager CS6が起動するため、承認してインストールし、Flashを起動します。
Flash Professional CS6 / Toolkit for CreateJS
http://www.adobe.com/jp/products/flash/flash-to-html5.html
Flashの基本トレーニングを受講したことがある方は見たことがあるかと思いますが、今回は、トゥイーンは何も設定していない、以下のような4カットのキーフレームアニメーションを書き出します。
まず、Toolkit for CreateJSをインストールすると、ウィンドウメニュー→その他のパネル→Toolkit for CreateJSというメニューが新設されるため、表示しておきます。Toolkit for CreateJSパネルの「設定の編集」をクリックすると、アセットパスやJavaScriptのnamespaceの設定か可能です。
Flashのファイルをflaで保存しておき、Toolkit for CreateJSパネルの「パブリッシュ」をクリックすると、HTMLファイルとJavaScriptファイルを書き出します。
HTMLソースを見てみる
書き出したソースは以下のようになっています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from 001cat</title>
<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.5.0.min.js"></script>
<script src="001cat.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
exportRoot = new lib._001cat();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(24);
createjs.Ticker.addListener(stage);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="550" height="400" style="background-color:#ffffff"></canvas>
</body>
</html>
headの中に、Flashから書き出したJavaScriptが外部ファイルとして参照されており、HTML5でのマークアップで、アニメーション部分はcanvasタグとして書き出されているのがわかります。
canvasタグには、id="canvas"を設定し、headの最下部にあるscriptに、function init()で、getElementById("canvas")で取得、bodyタグにonloadで読み出す、という仕組みです。アニメーションの書き出しですので、Flashから書き出したJavaScriptソースは相当なボリューム（372行）があるためこのブログで解釈するのは控えますが、canvasで動作するこれだけのJavaScriptを1クリックで書き出すこのToolkit for CreateJSはぜひインストールして使いたいですね。
以下は、実際にFlashで書き出したHTML5のソースとJavaScriptを取り込んだものです。このブログのページをiPhoneやiPad、アンドロイドで見てみてください。Flashで作成したアニメがこれまでのSWFとしてではなく、JavaScriptのcanvasアニメとして動作しているのが確認できるはずです。
これで、Flashで作成したファイルも、スマートフォンでも見ることができるようになりますね！
次回は、このToolkit for CreateJSをもう少し掘り下げてご説明したいと思います。
→ 【 Flash CS6の新機能 〜 Toolkit for CreateJS：その2 〜 】
関連講座
↑ページTOPへ
