在本小節(jié)的實例學(xué)習(xí)中，將通過創(chuàng)建基于切片的翻轉(zhuǎn)制作釣魚小游戲的動畫效果。如圖10-75所示，為本實例的完成效果。

圖10-75 完成效果技術(shù)提示
在實例的設(shè)計、制作流程中，首先在“Web 內(nèi)容”中創(chuàng)建基于切片的翻轉(zhuǎn)，然后在“圖層”調(diào)板進(jìn)行動畫的設(shè)置。如圖10-76所示，為本實例的制作流程。

圖10-76 制作概覽
制作步驟
（1）啟動ImageReady，打開上一章節(jié)保存的“釣魚小游戲.psd”文件。在“圖層”調(diào)板中選擇“圖層 13”，然后單擊“Web 內(nèi)容”調(diào)板中的“創(chuàng)建基于圖層的翻轉(zhuǎn)”按鈕，創(chuàng)建如圖10-77所示的切片和狀態(tài)。

圖10-77 創(chuàng)建基于圖層的切片和狀態(tài)
（2）在“動畫”調(diào)板中創(chuàng)建第2幀動畫，然后顯示“圖層 13”的“外發(fā)光”圖層樣式效果，設(shè)置第2幀動畫。之后再設(shè)置兩個動畫幀的延遲時間為“0.3”秒，如圖10-78所示。

圖10-78 設(shè)置第2幀動畫及延遲時間
（3）新建Selected狀態(tài)，然后參照圖10-79所示，調(diào)整圖層的顯示或隱藏，并使用“移動”工具參照圖示調(diào)整圖像的位置，創(chuàng)建Selected狀態(tài)的第1～2幀動畫。

圖10-79 創(chuàng)建Selected狀態(tài)并設(shè)置動畫

（4）然后單擊“過渡”按鈕，如圖10-80所示，在第1幀和第2幀動畫之間插.入3個過渡幀。

圖10-80 設(shè)置過渡幀
（5）接著設(shè)置動畫的循環(huán)選項為“一次”，如圖10-81所示。

圖10-81 設(shè)置動畫的循環(huán)選項
（6）確定“02”切片的Selected狀態(tài)為選擇狀態(tài)，再使用“切片”工具，繪制如圖10-82所示的切片，然后在“Web 內(nèi)容”調(diào)板中，單擊打開“03”切片縮覽圖前“使切片成為當(dāng)前翻轉(zhuǎn)狀態(tài)的遠(yuǎn)程切片”圖標(biāo)，設(shè)置遠(yuǎn)程切片。

圖10-82 繪制切片并設(shè)置遠(yuǎn)程切片
（7）最后執(zhí)行“文件”→“存儲優(yōu)化結(jié)果”命令，存儲優(yōu)化結(jié)果為“HTML和圖像”格式文件。讀者可打開本書附帶光盤\Chapter-10\“釣魚小游戲.html”文件查看最終效果。

最新評論