マウスオーバーで画像を鮮明にする

(サンプル一覧を表示する)

マウスオーバーで画像を鮮明にするサンプルです。
Flash の画面にマウスを乗せてみてください。

トラのイラストは、似顔絵、イラスト、キャラクター、フリー素材などの紹介ブログ さんからお借りしました。
Flash の実行画面
マウスオーバーで画像を鮮明にする

Flashプレーヤーが入っていないか、JavaScriptが無効になっているようです。

Get Adobe Flash player

マウスオーバーで画像を鮮明にする

ソースコード

package 
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.filters.BitmapFilterQuality; 
	import flash.filters.BlurFilter;
	import flash.geom.Point;
	
	/**
	 * マウスオーバーで画像を鮮明にするサンプル
	 * @author Hikipuro
	 */
	public class Main extends Sprite 
	{
		/**
		 * トラの画像 (埋め込みリソース)
		 */
		[Embed(source='../image/test001.jpg')]
		private var image1:Class;
		
		/**
		 * トラの画像
		 */
		private var bitmap1:Bitmap;
		
		/**
		 * フィルターを適用する作業用のビットマップデータ
		 */
		private var bitmapData:BitmapData;
		
		/**
		 * ブラーフィルター
		 */
		private var filter:BlurFilter;
		
		/**
		 * ブラーフィルターをかける強さ
		 */
		private var blurAmount:Number;
		
		/**
		 * マウスが上に乗った時 True
		 */
		private var mouseOverFlag:Boolean;
		
		/**
		 * コンストラクタ
		 */
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		/**
		 * 初期化メソッド
		 * @param	e
		 */
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
			
			// 変数の初期化
			blurAmount = 10;
			mouseOverFlag = false;
			
			// 埋め込みリソースの画像をビットマップにする
			bitmap1 = new image1;
			
			// ----------------------------------------------------------------
			// フィルターを適用する作業用のビットマップデータを準備
			bitmapData = new BitmapData(bitmap1.width, bitmap1.height);
			
			// 画面に表示するためにいったんビットマップに入れる
			var b:Bitmap = new Bitmap(bitmapData);
			
			// マウスイベントを受け取るためにいったんスプライトに入れる
			// (Bitmap オブジェクトはマウスイベントを受け取れない)
			var s:Sprite = new Sprite();
			
			// スプライトにビットマップを貼り付け
			s.addChild(b);
			
			// スプライトごと画面に表示
			addChild(s);
			
			// スプライトのマウスイベントを登録
			s.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
			s.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
			// ----------------------------------------------------------------
			
			// フレーム開始イベントを登録
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
			
			// ビットマップデータにいったん描く
			// (ここで描いておかないと、最初画面が真っ白になってしまう)
			filter = new BlurFilter(blurAmount, blurAmount, BitmapFilterQuality.MEDIUM);
			bitmapData.applyFilter(bitmap1.bitmapData, bitmapData.rect, new Point(0, 0), filter);
		}
		
		/**
		 * 画像の上にマウスが乗った時
		 * @param	e
		 */
		private function onMouseOver(e:MouseEvent):void 
		{
			mouseOverFlag = true;
		}
		
		/**
		 * 画像の上からマウスが出た時
		 * @param	e
		 */
		private function onMouseOut(e:MouseEvent):void 
		{
			mouseOverFlag = false;
		}
		
		/**
		 * フレーム開始イベント
		 * @param	e
		 */
		private function onEnterFrame(e:Event):void 
		{
			// ブラーの強さを表す変数をいったん保存
			var oldBlurAmount:Number = blurAmount;
			
			// マウスの状態に応じて値を増減
			if (mouseOverFlag == true) {
				blurAmount--;
			} else {
				blurAmount++;
			}
			
			// 変数の範囲チェック
			if (blurAmount < 0)
				blurAmount = 0;
			if (blurAmount > 10)
				blurAmount = 10;
			
			// 前の値と同じだった場合、描きなおし処理を実行しない
			if (blurAmount == oldBlurAmount)
				return;
			
			// ブラーの強さが変更された時だけ描きなおす
			filter = new BlurFilter(blurAmount, blurAmount, BitmapFilterQuality.MEDIUM);
			bitmapData.applyFilter(bitmap1.bitmapData, bitmapData.rect, new Point(0, 0), filter);
		}
		
	}
	
}
		

参照

外部リンク