Flash實例教程:AS3.0打造漂亮水紋效果

　　在這個Flash AS3.0實例教程中，我們將用到置換圖濾鏡(DisplacementMapFilter)和BitmapData類的的雜點功能(perlinNoise)，這兩個家伙常常給我們帶一些令人興奮的效果，它們今天的合作為我們創造了一個漂亮的的水汶

　　現在我開始來構建這個漂亮的水紋：

　　既然是水紋，我想首先要找一張含水的圖片吧，百度一下吧，河道，湖泊，水池，你喜歡就行。

　　1、新建一AS3.0文檔，將幀頻設為30，將你剛百度到的圖片導入到庫中，點右鍵，在屬性面板中將“使用JPEG導入品質”前的鉤鉤去掉，這樣做圖片的體積就會大大地減小哦。

　　2、新建一個影片剪輯元件，將圖片拖到舞台上，設置圖片的大小，你想設多大呢?反正我是按默認的550x400。圖片在大小與文檔大小一樣大。點擊對齊面板，相對於舞台居中對齊。

　　3、回到主場景，將MC拖到舞台上，居中放置，為它設置一個實例名稱，我用的是“pic”圖層上鎖。

　　4、新插入一圖層，將圖片(注意是圖片不是MC)，拖到舞台上，打開對齊面板，寬高匹配，居中對齊。現在第1,2層的圖像是完全重合的，請確認是這樣的。選擇圖片，點擊 修改>分離，將水面部分選出，刪除。可以將第1層隱藏，看看刪除後的效果。

　　如下圖：

　　5、新建一層用來寫代碼，打開動作面板，輸入下列代碼：

　　1. var bmp:BitmapData = new BitmapData(550,400);

　　2. var zh:DisplacementMapFilter = new DisplacementMapFilter(bmp,new Point(0,0),1,2,10,600);

　　3. var p1:Point = new Point();

　　4. var p2:Point = new Point();

　　5. var zdxg:Array = [p1,p2];

　　6. addEventListener(Event.ENTER_FRAME ,ld);

　　7. function ld(e:Event):void {

　　8. zdxg[0].x += 0.2;

　　9. zdxg[1].y += 0.1;

　　10. bmp.perlinNoise(168,5,2,4,true,true,2,true,zdxg);

　　11. pic.filters = [zh];

　　12. }

　　OK，測試影片，一個漂亮的水汶效果立即出現在你的眼前。

　　代碼分析：

　　首先聲明了一個與圖片一樣大的BitmapData類實例bmp，用來作為置換圖濾鏡的參數。

　　var bmp:BitmapData = new BitmapData(550,400);

　　然後聲明一個置換圖濾鏡zh，將bmp作為參數。

　　var zh:DisplacementMapFilter = new DisplacementMapFilter(bmp,new Point(0,0),1,2,10,600);

　　接下來聲明了兩個點，並將這兩個點放到到一個叫zdxg的數組中，這個數組將用於bmp產生雜點的參數。

　　var p1:Point = new Point();

　　var p2:Point = new Point();

　　var zdxg:Array = [p1,p2];

　　然後，在ENTER_FRAME事件中調用ld函數。

　　addEventListener(Event.ENTER_FRAME ,ld);

　　ld函數，動態改變兩個點的位置，然後使bmp應用雜點功能，在每一幀的間隔產生不同的雜點效果，使置換濾鏡效果產生變化，最後讓影片剪輯pic,應用濾鏡，實現水汶效果。

　　function ld(e:Event):void {

　　zdxg[0].x += 0.2;

　　zdxg[1].y += 0.1;

　　bmp.perlinNoise(168,5,2,4,true,true,2,true,zdxg);

　　pic.filters = [zh];

　　}