水面にぽたっと水滴が落ちた時の波紋をFLASHで表現したいなと調べていると、 DisplacementMapFilterなるものにたどり着きました。いわゆる「置き換えフィルタ」です。
FLASHではこれをフレーム毎に適用することで、インスタンスをぐにょーんと変形させたりできます。(ホームページで採用しました。大きいので劇的に重いです。)概要は、フィルタ側のRGBの値(0~255)によって、適用された部分Aから移動した部分Bのピクセルが部分Aに採用されるというものです。Photoshopのコピースタンプツールの感覚に近いような。移動距離は128を0として127以下ならマイナス、129以上ならプラスとなります。
下のFLASHは緑の値をDisplacementMapFilterとした例です。2種類のうちどちらかをクリックして画像にマウスオーバーしてみると、感覚的にわかるかもしれません。
さて、スクリプトのおおまかな流れとしては、フィルタの元となるビットマップデータを生成し(ここではbitmapという名前)、さらにそれを引数にDisplacementMapFilterオブジェクトを生成(ここではdismap)、それを適用したいインスタンスのfiltersプロパティに(フィルタの一種なので配列で)押し込みます。
以下コード例です。
import flash.display.BitmapData; import flash.filters.DisplacementMapFilter; import flash.geom.Point; //フィルターの元となるビットマップデータを生成 var bitmap:BitmapData = new BitmapData(mapMC.width,mapMC.height); //mapMCの内容をビットマップに書き込む bitmap.draw(mapMC); //DisplacementMapFilterを生成 var dismap:DisplacementMapFilter = new DisplacementMapFilter( bitmap, new Point(0,0), 4,4, 30,30 ); //targetMCに適用 targetMC.filters = [dismap];
以下DisplacementMapFilterコンストラクタの主な引数です。
new DisplacementMapFilter( 使用するビットマップ, フィルタ処理を開始する位置, x座標の変形に使用したい色,y座標の変形に使用したい色, x座標の乗数,y座標の乗数 );
4行目の、座標の変形に使用したい色は、「チャンネル」として数値を与えます。赤が1、緑が2、青が4、アルファが8となります。
5行目の乗数は、数値が大きいほど変化も大きくなります。
以上を踏まえて...
mapMCをこのようにアニメーションさせ、ENTER_FRAMEで常にフィルタを更新すると波紋のようになります。ちなみにフィルターの元となるビットマップ自体をActionScriptで描画してしまうこともできます。すごいです。
波紋エフェクト - NORISUKE WORKS
鏡面反射と波紋: 鮭とプログラムとか
I really appreciate this post. I have been looking everywhere for this! Thank goodness I found it on Bing. You've made my day! Thanks again!