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

HTML5テクニカルノート

Flash Professional CCのHTML5 CanvasドキュメントでJavaScriptコードをどこに書くか

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

Flash Professional CC 13.1から、新たなドキュメント形式として[HTML5 Canvas]が加わりました。そして、フレームには[アクション]パネルでJavaScriptコードが書けます。もっとも、Flashムービー(FLA)ファイルでコンテンツをすべてつくってしまうというのではなく、外部JavaScript(JS)ファイルと合わせてオーサリングすることが前提です。すると、FLAファイルのフレームとJSファイルのどちらに、どういうスクリプトを書けばよいかが問われます。


01 ムービークリップで4桁の数字を示す

お題として、4桁の数字をムービークリップシンボルのインスタンスで表します。CreateJSのテキストはCanvas要素に描くため、今のところかなり機能がかぎられます。ゲームスコアのように数字だけ用いるときは、予めシェイプに分解した0から9までの数字をシンボルに納めておけば、好みのフォントやスタイルで示せます。

そこで、まず4桁の数字のムービークリップシンボル(four_digits)には、数字ひとつの子ムービークリップインスタンスを4つ並べます(図001)。それぞれのインスタンスには、左から連番の名前をつけました(digt0〜digit3)。なお、親インスタンスにも名前(four_digits_mc)をつけておきます。

図001■4桁の数字のムービークリップシンボルに数字ひとつのインスタンスを並べる
図001

つぎに、ひとつの数字の子ムービークリップシンボル(digit)には、0から9までの数字をフレームに分けて置きます(図002)。CreateJSでは、第1フレームの番号を0として数えますので、フレーム番号と数字が一致します。数字のテキストをシェイプに分解しておけば、環境にかかわらず同じスタイルの数字が示されます

図002■0から9までの数字をフレームに分けて置く
図002

このFLAファイルをもとに、HTML5とCanvasを用いて4桁の任意の数字を表示します。今フレームには、スクリプトが何も書かれていません。[パブリッシュ]すると、デフォルトではFLAファイルと同じ名前のHTMLドキュメントおよびJSファイルが書出されます(図003)[*1]。

図003■[パブリッシュ]で書出されるHTMLドキュメントとJSファイル
図003

JSファイルには、タイムラインやそこに置かれたインスタンスのシンボルをつくるためのJavaScriptコードが書かれています。そして、HTMLドキュメントのscript要素には、Canvasにステージをつくり、JSファイルから読込んだタイムラインを再現するつぎのようなコードが書込まれます。

var canvas, stage, exportRoot;

function init() {
  canvas = document.getElementById("canvas");
  exportRoot = new lib.four_digits();

  stage = new createjs.Stage(canvas);
  stage.addChild(exportRoot);
  stage.update();

  createjs.Ticker.setFPS(lib.properties.fps);
  createjs.Ticker.addEventListener("tick", stage);
}

[*1] FLAファイルの中で使われている素材はシェイプだけですので、画像ファイルは書出されません。また、CreateJSは[ホストのライブラリ]を使う設定にしています。

02 外部ファイルにJavaScriptコードを書く

ランダムな4桁の数字を決めて、前述のインスタンスで示すJavaScriptコードはどこに書けばよいでしょうか。それは、外部JSファイルが基本となります。CreateJS開発者のGrant Skinner氏は、FLAファイルのフレームに書くのは、タイムラインの移動などのごく単純なコードのみにかぎるのがよいと述べています(Adobe Developer Connection「Flash Professional Toolkit for CreateJSのファーストステップガイド」の「ラベル、サウンド、およびタイムラインのスクリプト」の項)

Flash ProでJavaScriptコードを多用することは推奨しません。...[中略]...タイムラインを制御するコード、タイムラインで行われていることのフィードバックを戻すコード...[中略]...だけに限定するようにしてください。

今回のお題なら、FLAファイルの中に1行のコードも書かずにつくることができます。ここでは、作業が簡単になるように、前掲のHTMLドキュメントのJavaScriptコードを書替えてゆきます。でき上がりのscript要素は、後にコード001としてまとめて掲げました。まず、初めに呼出される初期設定の関数(init())は、連続したアニメーションを用いませんので、つぎのようにTickerクラスの設定はコメントアウトします。その代わり、ステージがクリックされたとき(Stage.stagemousedownイベント)のリスナー関数(setRandomInt())を加えます(第8行目)。

  1. function init() {
      // createjs.Ticker.setFPS(lib.properties.fps);
      // createjs.Ticker.addEventListener("tick", stage);
  1.   stage.addEventListener("stagemousedown", setRandomInt);
  2. }

Stage.stagemousedownイベントのリスナー関数(setRandomInt())は、4桁のランダムな数値を決めて、別に定めるつぎのような関数(setInt())で4桁の数字をインスタンス(four_digits_mc)に示します(第10〜14行目)。数字のインスタンスを引数にしたのは、同じ関数で複数のインスタンスが扱えるようにするためです。また、数字を文字列にすれば0で始まる数字が表せます。なお、FLAファイルのメインタイムラインは変数exportRootで参照します。

setInt(4桁の数字のインスタンス, 4桁の文字列の数字)

また、数値を文字列の数字に変える関数(intToString())は、別につぎのように定めました(第31〜34行目)。今回桁数は4と決めたものの、第2引数で桁数が変えられるようにしてあります。

intToString(数値, 桁数)
  1. function setRandomInt(eventObject) {
  2.   var randomInt = Math.floor(Math.random() * 10000);
  3.   setInt(exportRoot.four_digits_mc, intToString(randomInt, 4));
  4.   stage.update();
  5. }
  1. function intToString(int, digits) {
  2.   var int_str = String(int + Math.pow(10, digits)).substr(-digits);
  3.   return int_str;
  4. }

4桁の数字をインスタンスに示す関数(setInt())は、別に定めた関数(getDigits())から4つの数字の子インスタンスを配列(digits)で受取ります(第17行目)。子インスタンスのインスタンス名(digit0〜digit3)は、予め決まっています。けれど、4桁の数字のインスタンス(instance)をいくつでも扱えるように設けました。後は、配列から取出した子インスタンスに、数字(int)をひとつずつ割当てています(第19〜22行目)[*2]。

  1. function setInt(instance, int_str) {
  2.   var count = int_str.length;
  3.   var digits = getDigits(instance);
  1.   for (var i = 0; i < count; i++) {
  2.     var int = parseInt(int_str.charAt(i));
  3.     digits[i].gotoAndStop(int);
  4.   }
  1. }
  2. function getDigits(instance) {
  3.   var digits = [instance.digit0, instance.digit1, instance.digit2, instance.digit3];
  4.   return digits;
  5. }

これで、HTMLドキュメントのステージ(Canvas)をクリックするたびに、4桁のランダムな数字が示されます(図004)。script要素に書いたJavaScript全体は、以下のコード001のとおりです。JavaScriptコードがひとつにまとまりましたので、この中身さえ見ればすべての処理が捉えられます。

図004■ステージをクリックするとランダムな4桁の数字が示される
図004

コード001■ステージをクリックするとランダムな4桁の数字を示す
  1. var canvas, stage, exportRoot;
  2. function init() {
  3.   canvas = document.getElementById("canvas");
  4.   exportRoot = new lib.four_digits();
  5.   stage = new createjs.Stage(canvas);
  6.   stage.addChild(exportRoot);
  7.   stage.update();
  8.   stage.addEventListener("stagemousedown", setRandomInt);
  9. }
  10. function setRandomInt(eventObject) {
  11.   var randomInt = Math.floor(Math.random() * 10000);
  12.   setInt(exportRoot.four_digits_mc, intToString(randomInt, 4));
  13.   stage.update();
  14. }
  15. function setInt(instance, int_str) {
  16.   var count = int_str.length;
  17.   var digits = getDigits(instance);
  18.   var length = digits.length;
  19.   for (var i = 0; i < count; i++) {
  20.     var int = parseInt(int_str.charAt(i));
  21.     digits[i].gotoAndStop(int);
  22.   }
  23.   for (var j = count; j < length; j++) {
  24.     digits[j].gotoAndStop(10);
  25.   }
  26. }
  27. function getDigits(instance) {
  28.   var digits = [instance.digit0, instance.digit1, instance.digit2, instance.digit3];
  29.   return digits;
  30. }
  31. function intToString(int, digits) {
  32.   var int_str = String(int + Math.pow(10, digits)).substr(-digits);
  33.   return int_str;
  34. }

[*2] 数字ひとつのムービークリップシンボル(digit)は、第11フレーム(フレーム番号10)に空白キーフレームを加えました(前掲図002参照)。そこで、文字列の数字(int_str)が4桁未満の場合には、残りのインスタンスはその空白キーフレームに飛ばして数字そのものを消します(前掲コード001第23〜25行目)。

  1. function setInt(instance, int_str) {
  2.   var count = int_str.length;
  3.   var digits = getDigits(instance);
  4.   var length = digits.length;
  5.   for (var i = 0; i < count; i++) {
  1.   }
  2.   for (var j = count; j < length; j++) {
  3.     digits[j].gotoAndStop(10);
  4.   }
  5. }

03 インスタンスのふるまいはシンボルの中のフレームに書く

ActionScriptであれば、インスタンスのふるまいはシンボルに定め、パーツ(コンポーネント)化するというやり方もありました。コードは他と分かれてしまうものの、インスタンスをタイムラインに置きさえすれば、直ちにメソッドで操作できます。逆に、要らなくなったらインスタンスを消すだけで、コードごと除かれます。

前掲コード001で4桁の数字のインスタンスのふるまいを、ムービークリップシンボルの中に定めてみましょう。HTMLドキュメントのscript要素は、以下のように書替えます。そして、4桁の数字を表す関数(setInt())は、つぎのようにインスタンスに対して呼出すことになります。

4桁の数字のインスタンス.setInt(4桁の文字列の数字)
  1. function setRandomInt(eventObject) {
  2.   var randomInt = Math.floor(Math.random() * 10000);
      // setInt(exportRoot.four_digits_mc, intToString(randomInt, 4));
  3.   exportRoot.four_digits_mc.setInt(intToString(randomInt, 4));
  4.   stage.update();
  5. }
    /*
    function setInt(instance, int_str) {
      var count = int_str.length;
      var digits = getDigits(instance);
      var length = digits.length;
      for (var i = 0; i < count; i++) {
        var int = parseInt(int_str.charAt(i));
        digits[i].gotoAndStop(int);
      }
      for (var j = count; j < length; j++) {
        digits[j].gotoAndStop(10);
      }
    }
    function getDigits(instance) {
      var digits = [instance.digit0, instance.digit1, instance.digit2, instance.digit3];
      return digits;
    }
    */

前掲コード001から取出した関数(setInt()とgetDigits())の処理は、4桁の数字のムービークリップシンボル(four_digits)にフレームアクションとして移します(図005)。シンボルに合わせて手直ししたスクリプトは、除いたステートメントもコメントに残して、以下のコード002にまとめました。

図005■4桁の数字のムービークリップシンボルにフレームアクションを書く
図005

文字列の数字をひと桁ずつ子インスタンスに定める関数(setInt())は、4桁の数字のインスタンスに対して呼出されますので、引数は文字列の数字のみになります(第3行目)。また、子インスタンスの配列は、予め変数(digits())に与えておけば済みますので、配列を返す関数(getDigits())が要らなくなります。

コード002■4桁の数字のムービークリップシンボルに書いたフレームアクション
  1. var digits = [this.digit0, this.digit1, this.digit2, this.digit3];
  2. this.setInt = setInt;
    // function setInt(instance, int_str) {
  3. function setInt(int_str) {
  4.   var count = int_str.length;
      // var digits = getDigits(instance);
  5.   var length = digits.length;
  6.   for (var i = 0; i < count; i++) {
  7.     var int = parseInt(int_str.charAt(i));
  8.     digits[i].gotoAndStop(int);
  9.   }
  10.   for (var j = count; j < length; j++) {
  11.     digits[j].gotoAndStop(10);
  12.   }
  13. }
    /*
    function getDigits(instance) {
      var digits = [instance.digit0, instance.digit1, instance.digit2, instance.digit3];
      return digits;
    }
    */

ひとつ忘れてならないのが、インスタンスの外から呼出す関数(setInt())を自身(this)のプロパティに定めることです(第2行目)。こうしておかないと、インスタンスを参照して関数が呼出せません(詳しくは、「Flash Professional CCのHTML5 Canvasドキュメントで子インスタンスに定めた関数を呼出す」をお読みください)。

これでシンボルと、そのふるまいを扱うスクリプトがひとつのパーツになりました。ひとつのファイルにJavaScriptコードがすべてまとまっているという見通しは損なわれるものの、使い回しはしやすくなったといえます。プロジェクトの大きさや中身、進め方によって、どちらを選ぶか考えればよいでしょう。


04 インスタンスの初めの表示を定める

外部ファイルとシンボルのどちらにJavaScriptコードを書くにせよ、ひとつ補っておかなければならないことがあります。4桁の数字を表すのはおそらくひとつのパーツにすぎず、コンテンツはフレームでアニメーションするかもしれません。その場合には、Tickerクラスでアニメーションを定めます。

function init() {

  createjs.Ticker.setFPS(lib.properties.fps);
  createjs.Ticker.addEventListener("tick", stage);

}

すると、0から9までの数字をフレームにもった各桁のインスタンスが、ステージをクリックするまで、一斉にスロットマシンのように数字の切り替わるアニメーションになってしまいます。したがって、HTMLドキュメントのscript要素に定められた初期設定の関数(init())から、インスタンスの初めの表示を関数(setInt())で決めておかなければなりません。

function init() {

  exportRoot.four_digits_mc.setInt("0000");
}


作成者: 野中文雄
作成日: 2014年7月27日

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