宇风多媒体---进度条攻略

[前言] AUTHORWARE是专业的多媒体制作利器，但是，它也有许多先天的不足，其中之一就是原创性太少，大多数的素材需要借助其它软件的前期处理。有点厌倦了频繁地调用，就想折腾点名堂出来。想到“它山之石可以攻玉”的古训，所以，参考其它编程语言，开始了一系列移花接木（包括屏保、进度条、鼠标跟随等）。

[思路来源] 许多程序都有进度条显示，还有专门开发的控件，可以产生千变万化的进度条。这些在vb、vc等专门的编程语言中实现起来是手到擒来，不费吹灰之力。如果能将它移植到AUTHORWARE中，无疑将使多媒体软件更加专业。可以直接调用这种控件，.不过这属于“舶来品”。本文将一步步引导大家打造个性化的进度条，这属于手工作坊，个性十足。

[实现步骤]

包括“进度条”和“进度块”。

<一> 搭建程序框架

由于本程序同时包含“进度条”和“进度块”演示，为了系统性，所以搭建了程序框架。

1、加入一个显示图标“bg”，放置程序标题，工作室等一般信息。

2、加入一个框架图标，作为程序框架。

（1）删除入口处所有图标；

（2）加入一个交互图标，右侧下挂一个计算图标“quit”、导航图标“"进度块"”和“"进度条"”，类型是按钮；

（3）框架右侧下挂三个组图标“null”、“进度块”、“进度条”。“NULL”空置，是为了防止程序自动进入主体内容。后两者分别用于放置相应的程序；

（4）计算图标“quit”中的程序为：

QUIT()

（5）导航图标“"进度块"”导航至组图标“进度块”：

（6）导航图标“"进度条"”导航至组图标“进度条”：

（7）框架下方加入一个组图标“BLOCK”，用于放置供调用的进度块：

<二> 进度条

采用移动“蒙板”实现进度条的延伸，通过“pathposition”变量实现数值的同步指示。

1、LOADING...

（1）打开组图标“进度条”；

（2）加入一个显示图标“LOADING...”，写入“LOADING...”字样；

2、进度条

可以充分发挥想象力，打造各种各样的进度条，但是可别太出壳了！

（1）加入一个显示图标“SLIDER”；

（2）用绘图工具制作了一个两边圆角的进度条。

3、进度条蒙板

（1）加入一个显示图标“MASK”；

（2）画一个黑色矩形（为了与文件的黑色背景融合），完全覆盖于进度条上；

（3）设置“MASK”的属性为“ON PATH”，并设置“BASE”和“END”两端点，使其能从完全覆盖过渡到完全显示进度条；

4、百分比同步显示

（1）加入一个显示图标“percent”；

（2）输入{INT(PathPosition@"mask"} %，设置“MASK”的属性为“update display variables”，就可以实现百分比的实时同步显示了；

（3）本实例还绘制了线框，所以又设置“layer”为1，显示模式为“transparent”，这样就可以显露出底层的“进度条”和“MASK”了；

5、实现进度条功能的核心技术

（1）加入移动图标“move mask”。通过移开“mask”，给人的错觉就是进度条的前进延伸；

（2）根据实际设置其属性。本实例用一个变量“speed”来控制其运行速度；

（3）加入一个显示图标“completed”，调整位置到“loading...”右侧，最为载入结束的文字指示；

6、其它细节请参考源程序。

<三> 进度块

请将调试的开始小旗拖到组图标“block”前，程序将从这里开始运行，以方便以下制作。

1、预制进度块

可以充分发挥想象力，打造各种各样的进度块，但是也别太出壳了！

本步骤只是一个暂时过程，所以在最终的源程序中见不到！

（1）打开组图标“block”；

（1）加入一个显示图标“SLIDER”；

（2）用绘图工具制作了一个完整的进度块，如一个绿色外框和十个黄色进度块。

2、分解进度块

（1）加入一个显示图标“slider之块1”；

（2）打开显示图标“SLIDER”，copy第一个进度块，再删除该进度块；

（3）点击小旗运行程序，程序会自动停止在显示图标“slider之块1”上；

（4）paste，则删除第一个进度块后留下空档就会被自动整齐地补上；

（5）重复以上步骤，直到完成所有进度块的易位；

（6）现在，“block”中应当有十一个显示图标：“slider”、“slider之块1”、“slider之块2”……。因为“block”中只放置进度块，所以下面要移动“slider”。

（7）移动“slider”至组图标“block”中，并更名为“frame”，因为它只剩下一个框架外壳了。设置显示模式为“transparent”；

3 百分比同步显示

（1）加入一个显示图标“percent”；

（2）输入{pencent} %，设置“percent”的属性为“update display variables”，就可以实现百分比的实时同步显示了；

4、实现进度块功能的核心技术

（1）加入组图标“调用进度块”；

（1）打开组图标“调用进度块”；

（3）加入一个等待图标，设置等待时间为变量“wait time”，去除其余属性；

（4）加入一个计算图标“1”，程序如下：

--------调用第一个进度块，并设置百分比

DisplayIcon(IconID@"slier之块1")

persent:=10

（4）重复3、4步骤，一直到最后一个等待图标和计算图标“10”。相关的程序只要修改调用的块和百分比就可以了：

5、其它细节请参考源程序。

[执行效果]

测试一下吧.最最激动人心的时刻就要到来了！当我完成程序后，自我陶醉了整整半天！

1、运行程序后，通过两个导航按钮“"进度块"”和“"进度条"”，分别进入相应演示。

2、“"进度条"”的演示效果为：随着进度条的前进延伸，数值不断增加，到达100%后，出现“completed”的文字指示；

2、“"进度块"”的演示效果为：.随着进度块的前进延伸，数值以10%的步幅不断增加，最终到达100%。

3、点击“退出”按钮将退出程序。

[应用]

1、可以应用于片头载入动画，如本实例所演示。

2、可以应用于程序演示过程中的进度显示，如各种教学程序。

[联系作者]

郭仕达

gsdtom@citiz.net

版权信息：传媒及商业网站如有意刊登，请联系作者