百匹目の猿

ラバーバンドを描く

線を引くのにラバーバンドを使うGUIのサンプルです。

ステージをマウスでクリックすると、クリックした場所からマウスカーソルまで破線（蟻の行進？）のラバーバンドが描画されます。もう一度クリックするとラバーバンドは実線になって、その位置からまたラバーバンドが描画されます。線の色はランダムです。

やってるコトは単純で、クリックするたびに空のムービークリップを作成します。そしてonEnterFrameイベントハンドラでクリアして線を引くのを繰り返しています。

蟻の行進については、うまいやり方を知らないので短い線をマウスカーソル位置にむかってたくさん描いています。フレーム毎にオフセット位置を変えて行進してるっぽくみせてマス。

アクションスクリプトはこんなカンジです。

// 描画領域
var depth:Number = _root.getNextHighestDepth();
var canvas_mc:MovieClip
  = _root.createEmptyMovieClip("canvas_" + depth, depth);
canvas_mc.beginFill(0xFFFFFF);
canvas_mc.moveTo(0, 0);
canvas_mc.lineTo(0, Stage.height);
canvas_mc.lineTo(Stage.width, Stage.height);
canvas_mc.lineTo(Stage.width, 0);
canvas_mc.lineTo(0, 0);
canvas_mc.endFill();
canvas_mc.onRelease = drawLine;
// 線の始点
var sx:Number;
var sy:Number;
// ラバーバンドムービークリップ
var band_mc:MovieClip;
// 線を描画する
function drawLine() {
  // 線の確定処理
  if (band_mc) {
    delete band_mc.onEnterFrame;
    band_mc.clear();
    band_mc.lineStyle(1, band_mc.lineColor, 100, true,
                      "none", "round", "miter", 1);
    band_mc.moveTo(0, 0);
    band_mc.lineTo(_xmouse - sx, _ymouse - sy);
    band_mc._x = sx;
    band_mc._y = sy;
  }
  // ラバーバンド生成
  sx = _xmouse;
  sy = _ymouse;
  var depth:Number = _root.getNextHighestDepth();
  band_mc
    = _root.createEmptyMovieClip("band_" + depth, depth);
  band_mc.lineColor = Math.floor(Math.random() * 0x1000000);
  band_mc.offset = 0;
  band_mc.onEnterFrame = function() {
    this.clear();
    this.lineStyle(1, this.lineColor, 100, true,
                   "none", "round", "miter", 1);
    dash(this, 0, 0, _xmouse - sx, _ymouse - sy, 3, 4, this.offset);
    this.offset = (this.offset + 1) % 7;
    this._x = sx;
    this._y = sy;
  }
}
// 破線を描画します。
function dash(mc:MovieClip, x1:Number, y1:Number,
              x2:Number, y2:Number,
              dash1:Number, dash2:Number, offset:Number) {
  var l:Number
    = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
  if (l < 2) {
    return;
  }
  var sin:Number = (y2 - y1) / l;
  var cos:Number = (x2 - x1) / l;
  var d:Number = offset;
  var x:Number = x1 + cos * offset;
  var y:Number = y1 + sin * offset;
  while (d <= l) {
    mc.moveTo(x, y);
    mc.lineTo(x + cos * dash1, y + sin * dash1);
    x += cos * (dash1 + dash2);
    y += sin * (dash1 + dash2);
    d += dash1 + dash2;
  }
}

最初に作ってるcanvas_mcは、描画領域になる矩形のムービークリップです。ステージと同サイズにしてます。onReleaseイベントハンドラで線を描画するdrawLineメソッドを実行するようにしてます。

band_mcというのはラバーバンドを描画中のムービークリップです。drawLineメソッドは、band_mcのonEnterFrameイベントハンドラをdeleteすることでラバーバンドの描画を中止して、代わりに実線をひきます。そんで新しいband_mcを作ってソイツのonEnterFrameイベントハンドラでラバーバンドを描画するようにしてます。

banc_mcのonEnterFrameハンドラ内で呼び出してるdashメソッドが破線をひくためのメソッドです。コイツを使わないでlineToすればラバーバンドは実線になります。

dashメソッドは、描画対象のムービークリップ／線の開始座標／終了座標／線分の長さ／空白の長さ／オフセット距離を引数にとります。やってるコトは、開始座標から終了座標に向かって指定された長さの線分を指定された間隔で描画デス。

band_mcではdashメソッドを実行する際にオフセット距離を変化させてます（０〜６のループ）。そのせいで蟻の行列に見えるという寸法デス。

テーマ:Flash - ジャンル:コンピュータ

2007.06.13 | | Comments(0) | Trackback(0) | Flash/ActionScript