|
趣味Loading設計
這樣的Loading看起來還是死板嗎？你還想要一些趣味性？其實Loading制作也可以加入很多的趣味性來。下例是一個老鼠的Motion運動動畫的Loading。當下載20%時，老鼠的運動速度開始加快，以后第下載20%，老鼠的速度就加快一些，直到下載結束。
步驟一、先打開第一個Loading實例。我們的這個實例還是在第一小節(jié)中的哪個簡易Loading改進而來的。
步驟二、選擇Insert|New Symbol命令新建一個Movie Clip電影剪輯，進入剪輯編輯區(qū)域。選擇Window|Common Library打開共享庫面板，把Mouse拖入編輯區(qū)。
圖4-13 共享庫面板中的老鼠圖像
步驟三、先來制作一個老鼠的Motion動畫，在第一幀處將老鼠圖像拖至X坐標-300，Y坐標-30處，如果不夠精確可以使用Info面板來調(diào)整。如圖4-14所示。
圖4-14 精確調(diào)整物體位置
步驟四、然后在第42幀處按F6鍵插入一個關鍵幀。
步驟五、在時間軸的第20幀處按F6鍵插入一個關鍵幀，調(diào)整老鼠的位置為X坐標300，Y坐標-30。
步驟六、在第21幀處插入一個關鍵幀，用Modify|Transform|Flip Horizontal命令使老鼠水平翻轉(zhuǎn)。
步驟七、在第41幀處按F6鍵插入一個關鍵幀，調(diào)整老鼠的位置X坐標-300，Y坐標-30。全選所有幀點鼠標右鍵選Create Motion Tween。建立一個Motion動畫。整個動畫的過程如圖4-15所示。
圖4-15 老鼠的運動過程
步驟八、在第42幀處雙擊打開Action面板。雙擊 Basic Action指令中的Goto語句，使動畫跳轉(zhuǎn)到第一幀。
步驟九、全選所有幀，執(zhí)行鼠標右鍵命令Copy Frame，在第43幀處，執(zhí)行鼠標右鍵命令Paste Frame。在第43幀的地方復制了一遍動畫過程。
步驟十、調(diào)整復制的動畫的長度，使之只有30幀的總長度，其它各關鍵幀做相應的改變。
步驟十一、在最后一個關鍵幀雙擊打開Action面板。使用Goto指令，把Frame欄中的1改為43。如圖4-16。
圖4-16 實現(xiàn)幀的復制
步驟十二、這樣做的用意是讓第1幀到第42幀形成一個循環(huán)，這個循的速度比較慢，第43幀到第70幀實現(xiàn)一個循環(huán)。速度稍稍快了一點。
步驟十三、利用同樣的方法從第71到第90制作一個循環(huán)，從第91到第105制作一個循環(huán)。從第106到第116制作一個循環(huán)。
步驟十四、回到場景，打開Window|Library命令，打開庫面板。把老鼠動畫拖到場景中，X坐標270，Y坐標300的位置。
步驟十五、然后打開Instance面板，當老鼠動畫成為選定狀態(tài)時，在Instance面板的Name項中輸入mouse。為老鼠動畫起分身名稱為mouse
步驟十六、在場景第二幀打開Action面板。你可以看到我們前面制作的程序。
步驟十七、使第三行else行為選定狀態(tài)。然后選擇指令區(qū)的Action指令集中的if項�？梢钥吹絠f命令出現(xiàn)在了else行的下面。在參數(shù)輸入框中輸入代碼(_framesloaded/_totalframes)*100>20,
圖4-17 if指令的輸入框
步驟十八、單擊Actions指令集中的evaluate指令，加入一個空行。
步驟十九、在輸入框內(nèi)輸入指令_root.mouse.gotoandplay(43)。如圖4-18所示。
圖4-18 evaluate加入一個空行
步驟二十、用鼠標單選_root.mouse.gotoandplay(43)下面的一行，此行只有一個}括號。
步驟二十一、單擊if指令，輸入代碼(_framesloaded/_totalframes)*100>40。
步驟二十二、單擊evaluate加入一個空行，輸入代碼_root.mouse.gotoandplay(71)。
步驟二十三、單擊此行下面的}括號行。然后繼續(xù)單擊if指令，輸入代碼(_framesloaded/_totalframes)*100>60。
步驟二十四、單擊evaluate加入一個空行，輸入代碼_root.mouse.gotoandplay(91)。
步驟二十五、單擊此行下面的}括號行，然后單擊if指令，輸入代碼(_framesloaded/_totalframes)*100>80。
步驟二十六、單擊evaluate加入一個空行，輸入代碼_root.mouse.gotoandplay(106)。完成整個程序行如圖4-19。
圖4-19 完整的趣味下載程序內(nèi)容
步驟二十七、動畫上傳測試。
程序解讀：
在整個程序行內(nèi)容方面加入了一個if判斷的指令。判斷當動畫下載到20%時，老鼠動畫剪輯將跳轉(zhuǎn)到第43幀，而43幀的內(nèi)容是比前一循環(huán)速度加快的動畫。當動畫下載到40%時，老鼠動畫剪輯跳轉(zhuǎn)到第71幀。每一次速度都比上一次的要快，這是一個嵌套的判斷指令。
知識要點：
在這個動畫實例中，我們做到了讓電影剪輯隨著if判斷來播放。這個功能在網(wǎng)站的動畫演示當中相當多見，通常交互和動態(tài)的內(nèi)容演示都是通過if判斷來完成的。第一個簡易的Loading其實就是做預載動畫的內(nèi)核。學會了制作Loading你還可以把這樣的內(nèi)容加入到網(wǎng)站的演示當中去。比方說判斷分身名為MC1的電影剪輯播放到了什么程度，來動態(tài)的改變MC2的播放內(nèi)容。
出處：藍色理想
責任編輯：qhwa
上一頁 精確的loading 設計 下一頁
◎進入論壇Flash專欄版塊參加討論
|
第 1 頁 
第 4 頁 趣味的loading 設計
