項(xiàng)目五　練好逐幀，動(dòng)畫(huà)表現(xiàn)更細(xì)膩

項(xiàng)目描述

動(dòng)畫(huà)是Flash的精髓，本項(xiàng)目著重讓學(xué)生了解Flash CS5的時(shí)間軸和幀的操作，理解動(dòng)畫(huà)的原理，會(huì)制作簡(jiǎn)單的逐幀動(dòng)畫(huà)。

項(xiàng)目目標(biāo)

熟練掌握?qǐng)D層和幀的操作；理解圖層和幀所表示的含義，會(huì)制作簡(jiǎn)單的逐幀動(dòng)畫(huà)。

任務(wù)一　制作“誦讀古詩(shī)”動(dòng)畫(huà)

我明了

本任務(wù)是制作一個(gè)在舞臺(tái)上古詩(shī)一字一字逐漸出現(xiàn)的漸進(jìn)效果。

我掌握

認(rèn)識(shí)圖層和幀，了解動(dòng)畫(huà)的基本原理，會(huì)進(jìn)行幀的基本操作。

我準(zhǔn)備

(1) 幀是Flash動(dòng)畫(huà)的基礎(chǔ)，一幀相當(dāng)于一個(gè)畫(huà)面，多個(gè)幀上的畫(huà)面連續(xù)播放，便形成動(dòng)畫(huà)。

(2) 幀頻是指動(dòng)畫(huà)的播放速度，單位是fps，即每秒播放多少幀。

(3) Flash中的幀主要分為關(guān)鍵幀、空白關(guān)鍵幀和普通幀三種類(lèi)型，如圖5-1所示。

圖5-1　三種類(lèi)型的幀

(4) 幀的顯示狀態(tài)如圖5-2所示。

圖5-2　幀的顯示狀態(tài)

我動(dòng)手

1. 文檔設(shè)置

打開(kāi)“古詩(shī)誦讀(start).fla”文檔，單擊“窗口”→“屬性”命令，打開(kāi)“屬性”面板，設(shè)置文檔屬性如下：FPS(幀頻)為12，大小為480×360，其他默認(rèn)，如圖5-3所示。

想一想：

知道什么是幀頻嗎？

圖5-3　文檔設(shè)置

2. 添加背景圖片

(1) 單擊“窗口”→“庫(kù)”命令，打開(kāi)“庫(kù)”面板，將庫(kù)中的“背景.jpg拖入場(chǎng)景中。

(2) 選中場(chǎng)景中的圖片，單擊“窗口”→“對(duì)齊”命令，打開(kāi)“對(duì)齊”面板，如圖5-4所示，勾選“與舞臺(tái)對(duì)齊”，再分別單擊“匹配寬和高”按鈕、“水平中齊”按鈕和“垂直中齊”按鈕，使背景圖與舞臺(tái)大小一樣并位于舞臺(tái)的中央，如圖5-5所示。

圖5-4　“對(duì)齊”面板

圖5-5　設(shè)置后的背景圖片

想一想：

知道如何用圖片作為背景了嗎？

(3) 選擇背景圖片，按組合鍵【Ctrl+B】將圖片分離，再選擇“選擇工具”，選擇圖片下部帶文字的部分，如圖5-6所示。按【Delete】鍵刪除該部分，再選中剩余背景圖片，打開(kāi)“對(duì)齊”面板，再依次單擊“匹配寬和高”按鈕、“水平中齊”按鈕和“垂直中齊”按鈕，使背景圖與舞臺(tái)大小一樣并位于舞臺(tái)的中央。

圖5-6　選擇圖片帶文字部分

3. 制作古詩(shī)動(dòng)畫(huà)

(1) 單擊圖層1中圖標(biāo)“”下的點(diǎn)，鎖定圖層1，以免后面操作影響該層內(nèi)容。此時(shí)圖層如圖5-7所示。單擊層按鈕，新建一個(gè)圖層“圖層2”。雙擊“圖層2”，在圖層名文本框中輸入“文本”，圖層名重命名為“文本”，按回車(chē)鍵結(jié)束，如圖5-8所示。

圖5-7　鎖定圖層1

圖5-8　新建“文本”圖層

想一想：

新建圖層，重命名圖層應(yīng)該怎么操作？

(2) 選擇“文本工具”，打開(kāi)“屬性”面板，設(shè)置為：靜態(tài)文本，水平方向，大小為36點(diǎn)，對(duì)齊方式為左對(duì)齊。“屬性”面板如圖5-9所示。

圖5-9　設(shè)置文本工具屬性

(3) 設(shè)置好后，在場(chǎng)景中上方的水平中部單擊，輸入文本“草”。另起一行，輸入文本“白居易”，再輸入古詩(shī)的內(nèi)容，選中三個(gè)文本，設(shè)置文本相對(duì)于舞臺(tái)水平中齊。設(shè)置好后如圖5-10所示。

圖5-10　輸入古詩(shī)

(4) 單擊“文本”圖層的第60幀，按住鼠標(biāo)左鍵不放，向下拖動(dòng)到“圖層1”的第60幀后釋放，選中兩個(gè)圖層的第60幀，在選中區(qū)右擊，在快捷菜單中單擊“插入幀”命令，即在前60幀中插入了普通幀，如圖5-11所示。

圖5-11　插入普通幀

(5) 單擊時(shí)間軸上“文本“圖層的第3幀，按住【Ctrl】鍵不放，依次單擊第5，7，9，…，59幀，于是選中第3幀到第59幀之間的單數(shù)幀，再單擊“修改”→“時(shí)間軸”→“轉(zhuǎn)換為關(guān)鍵”命令，將這些幀轉(zhuǎn)換為關(guān)鍵幀，如圖5-12所示。

圖5-12　將普通幀轉(zhuǎn)換為關(guān)鍵幀

想一想：

怎樣選中不連續(xù)的幀、插入關(guān)鍵幀？你記住了嗎？

(6) 選中“文本”圖層的第1幀，刪除作者和古詩(shī)內(nèi)容文本框，僅保留“草”文本框，刪除后如圖5-13(a)所示。

圖5-13　刪除多余的文本

(7) 選中“文本”圖層第3幀中的作者文本框，保留“白”一個(gè)字符，刪除其他所有字符，并刪除古詩(shī)內(nèi)容文本，場(chǎng)景中此時(shí)多了一個(gè)“白”字，如圖5-13(b)所示。

(8) 同步驟(7)，在每一個(gè)關(guān)鍵幀上，依次多保留一個(gè)字符，直到第59幀，保留了所有的字符為止。

4. 保存測(cè)試動(dòng)畫(huà)

單擊菜單“文件”→“另存為”命令，保存文件為“古詩(shī)誦讀”，單擊“確定”按鈕，再按組合鍵【Ctrl+Enter】測(cè)試動(dòng)畫(huà)。

小提示：

我們可以看出，時(shí)間軸的每一幀畫(huà)面連續(xù)播放，就形成動(dòng)畫(huà)。

我收獲

我留言

我練習(xí)

(1) 完成本任務(wù)。

(2) 制作倒數(shù)文字動(dòng)畫(huà)(參見(jiàn)源文件“倒數(shù)文字.fla”)。

任務(wù)二　制作“行走的小人”動(dòng)畫(huà)

我明了

動(dòng)畫(huà)中，人物行走是常見(jiàn)的動(dòng)畫(huà)。因此，在本任務(wù)中，我們利用逐幀動(dòng)畫(huà)制作一個(gè)行走的小人，在制作過(guò)程中，一是要明了人物行走動(dòng)畫(huà)的制作方法，二是要明了人物行走的運(yùn)動(dòng)規(guī)律。

我掌握

進(jìn)一步認(rèn)識(shí)圖層和幀，理解動(dòng)畫(huà)的基本原理，鞏固幀的操作，學(xué)會(huì)圖層的操作。

我準(zhǔn)備

1. 認(rèn)識(shí)繪圖紙外觀

繪圖紙外觀如圖5-14所示。

2. 時(shí)間軸上的按鈕

時(shí)間軸上的按鈕如圖5-15所示。

圖5-15　時(shí)間軸上的按鈕

小經(jīng)驗(yàn)：

自己動(dòng)手的話(huà)，最好也應(yīng)該先將需要單獨(dú)運(yùn)動(dòng)的部分做成元件。

我動(dòng)手

1. 文檔設(shè)置

打開(kāi)“小人行走(start).fla”文檔，觀察文件圖，身體各部位已經(jīng)分散到相應(yīng)的圖層，打開(kāi)“庫(kù)”，查看里面的元件，可以看出，相應(yīng)的身體部位也相應(yīng)地做成了元件。文檔屬性為默認(rèn)的。

圖5-14　繪圖紙功能

2. 動(dòng)畫(huà)制作

(1) 為方便定位，調(diào)出標(biāo)尺。單擊“視圖”→“標(biāo)尺”命令，顯示標(biāo)尺，然后從水平標(biāo)尺拖出兩條輔助線(xiàn)，作為走路時(shí)的起伏效果，如圖5-16所示。

圖5-16　顯示標(biāo)尺各輔助線(xiàn)

(2) 選中“頭”圖層的第4幀，按住【Shift】鍵不放，單擊“左腿”圖層的第4幀，選中兩圖層間的所有圖層的第4幀，在選中區(qū)右擊，“插入關(guān)鍵幀”，在所有圖層的第4幀插入了關(guān)鍵幀，如圖5-17所示。

圖5-17　插入關(guān)鍵幀

(3) 單擊按鈕鎖定所有圖層，單擊“右腿”圖層的按鈕，解鎖該層。選中第4幀，選擇“任意變形工具”，選中左腿，將變形中心點(diǎn)拖到腰部并進(jìn)行旋轉(zhuǎn)，如圖5-18(a)所示；再選中小腿和腳，將中心點(diǎn)移到膝蓋，并進(jìn)行旋轉(zhuǎn)，如圖5-18(b)所示；最后選中腳，將中心點(diǎn)移到腳后跟，進(jìn)行旋轉(zhuǎn)，如圖5-18(c)所示。調(diào)整好后，單擊該層按鈕，鎖定該圖層。

圖5-18　右腿變形

(4) 解鎖“左腿”圖層，選中第4幀，選擇“任意變形工具”，選中整個(gè)腿，調(diào)整變形中心，進(jìn)行旋轉(zhuǎn)，如圖5-19(a)所示；接著選中小腿和腳，調(diào)整變形中心到膝蓋部，并進(jìn)行旋轉(zhuǎn)，如圖5-19(b)所示；最后選中腳，調(diào)整變形中心，進(jìn)行旋轉(zhuǎn)，調(diào)整好后的效果如圖5-19(c)所示。調(diào)整好后鎖定該層。

圖5-19　左腿變形

(5) 解鎖“左手”圖層，選中第3幀中的左手，調(diào)整變形中心到肩部，旋轉(zhuǎn)，如圖5-20所示，調(diào)整好后鎖定。解鎖“右手”圖層，選中第3幀中的右手，調(diào)整變形中心，進(jìn)行旋轉(zhuǎn)，如圖5-21所示。調(diào)整好后鎖定。

圖5-20　左手

圖5-21　右手

(6) 解鎖所有圖層，分別調(diào)整第3幀中身體各部分位置，使整個(gè)身體略微下沉，圖5-22所示的是第1幀和第3幀的位置對(duì)比。

圖5-22　調(diào)整身體位置

(7) 參照前面的操作，分別在第5、7、9、11、13幀處插入關(guān)鍵幀，并選擇“任意變形工具”，調(diào)整各幀中的行走動(dòng)作。調(diào)整好的結(jié)果如圖5-23所示。

圖5-23　小人行走各幀情況

(8) 至此，一個(gè)小人行走的動(dòng)畫(huà)就完成了，以“小人行走”為文件名保存以后，按組合鍵【Ctrl+Enter】測(cè)試動(dòng)畫(huà)。

我收獲

我留言

我練習(xí)

(1) 動(dòng)手制作本項(xiàng)目案例。

(2) 制作烏龜?shù)淖呗穭?dòng)畫(huà)。各關(guān)鍵幀效果如圖5-24所示。

圖5-24　烏龜行走

(3) 制作兔子跑步動(dòng)畫(huà)。各關(guān)鍵幀效果如圖5-25所示。

圖5-25　兔子跑步