本文譯者:egoldy
文章出處: http://www.5etdemi.com
文章性質(zhì):翻譯
FLASH DRAWING API除了可以讓我們繪制圖形外,我們還可以應(yīng)用它繪制遮罩,而這種繪制的遮罩的特點(diǎn)就是我們可以動(dòng)態(tài)的繪制.
怎樣使用FLASH DRAWING API 繪制遮罩
MM提供的遮罩的有如下這幾種:
代碼:
1 2 3 4 5 6 7 8 | MovieClip.beginFill MovieClip.beginGradientFill MovieClip.clear MovieClip.curveTo MovieClip.endFill MovieClip.lineStyle MovieClip.lineTo MovieClip.moveTo |
在實(shí)際的應(yīng)用中我們可能不會(huì)全都用上,如下面的例子中我們會(huì)應(yīng)用到beginfill,lineto,moveto,endfill等.
下面我們就開(kāi)始學(xué)習(xí),先看一個(gè)簡(jiǎn)單的例子.
我們要在屏幕上繪制一個(gè)遮罩,并用它的來(lái)做遮罩,為了實(shí)現(xiàn)上面的效果,我們需要在場(chǎng)景中導(dǎo)入一個(gè)圖片,并將其轉(zhuǎn)換為影片剪輯,命名為maskee.然后我們?cè)谥鲙霞尤肴缦麓a:
代碼:
1 2 3 4 5 6 7 8 9 10 | this.createEmptyMovieClip('square',0); with(_root.square) { moveTo(0,0); beginFill(0x000088) lineTo(100,0); lineTo(100,100); lineTo(0,100); endFill(); } |
上面的代碼我們已經(jīng)完成了方形的繪制,現(xiàn)在你可以測(cè)試你的影片,同時(shí)你可能注意到這里使用了with,目的是使我們的代碼看起來(lái)更清晰,當(dāng)然你也可選擇其它的方法,如下,你可進(jìn)行一下對(duì)比,你會(huì)認(rèn)為哪一種更清晰,更易讀一些.
代碼:
1 2 3 4 5 6 7 | this.createEmptyMovieClip('square',0); _root.square.moveTo(0,0); _root.square.beginFill(0x000088) _root.square.lineTo(100,0); _root.square.lineTo(100,100); _root.square.lineTo(0,100); _root.square.endFill(); |
上面的代碼我們只是繪制了方形,現(xiàn)在你就可以測(cè)試你的影片,如果想把我們繪制的形體指定為遮罩只需要在下面加上一行代碼:
代碼:
1 | _root.maskee.setMask(_root.square); |
這一行代碼的意義在于將我們繪制的方形指定為maskee的遮罩,同時(shí)我們?cè)谏厦鎽?yīng)用了clear()方法,它的作用是清除square之前的動(dòng)作。
測(cè)試你的影片
接下來(lái)我們來(lái)看幾個(gè)例子:
影片1:可拖動(dòng)的遮罩
根據(jù)上面我做的基礎(chǔ),仍然使用上面的maskee影片剪輯,將主幀上的代碼清除,我們將下面的代碼加在maskee影片剪輯上,而不影片剪輯的幀上,
代碼:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | onClipEvent(load) { _root.createEmptyMovieClip('square',0); function drawSquare() { x = _root._xmouse; y = _root._ymouse; with(_root.square) { clear(); moveTo(x-50,y-50); beginFill(0x000088) lineTo(x+50,y-50); lineTo(x+50,y+50); lineTo(x-50,y+50); endFill(); } } this.setMask (_root.square) } onClipEvent(mouseMove) { drawSquare(); updateAfterEvent(); } |
測(cè)試你的影片,你會(huì)發(fā)現(xiàn)一個(gè)100*100的方形在隨著光標(biāo)移動(dòng)并可為一個(gè)遮罩,與上個(gè)例了不同的是我們將繪制方形的代碼定義為一個(gè)函數(shù)drawSquare();因?yàn)槲覀円诠鈽?biāo)移動(dòng)的時(shí)不斷的調(diào)用它。另外上面用到了clear()方法,它的作用是清除square剪輯之前的所有動(dòng)作。
觀看演示1 查看效果
剛才我們提到一個(gè)問(wèn)題就clear()方法的應(yīng)用,試想一下如果我們不加clear()這一行代碼。你可以想象一下會(huì)發(fā)生什么?,F(xiàn)在我們將clear()這一行刪除或是加上注釋.測(cè)試你的影片,你就會(huì)看到一種擦除效果,你還可以加上你自已的創(chuàng)意,變成任意的形狀。
觀看演示2 查看效果
影片2:像素淡出遮罩效果
這種效果你可能會(huì)在powerpoint或是在director中見(jiàn)過(guò),在本例中不需要你理解每一行的意義,這里只是對(duì)淡入遮罩的一個(gè)提示。我們?nèi)允褂蒙衔闹械睦?,清除原有maskee上的代碼,加入如下代碼:
代碼:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | onClipEvent(load) { numY = 30; numX = 40; numPerFrame = 12; currSquare = 0; choices = new Array(); for(i = 0; i < numX*numY; i++) { choices.push(i); } _root.createEmptyMovieClip("mask", 0); this.setMask(_root.mask); function drawSquare(x,y) { with(_root.mask) { moveTo(x,y); beginFill(0x000088) lineTo(x+10,y); lineTo(x+10,y+10); lineTo(x,y+10); endFill(); } } } onClipEvent(enterFrame) { if(currSquare < numX*numY) { for(i = 0; i < numPerFrame; i++) { j = random(choices.length); t = choices[j]; choices[j] = choices[choices.length - 1]; choices.pop(); x = t % numX; y = Math.floor( t / numX ); drawSquare(x*10, y*10); } currSquare += numPerFrame; this._alpha = currSquare/(numX*numY)*100; } |
測(cè)試你影片,你會(huì)發(fā)現(xiàn)隨機(jī)出的10*10像素的方形會(huì)不斷的出現(xiàn)在屏幕上,同時(shí)圖片淡出
聯(lián)系客服