利用动作脚本制作动态进度条

蒋维 赵涛

摘要：ActionScript 3.0可以在场景中绘制出各种图形.该文介绍了在Flash中利用动作脚本来模拟实际文件加载情况的动态进度条的制作方法。

关键词：Flash;动作脚本;进度条

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

文章编号：1009-3044（2020）05-0217-02

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

进度条通常用于标识事件的完成度，尤其在程序下载或安装界面中，利用进度条可直观反应出程序加载完成的情况，在Flash中，与提前在画布上绘制编译好的图形相比，使用Action-Script 3.0编码绘制图形不仅可以得到更小的文件尺寸，同时也可以提供给用户更加灵活的绘制方式、交互性的体验以及多变的动态效果.本文中将使用ActionScript 3.0代码绘制矢量图的方法来制作具有动态加载效果的进度条。

1 Graphics类绘制矢量图形

我们在使用类的属性、方法和事件前，一般要先创建类的实例，而Graphics类是最终类不能实例化.Graphics类绘制矢量图形是通过支持矢量绘制的其他类自动生成Graphics实例，并通过graphics属性对其进行访问.支持矢量绘制的对象包括Sprite类和Shape类，由于MovieClip类继承了Sprite类，所以也可以在MovieClip类的实例中绘图.主时间轴是MovieClip类的实例，所以具有graphics的属性，我们在绘制图形时可以直接将图形画在主场景中，如绘制一条直线：this.graphics.lineStyle（10，Ox990000）; this.graphics. moveTo（100， 200）; this. graphics. lineTo（300，200）;可以直接在主场景中绘制出一条直线，但在实际编程时一般都会预先定义出一个显示对象容器，如Shape类，再在容器中绘制图形，这样可以方便地对绘制出的图形进行放大、缩小、旋转等操作。

2 动画的设计与实现

2.1 动画实现的目标

动画的主要目标是实现进度条的动态加载，且用户可以自己设定进度条的进度长度和加载速度的快慢，同时实现进度条加载到一定百分比时进度条的颜色会发生相应的变化。

2.2 动画的原理分析

本文中是用绘制矩形和绘制直线的方法来实现进度条的动态加载，程序设计的基本思想是从一起点向一终点绘制一矩形或直线，起点坐标值固定，终点坐标值为一变量，运行时终点坐标值不断增大，程序每次都会依据新的终点坐标值重新从起点向终点绘制出一段新的矩形或直线，从视觉上看矩形或直线的长度就是在不断的动态变化的，利用此原理就会有进度条动态加载的效果，如图l所示，假设矩形或直线起始长度为n，随后起点不变，长度不断增加。

2.3 动画的实现过程

（1）利用矩形制作进度条

此方法是在绘制矩形时去掉边框颜色，保留其内部填充颜色，矩形的高决定进度条的宽窄，矩形的宽即进度条的长度是一变化量.具体做法如下：

新建一个Flash文档.

打开动作面板输入以下代码：

var s：Shape=new Shape0;//定义一显示对象容器放置矩形

this.addChild（s）;//在窗口舞台中显示容器内的矩形

var n： Number=0，M：Number =300， Color： Number=OxOOff33，percent;

//变量n表示矩形的宽度;M是矩形宽度的终点值，决定了进度条最终的长度;Color表示矩形的初始填充颜色值;percent用于显示加载百分比

percent =new TextField0;//生成文本域

percent. defaultTextFormat=new TextFormat（1黑体”，20，Oxff0000）;//设置文本格式

percent.x=150;percent.y=220;//文本框在窗口舞臺上的位置

addEventListener（Event.ENTE R_FRAME，drawLine）;

function drawLine（e：Event）

{s.graphics.beginFiII（Color）;//设置矩形填充颜色

s.graphics.drawRect（50，150，n，50）;/，没置矩形的绘制起点以及宽度和高度

for （var i：Number=0; i<=9000000;i++）{）

//此循环语句是控制n变化的快慢即进度条加载的快慢，i

的终止值越大，进度条越慢

if fn<=M1

{percent.text= Math.floor（n* 100/M）+”%”;//取得加载百分比

percent.autoSize= TextFieldAutoSize.RIGHT;

addChild（percent）;//显示加载百分比

n++：//矩形宽度值不断增加即进度条不断增加

if（Math.floor（n*lOO/M）%30==0） Color= Color +40;

//判定加载进度，若为30的倍数则重新取得新的颜色填充值

）

else

{for （var j：Number=0; j<= 30000000;j++）{）//延时

s.graphics.endFill0;

percent.text=”加载完成！”;

】

）

（2）利用直线制作进度条

利用直线制作进度条的过程与绘制矩形过程相似，在绘制矩形时是利用循环语句来控制進度条加载的快慢，除了使用循环语句控制进度条的加载进度，还可以利用setlnterval0来控制进度条加载速度的变化.在利用直线制作进度条时，我们将使用直线的粗细来控制进度条的宽窄，当绘制的笔宽大于2时，LineToO画的线条两头是圆的，我们需要使直线的两头是万头.具体做法如下：

新建一个Flash文档.

打开动作面板输入以下代码：

var s：Shape=new Shape0;

this.addChild（s）;

var n：Number= O，M：Number =300， Color：Number=OxOOff33，ti-shi;

tishi=new TextField0;

tishi. defaultTextFormat=new TextFormat（”黑体”，20，Oxff0000）;

tishi.x= 200;tishi.v= 220;

function drawLine0//创建ClockFun0函数

{s. graphics. lineStyle（30， Color，1， true， LineScaleMode. NONE，CapsStyle.NONE）;

//设置笔触的粗细即进度条的宽窄，颜色Color， CapsStyle.NONE指定线条两端为方头

s.graphics.moveTo（100，200）;//设置线条起点

s.graphics.lineTo（lOO+n，200）;//画线到线条结束点

if fn<=M、

（tishi.text= MathAoor（n*lOO/M）+"%”;

tishi.autoSize= TextFieldAutoSize.RIGHT;

addChild（tishi）;

n++;

if（Math.floor（n*100/M）%30==0） Color= Color +40;）

else

{tishi.text=“加载完成！”;

stop0;】）

setInterval（drawLine， 50）;//每隔50毫秒执行一次drawLine函数

（3）测试生成影片截图如图2所示。

3 结论

本文利用了Flash的动作脚本实现了进度条的加载动画，在制作时我们需要注意一些细节，如文本内容需右对齐，否则显示的“%”会在舞台上跳动，用直线绘制时线条末端处端点类型用的是CapsStyle.NONE，如用CapsStyle.SQUARE设置端点类型为方头，进度条的总长度会比我们给出的参数值M大.另外进度条加载速度的快慢，除了使用循环语句和setlnterval0来控制外，还可以通过控制n的变化大小来实现，如n++，可写为n=n+0.5，n值变化越小，进度越慢，反之越快。

参考文献：

[1]李林，苏炳均.Flash CS5动画制作教程[M].北京：清华大学出 版社，2014：8.

[2]刘本军，李登丰.Flash ActionScript 3.0互动设计项目教程[M]. 北京：人民邮电出版社，2015：11.

【通联编辑：唐一东】 作者简介：蒋维（1981-），女，洛阳师范学院教师，主要研究计算机应用。