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

Adobe Flash ActionScript講座 		ActionScript 3.0
パフォーマンスチューニング 		ActionScript 3.0による
三次元表現ガイドブック
■Twitter: @FumioNonaka / Mailing List: ActionScript 3.0

F-siteセミナー「Flashユーザーが取り組むHTML5」

新登場！CreateJSとは？
Date: 2012年5月19日 Product: Flash Professional Platform: All Version: CS6/ActionScript 3.0

    【お品書き】
  • 01 [Toolkit for CreateJS]の正規の使い方
    •
    • 01-01 [Toolkit for CreateJS]からはアセットを書出す
    • 01-02 [Toolkit for CreateJS]の[パブリッシュ]
  • 02 ビットマップを配置する
    • 02-01 タイムラインにビットマップを置いて[Toolkit for CreateJS]で[パブリッシュ]する
    • 02-02 空のタイムラインから[パブリッシュ]したCanvasに外部画像を読込んで描く
    • 02-03 インスタンスの基準点を変えるプロパティ
    • 02-04 インスタンスを水平にスクロールするアニメーション
  • 03 CreateJSでマウスイベントを扱う
    • 03-01 タイムラインに置いたインスタンスにマウスクリックのハンドラを定める
    • 03-02 インスタンスをドラッグする
  • 参考リンク

    • ■サンプルファイル (Zip圧縮約184KB)
    *[Toolkit for CreateJS]の[パブリッシュ]用FLAファイルはCS6形式。他はHTMLとJSおよびアセットファイル。

ActionScript 3.0 Performance Tuning

  

ADC OnAir 5月23日水曜日20:30-22:00
「Stage3Dを学ぼう！Flashで2Dコンテンツ」

「奈緒のトニカクやってみよう！」のコーナーで、Flashアニメーションを[Toolkit for CreateJS]で書出す場合のコツや注意点を実演する予定。

01 [Toolkit for CreateJS]の正規の使い方

01-01 [Toolkit for CreateJS]からはアセットを書出す

[Toolkit for CreateJS]を実際のコンテンツ制作でどう使いこなすかについて、CreateJS Suite開発者のGrant Skinner氏が「Flash Professional Toolkit for CreateJSのファーストステップガイド」で解説している。

  Toolkitは変換用のツールではないという点に注意していただく必要があります。既存のプロジェクトを、1回のボタン操作でHTML5に変換することを想定したツールではありません。これまでのFlashスキルを活用しながら、柔軟性と生産性を備えたワークフローを実現してHTML5で新規プロジェクトを作成することを目的に設計されています(前出「Flash Professional Toolkit for CreateJSのファーストステップガイド」)。

つまり、デザイン側でFlash Professional CS6でHTML5用のアセット(パーツ)をつくって[Toolkit for CreateJS]で書出し、CreateJSのライブラリを使って開発側が仕上げるという流れのようだ。しかし、本稿ではあえてその流れに乗らず、書出されたファイルの中身に手を加えたりしながら、CreateJSの仕組みを斜めから眺めてみたい。

01-02 [Toolkit for CreateJS]の[パブリッシュ]

[Toolkit for CreateJS]で[パブリッシュ]するのは、素材となるインスタンスのアニメーションや背景などが単純に配置されたタイムライン(図001)。基本的なJavaScriptのインタラクションも加えられる。

図001■Flashのタイムラインに配置されたインスタンスや背景のビットマップ
図001

[ウィンドウ]メニューの[その他のパネル]から[Toolkit for CreateJS]パネルを開く(図002)。[パブリッシュ]ボタンで、Flashムービーのコンテンツが<canvas>要素を埋込んだHTMLドキュメントとJavaScriptファイルに変換されるとともに、画像やサウンドなどのアセットおよびCreateJSライブラリが書出される。

図002■[Toolkit for CreateJS]パネル

変換されたHTMLとJavaScriptのファイルはデフォルトではFLAファイルと同じ名前。JSファイルは、タイムライン上のインスタンスやそのアニメーションを再現する。アセットは画像やサウンドに分けてフォルダに書出され、CreateJSライブラリも必要なJavaScriptファイルがフォルダにまとめられる(図003)。

  • FLAファイルと同名.html
  • FLAファイルと同名.js
  • CreateJSライブラリフォルダ
  • 画像フォルダ
  • サウンドフォルダ

図003■[パブリッシュ]されたファイル群
図011

[Toolkit for CreateJS]で書出されたパーツをもとに、CreateJSライブラリなどによりスクリプティングして、HTML5コンテンツに仕上げる(図004)。

図004■でき上がったHTML5コンテンツ
図004


02 ビットマップを配置する

02-01 タイムラインにビットマップを置いて[Toolkit for CreateJS]で[パブリッシュ]する

タイムラインにビットマップをひとつ置いて(図005)、[パブリッシュ]されるファィルを確かめる。

図005■タイムラインにビットマップを置く
図005左 図005右

アセットとして画像(PNG)ファイルが書出される。CreateJSライブラリのフォルダにはEaselJSとPreloadJSが納められた(図006)。

図006■書出された画像とCreateJSライブラリのファイル
図006

HTMLファイルを開けてみると、PreloadJSで画像を先読みするスクリプトが加わっているため、これではまだわかりにくい(図007)。

図007■HTMLファイルはPreloadJSで画像を先読みしている
図007

02-02 空のタイムラインから[パブリッシュ]したCanvasに外部画像を読込んで描く

タイムラインに何もなくても、[Toolkit for CreateJS]は<canvas>要素とEaselJSが組込まれた最小限のファイルを[パブリッシュ]する(コード001)[*1]。入れ子の階層(表示リスト)のトップにはStageオブジェクトがつくられ、addChild()メソッドで子インスタンスが加えられる。

コード001■<canvas>要素とEaselJSが組込まれたHTMLドキュメント
  1. <head>
  2. <meta charset="UTF-8">
  3. <title>CreateJS export from sample.fla</title>
  4. <script src="libs/easeljs-0.4.2.min.js"></script>
  5. <script src="sample.js"></script>
  6. <script>
  7. var canvas, stage, exportRoot;
  8. function init() {
  9.   canvas = document.getElementById("canvas");
  10.   exportRoot = new lib.sample();
  11.   stage = new Stage(canvas);
  12.   stage.addChild(exportRoot);
  13.   stage.update();
  14.   Ticker.setFPS(24);
  15.   Ticker.addListener(stage);
  16. </script>
  17. </head>
  18. <body onload="init();" style="background-color:#D4D4D4">
  19.   <canvas id="canvas" width="240" height="180" style="background-color:#ffffff"></canvas>
  20. </body>

addChild()メソッドでStageオブジェクトの子に加えられているインスタンスの替わりに、外部画像ファイルを置いてみる。このインスタンスは、Bitmapクラスでつくる。位置座標はプロパティxとyで定められる。

new Bitmap(画像ファイルのURL)

つぎのコード002(<script>要素)は、外部から読込んだ画像のイメージをCanvasの中央に描く。ただし、画像の基準点は左上角になる(図008)。

コード002■外部画像ファイルを読込んでCanvasに描く
  1. <script src="libs/easeljs-0.4.2.min.js"></script>
    <!--
    <script src="sample.js"></script>
    -->
  2. <script>
  3. var canvas, stage, exportRoot;
  4. function init() {
  5.   canvas = document.getElementById("canvas");
      // exportRoot = new lib.sample();
  6.   exportRoot = new Bitmap("images/PenBitmap.png");
  7.   exportRoot.x = canvas.width / 2;
  8.   exportRoot.y = canvas.height / 2;
  9.   stage = new Stage(canvas);
  10.   stage.addChild(exportRoot);
  11.   stage.update();
  12.   Ticker.setFPS(24);
  13.   Ticker.addListener(stage);
  14. }
  15. </script>

図008■読込んだ画像がCanvas中央を基準点にして描かれる
図008

02-03 インスタンスの基準点を変えるプロパティ

EaselJSには、インスタンスの基準点を変えるプロパティとしてregXとregYがある。画像の幅と高さの半分の値をそれぞれのプロパティに設定すれば、基準点はインスタンスの中心になる。読込んだ画像(Imageオブジェクト)の参照は、Bitmapインスタンスのimageプロパティで得られる。つぎのコード003のように2行のステートメントを加えれば、インスタンスの中心を基準点に直して、Canvas中央に描くことができる(図009)[*2]。

コード003■Bitmapインスタンスの中心を基準点にする
  1. var canvas, stage, exportRoot;
  2. function init() {
  3.   canvas = document.getElementById("canvas");
  4.   exportRoot = new Bitmap("images/PenBitmap.png");
  5.   exportRoot.x = canvas.width / 2;
  6.   exportRoot.y = canvas.height / 2;
  7.   exportRoot.regX = exportRoot.image.width / 2;
  8.   exportRoot.regY = exportRoot.image.height / 2;
  9.   stage = new Stage(canvas);
  10.   stage.addChild(exportRoot);
  11.   stage.update();
  12.   Ticker.setFPS(24);
  13.   Ticker.addListener(stage);
  14. }

図009■読込んだ画像がCanvasの中央に描かれる
図009

02-04 インスタンスを水平にスクロールするアニメーション

CreateJSは、Flashと同じフレームという考え方をアニメーションに採入れている。そのときに使われるのがTickerというオブジェクトだ。Tickerを働かせると、対象となるオブジェクトに定めたtick()という関数が毎フレーム呼出される[*3]。

  1.   Ticker.setFPS(24);
  2.   Ticker.addListener(stage);

つぎのコード004は<script>要素の中にticker()関数(イベントハンドラ)を定め、Bitmapインスタンスを水平にスクロールする(図010)。なお、インスタンスがステージの端を超えると、反対側の端に移動している(第15〜21行目)。

コード004■インスタンスを水平にスクロールする
  1. var canvas, stage, exportRoot;
  2. function init() {
  3.   canvas = document.getElementById("canvas");
  4.   exportRoot = new Bitmap("images/PenBitmap.png");
  5.   exportRoot.x = canvas.width / 2;
  6.   exportRoot.y = canvas.height / 2;
  7.   exportRoot.regX = exportRoot.image.width / 2;
  8.   exportRoot.regY = exportRoot.image.height / 2;
  9.   stage = new Stage(canvas);
  10.   stage.addChild(exportRoot);
  11.   stage.update();
  12.   Ticker.setFPS(24);
      // Ticker.addListener(stage);
  13.   Ticker.addListener(window);
  14. }
  15. function tick(){
  16.   exportRoot.x -= 5;
  17.   if (exportRoot.x < 0) {
  18.     exportRoot.x += canvas.width;
  19.   }
  20.   stage.update();
  21. }

図010■読込まれた画像が水平にスクロールする
図010

補っておくべきことがふたつある。第1に、CreateJSでは画面を書替えるためには、必ずStageオブジェクトに対してupdate()メソッドを呼出さなければならない(コード004第11および20行目)。

第2に、ticker()関数を定めたオブジェクトは、Ticker.addListener()メソッドの引数に渡してリスナーに加えないと、関数が呼出されない。<script>要素に関数を定めたときは、windowオブジェクトを引数として渡す(コード004第13行目)。

[*1] 一緒に書出されるJSファイルは、実質空になる(図011)。

図011■FLAファイルと同名で書出されたJSファイル
図011

[*2] 画像ファイルの読込みに時間がかかると、幅や高さがとれず、中央に描かれない。そのときは、ブラウザで再読み込みすると、データがキャッシュされるので正しく表示される。漏れなく扱うには、PreloadJSでファイルを先読みする(「PreloadJSで外部画像ファイルの読込みを待つ」参照)。

[*3] Ticker.setFPS()メソッドはフレームレートを定める。

03 CreateJSでマウスイベントを扱う

03-01 タイムラインに置いたインスタンスにマウスクリックのハンドラを定める

Flashのタイムラインにアニメーションするムービークリップインスタンスを置いて、そのマウスクリックで行う処理をCreateJSで書いてみる。まず、予めFlashでインスタンスには名前をつけておく(図012)。

図012■Flashのタイムラインに置いたインスタンスに名前をつける
図012左

 図012右

[Toolkit for CreateJS]で[パブリッシュ]してJSファイルを開くと、ステージ上のインスタンスとそのシンボルを扱うためのCreateJSのスクリプトが書かれている(図012)。インスタンスのアニメーションのほか、シェイプもJavaScriptで描かれる。Flashでつけたインスタンス名はそのまま使われている。

図012■JSファイルはステージ上のインスタンスとそのシンボルを扱う
図012

Flashのタイムラインの階層(表示リスト)はCreateJSで同じように扱える。Stageオブジェクトに加えられたインスタンスがメインタイムラインに当たるので、そこからターゲットパスを定めればインスタンスが参照できる。

exportRoot = new lib.sample();   // メインタイムライン
stage = new Stage(canvas);
stage.addChild(exportRoot);

インスタンスをクリックしたときの処理は、onClickイベントに関数(ハンドラ)を定めて行う。

クリックするオブジェクト.onClick = 関数

以下のコード005は、Flashのタイムラインに置いたムービークリップインスタンスがクリックされたときのイベントハンドラを定めた(第9行目)。インスタンスは扱いやすいように、変数を定めて代入した(第2および8行目)。イベントハンドラの関数(clickHandler())は、インスタンスの位置を下げている(第14〜17行目)。これでインスタンスは、クリックされるたびに位置を下げて行く(図013)。

コード005■インスタンスをクリックすると位置が下がる
  1. var canvas, stage, exportRoot;
  2. var my_mc;   // 変数追加
  3. function init() {
  4.   canvas = document.getElementById("canvas");
  5.   exportRoot = new lib.sample();
  6.   stage = new Stage(canvas);
  7.   stage.addChild(exportRoot);
  8.   my_mc = exportRoot.my_mc;   // ターゲットパスで参照
  9.   my_mc.onClick = clickHandler;
  10.   stage.update();
  11.   Ticker.setFPS(24);
  12.   Ticker.addListener(stage);
  13. }
  14. function clickHandler() {
  15.   my_mc.y += 10;
  16. }

図013■インスタンスをクリックするたびに位置が下がる
図013

イベントハンドラ(コード005第14〜16行目)の中にStageオブジェクトに対するupdate()メソッドの呼出しがないくてよいのか、疑問に感じたもしれない。しかし、[Toolkit for CreateJS]から[パブリッシュ]したときすでにインスタンスがアニメーションしていたことから想像できるとおり、内部的にフレームごとの画面の描替え(update()メソッドの呼出し)はすでに組込まれていたのだ[*4]。

03-02 インスタンスをドラッグする

マウスドラッグはonMouseMoveイベントのハンドラで扱う。ただし、そのイベントはステージに表示されているインスタンスではなく、MouseEventオブジェクトが受取る。そして、MouseEventオブジェクトは、クリック(onClick)などのマウスイベントに定めたハンドラに引数のイベントオブジェクトとして渡される。つまり、マウスイベントのハンドラが受取ったイベントオブジェクトにonMouseMoveイベントのハンドラを定めるのだ。

ドラッグが始まるのは、マウスボタンを押したそのときだ。これはonPressイベントになり、ハンドラはマウス操作をするインスタンスに設定する。さらに、マウスボタンを放すイベントはonMouseUpで、こちらはイベントオブジェクトにハンドラを定めなければならない。下表001にまとめておこう。

表001■マウスイベントとハンドラ設定先
マウスイベント マウス操作 ハンドラの設定先
onClick マウスボタンを押して放す インスタンス
onPress マウスボタンを押す インスタンス
onMouseMove マウスを動かす イベントオブジェクト
onMouseUp マウスボタンを放す イベントオブジェクト

マウスポインタの座標は、イベントハンドラが受取ったMouseEventオブジェクトのstageXとstageYプロパティで調べる。それぞれの値は、ステージから見た座標となる。

すると、<script>要素に書くインスタンスをドラッグするJavaScriptは、以下のコード006のとおりだ。インスタンスの上でマウスボタンを押したとき(onPressイベント)、ドラッグを始めるハンドラ(pressHandler())を呼出す(第9行目)。

ドラッグを始める関数(pressHandler())は、インスタンスをドラッグするための関数(dragHandler())とその終了の関数(releaseHandler())を、それぞれMouseEventオブジェクトのonMouseMoveおよびonMouseUpイベントのハンドラに定めている(第15〜16行目)。

そして、ドラッグ動作のイベントハンドラ(dragHandler())は、インスタンスの位置をマウスポインタの座標に動かす(コード006第15〜16行目)。これで、インスタンスがドラッグできる(図014)[*5]。

コード006■インスタンスをドラッグする
  1. var canvas, stage, exportRoot;
  2. var my_mc;
  3. function init() {
  4.   canvas = document.getElementById("canvas");
  5.   exportRoot = new lib.sample();
  6.   stage = new Stage(canvas);
  7.   stage.addChild(exportRoot);
  8.   my_mc = exportRoot.my_mc;
  9.   my_mc.onPress = pressHandler;
  10.   stage.update();
  11.   Ticker.setFPS(24);
  12.   Ticker.addListener(stage);
  13. }
  14. function pressHandler(eventObject) {
  15.   eventObject.onMouseMove = dragHandler;
  16.   eventObject.onMouseUp = releaseHandler;
  17. }
  18. function dragHandler(eventObject) {
  19.   my_mc.x = eventObject.stageX;
  20.   my_mc.y = eventObject.stageY;
  21. }
  22. function releaseHandler(eventObject) {
  23.   this.onMouseMove = this.onMouseUp = null;
  24. }

図014■インスタンスがドラッグできる
図014

onMouseMoveイベントは、ハンドラを定めたインスタンスの上でマウスボタンを押したまま動かしたときに起こる。したがって、マウスボタンを放したとき(onMouseUpイベント)の処理はとくに加えなくても、ドラッグ&ドロップは正しく行える。けれど、ドラッグを始める関数(pressHandler())で設定したハンドラがそのまま残っていると、後で予期しない問題の原因にもなりかねない。

そこで、onMouseUpイベントのハンドラ(releaseHandler())は、要らなくなったハンドラのイベントにnullを代入して、イベントハンドラの設定を解除している(コード006第23行目)[*6]。これで、コンテンツは初めの状態に戻る。

[*4] 正確には、Ticker.addListener()メソッドでリスナーにStageオブジェクトを加えたことにより、Stageクラスの内部的に定められたtick関数が呼出される。そのticker関数がStageオブジェクトのupdate()メソッドを呼出している。

[*5] コード006では、インスタンスをドラッグするとインスタンスの基準点がマウスポインタの座標になる。初めにマウスボタンが押された座標を保ちたいときは、基準点とマウス座標の差を補正しなければならない。詳しくは、「EaselJSのマウスクリックとドラッグ&ドロップ」をお読みいただきたい。

[*6] イベントハンドラ(releaseHandler())の中のthis(コード006第23行目)は、ハンドラが設定されたオブジェクトつまりイベントオブジェクトを参照する(第15〜16行目)。詳しくは後掲「参考リンク」の「JavaScriptでオブジェクトに設定した関数のスコープ」を参照。

参考リンク

Adobe Flash Professional Toolkit for CreateJS

CreateJS Suite

Canvas

JavaScript

作成者: 野中文雄
作成日: 2012年5月21日
Copyright © 2001-2012 Fumio Nonaka.  All rights reserved.