Progress Bar 幫您輕輕鬆鬆製作下載進度動畫－台藝大第14屆在職廣電系「不能”媒”有你」

Progress Bar 幫您輕輕鬆鬆製作下載進度動畫

http://www.flag.com.tw/book/cento-5105.asp?bokno=F593&id=27

美麗清晰的動畫或影片總是能獲得瀏覽者青睞, 但是等待檔案下載的時間卻相當惱人, 此時加入預載動畫讓瀏覽者知道目前檔案下載的進度, 不僅可以讓瀏覽者擁有決定是否繼續等待的選擇權, 同時也能避免瀏覽者誤以為網站內容已經毀損而放棄等候。

預載動畫的製作方式有 2 種, 你可以自己設計或套用 Flash 內建組件；通常自己設計的預載動畫比較獨特好看, 但要寫入較多的程式, 動畫製作過程也相對的耗費心力；如果套用 Flash 內建組件 ProgressBar, 則能快速建立不錯的預載動畫效果, 且就預載動畫的載入時間而言, 內建組件也較自製動畫來得更快速。本文就為你介紹如何運用這便利好用的 ProgressBar 組件。(使用軟體：Flash MX 2004 或 Flash MX Professional 2004 )

利用 ProgressBar 組件顯示下載進度

ProgressBar 組件不僅僅是單純的進度列動畫, 同時亦可自動偵測 Loader 組件的下載進度, 並反映在進度列動畫上, 顯示目前的檔案下載情形。請先製作一個要與 ProgressBar 組件配合的 Loader 組件。

開啟時間軸面板, 在 heart 圖層上方新增 1 個圖層, 並命名為 "ProgressBar"。按下 ProgressBar 圖層, 然後展開組件面板, 選取 ProgressBar 組件 , 直接拉曳到舞台中央, 以加入 ProgressBar 組件。選取舞台中的 ProgressBar 組件實體, 展開屬性面板的參數頁次, 並依照下列進行組件實體的細部設定：

conversion	1
direction	right	→進度列填色的起始方向
label	下載進度%3%%	→顯示標籤的內容。
labelPlacement	bottom	→可設定要將標籤內容顯示在進度列的哪個位置。 left：顯示在進度列左端；right：顯示在進度列右端；top：顯示在進度列上方；bottom：顯示在進度列下方；center：標籤與進度列重合顯示。本例選擇顯示於下方。
mode	polled	→ 設定進度列取得資料的運作模式, 包含 event、polled、manual 共 3 種模式；前兩者皆須設定 Source 參數, 並皆可配合 Loader 組件, 而 polled 模式亦適用於具 getByteLoaded() 等方法的物件使用；manual 模式則必須自行設定載入位元組和總位元組等資料。本例所使用的是 polled 模式。
source	FIL_ldr	→輸入下載進度來源 (Loader 組件) 的實體名稱。你只要解除鎖定 Loader 圖層, 並選取舞台中的 Loader 組件, 即可在屬性面板當中檢視 Loader 組件的實體名稱和參數設定。

更改組件外觀設定
預設的組件樣式雖然不難看, 但卻缺少個人特色, 不過其實組件的外觀是可以稍做修改的, 只要選取組件實體所在的圖層影格, 再到動作面板的 Script 窗格中輸入程式碼, 定義組件實體的屬性和數值即可。

假設我們要將 ProgressBar 組件實體 ( FIL_pb ) 變成藍色的, 就在其所屬的圖層影格當中加入一段程式碼, 其中標明該組件實體的實體名稱 (例如：FIL_pb), 以及欲更改的組件實體屬性 (例如："themeColor" 顏色, "haloBlue" 藍色)： FIL_pb.setStyle ("themeColor", "haloBlue");

撰寫隱藏 ProgressBar 的 ActionScript
完成組件實體的屬性設定後, ProgressBar 組件已能偵測下載速率並顯示百分比進度, 但當檔案載入完畢後, ProgressBar 組件卻依然留在畫面中。為了要使 ProgressBar 組件能在任務完成後自動隱藏, 我們要加入一個事件監聽器來協助組件判別是否自動隱藏。

首先在 ProgressBar 圖層上方新增 1 個名為 "Actions " 的圖層, 然後按下 Actions 圖層的影格 1, 並展開動作面板, 在 Script 窗格中加入以下程式：
var pbListener:Object = new Object(); pbListener.progress = function(evt) { evt.target._visible = true; }; pbListener.complete = function(evt) { evt.target._visible = false; };

以上程式中先宣告了一個 pbListener 的物件來監聽 ProgressBar 組件, 並依照當時組件提供的下載狀態產生 2 種事件：
當 ProgressBar 提供 "progress" (下載中) 的狀態時, 觸發 ProgressBar 組件的顯示性為真的事件；意指當檔案仍在下載時, 則 ProgressBar 組件繼續存在。

當 ProgressBar 提供 "complete" (下載完全) 的狀態時, 觸發 ProgressBar 組件的顯示性為偽的事件；於是當檔案完成下載後, ProgressBar 組件即自動隱形。

雖然我們已經先設定了觸發事件, 但目前尚無法發揮作用, 我們還需在 ProgressBar 組件實體 (實體名稱為 FIL_pb) 上加入 2 段監聽器函式, 讓 FIL_pb 將檔案下載的進度回傳給 pbListener.progress 或 pbListener.complete 當作函式參數, 並觸發對應的事件。請按下 ProgressBar 圖層的影格 1, 並展開動作面板, 在 Script 窗格中 (接續前段程式之後) 加入以下程式：
FIL_pb.addEventListener("progress", pbListener); FIL_pb.addEventListener("complete", pbListener);

測試 ProgressBar 的運作

測試影片不僅可以確認影片的效果, 同時也可以經由模擬下載來檢測影片在網路上的下載速率；請接續上一則的練習, 並執行『控制/測試影片』命令來預覽影片效果。

模擬下載
只要設定沒有錯誤, 在自己的電腦上測試影片往往是很快速順利的, 不過也正因為太過順暢, 對於本章的範例反而無法達到檢測的效果, 此時建議可以運用模擬下載的功能來進行測試。

請在測試影片的模式中, 展開檢視功能表, 先選擇所要模擬的下載設定和品質：
然後執行『檢視/模擬下載』命令, 此命令會依照下載的設定, 模擬在網路上下載影片時的狀態。(詳細的影片測試技巧可參考《Flash MX 2004 特效電力公司 - 組件、協力軟體、影音、範例》第 2 章)。