使用 beingGradientFill 创建渐变填充

下面开始学习绘图 API 的强大函数：beginGradientFill(fillType, colors, alpha, ratios, matrix)。与线条样式相同，这个方法也有很多额外的可选参数——扩散方法(spreadMethod)，插补方法(interpolationMethod)及焦点位置比例(focalPointRatio)。这些参数可用来调整渐变的属性，但是在大多数简单的应用中这些参数不是必需的，而这个方法与 beginFill 有很多相似之处，同样也使用 endFill 作为结束。两者最大的不同是填充的颜色，我虽不想说 beginGradientFill 是用来创建渐变填充的，但是，如果不这么说，又感觉少了点什么。渐变填充至少要有两种颜色，图形的第一部分从第一种颜色开始，然后逐渐混合成为另一种颜色，或者混合成一个或多个已定义的颜色。

指定填充类型

我们可以建立两种类型的渐变填充：线性(linear)和放射(radial)状。在线性填充时，渐变的颜色沿着直线从一点到另一点。默认的情况，是从左向右的一条直线，也可以是从上到下或其它角度的直线。图4-5是一些线性渐变的例子。

图4-5 线性填充

为了能够看到线性渐变，需要至少两种不同的颜色。如果指定了两种颜色，那么填充将会从第一种颜色向第二种颜色渐变。如果指定了更多的颜色，填充色将会从第一种颜色渐变为第二种，然后再渐变到第三种……直到最后一种。

放射状填充与线性填充使用的参数大致相同，只是在解释上有所不同。从指定的中心位置开始创建渐变，以这点为基础向外进行放射，形成一个圆或椭圆。我们指定的第一种颜色用做内圆，最后一种颜色作为外圆，唯一不需要的就是角度。图4-6是一个放射状填充。
对于 beginGradientFill(fillType, colors, alphas, ratios, matrix) 方法，第一个参数为填充类型，非常简单，用一个字符串表示，这两个值中的一个：”linear”或”radial”。与第三章讲的事件类型很像，目前事件类型也被设置为 flash.display.GradientType 类的静态属性，为的是避免错误输入。我们可以导入 GradientType 类然后输入 GradientType.LINEAR 或 GradientType.RADIAL。

图4-6 放射状填充

设置 colors , alphas 及 ratios

使用 colors 参数设置颜色，当然也必需设置每一个颜色所要填充的位置，使用0到255中的一个数进行指定，0表示填充的开始位置，255表示填充结束位置。在这些数值中，每一个数代表一个颜色的位置，这就是填充的比例。因此，如果有要填充两种颜色，那么应该指定0和255作为 ratios，如果有三个颜色值，那么应该写成 0,128,255。这样就将第二个颜色放到了另外两个颜色的中间。如果比例值为 0,20,255，那么第一种颜色会很快渐变为第二种颜色，然后非常缓慢地渐变为第三种颜色。请记住这些数值不是像素值，而是指在 255 中的某一个部分。

我们同样必须指定渐变色的透明度，这就是 alpha 值，从 0.0 到 1.0，而在 AS 2 中表示为0到100。如果不需要透明度，那么就设置为 1.0。如果设置的透明度是从1.0到0.0，那么渐变的过程不仅是改变颜色，而且还有平滑淡出的效果。可以用做创建柔和的阴影（也许比使用投影滤镜(drop shadow filter)还要好些）。
这里每一个参数都是一个数组，因为需要传入至少两个以上的 colors，alphas 及 ratios。我们可以先创建一个数组，然后写入每一个参数的值，如下：

var colors:Array = new Array();
colors[0] = 0xffffff;
colors[1] = 0x000000;

下面是一个更简单作法，我们可以在创建数组的同时，为数组的每个元素赋值，直接写在方括号中，以逗号作为分隔：
var colors:Array = [0xffffff, 0x000000];
事实上，我们甚至可以不去使用 colors 变量。直接把右边的数组写入 beginGradientFill 表达式中作为参数。因此，可以写成这样：

graphics.beginGradientFill(GradientType.LINEAR,
[0xffffff, 0x000000],
[1, 1],
[0, 255],
matrix);

这里定义了两个颜色值，两个 alpha 值(均为 100%)和比例值的开始位置与结束位置，所以渐变将以白色为开始最后逐渐变化为黑色。当然，也可以为每个参数设置一个对应的变量，如果定义了很多个颜色值的话，这样写会更清楚些。如果定义了三个颜色值，就必需有三个 alpha 值和三个比例值与之对应。如果有某些值多了或少了，那么就会引起会静默失败——没有渐变，没有填充，没有错误信息。
下面只需要设置一下填充的起点、终点或角度了。也许大家已经猜到了，这就是神秘的matrix(矩阵) 参数。

创建矩阵

矩阵(Matrix)就是一个二维表格，每行每列中包括不同的数，可以出计算不同的值。矩阵此外还用于绘图(graphics)中，用作旋转，缩放和移动物体。在这里，用于对渐变的控制，我们需要为填充进行定位，设置它的大小，或是进行旋转。使用 matrix 时，需要创建一个 matix 对象，这是一个 flash.geom.Matrix 类的对象。（实际上， Matrix 类不仅用于操作渐变填充，但这里我们只介绍它在渐变中的应用。第18章中介绍了更多的矩阵使用）。

在使用 Matrix 类时有一点复杂，这里有一个特殊的方法用于创建渐变填充的矩阵类型，这个方法名为 createGradientBox，必要参数为 width 和 height，可选参数为 rotation 及渐变的起点的 x,y 位置。首先创建一个 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 坐标就与正方形的起点相同。请使用同样的正方形，通过改变矩阵和渐变填充观察创建的填充是什么效果。首先，试一下三种颜色：

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 不同，该类不允许创建图形，仅仅用于改变已存在于影片或显示对象实例中图形的颜色。让我们去看看它是怎样工作的。

使用 ColorTransform 类改变颜色

在 ActionScript 2 中，操作影片剪辑颜色最常用的方法是 Color 类，拥有像 setRGB 和 setTransform 这样的方法。Flash 8 中就引用了 ColorTransform 类，同时 Color 类就不再被推荐使用，但是想大多数人仍然继续使用 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 中，应该创建一个同样的 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设计与应用版块参加讨论