スポンサーサイト

曇りを拭く

曇ったガラスを指で拭くようなカンジのサンプルです。画像の上でマウスボタンを押して動かすとその部分だけクリアになります。

コレは、ビンの画像の上に置いてあるノイズ画像の一部を消去するってやり方で実現してマス。
ノイズ画像の部分消去は、BlendMode#ERASEなスプライトを作ってソイツに消したいカタチを描いてマス。サンプルでは、その部分をスプライトを継承したクラスにしてます。

package {
  import flash.display.*;
  /**
   * 曇りガラス風スプライト。
   */
  public class Frost extends Sprite {
    /** 消去半径 */
    var r:Number = 10;
    /** 逆マスクスプライト */
    var msk:Sprite;
    /**
     * コンストラクタ。
     */
    public function Frost() {
      blendMode = BlendMode.LAYER;
      // 逆マスクを生成
      msk = new Sprite();
      msk.blendMode = BlendMode.ERASE;
      addChild(msk);
    }
    /**
     * 指定した座標周辺を透明にする。
     * @param x 消去円のｘ座標
     * @param y 消去円のｙ座標
     */
    public function erase(eraseX:Number, eraseY:Number):void {
      var mg:Graphics = msk.graphics;
      mg.beginFill(0xFFFFFF, 1.0);
      mg.drawCircle(eraseX, eraseY, r);
      mg.endFill();
    }
  }
}

コンストラクタで生成しているmskがBlendMode#ERASEなスプライトです。ヘルプでBlendMode#ERASEの説明を読むと、親表示オブジェクトのblendModeプロパティをBlendMode#LAYERにせよ。と書いてあるのでコンストラクタでFlost自体のblendModeはBlendMode#LAYERにしてます。

eraseメソッドは、指定した座標を中心に円形に画像を消去するメソッドです。実際はmskスプライトに円を描いてます（ブレンドモードの指定により描いた部分と重なる親画像が消えます）。

そんでサンプルのフレームアクションはこんなカンジです。

// Frostのインスタンスを生成
var frost:Frost = new Frost();
frost.x = image_mc.x;
frost.y = image_mc.y;
addChild(frost);
// 曇り画像を生成
var bd:BitmapData = new BitmapData(image_mc.width, image_mc.height);
bd.noise(Math.random() * int.MAX_VALUE,
            0x80,
            0xFF,
            BitmapDataChannel.ALPHA,
            true);
// frostに画像を描画
var g:Graphics = frost.graphics;
g.beginBitmapFill(bd);
g.drawRect(0, 0, image_mc.width, image_mc.height);
g.endFill();

// マウスボタンを押下してるかチェック
var erasing:Boolean = false;
frost.addEventListener(MouseEvent.MOUSE_DOWN,
  function(e:Event) {
    erasing = true;
  });
addEventListener(MouseEvent.MOUSE_UP,
  function(e:Event) {
    erasing = false;
  });
// フレームイベントハンドラ
frost.addEventListener(Event.ENTER_FRAME,
  function(e:Event) {
    // マウスボタンを押下中ならマウスカーソル周辺を消去
    if (erasing) {
      frost.erase(e.target.mouseX, e.target.mouseY);
    }
  });

image_mcは、ビンの画像をシンボル化したものデス。ソレに重なるようにFrostのインスタンス（frost）を置いてマス。

Frostは生成しただけでは何も描画されないので、BitmapData#noiseを使ってノイズ画像を生成してfrostに描画してます。

あとはフレームイベントハンドラで、マウスボタン押下中ならマウスカーソル位置を指定してFrost#eraseメソッドを実行してます。