打造精製的首頁 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 目前元件的變化是由完整到不完整, 我們要反轉這個順序, 才能表現下載的過程。請選取所有的影格, 在影格上按右鈕執行『反轉影格』命令, 影格的順序就會完全顛倒, 變成由不完整到完整了, 按下 Enter 鍵 (Windows) / return 鍵 (Mac) 可以播放這段動畫的效果。
將 LOADER 元件置入舞台
我們已經在範例中建立好需要使用的所有圖層, 接下來就可以回到 LOADING 場景, 將製作完成的 loader 元件置入舞台。
Step 1 選取 LOADER 圖層, 把 loader 元件拉曳到如圖的位置, 然後將實體名稱命名為 "LOADER_mc"。
建立預載動畫程式碼
最後同樣要利用 Actionscript 來設定文字欄位顯示的內容, 以及預載動畫的播放動作。
Step 1 選取 AS 圖層的影格 1, 在動作面板中輸入以下程式碼：
Step 2 接著在 AS 圖層的影格 2 插入關鍵影格, 輸入如圖的程式碼, 讓動畫在播放時可以不斷播放影格 1 的內容, 然後將其它圖層也增長到影格 2, 就可以完成這個範例了。
Step 3 按下 Ctrl + Enter 鍵 , 設定預覽的下載速度, 執行『檢視/模擬下載』命令, 看看預載動畫的效果。
留言列表
