基于动作脚本制作的雷达扫描效果

蒋维

摘要：該文介绍了在Flash中如何利用动作脚本实现雷达扫描效果的交互式动画的设计。

关键词：Flash;动作脚本;雷达

中图分类号：TP37        文献标识码：A

文章编号：1009-3044（2020）24-0211-02

开放科学（资源服务）标识码（OSID）：

引言

本设计中实现的雷达扫描效果是需要用动作脚本画出扇形的扫描波，但Flash中并没有提供可以直接画扇形的API.由于贝塞尔方程式所具有的特性，使用cubicCurveTo（）函数或curveTo（）函数画的也只是弧线并不是圆弧线，并且由它们绘制出的弧形在扇形填充和旋转方面也难以实现。

1 程序的设计与实现

1.1 程序设计的目标

程序设计的目标是实现扇形的雷达扫描波在圆形的仪表盘上以圆心为中心点进行360度旋转扫描，并且当鼠标从扫描波上滑过时扫描波会有波动交互效果。在雷达的扫描过程中扫描波还要呈现由强变弱的趋势以实现雷达的余晖效果。

1.2 程序的实现

1.2.1 制作的原理

雷达效果图是由两部分组成：雷达仪表盘和扇形扫描波，我们在绘制这两部分图形时都利用到了同心圆原理。在制作圆形仪表盘上的刻度时是利用了两个同心圆：一个半径为sr的内部圆，一个半径为br的外部圆，从圆心引出一条线段分别交于内外圆上的两点：（xb，yb）、（xs，ys），在（xb，yb）和（xs，ys）两点之间绘制直线画出刻度，要绘制出整个圆盘刻度，只需把这条线段以圆心为旋转中心按一定角度旋转绘制出各交点直线至360度即可。绘制仪表盘上的盘面时只绘制出同心的外部圆，同心的内部圆不需绘制。雷达仪表盘的绘制效果如图1所示。在制作扇形扫描波时同样也是做N 个同心圆，这些同心圆只显示圆心角为指定度数a度的圆弧。圆弧的绘制是把度数为a度的圆心角分解成n个小角，这n个角的每条边都会与N 个同心圆在圆上交于一点，画出所有相交点即得圆弧，所以每段圆弧是由n个小点构成，按此绘制原理会画出N条亮度不一样的圆弧，越接近于圆心的圆弧，点越密集、颜色越亮，反之圆弧离圆心越远，点越疏散、颜色越暗，这N条圆弧随着距离的增加逐渐变暗从而形成扇形波。以点代线绘制圆弧的方式正好也能实现雷达的余辉效果。绘制扇形波时N值取得越大扇形波越密集，n值取得越大扇形波越亮。在Flash中绘制出的组成圆弧的点是用近似于圆点的小线段代替的。扇形扫描波的绘制效果如图2所示。为了使绘制出的扇形波能以圆心为旋转中心，并且当鼠标滑过扇形波时有波动交互效果，我们利用Sprite类来绘制图形。Sprite类绘制的图形默认的注册点坐标值是在（0，0）位置，利用Sprite类绘制完图形后需要把图形坐标值移动到圆心坐标（h，k）处。对于鼠标滑过扇形波引起的波动交互，我们使用小范围的放大缩小扇形波来实现其交互效果，并设置鼠标的侦听事件以便在鼠标的移动过程中做出相应的交互处理。

1.2.2 实现过程

新建一个Flash文档，选中时间轴面板上图层1的第一帧，打开动作面板输入以下代码，实现圆形仪表盘的制作：

var bbr，br，sr，h，k，angle，xb，yb，xs，ys：Number;

bbr = 120;br = 110;sr = 105;h = 260;k = 200;

with （this.graphics）

{   lineStyle（1，0x00ff00）;

drawCircle（h，k，bbr）;drawCircle（h，k，br）;          //绘制仪表盘的盘面

angle = 0;

while （angle<=2*Math.PI）                         //while循环绘制仪表盘刻度

{   xb = h + br * Math.cos（angle）;

yb = k + br * Math.sin（angle）;               //外圆交点坐标值

xs = h + sr * Math.cos（angle）;

ys = k + sr * Math.sin（angle）;               //内圆交点坐标值

moveTo（xb，yb）;lineTo（xs，ys）;                 //绘制仪表盘刻度

angle += 0.1;    } }                         //angle值决定刻度的疏密

angle = 0;

选中时间轴面板上图层1的第二帧创建关键帧，在此关键帧上打开动作面板输入以下代码，以实现扇形扫描波的制作：

var s：Sprite=new Sprite（）;                           //建立Sprite容器s