Flash AS教程:用動態(tài)遮罩實現(xiàn)液化效果(2)_Flash教程
推薦:Flash AS入門教程第七課:影片剪輯第五節(jié)_拖動與碰撞檢測本文由中國教程網(wǎng) sanbos 原創(chuàng),轉(zhuǎn)載請保留此信息! 本系列Flash教程由中國教程網(wǎng)Flash互助課堂專為Flash新手制作,更多教程和練習請點擊這里,在這里有系列的教程、練習,并有老師對練習
代碼分析:
看到這個效果我們很可能想到慮鏡,其實不然,這就是用遮罩實現(xiàn)的效果。原理并不復雜。若干個隨鼠標運動的園型遮罩,下面也是若干個被遮罩的圖片,遮罩和被遮罩大小都不斷變化,從而實現(xiàn)了這個效果。
首先創(chuàng)建了一個空的MC,然后預設了一個數(shù)量,上面我們說到若干個,這里設為20。
this.createEmptyMovieClip("theScene", this.getNextHighestDepth());
var maxImages:Number = 20;
接下創(chuàng)建一個函數(shù)用來創(chuàng)建這些若干個遮照和圖片。
dupeAndPlace = function (image:MovieClip):Object {
創(chuàng)建一個對象用來存放這些遮罩和圖片。
var arrHolder:Object = new Object();
接下來創(chuàng)建兩個數(shù)組一個用來存放圖片,一個用來存放遮罩:
arrHolder.pics_arr = new Array(0);
arrHolder.masks_arr = new Array(0);
接下來用一個for循環(huán)來創(chuàng)建這些圖片和遮罩:
for (var i = 1; i<maxImages; i ) {
用兩個變量來代表圖片和遮罩,這樣一個循環(huán)下來,就產(chǎn)生了20個圖片和遮罩,當然這時還沒創(chuàng)建,只是產(chǎn)生了20個名稱而已:
var dnm = "image" i;
var mnm = "mask" i;
接下來再創(chuàng)建兩個對象,用來存放將要產(chǎn)生的遮罩和圖片的屬性:
var imgObj = {_x:image._x, _y:image._y, _xscale:100 (i*1.7), _yscale:100 (i*1.7)};
var maskObj = {_xscale:Math.floor(100/i 3), _yscale:Math.floor(100/i 3), _x:this._xmouse, _y:this._ymouse};
下面創(chuàng)建兩個對象分別復制圖片和遮罩,并將上面兩個對象中存的屬性賦給它們。
var theDupedImage = image.duplicateMovieClip(dnm, theScene.getDepth() i, imgObj);
var theDupedMask = mask_mc.duplicateMovieClip(mnm, theScene.getDepth() (i*50), maskObj);
然后將遮罩應用于圖片上:
theDupedImage.setMask(theDupedMask);
然后將遮罩和圖片存到上面創(chuàng)建的數(shù)組中。
arrHolder.pics_arr.push(theDupedImage);
arrHolder.masks_arr.push(theDupedMask);
將舞臺上的mask_mc元件隱藏。
mask_mc._visible = false;
返回存放這些遮罩和圖片的對象:
return arrHolder;
上面這些動作都是在for循環(huán)中,因此,到現(xiàn)在就已創(chuàng)建了20對大小不一遮罩和圖片,并且都被設置了遮罩和被遮罩的關系。
下面創(chuàng)建一個函數(shù)使這些遮罩向鼠標靠近:
makeWaves = function (masks_arr:Array) {
for (var i = masks_arr.length; i>0; i--) {
masks_arr._x = (this._xmouse-masks_arr._x)/maxImages*i;
masks_arr._y = (this._ymouse-masks_arr._y)/maxImages*i;
}
};
創(chuàng)建一個函數(shù)用來執(zhí)行上面創(chuàng)建的創(chuàng)建這些遮罩和圖片的函數(shù),并在每隔一幀時調(diào)用一次讓遮罩靠近鼠標的函數(shù):
this.liquefyImage = function(theImage:MovieClip){
var arrHolder:Object = dupeAndPlace(theImage);
onEnterFrame = function(){
makeWaves(arrHolder.masks_arr);
}
}
下面是當鼠標移過圖片時調(diào)用上面這個函數(shù):
pic_mc.onRollOver = function(){
liquefyImage(pic_mc);
}
分享:Flash AS入門教程:文本與字符實例—打字游戲制作簡介:本例繼續(xù)講解AS的基礎知識,前幾節(jié)課我們學習了AS中的文本與符的理論知識,今天來實際操作一下,制作一個打字游戲,對Flash的AS編程有興趣的朋友可以到論壇與作者交流~~本文由中國教程
- 相關鏈接:
- 教程說明:
Flash教程-Flash AS教程:用動態(tài)遮罩實現(xiàn)液化效果(2)
。