10-3 getBytesLoaded和getBytesTotal

如果你的作品不準備上傳網路，只是孤芳自賞單機使用，什麼問題都不會產生。可是網路環境有一大堆未知也無法控制的因素，最明顯的就是“頻寬”問題，你不可能知道何時它會塞車，就算不塞車傳輸的速度也遠遜於你的單機環境，所以在網路環境下想要隨心所欲的載入資料，必須要有其他的輔助指令來判斷是否載入完成。Flash的確也提供判斷載入完成的事件，但是都不是絕對保險的，而且繁複的過程對初階者是沉重的負擔。在此我們只提供你兩個函數，getBytesLoaded()和getBytesTotal()，另外再加上你自己的自助，將繁複的過程化為最簡單。

一、        getBytesLoaded

語法：MovieClip.getBytesLoaded()

功能：傳回指定的影片片段所載入/傳送的位元組數目。

二、        getBytesTotal

語法：MovieClip.getBytesTotal()

功能：傳回指定影片片段的總計大小，以位元組為單位。對外部的影片片段而言，傳回值就是swf檔案的大小。

 

利用getBytesLoaded()和getBytesTotal()的比值可以得知下載的百分比，當getBytesLoaded()的值等於getBytesTotal()的值時，表示載入/傳送完成。

 

 


示範利用getBytesLoaded()和getBytesTotal()秀出載入進度。載入進度_1.fla】共有3個影格，1、2影格有載入進度長條圖的影片片段bar_mc、word_mc與動態文字欄位(txtPercent)；第3影格為正式內容開始。

 

 

 

 

 

 

 

 

 

 

 


影格1(載入進度)程式如下：

01

02

03

04

05

Loaded_bytes = getBytesLoaded();

Loaded_total = getBytesTotal();

percent = (loaded_bytes/loaded_total)*100;

txtPercent= Math.round(percent) + " %";

bar_mc._xscale = percent;

解說：

行01：用getBytesLoaded得到目前影片片段載入位元組；

行02：用getBytesTotal得到目前影片片段總位元組；

行03：算出載入進度百分比；

行04：載入進度值(txtPercent文字欄位)；

行05：用載入進度百分比設定載入進度長條圖影片片段的_xscale，所以畫面上會呈現長條圖逐漸伸長的效果。(註：在單機因為速度太快一閃即過，無法有此效果，可以在測試影片時，開啟播放視窗功能表的【檢視／模擬下載】或再按 Ctrl + Enter 一次，即可看到此效果) 。注意bar_mc的註冊點要在最左邊，才能有由左向右伸長的效果。

影格2程式如下：

01

02

03

if ( percent < 100 ) {

gotoAndPlay("載入進度");

}

解說：

行01∼03：如果載入進度百分比小於100，回「載入進度」(影格1)繼續載入，影格1與影格2影格形成載入進度的迴圈。

影格3程式如下：

01

stop();

解說：

行01：載入全部影格，來到這裡正式內容開始。

 

 

 

 

 

 

 

 

 

 

 


本例執行結果與【範例1】相同，但是程式碼不完全相同。【載入進度_2.fla】共有3個影格，1、2影格有『下載進度』載入進度長條圖的影片片段loading_mc；第3影格為正式內容開始。

 

 

 

 

 

 

 

 

 

『下載進度』loading_mc影片片段有word_mc影片片段、bar_mc長條圖的影片片段與txtPercent動態文字欄位。當然可以儘量發揮創意，但有些原則要把握，以下圖為例，有四個圖層：

 

 

 

 

 

 

 

【loading】圖層：

置放 word_mc動畫的影片片段；

【百分比】圖層：

置放動態文字txtPercent， 即顯示目前載入的百分比；

【外框】圖層：

置放長條圖的外框。(不會隨百分比變動的靜態圖)

【長條圖】圖層：

置放會隨百分比改變長短的bar_mc影片片段。這個影片片段的註冊點應該在最左邊(如果希望由左向右伸長的話)。

主場景

影格1(載入進度)程式如下：

01

02

03

04

05

06

07

08

LoadFile();

function LoadFile() {

loaded_bytes = getBytesLoaded();

loaded_total = getBytesTotal();

percent = (loaded_bytes/loaded_total)*100;

loading_mc.txtPercent = Math.round(percent) + " %";

loading_mc.bar_mc._xscale = percent;

}

解說：

行01：執行LoadFile自訂函數，參數省略指影片片段為自身。

行02∼08：為自訂載入進度函數，

行03：用getBytesLoaded得到指定影片片段載入位元組；

行04：用getBytesTotal得到指定影片片段總位元組；

行05：算出載入進度百分比；

行06：設定載入進度長條圖影片片段的載入百分比動態文字值；

行07：用載入進度百分比設定載入進度長條圖影片片段的_xscale，所以畫面上會呈現長條圖逐漸伸長的效果。(註：在單機因為速度太快一閃即過，無法有此效果，可以在測試影片時，開啟播放視窗功能表的【檢視／模擬下載】或再按 Ctrl + Enter 一次，即可看到此效果)

影格2程式如下：

01

02

03

if ( percent < 100 ) {

gotoAndPlay("載入進度");

}

解說：

行01∼03：如果載入百分比小於100，回第1影格繼續載入。

1、2影格形成載入進度的迴圈，這雖然是個小動作，但將大大的影響你的Flash作品在網路上的第一印象，所以最好養成主程式的第1、2影格一定做此處理的習慣！

影格3程式如下：

01

stop();

解說：

行01：載入百分比等於100表示載入完成，來到這裡正式內容開始。