出處:PConline 2009年08月13日 作者:網(wǎng)頁教學(xué)網(wǎng) 責(zé)任編輯:lizhiyan
本教程利用Flash輕松制作照片上有水紋波動(dòng)的效果。教程最后提供源文件下載,僅供學(xué)習(xí)參考之用。先看看效果演示:
效果演示
創(chuàng)建FLASH文檔,然后準(zhǔn)備一幅美女照片為背景來用,按CTRL+J調(diào)整屬性。
圖1
然后把圖片轉(zhuǎn)換為影片剪輯,起名為photo_mc,然后我們設(shè)置影片剪輯的位置。確認(rèn)影片剪輯選中狀態(tài)下,我們打開對齊面板,然后設(shè)置如下。
圖2
然后命名實(shí)例名:
圖3
然后為第一幀添加如下動(dòng)作:
import flash.filters.DisplacementMapFilter;
import flash.display.BitmapData;
import flash.geom.Point;
this.createEmptyMovieClip("waterHold", this.getNextHighestDepth());
waterHold._visible = false;
var numOfRipples:Number = 65;
var speed:Number = 18;
for (var i:Number = 0; i<numOfRipples; i++) {
var ripple:MovieClip = waterHold.attachMovie("wave", "wave"+waterHold.getNextHighestDepth(), waterHold.getNextHighestDepth(), {_x:random(Stage.width), _y:random(Stage.height)});
ripple.gotoAndPlay(random(65));
}
onEnterFrame = function () {
var bm:BitmapData = new BitmapData(waterHold._width+65, waterHold._height+65, true, 0x50000000);
bm.draw(waterHold);
photo_mc.filters = [new DisplacementMapFilter(bm, new Point(0, 0), -1, 1, 1, speed)];
};
然后按CTRL+F8新建立影片剪輯元件。這里我們制作一個(gè)水紋動(dòng)畫。
圖4
然后制作一個(gè)形狀動(dòng)畫,水紋擴(kuò)散開,首先在第一幀里繪制一個(gè)橢圓,調(diào)整漸變填充。
圖5
圖6
在第一幀調(diào)整到最小,第75幀調(diào)整到最大。然后做形狀動(dòng)畫。
并且在第75幀添加如下代碼:
this._x = random(Stage.width);
this._y = random(Stage.height);
gotoAndPlay(random(10));
然后設(shè)置該影片剪輯的鏈接屬性。
圖7
好了這時(shí)可以看到效果了。