Archive for 十二月 19th, 2007

19
十二

Making Things Move AS3 学习笔记(1)

   Posted by: 72pines   in Flash

这是Making Things Move for AS3版教材中的一节笔记。
Part One ActionScripted Animation__Chapter 4 Rendering Techniques
Page128 ~133

从教程范例中挑出以下三个关于色彩和渐变的方法做补充解释,以便加深了解flash绘制渐变等的原理过程。(P.S.主要是我没理解透的)

先了解些相关知识,flash绘画填充是按照先创建画笔或填充色,然后再用该对象向指定的区域(线条)进行绘制。好,先看头两个方法的定义及说明:
beginGradientFill(GradentType, color, alpha, ratio, matrix);

参数: 1.渐变类型
2.渐变颜色数组
3.各颜色透明度数组
4.分布比例数组
5.matrix数组

该方法用于创建渐变填充画笔,前四种都好理解,主要是matrix数组含义,因此在运行该方法前,需要调用下面的方法为matrix属性赋值。

matrix.createGradientBox(width, height, rotation, x, y);

参数: 1.渐变宽度
2.渐变高度
3.旋转角度
4.渐变起始x坐标
5.渐变起始y坐标

该方法用于创建渐变区域,这是渐变的范围!绘制渐变需要理解两个区域,一个是实际需要填充的区域对象,一个是渐变自身的区域,相当于我们创建了渐变区域后在把它放到填充区域内,只有目标填充区域内部才是可见的部分。因此,通过分别设定两部分坐标会有不同的效果。 下面是一段比较完整的绘制渐变图形代码

graphics.lineStyle(1);
var colors:Array = [0xffffff, 0xff0000];
var alphas:Array = [1, 1];
var ratios:Array = [0, 255];
//定义matrix区域
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();

以上结束,再看另外一个方法:

ColorTransform (redMultiplier, greenMultiplier, blueMultiplier, alphaMultiplier, redOffset, greenOffset, blueOffset, alphaOffset)

教材中有这么一公式用来表明其计算新颜色的步骤
newRed = oldRed * redMultiplier + redOffset;

最初按照我的理解,只要在变量中填入乘积因子和指定偏移量,那么每次调用该方法时,应该自动计算出新的颜色,因此测试一个通过鼠标点击进行变换颜色的效果,每次点击后都执行如下:
public function clickHandler(event:MouseEvent):void {
event.target.transform.colorTransform = new ColorTransform(1, 1, 1, 1, -20,-25, 25, -0.9);
}
但除了第一次有颜色变化外,继续点击均无反应。

经过论坛求助得到解答

public function clickHandler(event:MouseEvent):void {
var trans:ColorTransform = event.target.transform.colorTransform;
event.target.transform.colorTransform=new ColorTransform(1,1,1,1,trans.redOffset-25,trans.greenOffset,trans.greenOffset + 25,trans.alphaOffset-10);
}

从测试情况,似乎redMultiplier等乘积因子没发挥什么作用,并不像上面计算公式的运行原理。而是直接通过redOffset等对各色彩进行定义。这个问题还没有完全搞明白?还要后期不断测试,希望有朋友能指点一下哈。