書き出されたhtmlとjsファイル
Toolkit for CreateJSでパブリッシュすると、htmlとjsの2つのファイルが作られます。
使う素材によってhtmlファイルやjsファイルの書き方が何パターンか変わったりするのですが、基本的には
htmlファイルで、Flashのステージの初期化と、全体のコントロールを行い、
jsファイルで、ライブラリの各部品の準備や、ステージへの配置を行います。
では、サンプルとして
「ベクターで描いた絵を使った、モーションガイド付きのアニメーション」
をFlashで作ってみましょう。
- Flashのファイル名は「testA.fla」
- キャラのムービークリップは、まずライブラリに「monstarA」というシンボル名で作り、
- ステージ上には「monstar1」というインスタンス名で配置します。
- この「ファイル名」「シンボル名」「インスタンス名」がjsファイル内でそのまま使われるので、英数半角文字で指定するようにしておきましょう。
Toolkit for CreateJSの「パブリッシュ」ボタンを押せば、もうHTML5版のムービーができあがります。
htmlファイルを開くと、jsファイルとの連動で、アニメーションが動き出します。
さて、このファイルの中身を見てましょう。
htmlファイルでは、canvas要素でFlashのステージを用意
htmlファイルでは、canvasを使ってその上にFlashステージの初期化と配置を行います。
- 最初に、使うCreateJSを読み込んでいます。
- init()でcanvas要素にFlashステージを貼り付けて初期化します。この中では、Tickerを使って、Flashのようにタイムラインを動かすしかけを作っています。
- 最後に、canvas要素で、ステージのサイズを指定して、ページ上に配置しています。
jsファイルでは、Flashで作ったライブラリパーツの準備と、ステージ上への配置
jsファイルでは、主にグラフィックスやアニメーションの動きを行います。メインタイムラインの設定も行います。
- Flaファイル名と同じ名前のlib.testAのところで、メインステージの初期設定を行っています。各インスタンスを配置したり、アニメーションの設定を行っています。
- ライブラリのシンボル(monstarA)を使って、ステージ上にインスタンス(monstar1)を配置しています。
- モーションガイドを使って作ったので、複雑な移動をたくさんの座標データを使って移動させています。
- ライブラリのシンボル名と同じ名前のlib.monstarAのところでは、グラフィックスデータが文字変換されて記述されています。このデータを戻してグラフィックスデータとして表示させます。
自動で書き出されるjsファイル
以上が「パブリッシュ」を押したときに自動で作られるファイルです。
jsファイルは、グラフィックスやアニメーションを表示させるための複雑なデータがたくさん描かれています。
ここに手を入れて修正するのはややこしそうなので、手を加えるのはhtmlファイルにがよさそうですね。