在本小節(jié)的實(shí)例學(xué)習(xí)中將制作射擊游戲的翻轉(zhuǎn)動(dòng)畫(huà)效果，如圖10-53所示，為本實(shí)例的完成效果。

圖10-53完成效果

技術(shù)提示

除了可以為切片添加翻轉(zhuǎn)狀態(tài)外，還可以為圖像映射設(shè)置翻轉(zhuǎn)狀態(tài)，從而制作出圖像的動(dòng)畫(huà)效果。本實(shí)例就是使用這種方法制作出圖像的動(dòng)畫(huà)效果。如圖10-54所示，為本實(shí)例的制作流程。

圖10-54制作流程

制作步驟

（1）啟動(dòng)ImageReady，打開(kāi)上一章節(jié)保存的“射擊小游戲.psd”文件，然后使用“矩形圖像映射”工具，繪制如圖10-55所示的圖像映射區(qū)域。

圖10-55創(chuàng)建圖像映射區(qū)域

（2）在“動(dòng)畫(huà)”調(diào)板中，將全部動(dòng)畫(huà)幀選擇，然后參照?qǐng)D10-56所示，將選擇的動(dòng)畫(huà)幀拷貝下來(lái)。

圖10-56拷貝幀

（3）然后在“Web內(nèi)容”調(diào)板中，單擊“創(chuàng)建翻轉(zhuǎn)狀態(tài)”按鈕，新建Over狀態(tài)。接著再將拷貝的動(dòng)畫(huà)幀粘貼到Over狀態(tài)中，如圖10-57所示。

圖10-57新建Over狀態(tài)并粘貼幀

（4）接著選擇第1幀動(dòng)畫(huà)，然后在“圖層”調(diào)板中顯示“圖層3”。之后將第2～18幀動(dòng)畫(huà)選擇，更改“圖層1”的“不透明度”為100%。最后選擇第7幀和第19幀動(dòng)畫(huà)，再將“圖層1”顯示。

（5）接著在“Web內(nèi)容”調(diào)板單擊“創(chuàng)建翻轉(zhuǎn)狀態(tài)”按鈕，新建Down狀態(tài)，然后右擊Down狀態(tài)名稱(chēng)，在彈出的菜單中選擇“Click”命令，如圖10-58所示。

圖10-58新建Down狀態(tài)并轉(zhuǎn)換狀態(tài)

（6）將Down狀態(tài)轉(zhuǎn)換為Click狀態(tài)后，再將Over狀態(tài)的第1、7、13、19幀動(dòng)畫(huà)拷貝并粘貼替換到Click狀態(tài)中，如圖10-59所示。

圖10-59復(fù)制動(dòng)畫(huà)幀

（7）接下來(lái)選擇第1幀動(dòng)畫(huà)，參照?qǐng)D10-60所示，顯示“圖層4”和“圖層4副本”圖層，并向下移動(dòng)“圖層4”中的圖像，形成交錯(cuò)散布的泡泡圖像，更改第1幀動(dòng)畫(huà)的圖像設(shè)置。

圖10-60更改第1幀動(dòng)畫(huà)的設(shè)置

（8）再參照?qǐng)D10-61所示的效果，更改第2～4幀動(dòng)畫(huà)的設(shè)置。

圖10-61更改第2～4幀動(dòng)畫(huà)設(shè)置

（9）完成動(dòng)畫(huà)幀的更改設(shè)置后，在第1幀和第2幀之間插入5個(gè)過(guò)渡幀，在第7幀和第8幀之間插入5個(gè)過(guò)渡幀，在第13幀和第14幀之間插入5個(gè)過(guò)渡幀，完成后的“動(dòng)畫(huà)”調(diào)板中共有19幀動(dòng)畫(huà)。

（10）接下來(lái)選擇第18幀動(dòng)畫(huà)，在“圖層”調(diào)板中隱藏“圖層3”，然后使“圖層2”的“外發(fā)光”圖層樣式效果顯示，并更改該圖層的“不透明度”為100%，如圖10-62所示。

圖10-62更改第18幀動(dòng)畫(huà)的設(shè)置

（11）再選擇第19幀動(dòng)畫(huà)，然后在“圖層”調(diào)板中隱藏“圖層2”和“圖層3”，更改第19幀動(dòng)畫(huà)的設(shè)置，完成該實(shí)例的制作，如圖10-63所示。

圖10-63更改第19幀動(dòng)畫(huà)的設(shè)置

（12）最后執(zhí)行“文件”→“存儲(chǔ)優(yōu)化結(jié)果”命令，存儲(chǔ)優(yōu)化結(jié)果為“HTML和圖像”格式文件。讀者可打開(kāi)本書(shū)附帶光盤(pán)Chapter-10“射擊小游戲.html”文件查看最終效果。