Flash Professional CS6からは、「Toolkit for CreateJS」拡張機能を利用して、Flash Professionalで作成したアニメーションを、CreateJSフレームワークを使ったHTML5コンテンツ(以下、CreateJSコンテンツ)へ変換することが可能となりました。本記事では、この機能を利用して1つのFLAファイルから書き出したFlashムービーとCreateJSコンテンツを、ユーザの閲覧環境に応じて切り替えて表示する方法を紹介します。

サンプルについて

サンプルは「ブラウザー上で動作する簡単なゲーム」を想定したものです。現状、ゲームのような細かい描画やサウンド(効果音・BGM)を使用するコンテンツでは、HTML5よりも、Flashの方が適しています。また、ちょっとしたアニメーションを盛り込みたい場合には、Flashのアニメーション機能はとても有効です。

しかし、モバイルなどのFlash非対応環境もターゲットにするとなると、別途HTML5でコンテンツを用意する必要があります。充分な予算や工数を確保し、それぞれの環境に最適なコンテンツを作成して提供できればよいのですが、なかなかそういうわけにもいきません。

このようなケースに有効な手段の1つとして、「Flash Professionalを使って作成したコンテンツをFlashムービーとCreateJSコンテンツとして書き出し、Flash対応環境ではFlashムービーを表示し、Flash非対応環境ではCreateJSコンテンツを表示する仕組み」が挙げられます。

本記事では、ゲームコンテンツは既に作成したものとして、この表示切り替えの実装方法について解説します。

※この切り替え表示の仕組みを利用したコンテンツを、アドビの特設サイトにて公開しています(本記事では、便宜上、簡略化したサンプルを用いて解説しています)。
アドビの特設サイトのコンテンツへ

※ゲームのようなスクリプトを多用するコンテンツを作成する際に役立つ情報として、「ActionScriptとCreateJSでコードを共有するためのTIPS」も合わせてご覧ください。

Toolkit for CreateJSのインストール

執筆時点でのToolkit for CreateJSの最新バージョンは1.1です。この拡張機能は、「FlashからHTML5へ | Toolkit for CreateJS」からダウンロードできます。また、2012年9月に公開された「Flash Pro CS6 アップデート 2」を適用すると、Toolkit for CreateJS 1.1がインストールされます。

インストール後、[Toolkit for CreateJS]パネルが追加されます([ウィンドウ]メニュー→[Toolkit for CreateJS]を選択して表示)。Flash Professionalでコンテンツを作成し、このパネルからCreateJSコンテンツを書き出します。なお、本記事では、Toolkit for CreateJSの機能、ならびにCreateJSについての詳しい解説はしません。予備知識のない方は、CreateJSの開発者であるGrant Skinner氏のADC記事などを参考にしてください。

切り替え用のコンテンツを用意する

Flash Professionalでコンテンツを作成したらパブリッシュして、FlashムービーとCreateJSコンテンツを書き出します。Flashムービーに関してはそのままで構いませんが、CreateJSコンテンツに関しては、コンテンツ表示用HTML(図1のgame.html)上で表示するために、ちょっとした作業が必要となります。

Toolkit for CreateJSで書き出されるファイルの確認

まず、Toolkit for CreateJSでパブリッシュを行うと、どのようなファイルやフォルダーが書き出されるのか確認しましょう。

Toolkit for CreateJSで書き出されるファイルやフォルダー
libsフォルダー CreateJSのライブラリ群が格納されています。コンテンツの内容によって、書き出されるライブラリの種類が自動的に調整されます。
sounds・imageフォルダー コンテンツ内でサウンドや画像を使用している場合、対応するサウンドファイルや画像ファイルが格納されます。
Flashドキュメント名.js Flash上で作成したタイムライン上のアニメーションや、シンボルなどのデータがCreateJS形式で書き出されます。
Flashドキュメント名.html CreateJSコンテンツを表示するためのcanvas要素やJavaScriptが記述されたHTMLファイル。このファイルをブラウザーで開くとCreateJSコンテンツが表示されます。

例えば、サウンドファイルを利用した「GameData.fla」からCreateJSコンテンツを書き出した場合、ファイル構成は以下のようになります。

GameData.htmlの内容は以下のようになっています。

このHTML内には、CreateJSコンテンツを表示するための、4つのポイントがあります。

【A ライブラリ読み込み部】
「<script src="libs/easeljs-0.5.0.min.js"></script>」などの、一連のscript要素が記述された部分です。
libsフォルダー内に書き出されたCreateJSライブラリと、「Flashドキュメント名.js」という名前で書き出されたコンテンツライブラリ(FlashドキュメントをCreateJSコンテンツに変換したライブラリ、ここではGameData.js)を読み込んでいます。他の部分よりも先に読み込めるように、HTMLのhead要素内に配置されます。

【B 素材読み込み・コンテンツ表示部】
<script>~</script>で囲まれており、サウンドや画像ファイルの読み込みと、コンテンツライブラリの内容を表示するためのコードが記述されています。init関数を実行すると、id属性「canvas」を持つcanvas要素にCreateJSコンテンツが表示されます。

【C 表示開始イベント処理】
body要素内のonloadイベントを利用して、HTMLファイルの読み込み完了時に、init関数を実行する処理が記述されています。

【D コンテンツを表示するcanvas要素】
CreateJSコンテンツを表示する(描画する)canvas要素が配置されています。ここがFlashムービーでいう所の「ステージ」となります。このcanvasのid属性の値は「canvas」です。この値は、コンテンツ表示部内でcanvasを特定するために使われています。

書き出されたHTML内では、「ライブラリとコンテンツ表示部を実行できるように読み込む」→「id属性の値『canvas』を持つcanvas要素を表示する」→「onloadイベントなどを利用して、配置しておいたcanvasにCreateJSコンテンツを書き込むJavaScriptを実行する」という流れで処理を行うように作成されているわけです。

書き出したCreateJSコンテンツを別のHTML上に表示するための準備

通常、書き出したCreateJSコンテンツは、それだけで使用するのではなく、Webページの一部として使用することになると思います。今回も、コンテンツ表示用HTML(図1のgame.html)の一部として、ユーザ環境に応じて表示します。

このように別のHTMLファイルで表示する場合、まず、GameData.html内の【B 素材読み込み・コンテンツ表示部】のコードを、扱いやすいように独立した.jsファイルへと変換しておきます。変換の方法は、<script>~</script>の内側の部分(<script>タグは含めません)をコピーし、テキストエディターなどを利用して、拡張子.jsのファイルとして保存するだけです。今回は、「game.js」という名前で保存します。

GameData.html内には、他にもCreateJSコンテンツを表示するために必要なコードが残っていますが、それらについては次のステップで扱います。

表示切り替えの仕組みの実装

表示するコンテンツを用意できたところで、表示切り替えの仕組みを実装していきましょう。今回は、jQuery環境でFlashムービーを操作する際に便利なプラグインである「jQuery SWFObject Plugin」を利用します。なお、本記事ではjQueryに関しての解説は行いません。

これまでの作業の結果、サンプルは以下のファイル構成となっています。

あとは、コンテンツ表示用HTML(game.html)に、表示切り替えのコードを記述していくだけです。なお、game.html内のゲーム表示位置には、id属性「game」を持つdiv要素が用意されているものとします。

game.html(抜粋)

<body> <div id="game"></div> </body>

それでは、表示の切り替え処理を作成していきましょう。まず、game.htmlでjQueryとjQuery SWFObject Plugin(以下、SWFObject)を使用できるようにscript要素を配置します。必ず先にjQueryを読み込んでください。

game.html(抜粋)

<head> <script src="src/jquery-1.7.1.min.js"></script> <script src="src/SWFObject-1.1.1.min.js"></script> </head>

次に、jQueryのready関数(HTMLの読み込みが終わった際に実行される関数)内で、SWFObjectを利用したFlashムービーの再生可否判定を行います。SWFObjectでは、「セレクタ.flash.命令」という構文で、Flashムービーに関する命令を行うことができます。Flashムービーの再生可否の判定には、「$.flash.available」の値を利用すればOKです。再生できる場合にはtrue、できない場合にはfalseが返ります。この値によって、処理を振り分けます。

ready関数のコード

<script> $(document).ready(function(){ //Flashムービーの再生可否を判定し、表示コンテンツを切り替える if($.flash.available){ //Flashムービーを表示 }else{ //CreateJSコンテンツを表示 } }); </script>

続いて、Flashムービーを表示する場合の処理を追加します。SWFObjectを利用してFlashを表示させるには、「セレクタ.flash(パラメータオブジェクト)」という構文で記述します。今回は、id属性の値に「game」を持つdiv要素に、game.swfを幅550×高さ400pxで表示したいので、次のように記述します。

Flashムービーを表示するコード

//Flashを表示する処理 $('#game').flash({swf:'game.swf',width:550,height:400});

最後に、CreateJSコンテンツを表示する場合の処理を追加します。まず、CreateJSコンテンツを表示する「ステージ」となるcanvas要素を配置します。今回は、「canvas」という名前(id属性値)で、幅550×高さ400pxのcanvas要素を用意したいので、次のように記述します。上述の【D コンテンツを表示するcanvas要素】と同じコードです。

CreateJSコンテンツを表示するコード

//ステージとなるCanvas配置 $("#game").append( '<canvas id="canvas" width="550" height="400"></canvas>' );

続いて、CreateJSコンテンツに必要な各種ライブラリ(上述の【A ライブラリ読み込み部】とgame.js)を、順番にjQueryの$.ajax命令で読み込みます。「CreateJSライブラリ」→「Toolkit for CreateJSで書き出されたコンテンツライブラリ(GameData.js)」→「CreateJSコンテンツを操作するJavaScript(game.js)」の順番で読み込んで実行されるように記述します。

CreateJSコンテンツを表示するコード(続き)

// 読み込みライブラリのリスト。この順番に同期処理で読み込みます。 var libQueue = [ "libs/easeljs-0.5.0.min.js", "libs/tweenjs-0.3.0.min.js", "libs/movieclip-0.5.0.min.js", "libs/preloadjs-0.2.0.min.js", "libs/soundjs-0.3.0.min.js", "GameData.js", "game.js" ]; //ライブラリ読み込み用のヘルパ関数 function loadQueue(){ //jsファイルをひとつひとつ同期読み込み $.ajax({ url: libQueue.shift(), dataType:"script", async:false, success: function(data){ if(libQueue.length==0){ //全ファイル読み込み時に実行したい処理を記述 Init(); }else{ loadQueue(); } } }); } //読み込み開始 loadQueue();

ライブラリの読み込み順を保証するために、$.ajax命令を同期処理(async:false)で逐次実行するのがポイントです。あとは、全ファイルの読み込み完了時にinit関数を実行し、CreateJSが表示されるようにします。

このようにjQueryとSWFObjectを利用すると、Flashムービーの再生可否判定を行い、その結果によってFlashムービーとCreateJSコンテンツの読み込みを動的に切り替えることができます。Toolkit for CreateJSと併用すれば、Flash/HTML5両対応のコンテンツを、同じリソースを使いまわす形で作成できます。