中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

本文譯者:egoldy
文章出處: http://www.5etdemi.com
文章性質(zhì):翻譯

FLASH DRAWING API除了可以讓我們繪制圖形外,我們還可以應(yīng)用它繪制遮罩,而這種繪制的遮罩的特點(diǎn)就是我們可以動(dòng)態(tài)的繪制.

怎樣使用FLASH DRAWING API 繪制遮罩

MM提供的遮罩的有如下這幾種:

代碼:

MovieClip.beginFill
MovieClip.beginGradientFill
MovieClip.clear
MovieClip.curveTo
MovieClip.endFill
MovieClip.lineStyle
MovieClip.lineTo
MovieClip.moveTo

在實(shí)際的應(yīng)用中我們可能不會全都用上,如下面的例子中我們會應(yīng)用到beginfill,lineto,moveto,endfill等.

下面我們就開始學(xué)習(xí),先看一個(gè)簡單的例子.

我們要在屏幕上繪制一個(gè)遮罩,并用它的來做遮罩,為了實(shí)現(xiàn)上面的效果,我們需要在場景中導(dǎo)入一個(gè)圖片,并將其轉(zhuǎn)換為影片剪輯,命名為maskee.然后我們在主幀上加入如下代碼:

代碼:

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)在你可以測試你的影片,同時(shí)你可能注意到這里使用了with,目的是使我們的代碼看起來更清晰,當(dāng)然你也可選擇其它的方法,如下,你可進(jìn)行一下對比,你會認(rèn)為哪一種更清晰,更易讀一些.

代碼:

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)在你就可以測試你的影片,如果想把我們繪制的形體指定為遮罩只需要在下面加上一行代碼：

代碼:

_root.maskee.setMask(_root.square);

這一行代碼的意義在于將我們繪制的方形指定為maskee的遮罩,同時(shí)我們在上面應(yīng)用了clear()方法,它的作用是清除square之前的動(dòng)作。
測試你的影片

接下來我們來看幾個(gè)例子：

影片1：可拖動(dòng)的遮罩

根據(jù)上面我做的基礎(chǔ)，仍然使用上面的maskee影片剪輯，將主幀上的代碼清除，我們將下面的代碼加在maskee影片剪輯上，而不影片剪輯的幀上，

代碼:

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();
}

測試你的影片，你會發(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è)問題就clear()方法的應(yīng)用,試想一下如果我們不加clear()這一行代碼。你可以想象一下會發(fā)生什么�，F(xiàn)在我們將clear()這一行刪除或是加上注釋.測試你的影片，你就會看到一種擦除效果，你還可以加上你自已的創(chuàng)意，變成任意的形狀。

觀看演示2

影片2：像素淡出遮罩效果

這種效果你可能會在powerpoint或是在director中見過，在本例中不需要你理解每一行的意義，這里只是對淡入遮罩的一個(gè)提示。我們?nèi)允褂蒙衔闹械睦�子，清除原有maskee上的代碼，加入如下代碼：

代碼:

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;
        }

測試你影片，你會發(fā)現(xiàn)隨機(jī)出的10*10像素的方形會不斷的出現(xiàn)在屏幕上，同時(shí)圖片淡出

觀看演示3

影片3：扇形LOADING

接下我們要使用動(dòng)態(tài)遮罩制作一個(gè)扇面LODING。最后的樣子大致為：

首先，你必須下面的這張圖片的三角函數(shù)。

在上面圖的坐標(biāo)分別為：

代碼:

x1 = r*sin(O)
x2 = r*sin(O+dO)
y1 = r*cos(O)
y2 = r*cos(O+dO)

原理就是繪制出圓的1/100也就是3.6度，也就是說我們需要繪一個(gè)三角形，然后不斷的繪制，直到100.
你需要先在場景中創(chuàng)建圓形，轉(zhuǎn)換為影片剪輯，同時(shí)要注意的問題是你必須在這個(gè)影片剪輯的內(nèi)部將其中心對齊。這一點(diǎn)是很重要的。

選擇圓形剪輯，加入如下代碼：

代碼:

onClipEvent(load)
{
        _root.stop();
        dO = 3.6;
        r = 75;
        function addSlice(O)
        {
                x1 = r*Math.sin(O*Math.PI/180);
                x2 = r*Math.sin((O+dO)*Math.PI/180);
                y1 = r*Math.cos((O)*Math.PI/180);
                y2 = r*Math.cos((O+dO)*Math.PI/180);
                trace(x1 + ":" + y1);
                with(_root.mask)
                {
                        moveTo(0,0);
                        beginFill(0x000088);
                        lineTo(x1,y1);
                        lineTo(x2,y2);
                        endFill();
                }
        }
        _root.createEmptyMovieClip("mask",0);
        this.setMask(_root.mask);
        _root.mask._yscale = -100;
        _root.mask._x = this._x;
        _root.mask._y = this._y;
        oldLoaded = 0;
}
onClipEvent(enterFrame)
{
        loaded = Math.ceil(_root.getBytesLoaded()/_root.getBytesTotal()*100);
        for(i = oldLoaded; i < loaded; i++)
        {
                addSlice(dO*i);
        }
        oldLoaded = loaded;
}

在上面的代碼中_root.mask._yscale=-100是用來按制方向的，正向還是反向，同時(shí)我們注意到有兩個(gè)變量，oldloaded和loaded.之所以有oldloade是為了存放我們之前下載的數(shù)值。

好，現(xiàn)在可以測試你的影片了。為了看到效果，你可以邊續(xù)按兩次回車。

觀看演示4

附源文件：dymask1.zip　pieloader.rar

出處：WebStudio
責(zé)任編輯：藍(lán)色

上一頁 下一頁 動(dòng)態(tài)遮罩高級教程

◎進(jìn)入論壇Flash專欄版塊參加討論