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

項目描述

動畫是Flash的精髓，本項目著重讓學(xué)生了解Flash CS5的時間軸和幀的操作，理解動畫的原理，會制作簡單的逐幀動畫。

項目目標(biāo)

熟練掌握圖層和幀的操作；理解圖層和幀所表示的含義，會制作簡單的逐幀動畫。

任務(wù)一　制作“誦讀古詩”動畫

我明了

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

我掌握

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

我準(zhǔn)備

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

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

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

圖5-1　三種類型的幀

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

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

我動手

1. 文檔設(shè)置

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

想一想：

知道什么是幀頻嗎？

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

2. 添加背景圖片

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

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

圖5-4　“對齊”面板

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

想一想：

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

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

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

3. 制作古詩動畫

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

圖5-7　鎖定圖層1

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

想一想：

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

(2) 選擇“文本工具”，打開“屬性”面板，設(shè)置為：靜態(tài)文本，水平方向，大小為36點，對齊方式為左對齊?！皩傩浴泵姘迦鐖D5-9所示。

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

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

圖5-10　輸入古詩

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

圖5-11　插入普通幀

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

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

想一想：

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

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

圖5-13　刪除多余的文本

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

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

4. 保存測試動畫

單擊菜單“文件”→“另存為”命令，保存文件為“古詩誦讀”，單擊“確定”按鈕，再按組合鍵【Ctrl+Enter】測試動畫。

小提示：

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

我收獲

我留言

我練習(xí)

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

(2) 制作倒數(shù)文字動畫(參見源文件“倒數(shù)文字.fla”)。

任務(wù)二　制作“行走的小人”動畫

我明了

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

我掌握

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

我準(zhǔn)備

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

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

2. 時間軸上的按鈕

時間軸上的按鈕如圖5-15所示。

圖5-15　時間軸上的按鈕

小經(jīng)驗：

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

我動手

1. 文檔設(shè)置

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

圖5-14　繪圖紙功能

2. 動畫制作

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

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

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

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

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

圖5-18　右腿變形

(4) 解鎖“左腿”圖層，選中第4幀，選擇“任意變形工具”，選中整個腿，調(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幀中身體各部分位置，使整個身體略微下沉，圖5-22所示的是第1幀和第3幀的位置對比。

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

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

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

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

我收獲

我留言

我練習(xí)

(1) 動手制作本項目案例。

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

圖5-24　烏龜行走

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

圖5-25　兔子跑步