|
使用 beingGradientFill 創(chuàng)建漸變填充
下面開始學習繪圖 API 的強大函數：beginGradientFill(fillType, colors, alpha, ratios, matrix)。與線條樣式相同，這個方法也有很多額外的可選參數——擴散方法(spreadMethod)，插補方法(interpolationMethod)及焦點位置比例(focalPointRatio)。這些參數可用來調整漸變的屬性，但是在大多數簡單的應用中這些參數不是必需的，而這個方法與 beginFill 有很多相似之處，同樣也使用 endFill 作為結束。兩者最大的不同是填充的顏色，我雖不想說 beginGradientFill 是用來創(chuàng)建漸變填充的，但是，如果不這么說，又感覺少了點什么。漸變填充至少要有兩種顏色，圖形的第一部分從第一種顏色開始，然后逐漸混合成為另一種顏色，或者混合成一個或多個已定義的顏色。
指定填充類型
我們可以建立兩種類型的漸變填充：線性(linear)和放射(radial)狀。在線性填充時，漸變的顏色沿著直線從一點到另一點。默認的情況，是從左向右的一條直線，也可以是從上到下或其它角度的直線。圖4-5是一些線性漸變的例子。
圖4-5 線性填充
為了能夠看到線性漸變，需要至少兩種不同的顏色。如果指定了兩種顏色，那么填充將會從第一種顏色向第二種顏色漸變。如果指定了更多的顏色，填充色將會從第一種顏色漸變?yōu)榈诙N，然后再漸變到第三種……直到最后一種。
放射狀填充與線性填充使用的參數大致相同，只是在解釋上有所不同。從指定的中心位置開始創(chuàng)建漸變，以這點為基礎向外進行放射，形成一個圓或橢圓。我們指定的第一種顏色用做內圓，最后一種顏色作為外圓，唯一不需要的就是角度。圖4-6是一個放射狀填充。
對于 beginGradientFill(fillType, colors, alphas, ratios, matrix) 方法，第一個參數為填充類型，非常簡單，用一個字符串表示，這兩個值中的一個：”linear”或”radial”。與第三章講的事件類型很像，目前事件類型也被設置為 flash.display.GradientType 類的靜態(tài)屬性，為的是避免錯誤輸入。我們可以導入 GradientType 類然后輸入 GradientType.LINEAR 或 GradientType.RADIAL。
圖4-6 放射狀填充
設置 colors , alphas 及 ratios
使用 colors 參數設置顏色，當然也必需設置每一個顏色所要填充的位置，使用0到255中的一個數進行指定，0表示填充的開始位置，255表示填充結束位置。在這些數值中，每一個數代表一個顏色的位置，這就是填充的比例。因此，如果有要填充兩種顏色，那么應該指定0和255作為 ratios，如果有三個顏色值，那么應該寫成 0,128,255。這樣就將第二個顏色放到了另外兩個顏色的中間。如果比例值為 0,20,255，那么第一種顏色會很快漸變?yōu)榈诙N顏色，然后非常緩慢地漸變?yōu)榈谌N顏色。請記住這些數值不是像素值，而是指在 255 中的某一個部分。
我們同樣必須指定漸變色的透明度，這就是 alpha 值，從 0.0 到 1.0，而在 AS 2 中表示為0到100。如果不需要透明度，那么就設置為 1.0。如果設置的透明度是從1.0到0.0，那么漸變的過程不僅是改變顏色，而且還有平滑淡出的效果�？梢杂米鰟�(chuàng)建柔和的陰影（也許比使用投影濾鏡(drop shadow filter)還要好些）。
這里每一個參數都是一個數組，因為需要傳入至少兩個以上的 colors，alphas 及 ratios。我們可以先創(chuàng)建一個數組，然后寫入每一個參數的值，如下：
var colors:Array = new Array();
colors[0] = 0xffffff;
colors[1] = 0x000000;
下面是一個更簡單作法，我們可以在創(chuàng)建數組的同時，為數組的每個元素賦值，直接寫在方括號中，以逗號作為分隔：
var colors:Array = [0xffffff, 0x000000];
事實上，我們甚至可以不去使用 colors 變量。直接把右邊的數組寫入 beginGradientFill 表達式中作為參數。因此，可以寫成這樣：
graphics.beginGradientFill(GradientType.LINEAR,
[0xffffff, 0x000000],
[1, 1],
[0, 255],
matrix);
這里定義了兩個顏色值，兩個 alpha 值(均為 100%)和比例值的開始位置與結束位置，所以漸變將以白色為開始最后逐漸變化為黑色。當然，也可以為每個參數設置一個對應的變量，如果定義了很多個顏色值的話，這樣寫會更清楚些。如果定義了三個顏色值，就必需有三個 alpha 值和三個比例值與之對應。如果有某些值多了或少了，那么就會引起會靜默失敗——沒有漸變，沒有填充，沒有錯誤信息。
下面只需要設置一下填充的起點、終點或角度了。也許大家已經猜到了，這就是神秘的matrix(矩陣) 參數。
創(chuàng)建矩陣
矩陣(Matrix)就是一個二維表格，每行每列中包括不同的數，可以出計算不同的值。矩陣此外還用于繪圖(graphics)中，用作旋轉，縮放和移動物體。在這里，用于對漸變的控制，我們需要為填充進行定位，設置它的大小，或是進行旋轉。使用 matrix 時，需要創(chuàng)建一個 matix 對象，這是一個 flash.geom.Matrix 類的對象。（實際上， Matrix 類不僅用于操作漸變填充，但這里我們只介紹它在漸變中的應用。第18章中介紹了更多的矩陣使用）。
在使用 Matrix 類時有一點復雜，這里有一個特殊的方法用于創(chuàng)建漸變填充的矩陣類型，這個方法名為 createGradientBox，必要參數為 width 和 height，可選參數為 rotation 及漸變的起點的 x,y 位置。首先創(chuàng)建一個 Matrix 類的實例，然后調用它的 createGradientBox 方法自動設置內部參數值。形式如下：
var matrix:Matrix = new Matrix();
matrix.createGradientBox(width, height, rotation, x, y);
不要忘記在類的開始處導入 flash.geom.Matrix 類。如果僅指定 width 和 height，最后三個值默認為 0。來看一下代碼，這里是文檔類 GradientFill.as：
package {
import flash.display.GradientType;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.geom.Matrix;
public class GradientFill extends Sprite {
public function GradientFill() {
init();
}
private function init():void {
graphics.lineStyle(1);
var colors:Array = [0xffffff, 0xff0000];
var alphas:Array = [1, 1];
var ratios:Array = [0, 255];
var matrix:Matrix = new Matrix();
matrix.createGradientBox(100, 100, 0, 0, 0);
graphics.beginGradientFill(GradientType.LINEAR, colors,
alphas, ratios, matrix);
graphics.drawRect(0, 0, 100, 100);
graphics.endFill();
}
}
}
測試影片后，會看到一個從白色到紅色漸變的正方形。現在，我們改變一下繪圖代碼，在不同的地方繪制這個正方形(見 GradientFill2.as)：
graphics.drawRect(100, 100, 100, 100);
現在這個正方形為全紅色，為什么會這樣？漸變在 x 為0處開始，但它只有100像素寬，而正方形是從100像素開始的，漸變色已經到達了全紅色，紅色從這里開始已經出界了。因此，如果想讓矩陣的 x,y 在正方形的左上角開始，應該這樣寫：
matrix.createGradientBox(100, 100, 0, 100, 100);
這樣， x,y 坐標就與正方形的起點相同。請使用同樣的正方形，通過改變矩陣和漸變填充觀察創(chuàng)建的填充是什么效果。首先，試一下三種顏色：
var colors:Array = [0xffffff, 0x0000ff, 0xff0000];
var alphas:Array = [1, 1, 1];
var ratios:Array = [0, 128, 255];
不要忘記改變 alphas 和 ratios ，將中間的比例移動一下看看對漸變色的影響。試用 64 或 220 代替 120。
下面是一個直接 alpha 變化的例子，使用相同的顏色，只改變 alpha 的值：
var colors:Array = [0x000000, 0x000000];
var alphas:Array = [1, 0];
var ratios:Array = [0, 255];
試著改變一下角度，下面是 45度角：
matrix.createGradientBox(100, 100, Math.PI / 4, 100, 100);
使用 Math.PI/2 旋轉90度形成一個垂直填充。 - Math.PI/2 形成向上填充，而 Math.PI 左是從右向左填充，默認為從左向右填充。
beginGradientFill(GradientType.RADIAL, colors, alphas, ratios, matrix);
現在，將這些應用在線性填充(linear)的技巧改為放射狀填充(radial)的版本。
顏色轉換
下面一個渲染工廠是 flash.geom.ColorTransform 類及其方法。與繪圖 API 不同，該類不允許創(chuàng)建圖形，僅僅用于改變已存在于影片或顯示對象實例中圖形的顏色。讓我們去看看它是怎樣工作的。
使用 ColorTransform 類改變顏色
在 ActionScript 2 中，操作影片剪輯顏色最常用的方法是 Color 類，擁有像 setRGB 和 setTransform 這樣的方法。Flash 8 中就引用了 ColorTransform 類，同時 Color 類就不再被推薦使用，但是想大多數人仍然繼續(xù)使用 Color 類，因為這已經成為習慣了。Color 類已經不是 AS 3 的一部分了，現在是學習新方法的最佳時機。ColorTransform 的方法與 Color 類的方法本質上是非常像，兩者差不太多，只是語法上略有不同。
首先，要知道 Sprite 影片，影片剪輯，或其它任何顯示對象都有一個屬性叫作 transform。這是 flash.geom.Transform 類的一個實例，其中包括一些不同的屬性用于縮放，旋轉，定位和改變影片顏色，影響顏色屬性的就是 colorTransform。要知道這是一個顯示對象屬性的屬性，訪問方法如下；
mySprite.transform.colorTransform
或使用一個繼承自 Sprite 的類，可以直接獲得類自身的 transform 屬性：
transform.colorTransform
通過為一個 ColorTransform 對象的顏色屬性賦值可以改變一個對象的色彩。你也許會問，什么是 ColorTransform 對象？如果大家使用過 AS 2 的 Color 方法：setTransform，就知道我們需要傳入一個 object(對象) ，在這個 object 中有各種屬性，需要告訴它如何變換顏色。 ColorTransform 與這個方法非常相似，但不是使用一個普通的對象(object)，而現在這個方法已經擁有了官方的類。在 AS 2 中，是這樣做的：
myTransform = new Object();
myTransform.ra = 50;
myTransform.ga = 40;
myTransform.ba = 12;
myTransform.aa = 40;
myTransform.rb = 244;
myTransform.gb = 112;
myTransform.bb = 90;
myTransform.ab = 70;
在 AS 3 中，應該創(chuàng)建一個同樣的 ColorTransform 對象，像這樣：
myTransform = new ColorTransform(0.5, 0.4, 0.12, 0.4, 244, 112, 90, 70);
前四個值為乘數，后四個值為偏移量，馬上會介紹這個公式，然后就會知道為什么它們這樣命名了。大家也許注意到了乘數的比例值為十進制范圍 -1.0到1.0，而不是 -100到100。事實上，幫助文檔說是從0.0到1.0，但還可以使用負數做為乘數實現一些有趣的效果(稍后會看到)，偏移量依然是從-255到255。ColorTransform 對象的構造函數如下：
ColorTransform(redMultiplier,
greenMultiplier,
blueMultiplier,
alphaMultiplier,
redOffset,
greenOffset,
blueOffset,
alphaOffset)
轉換一個特殊顏色通道的公式如下，以紅色通道為例：
newRed = oldRed * redMultiplier + redOffset;
在使用 ColorTransform 時，記得它是 flash.geom 包中的一部分，所以需要導入類。
給大家一個例子，下一個文檔類：TransformColor.as，在 SWF 中嵌入一張圖片作為位圖(位圖類的實例)。因為位圖類是一個顯示對象，擁有 transform 屬性，代碼設置了位圖的 transform 的 colorTransform 屬性，使用構思好的設置來制作一張底片效果的圖像：
package {
import flash.display.Bitmap;
import flash.display.Sprite;
import flash.geom.ColorTransform;
public class TransformColor extends Sprite {
[Embed(source="picture.jpg")];
public var Picture:Class;
public function TransformColor() {
init();
}
private function init():void {
var pic:Bitmap=new Picture ;
addChild(pic);
pic.transform.colorTransform=new ColorTransform(-1,-1,1,1,
255,255,255,0);
}
}
}
測試這個影片時，請改變這行代碼
[Embed(source="picture.jpg")]
請匹配這個路徑為所使用圖片的路徑，如果在 Flash IDE 中編輯，只需要在庫中導入這張圖片，為 ActionScript 導出，并輸入類名為 Picture。重要的一句是 ColorTransform 的設置。
出處：藍色理想
責任編輯：bluehearts
上一頁 渲染技術 [6] 下一頁 渲染技術 [8]
◎進入論壇RIA設計與應用版塊參加討論
|
第 1 頁 
第 7 頁 渲染技術 [7]
