サイトトップ
Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

Flash Professional CC 13.1のHTML5 CanvasドキュメントとCreateJS

ID: FN1312001 Product: Flash Professional CC Technique: HTML5 and JavaScript Library: CreateJS

Flash Professional CC 13.1から、新たなドキュメント形式として[HTML5 Canvas]が加わりました。これまでの[Toolkit for CreateJS]パネルによる[パブリッシュ]に替えて、ドキュメントからHTML5とCanvasに対応させようというものです。本稿では、FlashドキュメントをHTML5 Canvas形式に変換し、CreateJSで手を加えるまでの流れを簡単にご紹介します。


01 HTML5 Canvasドキュメント

Flash Professional CCを13.1にアップデートして起ち上げると、[スタートアップスクリーン]の[新規作成]の初めに[HTML5 Canvas]が表れます(図001)。FlashなのにFlash Playerを使わない形式が先頭に来なくてもよさそうな気はしなくもありません。

図001■[スタートアップスクリーン]の[新規作成]の先頭が[HTML5 Canvas]
図001

[新規作成]で[HTML5 Canvas]を開けば、ドキュメントの[パブリッシュ設定]が[JavaScript/HTML]に定められます(図002)。[アクション]パネルには、JavaScriptが書けます。[ムービープレビュー]すれば、HTMLドキュメントとJavaScriptファイルに書き出されたコンテンツが、ブラウザで再生されます。

図002■[パブリッシュ設定]が[JavaScript/HTML]に定められる
図002

また、[ツール]や[プロパティ]などのパネルでは、HTML5 Canvasで使えない機能はグレーで示されて、選べないようになります(図003)[*1]。使えるか使えないかが目で見てわかり、うっかり用いてしまうことが防げます。

図003■[ツール]や[プロパティ]などのパネルで使えない機能は選べなくなる
図003上

図003下

[*1] HTML5 CanvasでサポートされないFlash Professional CCの機能は、「Unsupported features | HTML5 Canvas」(英文)に一覧表で掲げられています。

02 ドキュメントの形式をFlashから[HTML5 Canvas]に変換する

新しい[HTML5 Canvas]ドキュメントを簡単に試すには、手持ちのFlashムービー(FLA)ファイルが使えます。これまでの[Toolkit for CreateJS]と比べるうえでも、ActionScript 3.0のFlash Professional CCドキュメントを[HTML5 Canvas]形式に変換してみましょう。もとにするFlashムービーのメインタイムラインには、ムービークリップインスタンスをひとつ置いただけです。ムービークリップシンボルの中には、キャラクタが歩くフレームアニメーションをつくり込んであります(図004)。

図004■ムービークリップシンボルのキャラクタが歩くフレームアニメーション
図004上

図004中
図004下

書いたスクリプトは、シンボルの中のフレームアニメーションをループさせるステートメントだけです(図005)。アニメーションの初めのフレームにラベル("walk")をつけ、アニメーションの終わりでラベルのフレームに戻してループさせます。

もちろん、[アクション]パネルの中のステートメントはActionScript 3.0です。けれど、[Toolkit for CreateJS]では、ブロックコメント「/* js */」の中に書いたコードはJavaScriptとしてパブリッシュできました。この機能は、HTML5 Canvasドキュメントに変換するときも使えます。

図005■フレームアニメーションをループさせるスクリプトの記述
図005上

図005下

では、ドキュメント形式を変換します。[コマンド]メニューから[ドキュメント形式をAS3からHTML5 Canvasに変換]を選んで、変換したファイルを保存します(図006)。これで、ファイルの形式が[HTML5 Canvas]に変わります。[パブリッシュ設定]も[JavaScript/HTML]になっているはずです(前掲図002参照)。

図006■[ドキュメント形式をAS3からHTML5 Canvasに変換]
図006

ドキュメント形式を変換したとき、[出力]パネルにつぎのような警告が示されました。これは、フレームに書いてあったActionScript 3.0のスクリプトはもはや使えなくなるので、コメントアウトしたということです。

sample.fla でのコピーまたは読み込み中に警告が生成されました :
* フレームスクリプトにコメントが追加されました

新しい HTML Canvas ドキュメントが作成されました。

[アクション]パネルを開くと、たしかにスクリプトはコメントアウトされています(図007)。ただし、ブロックコメント「/* js */」の中のステートメントは、改めて取出されて有効になっています。[HTML5 Canvas]ドキュメントの[アクション]パネルにはJavaScriptコードを書きます。コードが正しければ、[ムービープレビュー]でループするムービークリップのアニメーションが再生できます。

図007■「/* js */」の中のステートメントがJavaScriptコードとして取出された
図007


03 CreateJSのコードを書き加える

ドキュメントの形式が[HTML5 Canvas]に変わりましたので、[アクション]パネルにCreateJSのJavaScriptコードを書き加えてみます。ムービークリップシンボルには、キャラクタの歩くアニメーションの後にもうひとつフレームアニメーションがつくってありました。キャラクタが落ちて弾む動きです(図008)。このアニメーションの頭にはやはりラベル("drop")がつけてあります。ただし、おしまいのフレームにはつぎのようなスクリプトを加えて、ループ先はキャラクタの歩くアニメーション("walk")に戻します。

this.gotoAndPlay("walk");

図008■キャラクタが落ちて弾むアニメーション
図008上

図008下

そして、このムービークリップインスタンスの初期設定用に空けておいた先頭フレームに、CreateJSのJavaScriptコードを書き加えます(図009)。歩いているキャラクタのアニメーションをマウスクリックしたら、落ちて弾むアニメーション("drop")に飛ばします。そのアニメーションが終わると、前掲JavaScriptコードにしたがってまたキャラクタは歩き始めます。

図009■初期設定のための先頭フレームにCreateJSのJavaScriptコードを書き加える
図009

インスタンスをクリックしたときに行いたいことは、ActionScript 3.0と同じくEventDispatcher.addEventListener()メソッドで、インスタンスに関数をリスナーとして加えます。マウスクリックのイベントは文字列"click"で定めます。

オブジェクト.addEventListener("click", リスナー)

[アクション]パネルでthisキーワードの後にドット(.)を打つと、コードヒントが開きます(図010)。メソッド名をすべてタイプしなくても、コードヒントでハイライトしたら[return]または[Enter]キーで入力できます。また、メソッドの引数やその型も確かめられます。

図010■コードヒントでメソッドを選ぶと引数やその方も確かめられる
図010

図010

ムービークリップシンボルの先頭フレームには、つぎのようなJavaScriptコードを書きます(図011)。インスタンスをクリックしたとき呼出されるリスナー関数(drop())は、引数に受取ったイベントオブジェクト(eventObject)のEvent.currentTargetプロパティから関数がリスナーに加えられたインスタンスの参照(_mc)を得ます。そこで、そのインスタンスの再生フレームを移して、アニメーションを切替えます。

this.addEventListener("click", drop);
function drop(eventObject) {
  var _mc = eventObject.currentTarget;
  _mc.gotoAndPlay("drop");
}

図011■クリックしたインスタンスの再生フレームを移す
図011

これで、歩くキャラクタのインスタンスをクリックすると、上から落ちて弾み、また歩き続けるアニメーションになります(図012)。

図012■ムービークリップシンボルのキャラクタが歩くフレームアニメーション
図012上
クリックで落ちて弾む↓
図012下

04 パブリッシュされたファイルの中身はどうなっているか

[HTML5 Canvas]ドキュメントからパブリッシュされたファイルの中身を覗いてみましょう。今回もとにしたFlashムービー(FLA)ファイルはビットマップイメージもサウンドも使わないため、書出されたのはFLAファイルと同じ名前のHTMLドキュメントとJavaScript(JS)ファイルのふたつだけです(図013)。

図013■パブリッシュされたファイル
図013

04-01 HTMLドキュメント

HTMLドキュメントが、おもな設定を行います。まず、body要素にはつぎのようにcanvas要素が加えられています(id属性"canvas")。その大きさや背景色は、Flashファイルのステージにもとづきます。そして、body要素のonload属性に、JavaScriptコードから呼出す初期化の関数(init())が定められます。

<body onload="init();" style="background-color:#D4D4D4">
  <canvas id="canvas" width="240" height="180" style="background-color:#FFFFFF"></canvas>
</body>

JavaScriptはすべてhead要素に加えられています。script要素全体は後にコード001としてまとめて掲げます。抜書きする行番号は、このコード001にもとづきます。まず、script要素につぎのようにCreateJSのライブラリが読込まれます(第1〜3行目)[*2]。EaselJS 0.7.0を初めとして、本稿執筆時の最新版です(図014)。なお、Flash Professionalから書出されたJSファイルも読込まれています(第4行目)。この中身は後で確かめます。

  1. <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
  2. <script src="http://code.createjs.com/tweenjs-0.5.0.min.js"></script>
  3. <script src="http://code.createjs.com/movieclip-0.7.0.min.js"></script>
  4. <script src="sample.js"></script>

図014■2013年9月にリリースされたCreateJSの最新版ライブラリ
図014

その後のscript要素に書込まれたのは、以下のEaselJSの基本的なJavaScriptコードです。canvas要素の参照(canvas)をdocument.getElementById()メソッドでid属性("canvas")から得て、それを引数にしてStageオブジェクト(stage)をつくります(第8および第10行目)。Canvasに表示したいインスタンスは、このStageオブジェクトに子として加えます。

Flash Professionalでつくったタイムラインを構成するオブジェクトは、もうひとつパブリッシュされたJSファイルにクラスとして定められます。そして、メインタイムラインは、デフォルトではクラスが「lib.JSファイル名」になります。そのインスタンス(exportRoot)をつくって、StageオブジェクトにContainer.addChild()メソッドで子インスタンスに加えています(第9および第11行目)。

アニメーションはTickerクラスで扱うのがお約束です。イベントとして渡すのは"tick"で、リスナーにStageオブジェクトを加えると、タイムラインのアニメーションが再生されます(第14行目)。Ticker.setFPS()メソッドはフレームレートを定め、Flash Professionalでタイムラインに設定されていた値(lib.properties.fps)が渡されます(第13行目)。なお、Canvasは再描画を求めないかぎり、表示が描き替わりません。EaselJSのStage.update()はそのためのメソッドです(第12行目)[*3]。

  1. <script>
  2. var canvas, stage, exportRoot;
  3. function init() {
  4.   canvas = document.getElementById("canvas");
  5.   exportRoot = new lib.sample();
  6.   stage = new createjs.Stage(canvas);
  7.   stage.addChild(exportRoot);
  8.   stage.update();
  9.   createjs.Ticker.setFPS(lib.properties.fps);
  10.   createjs.Ticker.addEventListener("tick", stage);
  11. }
  12. </script>

パブリッシュされたHTMLドキュメントのscript要素全体をまとめたのが、つぎのコード001です。アニメーションをつくり込んだFlash Professionalから書出されるscript要素としては、もっとも簡素なコードでしょう。

コード001■パブリッシュされたHTMLドキュメントのscript要素
  1. <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
  2. <script src="http://code.createjs.com/tweenjs-0.5.0.min.js"></script>
  3. <script src="http://code.createjs.com/movieclip-0.7.0.min.js"></script>
  4. <script src="sample.js"></script>
  5. <script>
  6. var canvas, stage, exportRoot;
  7. function init() {
  8.   canvas = document.getElementById("canvas");
  9.   exportRoot = new lib.sample();
  10.   stage = new createjs.Stage(canvas);
  11.   stage.addChild(exportRoot);
  12.   stage.update();
  13.   createjs.Ticker.setFPS(lib.properties.fps);
  14.   createjs.Ticker.addEventListener("tick", stage);
  15. }
  16. </script>

[*2] MovieClipクラスは、EaselJSライブラリに含まれます。ただ、おもにFlash Professionalからムービークリップシンボルを書出すために定められました。したがって、CreateJSを使ったJavaScriptのスクリプティングで必ずしも用いられないので、EaselJSライブラリのJSファイルからは外されてクラス単体のJSファイルが用意されました。

[*3] アニメーションを再生するには、フレームレートでCanvasを描き替えなければなりません。Ticker.tickイベントのリスナーにStageオブジェクトを加えると、そのためのStage.update()メソッドが自動的に呼出されます。

04-02 JavaScript(JS)ファイル

パブリッシュされたJSファイルは、基本的にアニメーションする素材として扱います。ですから、中のコードを書替えるということはほとんどありません。ただ、Flash ProfessionalのタイムラインがJSファイルにどう書出されるのか見ておくことは、HTML5 Canvasドキュメントの仕組みを知るのに役立つでしょう。

JSファイルの中には、クラスが定められています。その冒頭に「lib.JSファイル名」で定められているのが、前述のとおりFlash Professionalのメインタイムラインに当たるクラスです[*4]。

図015■JSファイルの冒頭にメインタイムラインに当たるクラスが定められている
図015

Flash Professionalでシンボルのアニメーションはすべてシェイプでつくりました。すると、CreateJSでもEaselJSのShapeクラスを使って、ベクターグラフィックスでかたちを描きます。そのとき、メソッドによる描画は、JSファイルを軽くするため、デフォルトでは暗号のようにコード化されています(図016)。

図016■Shapeインスタンスへの描画はデフォルトではコード化されている
図016

[パブリッシュ設定]で[シェイプをコンパクト化]のチェックを外すと、描画のJavaScriptコードも読めるように書出されます(図017)。

図017■[パブリッシュ設定]で[シェイプをコンパクト化]のチェックを外すと描画のコードが読める
図017上

図017下

試みに、塗り色を定めるGraphics.beginFill()メソッドに、異なるカラー値を与えてみます。すると、そのメソッドで描いているシェイプの塗り色が変わります(図018)。

図018■塗りのメソッドに渡すカラー値によりシェイプの色が変わる
図018上

図018下

このように、Flash Professionalのシェイプでつくったオブジェクトは、CreateJSでもベクターとしてJavaScriptコードにより描かれます。データを小さく抑えたいときには効果が高いでしょう。さらに、Flash Professionalは、[ライブラリ]のシンボルからスプライトシートも書出せます。この場合は、イメージがPNG画像になります。目的や用途に応じて、ベクターとラスターのどちらでも選べるということです。

もうひとつだけ、JSファイルのコードを見ておきましょう。Flash Professionalで、キャラクタのアニメーションがつくり込まれたシンボルに[アクション]パネルでJavaScriptコードを書きました(前掲図007・図011参照)。どうやらそのシンボルを定義したらしいクラス(lib.pen_animation)が見つかりました(図019)。同じJavaScriptコードが、メソッドとして定められています。

図019■Flash Professionalの[アクション]パネルに書いたコードがクラスのメソッドとして定められている
図019

コードがわかれば、JSファイルの中身を直に書替えることもできなくはありません。けれど、それが他に思わぬ影響を及ぼすこともあり得ます。前述のとおり、パブリッシュされたJSファイルは、基本的に素材として扱うのがよいでしょう。

前項03「CreateJSのコードを書き加える」では、インスタンスのクリックでアニメーションを切替えてみました。しかし、インタラクションが後で変わってくるかもしれないときは、パブリッシュする素材のコンテンツにはコードを含めず、オーサリングのJSファイルで動きを決める方がよいと思われます。

[*4] パブリッシュされるJSファイル名と、クラス名の前に添えられる「名前空間」(デフォルトでは「lib」)は、パブリッシュ設定(前掲図002参照)で変えられます(図020)。

図020■[パブリッシュ設定]に[出力ファイル]と[JavaScript名前空間]が定められている
図020

05 パブリッシュで書出されるファイル

前述のサンプルで用いたFlash Professionalのファイルはシェイプのアニメーションしか含まなかったため、HTMLドキュメントとJSファイルだけが書出されました。ビットマップイメージやサウンドが入っていれば、それらは素材としてパブリッシュされます。デフォルトではイメージは「images」、サウンドは「sounds」というフォルダがJSファイルと同じ場所につくられて、それぞれフォルダの中に書出されます。そのフォルダ名は、[パブリッシュ設定]の[アセット書き出しオプション]で変えられます(前掲図020参照)。

また、前掲コード001では、CreateJSのライブラリJSファイルはCDNから読込んでいます(第1〜3行目)[*5]。これは、[パブリッシュ設定]で[ホストのライブラリ]が選ばれている(デフォルト)ためです(図021)。このチェックを外すと必要なCreateJSのライブラリが、デフォルトでは「libs」というフォルダに書出されます。このフォルダ名は[アセット書き出しオプション]の[CreateJS]に定められています。

図021■[パブリッシュ設定]で[ホストのライブラリ]が選ばれている
図021

[*5] CDNはコンテンツデリバリネットワーク(Contents Delivery Network)の略称で、Webコンテンツをインターネット経由で配信するために最適化されたネットワークのことです。コンテンツ配信網とも呼ばれます。

CreateJSのライブラリはCDNからダウンロードすると速く、同じライブラリを使っていれば異なるサイトでもキャッシュが効きます。ライブラリをサイト内に置かなくて済み、ページの表示も早められます。

作成者: 野中文雄
作成日: 2013年12月6日

Copyright © 2001-2013 Fumio Nonaka.  All rights reserved.