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

在上一篇教程中我有意的避開curveTo因為它相對于lineTo來說多少有些復雜，然后這種效果我認為變化多會優(yōu)于一味的使用lineTo.
首先我們需要先了解一下curveTo的相關(guān)命令：

CURVETO命令：
在下面的例子中我們要用到的命令如下：
代碼:

MovieClip.beginFill()
MovieClip.endFill()
MovieClip.lineTo()
MovieClip.curveTo()

前面三行我們已在第一篇教程學習過，現(xiàn)在只剩下curveTo，curveTo(controlX,controlY,endX,endY)將從startX,startY開始繪制一條二次方曲線至endX,endY, startX,startY的位置決定于使用moveTo,lineTo,或curveTo得到的最后一點，controlX,controlY 控制著兩點之間的曲度，你可以把controlX,controlY認為是一個磁性點，它會吸附曲線靠近它。它的工作過程有些象BEZIER貝賽爾曲線，不同的是每一條曲線只有只能有一個控制點。

現(xiàn)在需要看一下我們的動態(tài)遮罩的工作過程，它要經(jīng)過三個邊續(xù)的過程，如下圖所示：

如上圖你所看到，遮罩的組成是由最初上面的一條直線然后變形成為4邊的形狀也就是面的藍色線條將屏幕劃分為4邊，然后再變形為紅色的線條，最后形成整個矩形。十字代表的是控制點的大致位置。

在這里面你需要注要注意的是第一條和最后一條并不是曲線，而是直線，所以你可將你的按制點放在任何地方，這也給我們增加了許多彈性空間。在后面你將會看到。

變形形體

我們必須要掌握將一個形體變?yōu)榱硪粋�形體，比如藍色形狀變?yōu)榧t色形狀，這個看起來比較麻煩，實際上很簡單，就象一個物體從A點移到B點是一個性質(zhì)。我們將移到第一條曲線的三個點至第二條曲線三個點的位置，下面我們來看一下例子，將曲線c變形為曲線J。

代碼:

//Create movie clip and mask
//counter = -1;
//創(chuàng)建遮罩
_root.createEmptyMovieClip('line', 0);
animInt = setInterval(doAnim, 17);
animDir = 1;//用來控制方向的變量

//定義函數(shù)
function doAnim()
{
        var currMC = _root.line;
        var time = animIndex/60;
        var dist = time;
        with(currMC)
        {
                //c曲線的位置: (150, 25), (25,100), (150,175)
                //j曲給的位置: (150, 25), (125,200), (50,125)
                clear();
                lineStyle(0x000000);
                moveTo(150,25);
                curveTo(25+100*dist,100+100*dist,150-100*dist, 175-50*dist);
        }
        
        animIndex += animDir;
        if(animIndex >= 60)
        {
                animDir = -1
        }
        if(animIndex <= 0)
        {
                animDir = 1
        }
}

這段代碼中是將c曲（150，25）（25，200），（150，175）變形為J曲線(150, 25), (125,200), (50,125)

注意，這段代碼只能在FLASHMX中運行。如果想在FLASHMX2004中運行，你需要在定義一下animIndex在animDir=1；下面加入一行var animIndex=0;測試你的影片，觀看結(jié)果。

觀看演示1

開始時創(chuàng)建一個影片剪加line,在line的內(nèi)部繪制變形曲線，setInterval每17豪秒循環(huán)繪制一次，變量animIndex用來跟蹤曲線繪制到的位置，這個例子中我們分成了60步來繪制，time變量的范圍是從0到1，決定于animIndex,同時將其附給dist，用來創(chuàng)建現(xiàn)線動畫。

即然dist的變量范圍是從0到1，那么很明顯我們用到了一個公式從A點到B點

代碼:

x = startX + dist*deltaX;
y = startY + dist*deltaY;

如下我們的應用：
curveTo(25+100*dist,100+100*dist,150-100*dist, 175-50*dist);

在這個公式中startX和startY是開始點的坐標，deltaX和deltaY分別是x和y到開始點和結(jié)束點的距離。

Easing, bouncing and other transitions

緩動，彈性和其它運動方式
可能在一開始你就會想我們?yōu)槭裁磿�不厭其煩的使用變量time和dist，那么現(xiàn)在讓我們來看一下他們之間的關(guān)系，你就會知道我們?yōu)槭裁匆�用它�?

如上果你所看到的豎軸代表Dist,水平軸代表time.他們之間的關(guān)系目前是線性，也是就dist=time.圖上的斜線代表動畫的速度。在這個例子中動畫的速度是恒定的。現(xiàn)在假如我們想做成開始時速度很快到結(jié)速時無速度，則我們只需要在在t=0時加大紅線的斜率，而在t=1時使紅線無斜率就可以了。這實際上就是倒轉(zhuǎn)過的拋物線或是三角正弦，如果想用其它的運動方式我們可以創(chuàng)建不同的dist和time的關(guān)系，來得到更有趣的效果，下面是一些創(chuàng)建好的關(guān)系，可能對你會有用處：

你可能會對Robert Penner's transition classes感興趣。原理都是一樣的。

將代碼合在一起

代碼:

//全局變量決定于你的影片寬度
mWidth = 400;

//創(chuàng)建影片剪輯和遮罩
counter = -1;
createMovieClip();
animInt = setInterval(doAnim, 17);

function createMovieClip()
{
        counter++;
        attachMovie('pic' add (counter % 2), 'pic' add counter, counter);
        createEmptyMovieClip('mask' add counter, counter + 10000);
        this['pic' add counter].setMask(this['mask' add counter]);
}

function doAnim()
{
        var currMC = _root['mask' add counter];
        if(animIndex < 15)
        {
                var time = animIndex/15;
                var dist = 0.5*Math.sin(Math.Pi*(time-0.5)) + 0.5;
                
                with(currMC)
                {
                        clear();
                        beginFill(0x000000);
                        lineTo(mWidth,0);
                        lineTo(mWidth,dist*125);
                        curveTo(250,dist*40,0,10*dist);
                        endFill();
                }
        }
        else if (animIndex < 35)
        {
                var time = (animIndex-15)/20;
                var dist = 0.5*Math.sin(Math.Pi*(time-0.5)) + 0.5;
                
                with(currMC)
                {
                        clear();
                        beginFill(0x000000);
                        lineTo(mWidth,0);
                        lineTo(mWidth,125);
                        curveTo(250-100*dist,40+150*dist,0,10+190*dist);
                        endFill();
                }
        }
        else if (animIndex <= 50)
        {
                var time = (animIndex-35)/15;
                var dist = 0.5*Math.sin(Math.Pi*(time-0.5)) + 0.5;
                
                with(currMC)
                {
                        clear();
                        beginFill(0x000000);
                        lineTo(mWidth,0);
                        lineTo(mWidth,125+75*dist);
                        curveTo(150,190+10*dist,0,200);
                        endFill();
                }
        }
        
        animIndex++;
        if(animIndex > 50)
        {
                animIndex = 0;
                _root['pic' add (counter - 1)].removeMovieClip();
                _root['mask' add (counter - 1)].removeMovieClip();
                createMovieClip();
        }
}

這段代碼使用了兩個函數(shù)，createmovieclip用來將圖片貼加到場景中并設(shè)置MASK，cunter用來跟蹤圖片的實例名稱。

Doanim函數(shù)被每20豪秒調(diào)用一次，整個遮罩形成過程與范例上一個例子一樣分成三部執(zhí)行。對于緩動方式你可選擇其它的方式，只需要將DIST的值改為其它的公式就可以。

觀看演示2

總結(jié)：在這兩篇教程中我們先后學習了基本的動態(tài)遮罩，和動態(tài)繪制曲線來形成遮罩，兩者基本的原理相同，尤其你應注意的是如何加入easing,bouncing等等。我想這對你可能是有用的。

源文件下載：dymask2.zip

出處：WebStudio
責任編輯：藍色

上一頁 動態(tài)遮罩的原理和應用 下一頁

◎進入論壇Flash專欄版塊參加討論