スポンサーサイト

針金をはじいたような動き

壁にささった針金を指ではじいたような。というかそんなカンジのサンプルです。円の部分をマウスでつまんでテキトーに動かしてボタンを離すと、バネっぽく振動します。

やってることは、バネの動きをする円スプライトとステージ左端から円の中心までの曲線を描画してるだけデス。円スプライトは、画面左端の線の根元を中心とする円周を動きマス。バネっぽい動きの計算は、初期位置を０度としての角度に対してやってマス。

円スプライトの最初のｘ位置は、ステージ幅の２／３の位置（＝半径）デス。曲線のほーは、ステージ左端を始点、ステージ幅の１／３の位置をコントールポイント、円スプライトの中心を終点としてGraphics#curveToで描画しています。

今回のサンプルでは、円と曲線の２つのスプライトをActionScriptで作成／操作しています。
円のほーは、Spriteを継承したBallクラスを定義して使ってマス。

package {
  import flash.display.Sprite;
  import flash.display.Graphics;
  /**
   * 塗りつぶした円のスプライト。
   */
  public class Ball extends Sprite {
    /**
     * コンストラクタ。
     * @param radius 半径
     * @param color 色
     * @param alpha 透過度
     */
    public function Ball(radius:Number = 10,
                              color:uint = 0x000000,
                              alpha:Number = 1.0) {
      var g:Graphics = this.graphics;
      g.beginFill(color, alpha);
      g.drawCircle(0, 0, radius);
      g.endFill();
    }
  }
}

コイツは単に半径や色を指定してnewすると指定した通りの円が描画されるだけで、あとはSpriteと同等なクラスです。

曲線用のスプライトは、フレームアクションに記述してます。フレームアクションはこんなカンジです。

// ボールの色
var ballColor:Number = 0x9999FF;
// ボールの大きさ
var ballSize:Number = 10;
// 線の色
var lineColor:Number = 0x3333FF;
// ボールの初期x座標
var ballX:Number = stage.stageWidth * 2 / 3;
// ボールの初期y座標
var ballY:Number = stage.stageHeight / 2;
// コントロールポイントのx座標
var controlX:Number = stage.stageWidth / 3;
// ばね定数
var k:Number = 0.9;
// 減衰係数
var a:Number = 0.8;
// 最大角度
var range:Number = 30 * Math.PI / 180;

// フィルタ
var filterArray:Array = [new DropShadowFilter()];

// 線描画領域
var canvas:Sprite = new Sprite();
canvas.filters = filterArray;
addChild(canvas);

// ボールを配置
var ball:Ball = new Ball(ballSize, ballColor);
ball.filters = filterArray;
ball.x = ballX;
ball.y = ballY;
addChild(ball);

// かかっている力
var p:Number = 0;
// ボールの角度
var r:Number = 0;

// ボールをつかめるようにする
ball.addEventListener(MouseEvent.MOUSE_DOWN,
  function (e:Event):void {
    // つかめるようにするためボール移動イベントリスナを登録
    stage.addEventListener(MouseEvent.MOUSE_MOVE, onBallMouseMove);
    // 振動させるためボールフレームイベントリスナを解除
    stage.removeEventListener(Event.ENTER_FRAME, onBallEnterFrame);
  });
stage.addEventListener(MouseEvent.MOUSE_UP,
  function (e:Event):void {
    // ボール移動イベントリスナを解除
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, onBallMouseMove);
    // フレームイベントリスナを登録
    stage.addEventListener(Event.ENTER_FRAME, onBallEnterFrame);
  });
// ボールのマウス移動イベントハンドラ
function onBallMouseMove(e:Event):void {
  // マウスのy座標から角度を求めてボールのx,y座標を決定
  r = Math.asin((mouseY - ballY) / ballX);
  if (r < -range) {
    r = -range;
  } else if (r > range) {
    r = range;
  }
}

// ボールのフレームイベントハンドラ
function onBallEnterFrame(e:Event):void {
  // かかっている力
  p = p * a - r * k;
  r += p;
  if (r < -range) {
    r = -range;
  } else if (r > range) {
    r = range;
  }
}

// フレームイベントハンドラ
addEventListener(Event.ENTER_FRAME,
  function (e:Event):void {
    ball.x = ballX * Math.cos(r);
    ball.y = ballX * Math.sin(r) + ballY;
    var g:Graphics = canvas.graphics;
    g.clear();
    g.lineStyle(1, lineColor);
    g.moveTo(0, ballY);
    g.curveTo(controlX, ballY, ball.x, ball.y);
  });

まずボールのほーですが、ballというのがBallクラスのインスタンスです。ballをつまんで動かせるようにするために（あと離したときに振動するように）、ballにMouseEvent.MOUSE_DOWNイベントリスナを、stageにMouseEvent.MOUSE_UPイベントリスナを登録してます。

ボールをつまんで動かしてる間は、ボールの位置はマウスカーソルの位置になります。そんで、ボタンを離すと振動します。コレをするために２種類のイベントリスナをボタンを押したときと離したときに切り替えています。

ボタンを押したときに有効にしてるイベントリスナは、MouseEvent.MOUSE_MOVEデス。イベントハンドラのonBallMouseMoveメソッドでは、マウスカーソルのy座標を元に角度を計算してballのx,y座標を求めています。また、角度が指定した範囲に収まるように調整してます（このサンプルでは-30度〜30度です）。

ボタンを離したときに有効になるイベントリスナはEvent.ENTER_FRAMEデス。イベントハンドラのonBallEnterFrameメソッドでは角度rがバネっぽい変化をするように計算しています。一応、ここでも角度が指定した範囲に収まるようにしています。

曲線の方はというと、canvasが曲線を描画する領域となるSpriteデス。Event.ENTER_FRAMEイベントハンドラで、canvasをクリアして、ステージ左端からballの中心までの曲線を描画しています。