Flash编程绘画的简单运用

[ 来路：pconline.com.cn      时间：2007-7-10 3:32:12    点击： ]

　　Flash MX又增强了其绘图功能，现在，可以使用AS影片对象中的绘画方法让Flash根据程序绘制图形，十分的方便。本文中笔者将通过几个实例来给大家讲解如何使用绘画方法来绘制图形及其相关的知识和技巧。

　　　　效果预览：

点击这里下载

　　为了使读者很好的理解下面的内容，我们先来做一个简单的例子——画一条直线。可能有的朋友会说，画一条直线谁不会啊。不是的，是让Flash自己画一条直线。

　　打开Flash，点选第1帧，按F9打开“动作面板”，输入如下代码：

// 设置线条样式
_root.lineStyle(3,0xF12345,100);
// 设置线条起点
_root.moveTo(50,0);
// 绘制线条
_root.lineTo(100,0);

　　执行一下代码，你将会看到，Flash自动从点(50,0)开始，到点(100,0)结束，绘制一条线宽为3个像素的红色横线。

　　现在，我们深入些，让Flash画一个圆。设计这个实例不需要做任何元件，只需要编写几段简单的代码即可。打开Flash MX，分别点选第2、第3帧，按F7插入空白关键帧，如图1所示。

 图1

　　分别点选第1、2、3帧，按F9打开“动作”面板，键入如下代码。其实，这三帧中的代码可以和到一帧中，但为了能使大家更清楚地了解这些代码是如何工作的，笔者把这些代码拆分开来讲解。

　　第1帧代码：

// 指定一个线条样式
i=-Math.PI;
_root.lineStyle(2,0x000000,50);
_root.moveTo(50,100);

　　代码解析：

　　绘画方法lineStyle的用法为myMovieClip.lineStyle ([thickness[,rgb[,alpha]]])。其作用是指定一个线条样式，以便lineTo和curveTo方法的后续调用，直到使用其他参数调用lineStyle为止。也可以在绘制路径的中间调用lineStyle方法来为路径中的不同线条段指定不同的样式。

　　其中，thickness是一个整数，以磅为单位指示线条的粗细，有效值为0到255。如果未指定数值，或者该参数为undefined，则不绘制线条。

　　rgb是线条的十六进制颜色值（如，红色为 0xFF0000，蓝色为 0x0000FF）。如未指示该值，则默认使用0x000000（黑色）。

　　alpha也是一个整数，该参数控制线条颜色的Alpha值，有效值为0到100。如果设置该值，则使用100（纯色）。如果该值小于0，则使用0；如果该值大于100，则使用100。

　　绘画方法moveTo的用法是myMovieClip.moveTo (x,y)。其作用是将当前绘画位置移到(x,y)，也就是设置绘制图像的原点。如果缺少任何一个参数，则此方法将失败，并且当前绘画位置不改变。参数x（y）是一个整数，指示相对于父影片剪辑的注册点的水平（垂直）位置。_root.moveTo(50,100)就是在x坐标为50个单位，y坐标为100个单位的地方作为起点开始绘制图形。

　　第2帧代码：

// 绘制线条
_root.lineTo(100+50*Math.cos(i),100+50*Math.sin(i));
i+=0.05;

　　代码分析：

　　绘画方法lineTo可以使用线条样式从当前绘画位置向点(x,y)绘制线条；当前绘画位置随后被设置为(x,y)。如果正在其中绘制的影片剪辑包含用绘画工具创建的内容，则调用lineTo将在该内容下面进行绘制。如果在对moveTo方法进行任何调用之前调用了lineTo方法，则当前绘画位置默认为(0,0)。如果缺少任何一个参数，则此方法将失败，并且当前绘画位置不改变。参数x（y）是一个整数，指示相对于父影片剪辑的注册点的水平（垂直）位置。

　　Math.sin(x)计算并返回以弧度为单位指定的角度的正弦值。参数x是以弧度为单位的角度值。

　　第3帧代码：

// 循环
if (i<Math.PI) {
    gotoAndPlay(2);
} else {
    stop();
}

　　Math.PI是一个常数，代表一个圆的周长与其直径的比值的数学常数，也就是3.1415……。

　　代码到这里就编写完毕了。当测试的时候，大家可以看到，Flash从点（50，100）开始，绘制一个线宽为2个单位，黑色，半径为50个单位的圆。如图2所示。

　　如果你想在1帧中完成所有的事情，编写如下代码即可：

_root.lineStyle(2, 0x000000, 50);
_root.moveTo(150, 100);
function c() {
    _root.lineTo(100+50*Math.cos(i), 100+50*Math.sin(i));
    i += 0.05;
}
if (i<Math.PI) {
// 每隔50毫秒执行一次函数c
    setInterval(c, 50);
} else {
    stop();
}

　　教个大家这段代码，主要有两个用意。其一，学习setInterval()的使用方法。该动作在播放影片时，每隔一定的时间间隔，就调用函数、方法或对象。使用这个动作还可以用来更新来自数据库的变量或更新时间显示。其二、笔者把圆形绘制的起点改动了一下，如图3所示。这样，绘制线条的位置就变动了。在绘制图形时，图形的位置控制和预知是很重要的，否则将会一团糟。

　　大家已经学习了如何绘制图形了，那，怎么给绘制的图形着色呢？下面，我们来给一个矩形着色。打开Flash，点选第1帧，按F9打开“动作面板”，输入如下代码：

// 设置填充色
beginFill(0xFF0000,100);
lineStyle(3,0xFF9900,100);
moveTo(100,50);
lineTo(200,50);
lineTo(200,150);
lineTo(100,150);
lineTo(100,50);
// 结束着色
endFill();

　　代码分析：

　　绘画方法beginFill：指示新的绘画路径的开始。myMovieClip.beginFill([rgb[,alpha]])。参数gb是一个十六进制颜色值（例如0xFF0000）。如果未提供或未定义该值，则不创建填充。参数alpha是介于0到100之间的整数，指定填充的Alpha值。如果未提供该值或值大于100，则使用100（纯色）。如果该值小于0，则使用0。

　　与beginFill相似的绘画方法BeginGradientFill决定了填色形式、色彩、透明度、比例和矩阵值。用法为：myMovieClip.beginGradientFill (fillType, colors, alphas, ratios, matrix)。其中，fillType为字符串linear或字符串radial。Colors是一个数组，包括要在渐变中使用的RGB十六进制颜色值。Alphas也是一个数组，包括与 colors 数组中颜色相对应的Alpha值。ratios颜色配额的数组；有效值为0到255。该值按100% 定义了对颜色进行采样处的宽度的百分比。Matrix是一个变形矩阵。

　　好了，本文到这里就结束了。希望能对喜好使用Flash绘画的朋友有所帮助。

上一篇：FLASH制作精美的闹钟  下一篇：Flash中常用的背景制作