FlashMX Action畫線方法(上)

原作者：Ric Ewing 翻譯者：chenlei5211(flashmeng)

　　在以前，Macromedia Flash 在你試圖描繪一些效果時會有一些局限性，在一些複雜的應用中，ActionScript制約了開發人員的創意。而現在，Macromedia Flash MX內建的drawing tools有能力勝任幾乎所有的繪製工作。當你結合著ActionScript工作時，其效果是令人驚駭的。
　　這篇文章結合著原檔案來進行講解，在閱讀文章時結合你所下載的的原檔案將更有利與你的理解。
下載執行個體原檔案drawing_methods.zip(28K)

繪製的方法有哪些？

ActionScript中的新的繪製命令可以應用到每一個MC中，你要知道經由代碼創造的線和外形在執行效率上要勝過手工繪製的圖形。新的方法有：
· MovieClip.beginFill()
· MovieClip.beginGradientFill()
· MovieClip.clear()
· MovieClip.curveTo()
· MovieClip.endFill()
· MovieClip.lineStyle()
· MovieClip.lineTo()
· MovieClip.moveTo()
這些AS繪製工具給Flash MX帶了許多新的概念，所以先讓我們瞭解那些。

The virtual pen（虛擬鋼筆）

　　每一個MC中都有這個“虛擬鋼筆”。這支鋼筆是預先設定好的（預設的），它位於MC的原點（0，0）。它並沒有“繪製東西”和被填充，所以它是不可見的。任意一種繪製方法都將修改“鋼筆”屬性或者移動它。我們做了一個簡單的畫線例子以供你下載。在Flash MX中開啟這個drawLine.fla檔案，點擊"Draw line to 100,75" 按鈕可以看到"虛擬鋼筆“畫了一條藍色的線段。
在Flash MX中我們可以看到這個button被賦予了以下Actions:

on (release) {
_root.lineStyle(1, 0x0000FF, 100);
_root.lineTo(100, 75);
}

解說：_root表示電影主情境；我們用上面提到的" MovieClip.lineStyle() "來定義將要繪製線段的樣式--"1"定義了所繪製線段的寬度為1像素;"0x0000FF"是藍色的二進位代碼;"100"定義了線段的不透明度為100%(也就是不透明).在確定了線段的樣式以後,接著_root.lineTo(100, 75);一句就使得這個"鋼筆"從當前位置(0,0)向(100,75)畫出了線段.當這條線段被畫出之後"鋼筆"的位置就處於(100,75)了.

引申:如果我們再放置一個button,定義AS為：

on (release) {
_root.lineStyle(2, 0x0000FF, 80);
_root.lineTo(170, 200);
}

則“鋼筆”就會從(100,75)向(170,200)畫一條2像素寬透明度為20%的藍色線段。

Depth and draw methods

　　關於Depth請參見：Depth釋疑

MovieClip.moveTo(x, y)

　　這個命令可以改變“虛擬鋼筆”的初始位置（起點）。其中x和y的值定義了“鋼筆”的x和y的座標值。

執行個體說明：

　　做個形象地比喻：就是我們從(0,0)處拿起了鋼筆並移動到了(x,y)處（此時的鋼筆是“懸空”著的，在移動的這段距離中它的“筆尖”並沒有和“紙”接觸，所以不會留下任何痕迹）
比如在上邊的那個swf檔案中，我們想要得到一條從140,20 到 100,75的線段，我們需要加入一段代碼。如下：

on (release) {
_root.lineStyle(1, 0x0000FF, 100);
_root.moveTo(140,20);
_root.lineTo(100, 75);
}

第三行：_root.moveTo(140,20);就是我們添加的代碼，它使得“鋼筆”“懸空”移動到了(140,20)處；然後再向(100,75)畫線。

　　需要說明的是在這個例子中當你每次按下按鈕時都會繪製一個新的線段（當然看起來就只有一條線而已，這是因為他們被疊加起來了）
，這樣的話如果你反覆的點擊按鈕（比如2000次）那末它將會產生2000條一模一樣的線段！至於後果……所以我們需要有一個方法來解決，這就是MovieClip.clear,我們以後將會討論到。

MovieClip.lineStyle(thickness, rgb, alpha)

　　這是用來定義繪製的線的各項屬性的。上邊我們已經知道了它的用法，下面我們詳細地瞭解一下其中的各項參數：

Thickness:這個參數定義了所要繪製的線的寬（以像素為單位），它的值只能是從0到255的整數（小於0當作0，大於255當作255）。但如果你將Thickness定義為0的話，所繪製的線段卻是一條1像素寬的線。

RGB: 它是設定線的顏色的。這和繪圖時的RGB是一樣的。如果沒有指定RGB的值則預設為黑色。

Alpha: 它定義了線的不透明度（用百分比表示）取值範圍在0到100之間。當Alpha為0時所繪製的線是完全透明的，為100時則不透明。如果沒有指定Alpha的值則預設為100。

　　執行個體說明：雖然lineStyle能夠定義三個參數，但在一般情況下我們沒有必要每一項都給予定義。例如我們需要繪製一個寬度為2像素的黑色的不透明的線，則可以使用如下as:

_root.lineStyle(2);

　　可以看到這個as只定義了thickness的值，則其餘的兩項rgb, alpha均採用預設值。同樣的，我們也可以：

_root.lineStyle(0,0xFF0000);

　　這樣就可以起到精簡最佳化代碼的目的。

設定線段樣式後所畫的所有線段都將被作為一個單一對象來對待。調用“linestyle”函數時，即使所有的參數設定都和原來一樣，它也將停止現有的線段對象並開始一個新的線段對象。這樣以來，在使用alpha值小於100的重疊線段時就會導致一些意料之外的結果。在下面的例子（將alpha值設為25）中按住“multiple linesytles”按扭不放來看一下（圖形的）變化。你也可以在macromedia flash mx中開啟“linestyle.fla”這個檔案來觀看效果

MovieClip.lineTo(x, y)

　　這個命令我們上邊也提到過，就是改變線條的起點位置。在Flash MX中可以將x,y的座標值精確到0.05像素。由於Flash MX所能顯示的最小的長度為0.15像素，所以如果要繪製出一個可以看見的線條的話線條的起點和終點座標值之差的絕對值不能小於0.15,如:
_root.lineStyle(100,0xFF0000);
_root.moveTo(100,100);
_root.lineTo(100.15,100);

　　可以看到這個只有0.15寬的線條近似為一個圓點，那麼運用以上代碼可以很快捷的繪製出一個實心的圓，圓的直徑取決於Thickness的值，這是一個很好的竅門。如果一開始改變的是y的座標值的話就會改變這個圓點的位置但不會改變形狀，這是由於它並不是一個真正意義上的圓，只是一個水平的線條，試想我們能通過改變水平線的y座標來改變水平線的寬度（高度）嗎？

　　而如果小於0.15的話，你將不會看到這個線條，如：

_root.lineStyle(100,0xFF0000);
_root.moveTo(100,100);
_root.lineTo(100.13,100);

　　在下面的執行個體中我們使用了lineTo命令配合兩個可以拖動的MC，來實現一個簡單的互動效果。你能做出來嗎？