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