Murayama blog.

プログラミング教育なブログ

ドラッグアンドドロップ mouseMove

本日より、ActionScript3.0アニメーション本の、
第7章のユーザーインタラクション:オブジェクトの移動に入ります。


この章では、ドラッグアンドドロップの仕組みを学ぶみたい。


ドラッグアンドドロップの仕組みを実現するには2種類の方法があります。
・mouseMoveイベントの利用
・startDrag、stopDragメソッドの利用


まずはmouseMoveイベントを使った例。
こいつの特徴は、「一度に複数のオブジェクトをドラッグアンドドロップできる」ってとこ。
startDragじゃ無理らしい。


具体的にどうするかというと、
mouseDownイベントでmouseMoveハンドラを追加
mouseUpイベントでmouseMoveハンドラを削除
みたいにする。


ただし、注意点が1点。
mouseMoveイベントは、mouseUpイベントは、ドラッグする対象となるオブジェクトに設定にしない。
ステージ(stage)に対して設定する。


理由は、ドラッグしたあとマウスカーソルを動かすと、
ドラッグしているオブジェクトの境界を超えてしまう可能性があるため。
丸いオブジェクトの範囲外まで、マウスを高速に動かしてしまうと、mouseMoveイベントを拾えない。
これを回避するために、ステージ(stage)オブジェクトに対してmouseMoveイベントを設定する。
#mouseUpイベントも同じ。


では実行結果から。


コードはこんなかんじ。

package
{
  import flash.display.Sprite;
  import flash.events.MouseEvent;
  
  public class MouseMoveDrag extends Sprite
  {
    private var ball:Ball;
    
    public function MouseMoveDrag()
    {
      init();
    }
    
    private function init():void{
      ball = new Ball;
      ball.x = 200;
      ball.y = 200;
      addChild(ball);
      // mouseDownイベントはドラッグ対象オブジェクトに設定
      ball.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown_ball);
    }
 
    private function onMouseDown_ball(evt:MouseEvent):void
    {
      // mouseMove、mouseUpイベントはステージに設定
      stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove_stage);
      stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp_stage);
    }
 
    private function onMouseMove_stage(evt:MouseEvent):void
    {
      // ボールの移動
      ball.x = mouseX;
      ball.y = mouseY;
    }
 
    private function onMouseUp_stage(evt:MouseEvent):void
    {
      // mouseMove、mouseUpイベントの削除      
      stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove_stage);
      stage.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp_stage);
    }
  }
}
import flash.display.Sprite;
 
class Ball extends Sprite
{
  private var radious:Number;
  private var color:uint;
  public var vx:Number;
  public var vy:Number;
 
  public function Ball(radius:Number = 40, color:uint = 0xff0000)
  {
    this.radious = radius;
    this.color = color;
    init();
  }
 
  private function init():void{
    graphics.beginFill(color);
    graphics.drawCircle(0, 0, radious);
    graphics.endFill();
  }
}


このコードの重要な部分は前に説明したとおり。
ボールの中心から外れた部分をクリックすると、ちょっと変な動き?をするけど、今はこんなかんじでオッケーとする。