Flash CS4 ActionScript3.0 でスクラッチカード的なマスクオブジェクトを作ってみる

ActionScript3.0 でマウスを動かすと、円が動いてその部分が透明になり背景が見える、というスクラッチカード的な動作をするサンプルを作ってみました。



マスクオブジェクトを動かしているだけですが、初心者の人には設定方法が分かりにくいのではないでしょうか。



【サンプル】

クリックすると、スクラッチ開始。マウスを動かすと透明な範囲が増えます。もう一度クリックすると、マスクオブジェクトがクリアされます。





前準備として

①Flash CS4 のライブラリに背景用画像データを読み込みます。



②ライブラリの画像アイコンを右クリックして「プロパティ」を選んで「ビットマッププロパティ」を開き、「リンゲージ」項目の　


・ActionScript用に書き出し

・1フレーム目に書き出し


にチェックを入れます。


また、「クラス」の部分に適当な名前を入れます。

このサンプルでは下図のように「TullyBustShot」としました。

ActionScriptでこのクラス名を使ってビットマップデータのインスタンスを作ります。

【サンプルのコード】
FlashCS4のタイムライン記述用

// ライブラリで画像データのプロパティを開き、TullyBustShot クラスを記述しておく。
var bmp_data : BitmapData = new TullyBustShot(0,0);//ダミーの引数2つ（0,0）が必要

// ビットマップインスタンスを作成し、表示リストに登録
var bmp_obj : Bitmap = new Bitmap( bmp_data , PixelSnapping.AUTO , true);
//背景を描画
var canvas:Sprite = new Sprite();
canvas.graphics.beginBitmapFill(bmp_data);
canvas.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
canvas.graphics.endFill();
canvas.width = stage.stageWidth;
canvas.height = stage.stageHeight;
addChild( canvas );

//ステージクリックでマスクオブジェクト描画（スクラッチ）開始
stage.addEventListener(MouseEvent.MOUSE_DOWN, drawing);
var myMC= new MovieClip();
canvas.mask = myMC;


function drawing( event:MouseEvent ):void {
myMC.graphics.beginFill(0xff0000);
myMC.graphics.drawCircle(mouseX, mouseY, 15 );
addChild(myMC);
stage.addEventListener( MouseEvent.MOUSE_MOVE , drawingHandler);
//ひとつMCを作成したら、それ以上ステージをクリックしても反応しないように
//イベントリスナ削除
stage.removeEventListener(MouseEvent.MOUSE_DOWN, drawing);

}

//mask描画モードでマウスが動いたら、マスク用の円を追加で描く
function drawingHandler( event:MouseEvent ):void {

myMC.graphics.drawCircle(mouseX, mouseY, 15 );
//ステージでマウスの左ボタンが押されたら、リセット用の関数clearDrawingを呼び出す。
stage.addEventListener(MouseEvent.MOUSE_DOWN, clearDrawing);
//フレームレートにかかわらず、マウスが動くイベントが発生したら画面を更新する。
//遅いフレームレートでも画面をタイムラグがなくなる。
event.updateAfterEvent();

}


//mask描画中にステージをクリックしたら呼び出され、リセットを行う
function clearDrawing( event:MouseEvent ):void {
myMC.graphics.clear();
stage.removeEventListener( MouseEvent.MOUSE_MOVE , drawingHandler);
stage.removeEventListener(MouseEvent.MOUSE_DOWN, clearDrawing);
stage.addEventListener(MouseEvent.MOUSE_DOWN, drawing);
}