Flash Professional CS6からは、「Toolkit for CreateJS」拡張機能を利用して、Flash Professionalで作成したコンテンツを、CreateJSフレームワークを使ったHTML5コンテンツ(以下、CreateJSコンテンツ)へ変換することができます。つまり、1つのFLAファイルからFlashムービーとCreateJSコンテンツを書き出すことが可能になりました。

ただし、ゲームのようなスクリプトを多用するコンテンツの場合、ActionScriptとCreateJS(JavaScript)との間で、全てのコードをそのまま流用できるというわけではありません。

とはいえ、もともとActionScriptはJavaScriptと同じECMAScript規格から発展した言語なので、かなりの部分のコードを共有できます。さらに、「CreateJS(JavaScript)で共有する」ことを念頭に置いてコードを記述すれば、どちらでも利用できる「両用コード」とすることができます。本記事では、ActionScriptとCreateJSでコードを共有するためのTIPSと注意点を紹介します。

※両用コードを使って開発したFlash/CreateJSコンテンツを、アドビの特設サイトにて公開しています(本記事では、便宜上、簡略化したサンプルを用いて解説しています)。
アドビの特設サイトのコンテンツへ

※上記ページでは、ユーザの閲覧環境(Flash対応状況)に応じて、Flash/CreateJSコンテンツを切り替えて表示するようになっています。表示切り替えの仕組みについては、「Flash/CreateJSコンテンツを切り替え表示する方法」をご覧ください。

TIPS1 ActionScriptとJavaScriptは外部ファイルとして管理する

コードを作成する際には、2種類のコンテンツを作成することを考えて、ActionScript側は外部ASファイルとして作成し、メインのタイムラインの1フレーム目でincludeディレクティブを利用して読み込むようにします。そして、外部ASファイルには、コンテンツを開始するエントリ・ポイントとなる関数を用意しておき、includeディレクティブの後ろに実行するコードを付け加えます。

一方、CreateJS側は、作成した外部ASファイルをコピーし、そのままファイル名の拡張子を「.as」から「.js」に変更して、CreateJS用にコードを修正します。CreateJSコンテンツを開始する際には、表示用のJavaScriptコードや、HTMLのbody要素のonloadイベントなどを利用し、エントリ・ポイントとなる関数を実行すればOKです。

JavaScriptの方が得意という方は、まずJSファイルを作成し、それをコピーして外部ASファイルにリネームし、修正しても構いません。

ActionScript側のコードを外部ASファイルとして作成することで、ActionScriptコードをもとにCreateJSコードを作成する際に(または、その逆)、簡単に管理できるようにしているわけです。

TIPS2 JavaScript風の記述を利用する

両用コードの基本方針としては、「CreateJSに合わせるような書き方をする」ことになります。例えば、最も多用するであろう、「変数」と「クラス」に関しては、以下のように扱います。

変数に関しては、JavaScriptでは型宣言は不要ですが、ActionScriptでは「しなくてもよい」というスタンスです。そこで、両用コードを記述する場合は、JavaScriptに合わせ、変数のデータ型宣言は行わずに記述するのが基本となります。

次にクラスに関しては、こちらもJavaScriptに合わせてfunctionベースで作成すると、そのまま共有できます。

「MyClassクラス」の生成

//MyClassクラスの定義 var MyClass = function(value){ //プロパティの定義と初期化 this.prop = value; MyClass.prop = "piyo"; }; //クラス定数(風)の定義 MyClass.CONST_HOGE = "hoge"; //クラスプロパティ(風)の定義 MyClass.prop = ""; //クラスメソッドの定義 MyClass.method = function(value){ return "@" + value; }; //インスタンスメソッドの定義 MyClass.prototype.method = function(value){ return "#" + value; };

上記コードで定義した「MyClass」を、ActionScriptで利用してみましょう。クラスメソッドやクラスプロパティにアクセスする場合も同様に「クラス名.クラスメソッド/プロパティ」という構文でアクセスします。また、インスタンスを利用するには、従来のActionScript同様にnew演算子でインスタンスを生成し、インスタンス経由でプロパティやメソッドへとアクセスします。

ActionScript上での確認

//JavaScript風のクラス定義からインスタンスを生成 var foo = new MyClass("bar"); //結果を確認 trace("クラス定数:¥t¥t", MyClass.CONST_HOGE); trace("クラスプロパティ", MyClass.prop); trace("プロパティ:¥t¥t", foo.prop); trace("クラスメソッド:¥t", MyClass.method("基本的には")); trace("メソッド:¥t¥t", foo.method("JSベースで記述すればOKです"));

また、両用を考える場合は、ActionScriptにしかないクラスの利用はNGです。どうしても使いたいときは、「同名・同機能のカスタムクラスをJavaScript側で作成してしまう」という手もありますが、基本的には避けるようにしましょう。

TIPS3 埋め込みアセットクラスの活用と差異

Flashでアニメーションを作成する場合に便利なのは、なんといってもムービークリップです。また、作成したムービークリップや、効果音としたいサウンドを手軽にスクリプトからインスタンス化して配置するのに便利なのが、「埋め込みアセットクラス」です。この埋め込みアセットクラスは、CreateJSコンテンツを作成する際にも有効です。

例えば、次図のようにFlash Professional上で2つのサウンドと2つのムービークリップを埋め込み、アセットクラスとして登録してあるとします。

ASリンケージ名(クラス名) タイプ 説明
bgm Sound BGMとして使用するサウンド。
jump Sound 効果音として利用するサウンド。
MC_Hiyoko MovieClip 操作するキャラクターのアニメーションがまとめられている。
PNL_Title MovieClip タイトルアニメーションとして使用する。

このFlashドキュメントをToolkit for CreateJSで書き出すと、CreateJS上でも埋め込みアセットクラスを、[ライブラリ]パネルの「ASリンケージ」欄で指定したクラス名で扱うことができます。

ムービークリップシンボルの場合には、デフォルトの設定では「lib.クラス名」という構文でCreateJSのMovieClipクラスとして書き出されます。例えば、「MC_Hiyoko」という名前で作成したシンボルをインスタンス化して配置する場合、ActionScriptとCreateJSの処理の差異は次のようになります。

ムービークリップを利用する際のコード

//ActionScriptの場合 var mc = new MC_Hiyoko(); stage.addChild(mc); //CreateJSの場合 var mc = new lib.MC_Hiyoko(); stage.addChild(mc);

また、ムービークリップ内に設定されたラベルの情報は、そのまま書き出されます。CreateJSのMovieClipクラスにも、ActionScriptでお馴染みの「gotoAndPlayメソッド」や「gotoAndStopメソッド」が用意されているので、そのままラベルの値を使ってタイムラインの再生/停止をコントロールできます。

さらに、あらかじめFlashドキュメント側にCreateJSで利用するコードを埋め込んでおくことも可能です。Toolkit for CreateJSでは、タイムライン上で「/* js」~「*/」というコメント内に記述したコードを、そのままJavaScriptのコードとして出力する仕組み(タイムラインスクリプティング)を持っています。

このタイムラインスクリプティングを利用すると、「タイムライン内の任意の区間を、左向きにキャラクターが走るアニメーションとしてループ再生させたい」というようなケースでは、アニメーションの先頭となるフレームに「left」とラベルを付け、ループの終了後のフレームに次のように記述することで、ActionScriptでもCreateJSでも同じように、ラベル名「left」の位置から再生を開始すれば、指定区間をループ再生するシンボルとして扱えるようになります。

タイムラインスクリプティングの例

gotoAndPlay("left"); /* js this.gotoAndPlay("left"); */

あらかじめ共有できるパーツとして、ムービークリップシンボルを作成することができますね。

次に、サウンドシンボルの場合には、クラス名と同じ値の文字列を「サウンド再生id」として使用できる形で書き出されます。例えば、「jump」という名前で登録したサウンドを再生する場合、ActionScriptとCreateJSの処理の差異は次のようになります。

サウンドを利用するコード

//ActionScriptの場合 var bgm = new jump(); bgm.play; //CreateJSの場合 createjs.SoundJS.play("jump");

また、サウンドシンボルを含むFlashドキュメントを書き出した際には、コンテンツを表示するHTMLファイルやJavaScriptファイルとともに、「sounds」フォルダーが作成され、その中にMP3変換したサウンドファイルが自動的に書き出されます。さらに、HTMLファイル内には、サウンドファイルをプリロードし、idを割り当てるコードが自動作成されます。このsoundsフォルダーや、プリロードとid割り当てのコードは、そのままコピーして流用してしまいましょう。

TIPS4 イベント処理の差異

Toolkit for CreateJS 1.1で書き出されるCreateJSコンテンツと、ActionScriptとのイベント処理は、大きく異なります。ActionScript 3.0ではaddEventListenerベースの処理ですが、CreateJSはActionScript 2.0風の「onイベント名」形式のイベントハンドラベースの処理となります(次期バージョンのCreateJSでは、addEventListenerベースの処理の追加が予定されています)。

例えば、インスタンス「titlePanel」をクリックしたらstartGame関数を実行するといった場合、ActionScriptとCreateJSの処理の差異は次のようになります。

イベント処理を行うコード

//ActionScriptの場合 titlePanel.addEventListener(MouseEvent.CLICK, startGame); //CreateJSの場合 titlePanel.onClick = startGame;

また、Flashではお馴染みの「enterFrameイベント」に当たるCreateJSのイベント処理は、「onTickイベントハンドラ」となっています。例えば、FPSに応じた間隔でmainLoop関数を実行するといった場合、ActionScriptとCreateJSの処理の差異は次のようになります。

FPSに合わせた間隔で処理を呼び出すコード

//ActionScriptの場合 stage.addEventListener(Event.ENTER_FRAME, mainLoop); //CreateJSの場合 stage.onTick = mainLoop;

また、コードの差異に関しては、自分なりに修正する箇所のパターンが決まってきた時点で、ActionScriptとCreateJSのそれぞれに、差異を埋めるためのユーティリティクラスや関数を作成して利用するといった運用も効果的です。