台藝大第14屆在職廣電系「不能”媒”有你」

打造精製的首頁 Loading 等候動畫

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

先前的範例都是利用 Flash 的補間動畫來表現下載的進度。如果想要自己安排不同下載進度展示的畫面, 來增加動畫的精緻度, 可以利用製作逐格影格動畫的方式, 繪製各個下載階段的畫面。

製作時間進度動畫

我們已經先在繪圖軟體 Illustrator 中畫好下載完成時要顯示的圖片, 並且匯入到元件庫中了。在製作這個範例的 loader 元件時, 要將完整的圖片插入到影格中, 再用橡皮擦工具 一一擦掉圖片中的特定範圍, 製作成不同下載階段顯示的畫面。

Step 1 執行『插入/新增元件』命令, 來建立 loader 元件。

Step 2 元件庫中的背景花紋 2 元件就是下載完成時顯示的圖形, 請拉曳到編輯區中, 並且在資訊面板設定對齊中央。

Step 3 我們要每隔 10 個影格, 就變化一次畫面, 請先在背景花紋 2 元件上按右鈕執行 2 次『打散』命令, 然後在影格 10 插入關鍵影格。

Step 4 用橡皮擦工具 , 先擦掉最上方的部份花紋。

Step 5 擦掉一部份的花紋後, 在影格 20 再插入關鍵影格, 然後再繼續擦掉一部份的花紋。

Step 6 我們利用相同的方法繼續操作, 總共製作出 10 個階段的變化 (關鍵影格的位置分別在影格 1、10、20、30、40、50、60、70、80、90), 最後在影格 100 插入影格, 讓元件的影格長度變為 100。

Step 7 目前元�%