Canvas]が加わりました。CreateJS]パネルによる[パブリッシュ]に替えて、ドキュメントからHTML5とCanvasに対応させようというものです。Canvas形式に変換し、CreateJSで手を加えるまでの流れを簡単にご紹介します。Canvas]が表れます(図001)。Playerを使わない形式が先頭に来なくてもよさそうな気はしなくもありません。Canvas]を開けば、ドキュメントの[パブリッシュ設定]が[JavaScript/HTML]に定められます(図002)。[アクション]パネルには、JavaScriptが書けます。[ムービープレビュー]すれば、HTMLドキュメントとJavaScriptファイルに書き出されたコンテンツが、ブラウザで再生されます。Canvasで使えない機能はグレーで示されて、選べないようになります(図003)[*1]。使えるか使えないかが目で見てわかり、うっかり用いてしまうことが防げます。Canvas」(英文)に一覧表で掲げられています。Canvas]ドキュメントを簡単に試すには、手持ちのFlashムービー(FLA)ファイルが使えます。Canvas]形式に変換してみましょう。もとにするFlashムービーのメインタイムラインには、ムービークリップインスタンスをひとつ置いただけです。ムービークリップシンボルの中には、キャラクタが歩くフレームアニメーションをつくり込んであります(図004)。図004■ムービークリップシンボルのキャラクタが歩くフレームアニメーション書いたスクリプトは、シンボルの中のフレームアニメーションをループさせるステートメントだけです(図005)。アニメーションの初めのフレームにラベル("walk")をつけ、アニメーションの終わりでラベルのフレームに戻してループさせます。*/」の中に書いたコードはJavaScriptとしてパブリッシュできました。Canvasドキュメントに変換するときも使えます。図005■フレームアニメーションをループさせるスクリプトの記述では、ドキュメント形式を変換します。Canvasに変換]を選んで、変換したファイルを保存します(図006)。Canvas]に変わります。[パブリッシュ設定]も[JavaScript/HTML]になっているはずです(前掲図002参照)。Canvasに変換]ドキュメント形式を変換したとき、[出力]パネルにつぎのような警告が示されました。3.0のスクリプトはもはや使えなくなるので、コメントアウトしたということです。ドキュメントが作成されました。[アクション]パネルを開くと、たしかにスクリプトはコメントアウトされています(図007)。*/」の中のステートメントは、改めて取出されて有効になっています。Canvas]ドキュメントの[アクション]パネルにはJavaScriptコードを書きます。コードが正しければ、[ムービープレビュー]でループするムービークリップのアニメーションが再生できます。Canvas]に変わりましたので、[アクション]パネルにCreateJSのJavaScriptコードを書き加えてみます。ムービークリップシンボルには、キャラクタの歩くアニメーションの後にもうひとつフレームアニメーションがつくってありました。キャラクタが落ちて弾む動きです(図008)。このアニメーションの頭にはやはりラベル("drop")がつけてあります。おしまいのフレームにはつぎのようなスクリプトを加えて、ループ先はキャラクタの歩くアニメーション("walk")に戻します。this.gotoAndPlay("walk");図008■キャラクタが落ちて弾むアニメーションそして、このムービークリップインスタンスの初期設定用に空けておいた先頭フレームに、CreateJSのJavaScriptコードを書き加えます(図009)。歩いているキャラクタのアニメーションをマウスクリックしたら、落ちて弾むアニメーション("drop")に飛ばします。そのアニメーションが終わると、前掲JavaScriptコードにしたがってまたキャラクタは歩き始めます。3.0と同じくEventDispatcher.addEventListener()メソッドで、インスタンスに関数をリスナーとして加えます。マウスクリックのイベントは文字列"click"で定めます。リスナー)[アクション]パネルでthisキーワードの後にドット(.)を打つと、コードヒントが開きます(図010)。メソッド名をすべてタイプしなくても、コードヒントでハイライトしたら[return]または[Enter]キーで入力できます。メソッドの引数やその型も確かめられます。図010■コードヒントでメソッドを選ぶと引数やその方も確かめられるムービークリップシンボルの先頭フレームには、つぎのようなJavaScriptコードを書きます(図011)。インスタンスをクリックしたとき呼出されるリスナー関数(drop())は、引数に受取ったイベントオブジェクト(eventObject)のEvent.currentTargetプロパティから関数がリスナーに加えられたインスタンスの参照(_mc)を得ます。そこで、そのインスタンスの再生フレームを移して、アニメーションを切替えます。eventObject.currentTarget;_mc.gotoAndPlay("drop");}図011■クリックしたインスタンスの再生フレームを移すこれで、歩くキャラクタのインスタンスをクリックすると、上から落ちて弾み、また歩き続けるアニメーションになります(図012)。Canvas]ドキュメントからパブリッシュされたファイルの中身を覗いてみましょう。今回もとにしたFlashムービー(FLA)ファイルはビットマップイメージもサウンドも使わないため、書出されたのはFLAファイルと同じ名前のHTMLドキュメントとJavaScript(JS)ファイルのふたつだけです(図013)。HTMLドキュメントHTMLドキュメントが、おもな設定を行います。body要素にはつぎのようにcanvas要素が加えられています(id属性"canvas")。その大きさや背景色は、Flashファイルのステージにもとづきます。body要素のonload属性に、JavaScriptコードから呼出す初期化の関数(init())が定められます。style="background-color:#FFFFFF"></canvas></body>JavaScriptはすべてhead要素に加えられています。script要素全体は後にコード001としてまとめて掲げます。抜書きする行番号は、このコード001にもとづきます。script要素につぎのようにCreateJSのライブラリが読込まれます(第1〜3行目)[*2]。0.7.0を初めとして、本稿執筆時の最新版です(図014)。Professionalから書出されたJSファイルも読込まれています(第4行目)。この中身は後で確かめます。src="sample.js"></script>図014■2013年9月にリリースされたCreateJSの最新版ライブラリその後のscript要素に書込まれたのは、以下のEaselJSの基本的なJavaScriptコードです。canvas要素の参照(canvas)をdocument.getElementById()メソッドでid属性("canvas")から得て、それを引数にしてStageオブジェクト(stage)をつくります(第8および第10行目)。Canvasに表示したいインスタンスは、このStageオブジェクトに子として加えます。Professionalでつくったタイムラインを構成するオブジェクトは、もうひとつパブリッシュされたJSファイルにクラスとして定められます。メインタイムラインは、デフォルトではクラスが「lib.JSファイル名」になります。そのインスタンス(exportRoot)をつくって、StageオブジェクトにContainer.addChild()メソッドで子インスタンスに加えています(第9および第11行目)。アニメーションはTickerクラスで扱うのがお約束です。イベントとして渡すのは"tick"で、リスナーにStageオブジェクトを加えると、タイムラインのアニメーションが再生されます(第14行目)。Professionalでタイムラインに設定されていた値(lib.properties.fps)が渡されます(第13行目)。Canvasは再描画を求めないかぎり、表示が描き替わりません。EaselJSのStage.update()はそのためのメソッドです(第12行目)[*3]。stage);}</script>パブリッシュされたHTMLドキュメントのscript要素全体をまとめたのが、つぎのコード001です。Professionalから書出されるscript要素としては、もっとも簡素なコードでしょう。MovieClipクラスは、EaselJSライブラリに含まれます。Professionalからムービークリップシンボルを書出すために定められました。したがって、CreateJSを使ったJavaScriptのスクリプティングで必ずしも用いられないので、EaselJSライブラリのJSファイルからは外されてクラス単体のJSファイルが用意されました。アニメーションを再生するには、フレームレートでCanvasを描き替えなければなりません。Ticker.tickイベントのリスナーにStageオブジェクトを加えると、そのためのStage.update()メソッドが自動的に呼出されます。JavaScript(JS)ファイルパブリッシュされたJSファイルは、基本的にアニメーションする素材として扱います。中のコードを書替えるということはほとんどありません。Canvasドキュメントの仕組みを知るのに役立つでしょう。JSファイルの中には、クラスが定められています。Professionalのメインタイムラインに当たるクラスです[*4]。Professionalでシンボルのアニメーションはすべてシェイプでつくりました。すると、CreateJSでもEaselJSのShapeクラスを使って、ベクターグラフィックスでかたちを描きます。そのとき、メソッドによる描画は、JSファイルを軽くするため、デフォルトでは暗号のようにコード化されています(図016)。図016■Shapeインスタンスへの描画はデフォルトではコード化されている[パブリッシュ設定]で[シェイプをコンパクト化]のチェックを外すと、描画のJavaScriptコードも読めるように書出されます(図017)。図017■[パブリッシュ設定]で[シェイプをコンパクト化]のチェックを外すと描画のコードが読める試みに、塗り色を定めるGraphics.beginFill()メソッドに、異なるカラー値を与えてみます。すると、そのメソッドで描いているシェイプの塗り色が変わります(図018)。Professionalのシェイプでつくったオブジェクトは、CreateJSでもベクターとしてJavaScriptコードにより描かれます。データを小さく抑えたいときには効果が高いでしょう。Professionalは、[ライブラリ]のシンボルからスプライトシートも書出せます。この場合は、イメージがPNG画像になります。目的や用途に応じて、ベクターとラスターのどちらでも選べるということです。ひとつだけ、JSファイルのコードを見ておきましょう。Professionalで、キャラクタのアニメーションがつくり込まれたシンボルに[アクション]パネルでJavaScriptコードを書きました(前掲図007・図011参照)。そのシンボルを定義したらしいクラス(lib.pen_animation)が見つかりました(図019)。同じJavaScriptコードが、メソッドとして定められています。Professionalの[アクション]パネルに書いたコードがクラスのメソッドとして定められているコードがわかれば、JSファイルの中身を直に書替えることもできなくはありません。それが他に思わぬ影響を及ぼすこともあり得ます。前述のとおり、パブリッシュされたJSファイルは、基本的に素材として扱うのがよいでしょう。前項03「CreateJSのコードを書き加える」では、インスタンスのクリックでアニメーションを切替えてみました。インタラクションが後で変わってくるかもしれないときは、パブリッシュする素材のコンテンツにはコードを含めず、オーサリングのJSファイルで動きを決める方がよいと思われます。パブリッシュされるJSファイル名と、クラス名の前に添えられる「名前空間」(デフォルトでは「lib」)は、パブリッシュ設定(前掲図002参照)で変えられます(図020)。Professionalのファイルはシェイプのアニメーションしか含まなかったため、HTMLドキュメントとJSファイルだけが書出されました。ビットマップイメージやサウンドが入っていれば、それらは素材としてパブリッシュされます。デフォルトではイメージは「images」、サウンドは「sounds」というフォルダがJSファイルと同じ場所につくられて、それぞれフォルダの中に書出されます。そのフォルダ名は、[パブリッシュ設定]の[アセット書き出しオプション]で変えられます(前掲図020参照)。前掲コード001では、CreateJSのライブラリJSファイルはCDNから読込んでいます(第1〜3行目)[*5]。これは、[パブリッシュ設定]で[ホストのライブラリ]が選ばれている(デフォルト)ためです(図021)。このチェックを外すと必要なCreateJSのライブラリが、デフォルトでは「libs」というフォルダに書出されます。このフォルダ名は[アセット書き出しオプション]の[CreateJS]に定められています。Network)の略称で、Webコンテンツをインターネット経由で配信するために最適化されたネットワークのことです。コンテンツ配信網とも呼ばれます。CreateJSのライブラリはCDNからダウンロードすると速く、同じライブラリを使っていれば異なるサイトでもキャッシュが効きます。ライブラリをサイト内に置かなくて済み、ページの表示も早められます。