ActionScriptで透過ビットマップのロールオーバーを判定。

2011.06.15 / Labs

マウスのロールオーバー時に、ビットマップの透過ではない部分でのみ判定をする方法です。
通常ビットマップのマウス判定には矩形エリア全体が対象になるので、透明PNGの透明部分でも判定されてしまいます。
それを回避する方法として、マウスのイベントリスナーを使うのではなく、マウス座標上にあるビットマップのピクセル色が透明かどうかを測定して、判定をするようにしています。
サンプルはこちら

package {
	
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.PixelSnapping;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	public class Main extends Sprite {
		
		public function Main() {
			var target:Sprite = new Sprite();
			
			//ライブラリ内の「Cloud」ビットマップクラス（透過PNG）インスタンスを作成
			var bitmap_data:BitmapData = new Cloud();
			var bitmap:Bitmap = new Bitmap(bitmap_data, PixelSnapping.NEVER, true);
			target.addChild(bitmap);
			stage.addChild(target);
			setBitmapRollOverOut(target, bitmap_data, targetOverTest, targetOutTest);
		}
		
		//ロールオーバー時
		private function targetOverTest(target:*):void {
			target.buttonMode = true;
			target.alpha = 0.5;
		}
		
		//ロールアウト時
		private function targetOutTest(target:*):void {
			target.buttonMode = false;
			target.alpha = 1;
		}
		
		//引数にロールオーバー時、ロールアウト時の関数を渡します
		private function setBitmapRollOverOut(target:Object, bitmap_data:BitmapData, rolloverFunction:Function, rolloutFunction:Function):void {
			var color:uint = 0;
			target.addEventListener(Event.ENTER_FRAME, targetOverEnter);
			
			function targetOverEnter(event:Event):void {
			
				//マウス位置のビットマップの（アルファ値を含む）ピクセル色を測定
				color = bitmap_data.getPixel32(target.mouseX, target.mouseY);
				
				//ビットマップが透明でなければロールオーバー関数を実行
				if (color != 0) {
				
					//ロールオーバー関数の実行を一度だけにするため、一旦エンターフレームを解除します
					//同時にロールアウトのエンターフレームを再開します
					target.removeEventListener(Event.ENTER_FRAME, targetOverEnter);
					target.addEventListener(Event.ENTER_FRAME, targetOutEnter);
					rolloverFunction(target);
				}
			}
			
			function targetOutEnter(event:Event):void {
			
				//マウス位置のビットマップの（アルファ値を含む）ピクセル色を測定
				color = bitmap_data.getPixel32(target.mouseX, target.mouseY);
				
				//ビットマップが透明だったらロールアウト関数を実行
				if (color == 0) {
				
					//ロールアウト関数の実行を一度だけにするため、一旦エンターフレームを解除します
					//同時にロールオーバーのエンターフレームを再開します
					target.addEventListener(Event.ENTER_FRAME, targetOverEnter);
					target.removeEventListener(Event.ENTER_FRAME, targetOutEnter);
					rolloutFunction(target);
				}
			}
		}
	}
}

package {

import flash.display.Bitmap;

import flash.display.BitmapData;

import flash.display.PixelSnapping;

import flash.display.Sprite;

import flash.events.Event;

import flash.events.MouseEvent;

public class Main extends Sprite {

public function Main() {

var target:Sprite = new Sprite();

//ライブラリ内の「Cloud」ビットマップクラス（透過PNG）インスタンスを作成

var bitmap_data:BitmapData = new Cloud();

var bitmap:Bitmap = new Bitmap(bitmap_data, PixelSnapping.NEVER, true);

target.addChild(bitmap);

stage.addChild(target);

setBitmapRollOverOut(target, bitmap_data, targetOverTest, targetOutTest);

}

//ロールオーバー時

private function targetOverTest(target:*):void {

target.buttonMode = true;

target.alpha = 0.5;

}

//ロールアウト時

private function targetOutTest(target:*):void {

target.buttonMode = false;

target.alpha = 1;

}

//引数にロールオーバー時、ロールアウト時の関数を渡します

private function setBitmapRollOverOut(target:Object, bitmap_data:BitmapData, rolloverFunction:Function, rolloutFunction:Function):void {

var color:uint = 0;

target.addEventListener(Event.ENTER_FRAME, targetOverEnter);

function targetOverEnter(event:Event):void {

//マウス位置のビットマップの（アルファ値を含む）ピクセル色を測定

color = bitmap_data.getPixel32(target.mouseX, target.mouseY);

//ビットマップが透明でなければロールオーバー関数を実行

if (color != 0) {

//ロールオーバー関数の実行を一度だけにするため、一旦エンターフレームを解除します

//同時にロールアウトのエンターフレームを再開します

target.removeEventListener(Event.ENTER_FRAME, targetOverEnter);

target.addEventListener(Event.ENTER_FRAME, targetOutEnter);

rolloverFunction(target);

}

function targetOutEnter(event:Event):void {

//マウス位置のビットマップの（アルファ値を含む）ピクセル色を測定

color = bitmap_data.getPixel32(target.mouseX, target.mouseY);

//ビットマップが透明だったらロールアウト関数を実行

if (color == 0) {

//ロールアウト関数の実行を一度だけにするため、一旦エンターフレームを解除します

//同時にロールオーバーのエンターフレームを再開します

target.addEventListener(Event.ENTER_FRAME, targetOverEnter);

target.removeEventListener(Event.ENTER_FRAME, targetOutEnter);

rolloutFunction(target);

}