図で見てわかるToolkit for CreateJS:その2

書き出されたhtmlとjsファイル

Toolkit for CreateJSでパブリッシュすると、htmljsの2つのファイルが作られます。

createJSパブリッシュ

使う素材によってhtmlファイルやjsファイルの書き方が何パターンか変わったりするのですが、基本的には

htmlファイルで、Flashのステージの初期化と、全体のコントロールを行い、

jsファイルで、ライブラリの各部品の準備や、ステージへの配置を行います。

では、サンプルとして
「ベクターで描いた絵を使った、モーションガイド付きのアニメーション」
をFlashで作ってみましょう。

Flash

  • Flashのファイル名は「testA.fla」
  • キャラのムービークリップは、まずライブラリに「monstarA」というシンボル名で作り、
  • ステージ上には「monstar1」というインスタンス名で配置します。
  • この「ファイル名」「シンボル名」「インスタンス名」がjsファイル内でそのまま使われるので、英数半角文字で指定するようにしておきましょう。

Toolkit for CreateJSの「パブリッシュ」ボタンを押せば、もうHTML5版のムービーができあがります。
htmlファイルを開くと、jsファイルとの連動で、アニメーションが動き出します。

testA

testA

さて、このファイルの中身を見てましょう。

htmlファイルでは、canvas要素でFlashのステージを用意

htmlファイルでは、canvasを使ってその上にFlashステージの初期化と配置を行います。

  1. 最初に、使うCreateJSを読み込んでいます。
  2. init()でcanvas要素にFlashステージを貼り付けて初期化します。この中では、Tickerを使って、Flashのようにタイムラインを動かすしかけを作っています。
  3. 最後に、canvas要素で、ステージのサイズを指定して、ページ上に配置しています。

自動で書き出されるhtmlファイルtestA.html


jsファイルでは、Flashで作ったライブラリパーツの準備と、ステージ上への配置

jsファイルでは、主にグラフィックスやアニメーションの動きを行います。メインタイムラインの設定も行います。

  1. Flaファイル名と同じ名前のlib.testAのところで、メインステージの初期設定を行っています。各インスタンスを配置したり、アニメーションの設定を行っています。
  2. ライブラリのシンボル(monstarA)を使って、ステージ上にインスタンス(monstar1)を配置しています。
  3. モーションガイドを使って作ったので、複雑な移動をたくさんの座標データを使って移動させています。
  4. ライブラリのシンボル名と同じ名前のlib.monstarAのところでは、グラフィックスデータが文字変換されて記述されています。このデータを戻してグラフィックスデータとして表示させます。

自動で書き出されるjsファイル

testA.js

以上が「パブリッシュ」を押したときに自動で作られるファイルです。

jsファイルは、グラフィックスやアニメーションを表示させるための複雑なデータがたくさん描かれています。

ここに手を入れて修正するのはややこしそうなので、手を加えるのはhtmlファイルにがよさそうですね。