Canvas]ドキュメントは、パブリッシュしたコンテンツがCreateJSを用いてHTML5のCanvasに描画されます。CreateJSなどのJavaScriptコードは、メインタイムラインやムービークリップシンボルのキーフレームに書くことができます。Animateムービー(FLA)ファイルでコンテンツをすべてつくってしまうというのではなく、HTMLドキュメントや外部JavaScript(JS)ファイルと合わせてオーサリングすることが前提です。すると、FLAファイルのフレームとHTMLあるいはJSファイルのどこに、どういうスクリプトを書けばよいのかが問われます。ムービークリップで4桁の数字を示すお題として、4桁の数字をムービークリップシンボルのインスタンスで表します。CreateJSのテキストは、少し機能がかぎられます。ゲームスコアのように数字だけ用いるときは、予めシェイプに分解した0から9までの数字をシンボルに納めておけば、好みのデザインで示せます。そこで、まず4桁の数字のムービークリップシンボル(four_digits)には、数字ひとつの子ムービークリップインスタンスを4つ並べます(図001)。それぞれのインスタンスには、左から連番の名前をつけました(digt0〜digit3)。親インスタンスにも名前(four_digits_mc)をつけておきます。図001■4桁の数字のムービークリップシンボルに数字ひとつのインスタンスを並べるつぎに、ひとつの数字の子ムービークリップシンボル(digit)には、0から9までの数字をフレームに分けて置きます(図002)。CreateJSでは、第1フレームの番号を0として数えますので、フレーム番号と数字が一致します。数字のテキストをシェイプに分解しておけば、環境にかかわらず同じスタイルの数字が示されます。数字がスロットマシンのようにアニメーションしてしまわないように、第1フレームにつぎのJavaScriptコードを書いて止めています。this.stop();図002■0から9までの数字をフレームに分けて置くこのFLAファイルをもとに、CreateJSを用いて4桁の任意の数字を表示します。[パブリッシュ]すると、デフォルトではFLAファイルと同じ名前のHTMLドキュメントおよびJSファイルが書出されます(図003)[*1]。図003■[パブリッシュ]で書出されるHTMLドキュメントとJSファイルJSファイルには、タイムラインやそこに置かれたインスタンスのシンボルをつくるためのJavaScriptコードが書かれています。HTMLドキュメントの<script>要素には、Canvasにステージをつくり、JSファイルから読込んだタイムラインを再現するつぎのようなJavaScriptコードが<script>要素に書込まれます(hidpiスクリーンとレスポンシブ表示対応のコードは省きました)。FLAファイルの中で使われている素材はシェイプだけですので、画像ファイルは書出されません。[パブリッシュ設定]の[詳細]タブで[JavaScriptの詳細オプション]は[ホストのライブラリ]を使う設定にしているので、CreateJSライブラリはCDNから読み込まれます。HTMLドキュメントの<script>要素にJavaScriptコードを書くランダムな4桁の数字を決めて、前述の数字のインスタンスで示すJavaScriptコードはどこに書けばよいでしょうか。それは、HTMLドキュメントの<script>要素または外部JSファイルが基本となります。CreateJSのファーストステップガイド」の「ラベル、サウンド、およびタイムラインのスクリプト」の項)。Pro([筆者注]現Animate)でJavaScriptコードを多用することは推奨しません。...[中略]...タイムラインを制御するコード、タイムラインで行われていることのフィードバックを戻すコード...[中略]...だけに限定するようにしてください。今回のお題なら、FLAファイルの中に前述のタイムラインを止めるコードのほかは書き加えずにつくることができます。ここでは、作業が簡単になるように、前掲のHTMLドキュメントのJavaScriptコードを書替えてゆきます。でき上がりの<script>要素は、後にコード001としてまとめて掲げました。初期設定の関数(init())から呼出される関数(handleComplete())本体に、ステージがクリックされたとき(Stage.stagemousedownイベント)のリスナー関数(setRandomInt())を加えます。4));stage.update();}Stage.stagemousedownイベントのリスナー関数(setRandomInt())は、4桁のランダムな数値を決めて、別に定めるつぎのような関数(setInt())で4桁の数字をインスタンス(four_digits_mc)に示します。数字のインスタンスを引数にしたのは、同じ関数で複数のインスタンスが扱えるようにするためです。数字を文字列にすれば、4桁に満たない数も頭に0加えて4桁で表せます。FLAファイルのメインタイムラインは変数exportRootで参照します。4桁の文字列の数字)数値を文字列の数字に変える関数(intToString())は、別につぎのように定めました。今回桁数は4と決めたものの、第2引数で桁数が変えられるようにします。int_str;}前掲の4桁の数字をインスタンスに示す関数(setInt())は、別に定めた関数(getDigits())から4つの数字の子インスタンスを配列(digits)の戻り値で受取ります。子インスタンスのインスタンス名(digit0〜digit3)は、予め決まっています。4桁の数字のインスタンス(instance)をいくつでも扱えるように、引数として渡しました。数字をインスタンスに示す関数は、配列から取出した子インスタンスに、数字(int)をひとつずつ割当てています。digits;}これで、HTMLドキュメントのステージ(Canvas)をクリックするたびに、4桁のランダムな数字が表れます(図004)。<script>要素に書いたJavaScript全体は、以下のコード001のとおりです。JavaScriptコードがHTMLドキュメントにまとまりましたので、この中身さえ見ればすべての処理が捉えられます。インスタンスのふるまいはシンボルの中のフレームに書くインスタンスのふるまいはシンボルに定め、パーツ(コンポーネント)化するというやり方もあります。コードはHTMLドキュメントと分かれてしまうものの、インスタンスをタイムラインに置きさえすれば、直ちにメソッドで操作できます。逆に、要らなくなったらインスタンスを消すだけで、ふるまいを決めるコードごと除かれます。前掲コード001から4桁の数字のインスタンスのふるまいを分けて、ムービークリップシンボルの中に移してみましょう。HTMLドキュメントの<script>要素からは、以下のようにふたつの関数を除きます。4桁の数字を表す関数(setInt())は、つぎのようにインスタンスに対して呼出すことになります。digits;}*/前掲<script>要素から除いたふたつの関数の処理は、4桁の数字のムービークリップシンボル(four_digits)にフレームアクションとして移し、つぎのように書き替えます(図005)。文字列の数字をひと桁ずつ子インスタンスに定める関数(setInt())は、4桁の数字のインスタンスに対して呼出されますので、引数は文字列の数字のみになります。子インスタンスの配列は、予め変数(digits)に与えておけば済みますので、配列を返す関数(getDigits())が要らなくなります。HTMLドキュメントの<script>要素の中身とFLAファイルのシンボルに書いたフレームアクションは、以下のコード002にまとめました。ムービークリップシンボルからインスタンスを動的につくってステージに置くムービークリップシンボルからインスタンスを動的につくることもできます。コンストラクタはFLAファイルから書き出されたJSファイルの中の変数libに、シンボル名で納められます。前掲コード002に手を加え、4桁の数字のシンボルのコンストラクタ(four_digits)でつぎのようにインスタンス(timer)をつくれば、ステージ左上角に表れます(図006)。Ticker.tickイベントにリスナー関数(getTime())を加えたので、ページを開いてからの経過秒数が示されるようになりました。シンボルをパーツ化すると、このような使い回しもしやすくなるのです。CanvasドキュメントでJavaScriptコードをどこに書くか」を全面的に改訂。