FlashMX Action画线方法(上)

翻译:flashmeng

在以前,Macromedia Flash 在你试图描绘一些效果时会有一些局限性,在一些复杂的应用中,ActionScript制约了开发者的创意。而现在,Macromedia Flash MX内置的drawing tools有能力胜任几乎所有的绘制工作。当你结合着ActionScript工作时,其效果是令人惊骇的 。

这篇文章结合着原文件来进行讲解,在阅读文章时结合你所下载的的原文件将更有利与你的理解。
下载实例 原文件

绘制的方法有哪些?

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%的蓝色线段。

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,来实现一个简单的互动效果。你能做出来吗?

转载于:https://www.cnblogs.com/savageworld/archive/2006/07/20/455888.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值