利用動作腳本制作動態進度條

蔣維 趙濤

摘要：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-），女，洛陽師范學院教師，主要研究計算機應用。