今回は，Starlingフレームワークに［ライブラリ］のビットマップからつくったインスタンスを置き，マウスでドラッグしてみる。どちらも少し定義済みActionScript 3.0の場合とは勝手が違う。ふたつに分けて進めていこう。

Starlingフレームワークに［ライブラリ］のビットマップを表示する

まずは準備として，［⁠ライブラリ］のビットマップにクラス（Pen）を設定しておく（図1⁠）⁠。そして，インスタンスをFlashのタイムラインに動的に置くスクリプトから，先に確かめておこう。すでに第34回「3次元空間における回転」の「ビットマップのインスタンスを動的に配置する」で説明した処理のおさらいだ。

［ライブラリ］のビットマップ（クラスPen）は，ActionScript 3.0ではBitmapDataのサブクラスになる。そして，BitmapDataインスタンス（myBitmapData）はそのままタイムラインには置けない。そのため，Bitmapクラスのコンストラクタメソッドに引数として渡したうえで，Bitmapインスタンス（instance）をDisplayObjectContainer.addChild()メソッドでタイムラインに加えるのだった。

var myBitmapData:BitmapData = new Pen();
var instance:Bitmap = new Bitmap(myBitmapData);
addChild(instance);

Starlingフレームワークではどうなるか。第1に，starling.display.DisplayObjectのサブクラスでなければ，Starlingのステージ（Stage3D）には置けない。そこで，Bitmapクラスに替えてStarlingのImageクラスを使う。コンストラクタメソッドの引数は，やはりビットマップイメージのオブジェクトだ。ただし第2に，BitmapDataオブジェクトは引数に使えない。Image()コンストラクタには，Textureクラスのオブジェクトを渡さなければならない（表1⁠）⁠。

だが，使いたいのは［ライブラリ］のビットマップつまりBitmapDataインスタンスだ。この場合には，静的メソッドTexture.fromBitmapData()を用いればよい。引数のBitmapDataオブジェクトをTextureオブジェクトに変換して返してくれる。［⁠ライブラリ］のビットマップをTextureオブジェクトに換え，Imageインスタンスに入れてStarlingフレームワークのステージに置くクラス定義（MySprite）がつぎのスクリプト1だ。

// ActionScript 3.0クラス定義ファイル: MySprite.as
package  {
  import flash.display.BitmapData;
  import starling.display.Sprite;
  import starling.display.Image;
  import starling.textures.Texture;
  import starling.events.Event;
  public class MySprite extends Sprite{
    private var instance:Image;
    public function MySprite() {
      addEventListener(Event.ADDED_TO_STAGE, initialize);
    }
    private function initialize(eventObject:Event):void {
      var myBitmapData:BitmapData = new Pen();
      var myTexture:Texture = Texture.fromBitmapData(myBitmapData);
      instance = new Image(myTexture);
      addChild(instance);
      instance.x = stage.stageWidth / 2;
      instance.y = stage.stageHeight / 2;
      instance.pivotX = instance.width / 2;
      instance.pivotY = instance.height / 2;
    }
  }
}

これで［ライブラリ］に納めたビットマップのイメージが，ステージ中央に表示される（図1⁠）⁠。前掲スクリプト1は，Imageインスタンスをつくるまでの処理を除けば，前回の「StarlingフレームワークでStage3Dを試す」で定義したクラスと基本的に変わらない。もちろん，前回述べたとおり，FLAファイルにはつぎのフレームアクションが書かれていて，［⁠パブリッシュ設定］も正しく行われているものとする。

// フレームアクション: メインタイムライン
import starling.core.Starling;
var myStarling:Starling = new Starling(MySprite, stage);
myStarling.start();

定義済みActionScript 3.0のフレームアクションによるドラッグ

ふたつ目の課題はマウスドラッグだ。これも，定義済みActionScript 3.0のフレームアクションによるスクリプティングを先に確かめておこう。タイムラインにはMovieCliipインスタンス（my_mc）が予めおかれているものとする。ドラッグは3つのマウスイベントを組合わせて扱う（※1⁠）⁠。

1. InteractiveObject.mouseDownイベント（定数MouseEvent.MOUSE_DOWN）のリスナー
   • InteractiveObject.mouseMoveイベントにドラッグのためのリスナーを加える。
   • InteractiveObject.mouseUpイベントにドラッグ終了のリスナーを加える。
2. InteractiveObject.mouseMoveイベント（定数MouseEvent.MOUSE_MOVE）のリスナー
   • インスタンスの位置をマウスポインタの座標に追随させる。
3. InteractiveObject.mouseUpイベント（定数MouseEvent.MOUSE_UP）のリスナー
   • InteractiveObject.mouseMoveイベントのリスナーを除く。
   • InteractiveObject.mouseUpイベントのリスナーを除く。

3つのイベントリスナーで，タイムラインに置かれたインスタンス（my_mc）をドラッグできるように組立てたフレームアクションがつぎのスクリプト2だ。

// フレームアクション: メインタイムライン
var nOffsetX:Number;
var nOffsetY:Number;
my_mc.addEventListener(MouseEvent.MOUSE_DOWN, xMouseDown);
function xMouseDown(eventObject:MouseEvent):void {
  nOffsetX = my_mc.mouseX;
  nOffsetY = my_mc.mouseY;
  stage.addEventListener(MouseEvent.MOUSE_MOVE, xDrag);
  stage.addEventListener(MouseEvent.MOUSE_UP, xMouseUp);
}
function xDrag(eventObject:MouseEvent):void {
  my_mc.x += my_mc.mouseX - nOffsetX;
  my_mc.y += my_mc.mouseY - nOffsetY;
}
function xMouseUp(eventObject:MouseEvent):void {
  stage.removeEventListener(MouseEvent.MOUSE_MOVE, xDrag);
  stage.removeEventListener(MouseEvent.MOUSE_UP, xMouseUp);
}

スクリプト2について，ふたつ補っておこう。ひとつ目は，InteractiveObject.mouseMoveとInteractiveObject.mouseUpイベントのリスナーをStageオブジェクトに加えたことだ。これは，InteractiveObject.mouseDownイベントと異なり，マウスを素速く動かすと，イベントがドラッグしているインスタンスの外で起こってしまう場合に備えた。

ふたつ目は，InteractiveObject.mouseDownイベントのリスナー関数（xMouseDown）が，インスタンスから見たマウスポインタの座標を変数（nOffsetXとnOffsetY）にとっていることだ。なぜなら，InteractiveObject.mouseMoveイベントのリスナー（xDrag()）がただマウス座標にインスタンスの位置を合わせれば，ポインタの先にインスタンスの基準点がきてしまう（図3⁠）⁠。そうならないためには，はじめにクリックしたインスタンス上の座標を覚えておき，ドラッグするときはその分を補正しなければならないのだ。

※1

これまで【特別編】で解説してきたActionScript 3.0を最適化するという見方でいえば，ドラッグでインスタンスを動かすのはInteractiveObject.mouseMoveよりDisplayObject.enterFrameイベントのリスナーで扱う方が負荷は軽い。この後Starlingフレームワークと比べるために，マウスイベントだけで組み立ててみた。