[前言]  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、可以應用于程序演示過程中的進度顯示，如各種教學程序。

[聯系作者]

    郭仕達

    [email protected]

版權信息：傳媒及商業網站如有意刊登，請聯系作者