casualplay.net blog

結構スタンダードなエフェクトだと思いますけど、一応のせときます。perlinNoiseで移動させた画像を置き換えマップに使用しただけ。マウス位置で変化量が変わります。他のフィルタと組み合わせて立体感を出すつもりでしたが、フィルタを重ねるとどうしても重くなってしまうので断念。ま、これだけでも充分重い気がしますけど。

数値を調整したり他のエフェクトと組み合わせれば、陽炎や磨りガラスなどの効果も可能ですが、モーションをつける場合は、ちょっと大きい描画領域に適用すると重くなってしまうので、なかなか使いどころが難しいです。

ちなみに、DisplacementMapFilterを適用する画像は表示領域よりも少し大きめの画像を用意する必要があります。そうしないと、フィルタを適用した際、アウトラインがはみ出してしまってかっこ悪いのです。

DisplacementMapFilterについては以前のエントリー（ゆらゆら揺れる文字 - DisplacementMapFilter）を参考に。

import flash.display.*;
import flash.filters.*;
import flash.geom.*;

var w:Number = 360;
var h:Number = 240;
var octaves:Number = 3;
var offset:Array = new Array();
var speed:Array = new Array();
var rdm:Number = Math.floor(Math.random()*10000);

// -- MC "image"をステージ上に配置。

var image:MovieClip;
var bmp:BitmapData = new BitmapData(w, h, false, 0);
var mappoint:Point = new Point((image._width-w)/2, (image._height-h)/2);

// -- perlinNoise 移動量設定

for (var i:Number = 0; i < octaves; i++) {
	offset[i] = new Point(Math.random()*w, Math.random()*h);
	speed[i] = new Point(Math.random()*2-1, Math.random()*2-1);
}

// -- エフェクト適用

this.onEnterFrame = function ():Void {
	for(var i:Number = 0; i < octaves; i++){
		offset[i].x += speed[i].x;
		offset[i].y += speed[i].y;
	}
	//  マウス位置によって変化量を調整
	var scalex:Number = (this._xmouse-w/2)/5;
	var scaley:Number = (this._ymouse-h/2)/5;

	bmp.perlinNoise(w/30, h/30, octaves, rdm, false, true, 1, true, offset);
	var dmf:DisplacementMapFilter = 
	new DisplacementMapFilter(bmp, mappoint, 1, 1, scalex, scaley);
	image.filters = [dmf];
}