Authorware开发实例: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、可以应用于程序演示过程中的进度显示，如各种教学程序。