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

HTML5 / Flash ActionScript講座 		ActionScript 3.0
プロフェッショナルガイド 		ActionScript 3.0による
三次元表現ガイドブック
■Twitter: @FumioNonaka / Facebook Page: CreateJS

JaGra PROFESSIONAL SCHOOL Seminar

『WebクリエイターのためのCreateJSスタイルブック』出版記念特別セミナー
Date: 2013年7月12日 Technique: HTML5 and JavaScript Library: CreateJS

CreateJSを使ったアニメーションとマウスインタラクション

 CreateJS Style Book for Web Creators

CreateJS Suite は、HTML5 の Canvas要素を使って、ダイナミックで インタラクティブな表現ができるJavaScriptの統合ライブラリだ。CreateJSのライブラリはどのように使うのか、そしてどうい う表現ができるのかを説明しよう。[追記: 2013年7月29日] YouTubeに録画ビデオが公開されたので以下にリンクした。

CreateJS Style Book for Web Creators in YouTube

01 EaselJSはじめの一歩

01-01 EaselJSのJavaScriptファイルとCanvasをHTMLドキュメントに加える

EaselJS はCanvasを用いてオブジェクトを描く。canvas要素をbody要素の中に書くと、透明な矩形領域がつくられ、JavaScriptで描画できる。canvas要素の属性widthとheightで幅と高さを定める。また、JavaScriptでcanvas要素を扱うためにはid属性を加える。

<canvas id=canvas要素名 width=幅 height=高さ>

つぎのコードは幅240、高さ180ピクセルのcanvas要素を、"myCanvas"というid属性で定める。もっとも、canvas要素そのものは透明な矩形領域なので、このままではブラウザウィンドウには何も表れない。

<canvas id="myCanvas" width="240" height="180"></canvas>

EaselJSライブラリは、CreateJSのサイトからダウンロードしてscript要素に定める。ここでは、「CDN」からJavaScript(JS)ファイルを読み込むことにする(図001)。

図001■「DOWNLOAD EASELJS」のページ
図001

script要素のscr属性に、JSファイルのパスを書き加える。つぎのscript要素でEaselJS 0.6.1が読込める。

<script src="http://code.createjs.com/easeljs-0.6.1.min.js"></script>

文書全体を読込み終えたとき初めに行う処理は、body要素のonload属性にイベントハンドラとして定める。イベントハンドラの関数では、canvas要素のid属性値("myCanvas")から参照をdocument.getElementById()メソッドで取得しておく。

<head>
<!-- ...[中略].. -->
<script src="http://code.createjs.com/easeljs-0.6.1.min.js"></script>
<script>
function initialize() {
  var canvasElement = document.getElementById("myCanvas");
  // CreateJSのスクリプト
}
</script>
</head>
<body onLoad="initialize()">
  <canvas id="myCanvas" width="240" height="180"></canvas>
</body>

01-02 ステージにShapeインスタンスを置く

まず、CanvasにCreateJSのStageオブジェクトをつくる。インスタンスのつくり方はお約束どおり、new演算子でStageクラスのコンストラクタを呼び出す。引数はすでに参照を得ておいたscript要素だ。ただし、CreateJSのすべてのクラスは、名前空間「createjs」を添えて参照しなければならない。

new createjs.Stage(canvas要素)

クラス名の重複がないときや、名前空間のない古いCreateJSのサンプルを見るときは、CreateJSライブラリの読み込み前に、つぎのおまじないを加えると名前空間が省ける。

<script>
var createjs = window;
</script>
<script src="http://code.createjs.com/easeljs-0.6.1.min.js"></script>

本稿では、わかりやすさも考えて、名前空間は省いた書き方を用いる。上記のおまじないのscript要素があることを頭においてほしい。

new Stage(canvas要素)

EaselJSは、Canvasに表示されるオブジェクトに親子の入れ子関係をつくり、その階層全体を「表示リスト」(display list)としてまとめる。表示リストはアニメーションやインタラクションを扱うのに都合の良い仕組みだ。表示リストの頂点はStageオブジェクトで、ベクターグラフィックスの描けるShapeやビットマップを納めたBitmapといったオブジェクトのほか、子オブジェクトがもてるContainerオブジェクトによりツリー構造をなす(図002)。

図002■Stageオブジェクトを頂点に表示リストの階層がつくられる
図002

Stageオブジェクトの表示リストにShapeオブジェクトを子として加える。Shapeオブジェクトには、次項でベクターグラフィックスを描く。インスタンスは、これもお約束どおり、Shape()コンストラクタでつくる。

new Shape()

Stageクラスは、表示リストをもつContainerクラスのサブクラスだ。子(DisplayObjectインスタンスを表示リストに加えるには、Container.addChild()メソッドの引数に子インスタンスを渡して呼出す。

親オブジェクト.addChild(小オブジェクト)

以下のコード001は、Stageオブジェクトの表示リストに、ShapeインスタンスをContainer.addChild()メソッドで加えている(第9〜11行目)。もっとも、Shapeオブジェクトにはまだベクターグラフィックスが描かれていないので、Canvasには何も表れない。そこで、alert()メソッドでインスタンスができたことを確かめた(図003)。

コード001■Stageオブジェクトの表示リストにShapeインスタンスを加える
  1. <script>
  2. var createjs = window;
  3. </script>
  4. <script src="http://code.createjs.com/easeljs-0.6.1.min.js"></script>
  5. <script>
  6. var stage;
  7. function initialize() {
  8.   var canvasElement = document.getElementById("myCanvas");
  9.   stage = new Stage(canvasElement);
  10.   var myShape = new Shape();
  11.   stage.addChild(myShape);
  12.   alert(myShape);
  13. }
  14. </script>

図003■警告ダイアログボックスにShapeオブジェクトが示される
図003


02 EaselJSの描画とアニメーション

02-01 Graphicsオブジェクトのメソッドで塗りの円を描く

Shapeインスタンスに青い塗りの円を描いてみる。描画に用いるのはGraphicsオブジェクトで、ShapeインスタンスのShape.graphicsプロパティから参照が得られる。塗りの色はGraphics.beginFill()メソッドで決める。引数のカラーはHTMLと同じ文字列で渡す。円はGraphics.drawCircle()メソッドで描く。引数は3つの数値で、円の中心のxy座標と半径だ。

Graphicsオブジェクト.beginFill(カラー)

Graphicsオブジェクト.drawCircle(x座標, y座標, 半径)

円の描画は関数(draw())として定める。引数にはGraphicsオブジェクトを渡す。後にスクリプト全体を掲げるコード002はShapeオブジェクトに、中心が座標(0, 0)で半径40ピクセルの円を青い塗りで描く。その中から描画に関わるコードをつぎに抜き書きした。

  1. var stage;
  2. function initialize() {
  1.   stage = new Stage(canvasElement);
  2.   var myShape = new Shape();
  3.   stage.addChild(myShape);
  1.   draw(myShape.graphics);
  2. }
  3. function draw(myGraphics) {
  4.   myGraphics.beginFill("#0000FF");
  5.   myGraphics.drawCircle(0, 0, 40);
  6.   stage.update();
  7. }

ふたつ説明を補う。第1は、Stage.update()メソッドの呼出だ(第14行目)。Canvasへの描画は負荷の高い処理のため、Canvasを描き替えるには原則としてStage.update()メソッドを呼出さなければならない。

Stageオブジェクト.update()

第2に、描画の関数(draw())で円が描かれる位置だ。Stageオブジェクトの表示リストに加えられたShapeインスタンスは、デフォルトではCanvasの座標(0, 0)つまり左上角に置かれるため、円の中心がCanvas左上角になってしまう。そこで、つぎのコード002は、Shapeインスタンスの座標をCanvasの中央に動かしている(第7〜8行目)。これで、青い塗りの円は、Canvasの真ん中に置かれる(図004)。

コード002■Shapeインスタンスから取出したGraphicsオブジェクトに円を描く
  1. var stage;
  2. function initialize() {
  3.   var canvasElement = document.getElementById("myCanvas");
  4.   stage = new Stage(canvasElement);
  5.   var myShape = new Shape();
  6.   stage.addChild(myShape);
  7.   myShape.x = canvasElement.width / 2;
  8.   myShape.y = canvasElement.height / 2;
  9.   draw(myShape.graphics);
  10. }
  11. function draw(myGraphics) {
  12.   myGraphics.beginFill("#0000FF");
  13.   myGraphics.drawCircle(0, 0, 40);
  14.   stage.update();
  15. }

図004■Canvasの真ん中に青い円が描かれた
図004


02-02 ランダムな塗りの星形を描く

星形はGraphics.drawPolyStar()メソッドで描く。このメソッドは、つぎのように6つの引数をとる。初めの3つ、xy座標と山の半径はよいだろう。第4引数が星の頂点数だ。第5引数は、谷の深さを0以上1未満の小数値で定める。数値が大きいほど、谷が深くなる(図005)。0を渡すと谷はなくなって、正多角形が描ける。第6引数は、星形を描き始める頂点の角度だ。時計の12時の位置をてっぺんにするには、度数で-90を渡す。

Graphicsオブジェクト.drawPolyStar(x座標, y座標, 半径, 頂点数, 谷の深さ, 起点角)
図005■異なる谷の深さで描かれた5頂点の星形

図005左
0.8

図005中央
0.6

図005右
0

すると、前掲コード002の描画の関数(draw())をつぎのように書替えると、Shapeインスタンスの中心座標(0, 0)の位置に半径40ピクセルで5頂点の星形が描ける(図006)。

function draw(myGraphics) {
  myGraphics.beginFill("#0000FF");
  // myGraphics.drawCircle(0, 0, 40);
  myGraphics.drawPolyStar(0, 0, 40, 5, 0.6, -90);
  stage.update();
}

図006■Canvasの真ん中に星形が描かれた
図006

さらに、塗り色をランダムに変えてみたい。カラー値は整数だ。最小値から最大値までのランダムな整数は、Mathクラスのメソッドを用いて、つぎの式で求められる。

Math.floor(Math.random() * (最大値 - 最小値 + 1)) + 最小値

ところが、Graphicsクラスのメソッドには、カラーを文字列として渡さなければならない。静的メソッドGraphics.getRGB()にカラー値の整数を渡すと、そのカラーを示す文字列にして返してくれる。

Graphics.getRGB(カラーの整数値)

こうして、ランダムな塗り色で星形を描く関数(myShape())に書替えたのが、つぎのコード003だ。HTMLドキュメントをロードし直すたびに、星形の塗り色が変わる。

コード003■Shapeオブジェクトにランダムな塗りの星形を描く
  1. var stage;
  2. function initialize() {
  3.   var canvasElement = document.getElementById("myCanvas");
  4.   stage = new Stage(canvasElement);
  5.   var myShape = new Shape();
  6.   stage.addChild(myShape);
  7.   myShape.x = canvasElement.width / 2;
  8.   myShape.y = canvasElement.height / 2;
  9.   draw(myShape.graphics);
  10. }
  11. function draw(myGraphics) {
  12.   var randomNumber = Math.floor(Math.random() * 0xFFFFFF);
  13.   var randomColor = Graphics.getRGB(randomNumber);
  14.   myGraphics.beginFill(randomColor);
  15.   myGraphics.drawPolyStar(0, 0, 40, 5, 0.6, -90);
  16.   stage.update();
  17. }

02-03 EaselJSを使ったスクリプトによるアニメーション

EaselJSのTickerクラスは、決まった間隔でTicker.tickイベントを送る。静的メソッドTicker.addEventListener()でリスナー関数を登録すると、その関数が一定間隔で呼出される。

Ticker.addEventListener("tick", リスナー関数)

前掲コード003にTickerクラスによるアニメーションの仕組みを加え、Canvasに描いた星形を回したのが後に掲げるコード004だ。新たに加えたスクリプトをつぎに抜書きした。まず、初期設定の関数(initialize())にTicker.addEventListener()メソッドの呼出しを加え、Ticker.tickイベントにリスナー関数(rotate())を加えた(第11行目)。

リスナー関数(rotate())は、星形のShapeオブジェクトをDisplayObject.rotationプロパティで回している(第21行目)。プロパティ値の単位は度数だ。なお、この関数からShapeオブジェクトを扱えるよう、変数(myShape)は関数の外で宣言した(第2行目)。

  1. var myShape;
  2. function initialize() {
  1.   myShape = new Shape();
  1.   Ticker.addEventListener("tick", rotate);
  2. }
  1. function rotate() {
  2.   myShape.rotation += 5;
  3.   stage.update();
  4. }

そして、アニメーションさせるリスナー関数(rotate())の最後に、忘れていけないのがStage.update()メソッドの呼出しだ(第22行目)。これで、Canvasに描いた星形が回るアニメーションになる。スクリプト全体は、つぎのコード004のとおりだ。

コード004■Tickerクラスでオブジェクトをアニメーションさせる
  1. var stage;
  2. var myShape;
  3. function initialize() {
  4.   var canvasElement = document.getElementById("myCanvas");
  5.   stage = new Stage(canvasElement);
  6.   myShape = new Shape();
  7.   stage.addChild(myShape);
  8.   myShape.x = canvasElement.width / 2;
  9.   myShape.y = canvasElement.height / 2;
  10.   draw(myShape.graphics);
  11.   Ticker.addEventListener("tick", rotate);
  12. }
  13. function draw(myGraphics) {
  14.   var randomNumber = Math.floor(Math.random() * 0xFFFFFF);
  15.   var randomColor = Graphics.getRGB(randomNumber);
  16.   myGraphics.beginFill(randomColor);
  17.   myGraphics.drawPolyStar(0, 0, 40, 5, 0.6, -90);
  18.   stage.update();
  19. }
  20. function rotate() {
  21.   myShape.rotation += 5;
  22.   stage.update();
  23. }

03 TweenJSを使ったトゥイーンアニメーション

03-01 簡単なトゥイーンアニメーション

TweenJSライブラリを使って、まずは簡単なトゥイーンアニメーションをつくろう。前述コード003「Shapeオブジェクトにランダムな塗りの星形を描く」をもとに、書替えることにする。あとのスクリプティングをしやすくするため、つぎの抜書きのように少し手直ししておく(行番号は後に全体を掲げるコード005にもとづく)。変数(nWidthとnHeight、およびnRadius)を増やした(第8〜10行目)ほか、Shapeインスタンスの垂直位置をCanvasの上端にした(第19行目)。

  1. var nWidth;
  2. var nHeight;
  3. var nRadius = 40;
  4. function initialize() {
  5.   var canvasElement = document.getElementById("myCanvas");
  1.   var myShape = new Shape();
  2.   nWidth = canvasElement.width;
  3.   nHeight = canvasElement.height;
  1.   myShape.x = nWidth / 2;
  2.   myShape.y = -nRadius;
  3.   draw(myShape.graphics);
  1. }
  1. function draw(myGraphics) {
  1.   myGraphics.drawPolyStar(0, 0, nRadius, 5, 0.6, -90);
  1. }

Shapeインスタンスにトゥイーンアニメーションを加える。まず、TweenJSを使ってトゥイーンアニメーションさせるため、ライブラリのJavaScript(JS)ファイルをscript要素で読込む(第5行目)。

  1. <script src="http://code.createjs.com/tweenjs-0.4.1.min.js"></script>

TweenJSクラスそのものは、プロパティ値を刻々と変えるだけだ。アニメーションとして表示するには、Ticker.tickイベントのリスナー関数(tick())でStage.update()メソッドを呼出して画面を描替えなければならない(第28〜30行目)。

トゥイーンを定める関数(setTween())は、インスタンスにごく簡単なアニメーションを加える。そのために用いるのが、Tween()コンストラクタとTween.to()メソッドのふたつだ。

  1. Tween()コンストラクタでトゥイーンするインスタンスと基本設定を定める。
  2. Tween.to()メソッドにトゥイーンするプロパティとその最終的な値、間隔、イージングの仕方を与える。

Tween()コンストラクタには、第1引数でトゥイーンするオブジェクトを定める。また、第2引数に、必要があれば初期設定のプロパティをObjectインスタンスに納めて渡す。。

new Tween(対象オブジェクト, 初期設定Object)

そして、Tween.to()メソッドには、第1引数にトゥイーンするプロパティ値のObjectインスタンス、第2引数はその間隔、第3引数にはイージングの関数を渡す。さまざまなイージングの関数が、Easeクラスに定められている[*1]。

Tweenオブジェクト.to(プロパティ値のObject, 間隔, イージング関数)

Tween.to()メソッドの第1引数には、ふたつのプロパティyとrotationをObjectインスタンスに納めて、インスタンスをCanvasの下端まで垂直に動かしながら360度回す。また、第2引数のアニメーションの間隔は5秒(5000ミリ秒)だ。そして、第3引数のイージングとして、トゥイーンの最後にバウンドする静的メソッドEase.bounceOut()を用いた(第26行目)。

  1. function initialize() {
  1.   setTween(myShape);
  2.   Ticker.addEventListener("tick", tick);
  3. }
  4. function setTween(target) {
  5.   var myTween = new Tween(target);
  6.   myTween.to({y: nHeight - nRadius, rotation:360}, 5000, Ease.bounceOut);
  7. }
  8. function tick() {
  9.   stage.update();
  10. }

これで星形のインスタンスが上から回りながら落ちてきて、下で弾むトゥイーンアニメーションになる(図007)。

図007■星形のインスタンスが回りながら落ちて弾む
図007上

図007下

コード005■インスタンスを回しながら垂直に落として弾ませるトゥイーンアニメーション
  1. <script>
  2. var createjs = window;
  3. </script>
  4. <script src="http://code.createjs.com/easeljs-0.6.1.min.js"></script>
  5. <script src="http://code.createjs.com/tweenjs-0.4.1.min.js"></script>
  6. <script>
  7. var stage;
  8. var nWidth;
  9. var nHeight;
  10. var nRadius = 40;
  11. function initialize() {
  12.   var canvasElement = document.getElementById("myCanvas");
  13.   stage = new Stage(canvasElement);
  14.   var myShape = new Shape();
  15.   nWidth = canvasElement.width;
  16.   nHeight = canvasElement.height;
  17.   stage.addChild(myShape);
  18.   myShape.x = nWidth / 2;
  19.   myShape.y = -nRadius;
  20.   draw(myShape.graphics);
  21.   setTween(myShape);
  22.   Ticker.addEventListener("tick", tick);
  23. }
  24. function setTween(target) {
  25.   var myTween = new Tween(target);
  26.   myTween.to({y: nHeight - nRadius, rotation:360}, 5000, Ease.bounceOut);
  27. }
  28. function tick() {
  29.   stage.update();
  30. }
  31. function draw(myGraphics) {
  32.   var randomNumber = Math.floor(Math.random() * 0xFFFFFF);
  33.   var randomColor = Graphics.getRGB(randomNumber);
  34.   myGraphics.beginFill(randomColor);
  35.   myGraphics.drawPolyStar(0, 0, nRadius, 5, 0.6, -90);
  36.   stage.update();
  37. }
  38. </script>

[*1] Easeクラスに備わるさまざまなイージングの静的メソッドについては、TwweenJSのサイトに掲げられた「DEMOS」(デモ)の「SPARK TABLE」で、それぞれの値の変わり方がグラフで確かめられる(図008)。

図008■Easeクラスのイージングのメソッドによる値の変化が確かめられる「SPARK TABLE」
図008

03-03 複数のトゥイーンを組合わせる

TweenJSのトゥイーンはいくつも組合わせられる。星のShapeインスタンスが落ちて完全に弾み終わったら、1秒「ため」をつくり、その後フェードアウトしてみよう。Tweenインスタンスに定めたトゥイーンは、「キュー」というリストに納められて順に実行される。だから、アニメーションさせたい順に、トゥイーンを続けざまに加えて構わない。

トゥイーンの「ため」は、Tween.wait()メソッドに待ち時間を渡して定める。

Tween.wait(待ち時間)

以下のコード006に、1秒の待ちと、2.5秒のフェードアウトの(alphaプロパティを0にする)トゥイーンを加えた(第21〜22行目)。フェードアウトのイージングに定めたEase.circIn()メソッドは値を、始めはゆっくり、次第に速く変えていく前掲図008参照)。これでバウンドし終えたShapeインスタンスが1秒そのままで、その後2.5秒かけてフェードアウトする(図009)。

図009■バウンドし終えた星のインスタンスが1秒後にフェードアウトする
図009左   図009右

  1. function setTween(target) {
  2.   var myTween = new Tween(target, {loop:true});
  3.   myTween.to({y: nHeight - nRadius, rotation:360}, 5000, Ease.bounceOut);
  4.   myTween.wait(1000);
  5.   myTween.to({alpha:0}, 2500, Ease.circIn);
  6. }

さらに、Tween()コンストラクタに第2引数を加えた(第19行目)。渡すObjectインスタンスのloopプロパティにtrueを与えている。すると、トゥイーンアニメーションをひととおり終えると、また頭から繰り返される。つぎのコード006にスクリプト全体を掲げた。

コード006■複数のトゥイーンを定めて順に実行する
  1. var stage;
  2. var nWidth;
  3. var nHeight;
  4. var nRadius = 40;
  5. function initialize() {
  6.   var canvasElement = document.getElementById("myCanvas");
  7.   stage = new Stage(canvasElement);
  8.   var myShape = new Shape();
  9.   nWidth = canvasElement.width;
  10.   nHeight = canvasElement.height;
  11.   stage.addChild(myShape);
  12.   myShape.x = nWidth / 2;
  13.   myShape.y = -nRadius;
  14.   draw(myShape.graphics);
  15.   setTween(myShape);
  16.   Ticker.addEventListener("tick", tick);
  17. }
  18. function setTween(target) {
  19.   var myTween = new Tween(target, {loop:true});
  20.   myTween.to({y: nHeight - nRadius, rotation:360}, 5000, Ease.bounceOut);
  21.   myTween.wait(1000);
  22.   myTween.to({alpha:0}, 2500, Ease.circIn);
  23. }
  24. function tick() {
  25.   stage.update();
  26. }
  27. function draw(myGraphics) {
  28.   var randomNumber = Math.floor(Math.random() * 0xFFFFFF);
  29.   var randomColor = Graphics.getRGB(randomNumber);
  30.   myGraphics.beginFill(randomColor);
  31.   myGraphics.drawPolyStar(0, 0, nRadius, 5, 0.6, -90);
  32.   stage.update();
  33. }

04 EaselJSでマウスクリックとドラッグ&ドロップを扱う

04-01 インスタンスをマウスクリックでまわす

インスタンスのクリックは、DisplayObject.clickイベントで扱う。EventDispatcher.addEventListener()メソッドにより、イベント"click"にリスナー関数を加えればよい。

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

コード004「Tickerクラスでオブジェクトをアニメーションさせる」をもとにして、星形のインスタンスをクリックしたら回るようにする。書替えたスクリプト全体は、後にコード007として掲げた。手をいれるのは、つぎに抜き書きしたように、わずかにステートメントひとつだ。

  1. var myShape;
  2. function initialize() {
  1.   myShape = new Shape();
  1.   myShape.addEventListener("click", rotate);
      // Ticker.addEventListener("tick", rotate);
  1. }
  1. }
  2. function rotate() {
  3.   myShape.rotation += 15;
  4.   stage.update();
  5. }

これで、星のインスタンスをクリックするたびに、15度ずつ回るようになる(図010)。スクリプト全体は以下のコード007のとおりだ。

図010■インスタンスをクリックするたびに回る
図010

コード007■インスタンスをクリックしたときに回す
  1. var stage;
  2. var myShape;
  3. function initialize() {
  4.   var canvasElement = document.getElementById("myCanvas");
  5.   stage = new Stage(canvasElement);
  6.   myShape = new Shape();
  7.   stage.addChild(myShape);
  8.   myShape.x = canvasElement.width / 2;
  9.   myShape.y = canvasElement.height / 2;
  10.   myShape.addEventListener("click", rotate);
  11.   draw(myShape.graphics);
  12. }
  13. function draw(myGraphics) {
  14.   var randomNumber = Math.floor(Math.random() * 0xFFFFFF);
  15.   var randomColor = Graphics.getRGB(randomNumber);
  16.   myGraphics.beginFill(randomColor);
  17.   myGraphics.drawPolyStar(0, 0, 40, 5, 0.6, -90);
  18.   stage.update();
  19. }
  20. function rotate() {
  21.   myShape.rotation += 15;
  22.   stage.update();
  23. }

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

インスタンスのドラッグ&ドロップは、ふたつのイベントを組合わせて扱う。まず、インスタンスのうえでマウスボタンを押したとき、ドラッグを始める。つぎに、マウスを動かしたとき、インスタンスの位置をポインタに追随させる。気をつけなければならないのは、イベントリスナーを登録するオブジェクトのクラスだ。

表001■マウス操作のイベントとリスナーを登録するクラス
マウスイベント マウス操作 クラス
click マウスボタンをクリックする DisplayObject
mousedown マウスボタンを押す DisplayObject
mousemove マウスを動かす MouseEvent
mouseup マウスボタンを放す MouseEvent

マウスボタンを押すDisplayObject.mousedownイベントのリスナーは、ドラッグしたいインスタンスにリスナーを加える。ところが、MouseEvent.mousemoveイベントについては、マウスボタンを押して呼出されるリスナー関数が引数に受け取るイベントオブジェクトにリスナーを登録しなければならない。

すると、マウスドラッグの扱いは、JavaScriptコードでつぎのように組立てることになる。行番号は、後に全体を掲げるコード008にもとづく。

  1. var myShape;
  2. function initialize() {
  1.   myShape = new Shape();
  1.   myShape.addEventListener("mousedown", startDrag);
  1. }
  2. function startDrag(eventObject) {
  3.   eventObject.addEventListener("mousemove", drag);
  4. }
  5. function drag(eventObject) {
  6.   var mouseX = eventObject.stageX;
  7.   var mouseY = eventObject.stageY;
  8.   myShape.x = mouseX;
  9.   myShape.y = mouseY;
  10.   stage.update();
  11. }

インスタンスをマウスポインタと一緒に動かすには、ポインタ座標を調べなければならない。MouseEvent.mousemoveイベントのリスナー関数が引数に受取るイベントオブジェクトから、プロパティMouseEvent.stageXとMouseEvent.stageYでxy座標値がとれる。スクリプト全体は、つぎのコード008のとおりだ。

コード008■インスタンスをドラッグ&ドロップする
  1. var stage;
  2. var myShape;
  3. function initialize() {
  4.   var canvasElement = document.getElementById("myCanvas");
  5.   stage = new Stage(canvasElement);
  6.   myShape = new Shape();
  7.   stage.addChild(myShape);
  8.   myShape.x = canvasElement.width / 2;
  9.   myShape.y = canvasElement.height / 2;
  10.   myShape.addEventListener("mousedown", startDrag);
  11.   draw(myShape.graphics);
  12. }
  13. function startDrag(eventObject) {
  14.   eventObject.addEventListener("mousemove", drag);
  15. }
  16. function drag(eventObject) {
  17.   var mouseX = eventObject.stageX;
  18.   var mouseY = eventObject.stageY;
  19.   myShape.x = mouseX;
  20.   myShape.y = mouseY;
  21.   stage.update();
  22. }
  23. function draw(myGraphics) {
  24.   var randomNumber = Math.floor(Math.random() * 0xFFFFFF);
  25.   var randomColor = Graphics.getRGB(randomNumber);
  26.   myGraphics.beginFill(randomColor);
  27.   myGraphics.drawPolyStar(0, 0, 40, 5, 0.6, -90);
  28.   stage.update();
  29. }

05 もう少し見栄えのするサンプル

  1. トゥイーンとクリックを組合わせる

  2. 『WebクリエイターのためのCreateJSスタイルブック』
    • Chapter03「CreateJSを応用する」

作成者: 野中文雄
更新日: 2013年7月29日 YouTubeの録画ビデオのリンクを加えた。
更新日: 2013年7月13日 jsdo.itのコードサンプルを作成してリンク追加。若干の字句と体裁の修正。
作成日: 2013年7月12日
Copyright © 2001-2013 Fumio Nonaka.  All rights reserved.