In case Flash no longer exists; a copy of this site is included in the Flashpoint archive's "ultimate" collection.

Dead Code Preservation :: Archived AS3 works from wonderfl.net

Noize RollOver

import net.hires.debug.Stats;

DisplacementMapFilter の練習。
下記で紹介されているエフェクトや、その下のサイトのオンマウス時のエフェクトを
再現したかったのですが・・・ほど遠い結果です。
http://www.shin-go.net/motionlab/?p=127
http://www.flashmania.jp/

置き換えマップデータの作り方など、下記を参考にさせて頂きました。ありがとうございます!
(全然違うモノになったので、fork という形は控えさせて頂きました。)
http://wonderfl.net/code/9897f9707a2bcb5543dc0af14dc572a45c4186dd
/**
 * Copyright kkeisuke ( http://wonderfl.net/user/kkeisuke )
 * MIT License ( http://www.opensource.org/licenses/mit-license.php )
 * Downloaded from: http://wonderfl.net/c/se8X
 */

package  
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.BitmapDataChannel;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.filters.DisplacementMapFilter;
	import flash.filters.DisplacementMapFilterMode;
	import flash.geom.Point;
	import flash.net.URLRequest;
	import flash.system.LoaderContext;
	// import net.hires.debug.Stats;
	
	
	/**
	 * DisplacementMapFilter の練習。
	 * 下記で紹介されているエフェクトや、その下のサイトのオンマウス時のエフェクトを
	 * 再現したかったのですが・・・ほど遠い結果です。
	 * http://www.shin-go.net/motionlab/?p=127
	 * http://www.flashmania.jp/
	 * 
	 * 置き換えマップデータの作り方など、下記を参考にさせて頂きました。ありがとうございます!
	 * (全然違うモノになったので、fork という形は控えさせて頂きました。)
	 * http://wonderfl.net/code/9897f9707a2bcb5543dc0af14dc572a45c4186dd
	 */
	[SWF(backgroundColor = 0x000000, frameRate = 40, width = 465, height = 465)]
	public class NoizeRollOver extends Sprite
	{
		private static const URL:String = "http://assets.wonderfl.net/images/related_images/5/5f/5fd9/5fd907386c2c4584f449e1c10a37fc8d68fe7060";
		private static const MAP_NUM:int = 3;
		private static const STRONG_X:int = 500;
		private static const STRONG_Y:int = 50;
		private static const VX:int = 10;
		
		private var dmf:DisplacementMapFilter;
		private var sp:Sprite;
		private var maps:/*BitmapData*/Array;
		private var mapsLen:int;
		private var centerX:int;
		private var centerY:int;
		private var scaleVX:int;
		
		
		public function NoizeRollOver() 
		{
			addEventListener(Event.ADDED_TO_STAGE , added);
		}
		
		
		private function added(e:Event):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, added);
			
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			init();
		}
		
		
		private function init():void
		{
			var loader:Loader = new Loader();
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE , complete);
			loader.load(new URLRequest(URL), new LoaderContext(true));
		}
		
		
		private function complete(e:Event):void 
		{
			var loaderInfo:LoaderInfo = e.target as LoaderInfo;
			
			loaderInfo.removeEventListener(Event.COMPLETE , complete);
			
			var bm:Bitmap = loaderInfo.content as Bitmap;
			
			// 置き換えマップデータの作成
			createMapBM(bm);
			
			// 読み込んだ画像を配置。
			setUpDO(bm);
		}
		
		
		private function createMapBM(bm:Bitmap):void
		{
			maps = [];
			
			// 一応、3パターン作るようにしたが、1パターンでも良いかもしれない。
			for (var i:int = 0; i < MAP_NUM; i++)
			{
				var mapBD:BitmapData = new BitmapData(bm.width, bm.height, false, 0);
				
				// 効果があるかは分かりませんが、念のために。
				mapBD.lock();
				
				// グレースケールでノイズを描く
				mapBD.noise((Math.random() * 10) >> 0, 0, 255, 7, true);
				
				// 横方向にスクロールさせて横縞を作る。
				var mapW:int = mapBD.width;
				for (var j:int = 0; j < mapW; j++)
				{
					// 個々の値を変えると、他の表現が出来る。縦縞、斜めなど。
					mapBD.scroll(1, 0);
				}
				
				mapBD.unlock();
				
				maps[i] = mapBD;
			}
			
			mapsLen = maps.length;
		}
		
		
		private function setUpDO(bm:Bitmap):void
		{
			sp = new Sprite();
			sp.addChild(bm);
			
			centerX = (stage.stageWidth - sp.width) >> 1;
			centerY = (stage.stageHeight - sp.height) >> 1;
			
			sp.x = centerX;
			sp.y = centerY;
			sp.buttonMode = true;
			sp.addEventListener(MouseEvent.ROLL_OVER, over);
			
			addChild(sp);
			
			// 置き換えマップデータの確認用
			/*var mapBm:Bitmap = new Bitmap(maps[0]);
			mapBm.x = stage.stageWidth - mapBm.width;
			addChild(mapBm);*/
			
			//addChild(new Stats());
			
			// mapBitmap は後で入れる。
			// componentX は何色でもいい?
			// mode で微妙に見た目が変わる。とりあえず、"IGNORE"
			dmf = new DisplacementMapFilter(null, new Point(0, 0), BitmapDataChannel.BLUE, BitmapDataChannel.BLUE, STRONG_X, STRONG_Y, DisplacementMapFilterMode.IGNORE);
		}
		
		
		private function over(e:MouseEvent):void 
		{
			reset(true);
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
		
		
		private function onEnterFrame(e:Event):void 
		{
			// フィルター取り出し
			var fil:DisplacementMapFilter = sp.filters[0];
			
			scaleVX += VX;
			
			fil.scaleX -= scaleVX;
			
			// 置き換えマップデータを選択。
			fil.mapBitmap = maps[(Math.random() * mapsLen) >> 0];
			
			// フィルター再適用
			sp.filters = [fil];
			
			// 適当に・・・。なんとなく点滅させるため。visible が良かったかな?
			sp.alpha = sp.alpha == 0 ? 1 : 0;
			
			// 収まったら止める。
			if (fil.scaleX <= 0)
			{
				reset(false);
			}
		}
		
		
		private function reset(active:Boolean):void 
		{
			removeEventListener(Event.ENTER_FRAME, onEnterFrame);
			
			sp.x = centerX;
			sp.y = centerY;
			sp.alpha = active ? 0 : 1;
			sp.filters = [dmf];
			
			scaleVX = 0;
		}
	}
}