利用動作腳本制作動態(tài)進(jìn)度條

蔣維 趙濤

摘要：ActionScript 3.0可以在場景中繪制出各種圖形.該文介紹了在Flash中利用動作腳本來模擬實(shí)際文件加載情況的動態(tài)進(jìn)度條的制作方法。

關(guān)鍵詞：Flash;動作腳本;進(jìn)度條

中圖分類號：TP393 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2020）05-0217-02

開放科學(xué)（資源服務(wù)）標(biāo)識碼（OSID）：

進(jìn)度條通常用于標(biāo)識事件的完成度，尤其在程序下載或安裝界面中，利用進(jìn)度條可直觀反應(yīng)出程序加載完成的情況，在Flash中，與提前在畫布上繪制編譯好的圖形相比，使用Action-Script 3.0編碼繪制圖形不僅可以得到更小的文件尺寸，同時也可以提供給用戶更加靈活的繪制方式、交互性的體驗(yàn)以及多變的動態(tài)效果.本文中將使用ActionScript 3.0代碼繪制矢量圖的方法來制作具有動態(tài)加載效果的進(jìn)度條。

1 Graphics類繪制矢量圖形

我們在使用類的屬性、方法和事件前，一般要先創(chuàng)建類的實(shí)例，而Graphics類是最終類不能實(shí)例化.Graphics類繪制矢量圖形是通過支持矢量繪制的其他類自動生成Graphics實(shí)例，并通過graphics屬性對其進(jìn)行訪問.支持矢量繪制的對象包括Sprite類和Shape類，由于MovieClip類繼承了Sprite類，所以也可以在MovieClip類的實(shí)例中繪圖.主時間軸是MovieClip類的實(shí)例，所以具有g(shù)raphics的屬性，我們在繪制圖形時可以直接將圖形畫在主場景中，如繪制一條直線：this.graphics.lineStyle（10，Ox990000）; this.graphics. moveTo（100， 200）; this. graphics. lineTo（300，200）;可以直接在主場景中繪制出一條直線，但在實(shí)際編程時一般都會預(yù)先定義出一個顯示對象容器，如Shape類，再在容器中繪制圖形，這樣可以方便地對繪制出的圖形進(jìn)行放大、縮小、旋轉(zhuǎn)等操作。

2 動畫的設(shè)計與實(shí)現(xiàn)

2.1 動畫實(shí)現(xiàn)的目標(biāo)

動畫的主要目標(biāo)是實(shí)現(xiàn)進(jìn)度條的動態(tài)加載，且用戶可以自己設(shè)定進(jìn)度條的進(jìn)度長度和加載速度的快慢，同時實(shí)現(xiàn)進(jìn)度條加載到一定百分比時進(jìn)度條的顏色會發(fā)生相應(yīng)的變化。

2.2 動畫的原理分析

本文中是用繪制矩形和繪制直線的方法來實(shí)現(xiàn)進(jìn)度條的動態(tài)加載，程序設(shè)計的基本思想是從一起點(diǎn)向一終點(diǎn)繪制一矩形或直線，起點(diǎn)坐標(biāo)值固定，終點(diǎn)坐標(biāo)值為一變量，運(yùn)行時終點(diǎn)坐標(biāo)值不斷增大，程序每次都會依據(jù)新的終點(diǎn)坐標(biāo)值重新從起點(diǎn)向終點(diǎn)繪制出一段新的矩形或直線，從視覺上看矩形或直線的長度就是在不斷的動態(tài)變化的，利用此原理就會有進(jìn)度條動態(tài)加載的效果，如圖l所示，假設(shè)矩形或直線起始長度為n，隨后起點(diǎn)不變，長度不斷增加。

2.3 動畫的實(shí)現(xiàn)過程

（1）利用矩形制作進(jìn)度條

此方法是在繪制矩形時去掉邊框顏色，保留其內(nèi)部填充顏色，矩形的高決定進(jìn)度條的寬窄，矩形的寬即進(jìn)度條的長度是一變化量.具體做法如下：

新建一個Flash文檔.

打開動作面板輸入以下代碼：

var s：Shape=new Shape0;//定義一顯示對象容器放置矩形

this.addChild（s）;//在窗口舞臺中顯示容器內(nèi)的矩形

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

//變量n表示矩形的寬度;M是矩形寬度的終點(diǎn)值，決定了進(jìn)度條最終的長度;Color表示矩形的初始填充顏色值;percent用于顯示加載百分比

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

percent. defaultTextFormat=new TextFormat（1黑體”，20，Oxff0000）;//設(shè)置文本格式

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

addEventListener（Event.ENTE R_FRAME，drawLine）;

function drawLine（e：Event）

{s.graphics.beginFiII（Color）;//設(shè)置矩形填充顏色

s.graphics.drawRect（50，150，n，50）;/，沒置矩形的繪制起點(diǎn)以及寬度和高度

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

//此循環(huán)語句是控制n變化的快慢即進(jìn)度條加載的快慢，i

的終止值越大，進(jìn)度條越慢

if fn<=M1

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

percent.autoSize= TextFieldAutoSize.RIGHT;

addChild（percent）;//顯示加載百分比

n++：//矩形寬度值不斷增加即進(jìn)度條不斷增加

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

//判定加載進(jìn)度，若為30的倍數(shù)則重新取得新的顏色填充值

）

else

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

s.graphics.endFill0;

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

】

）

（2）利用直線制作進(jìn)度條

利用直線制作進(jìn)度條的過程與繪制矩形過程相似，在繪制矩形時是利用循環(huán)語句來控制進(jìn)度條加載的快慢，除了使用循環(huán)語句控制進(jìn)度條的加載進(jìn)度，還可以利用setlnterval0來控制進(jìn)度條加載速度的變化.在利用直線制作進(jìn)度條時，我們將使用直線的粗細(xì)來控制進(jìn)度條的寬窄，當(dāng)繪制的筆寬大于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//創(chuàng)建ClockFun0函數(shù)

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

//設(shè)置筆觸的粗細(xì)即進(jìn)度條的寬窄，顏色Color， CapsStyle.NONE指定線條兩端為方頭

s.graphics.moveTo（100，200）;//設(shè)置線條起點(diǎn)

s.graphics.lineTo（lOO+n，200）;//畫線到線條結(jié)束點(diǎn)

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毫秒執(zhí)行一次drawLine函數(shù)

（3）測試生成影片截圖如圖2所示。

3 結(jié)論

本文利用了Flash的動作腳本實(shí)現(xiàn)了進(jìn)度條的加載動畫，在制作時我們需要注意一些細(xì)節(jié)，如文本內(nèi)容需右對齊，否則顯示的“%”會在舞臺上跳動，用直線繪制時線條末端處端點(diǎn)類型用的是CapsStyle.NONE，如用CapsStyle.SQUARE設(shè)置端點(diǎn)類型為方頭，進(jìn)度條的總長度會比我們給出的參數(shù)值M大.另外進(jìn)度條加載速度的快慢，除了使用循環(huán)語句和setlnterval0來控制外，還可以通過控制n的變化大小來實(shí)現(xiàn)，如n++，可寫為n=n+0.5，n值變化越小，進(jìn)度越慢，反之越快。

參考文獻(xiàn)：

[1]李林，蘇炳均.Flash CS5動畫制作教程[M].北京：清華大學(xué)出 版社，2014：8.

[2]劉本軍，李登豐.Flash ActionScript 3.0互動設(shè)計項目教程[M]. 北京：人民郵電出版社，2015：11.

【通聯(lián)編輯：唐一東】 作者簡介：蔣維（1981-），女，洛陽師范學(xué)院教師，主要研究計算機(jī)應(yīng)用。