本課素材下載
逐幀動畫是一種常見的動畫形式（Frame By Frame），其原理是在“連續(xù)的關(guān)鍵幀”中分解動畫動作，也就是在時間軸的每幀上逐幀繪制不同的內(nèi)容，使其連續(xù)播放而成動畫。
因為逐幀動畫的幀序列內(nèi)容不一樣，不但給制作增加了負(fù)擔(dān)而且最終輸出的文件量也很大，但它的優(yōu)勢也很明顯：逐幀動畫具有非常大的靈活性，幾乎可以表現(xiàn)任何想表現(xiàn)的內(nèi)容，而它類似與電影的播放模式，很適合于表演細(xì)膩的動畫。例如：人物或動物急劇轉(zhuǎn)身、 頭發(fā)及衣服的飄動、走路、說話以及精致的3D效果等等。
5．1 利用逐幀動畫制作林中散步的女孩
學(xué)習(xí)目的
本節(jié)你將學(xué)習(xí)掌握以下知識：
u 逐幀動畫的制作方法
u 【繪圖紙外觀】按鈕的使用方法
u 【編輯多個幀】按鈕的使用方法
u 【修改繪圖紙標(biāo)記】按鈕的使用方法
u 【對齊面板】的使用方法
u 插入幀與刪除幀
學(xué)習(xí)方法
本節(jié)要學(xué)習(xí)的是將幾張靜態(tài)圖片連續(xù)導(dǎo)入到Flash中，并利用【繪圖紙】功能及【對齊面板】將圖像對齊，最后建立一段林中散步女孩的逐幀動畫。
對于初學(xué)者來說，將圖片導(dǎo)入到Flash中非常容易做到，但是同時編輯所有導(dǎo)入的圖片，并且將它們對齊放在合適的位置，在這點上初學(xué)者可能就會一知半解了。本節(jié)主要教給你一種同時編輯多個對象的簡單方法，并且通過本節(jié)的講解，初學(xué)者可以照葫蘆畫瓢的制作出精彩的課后練習(xí)，來加強學(xué)習(xí)成果，提高學(xué)習(xí)興趣。
課前熱身
（1）創(chuàng)建影片文檔
執(zhí)行【文件】|【新建】命令，在彈出的對話框中選擇【常規(guī)】|【Flash文檔】選項后，單擊【確定】按鈕，新建一個影片文檔。在【文檔屬性】對話框中進行設(shè)置：文件大小為550×480像素，【背景色】為白色，如圖5-1-1所示。
圖5-1-1 設(shè)置文檔屬性
（2）修改圖層名稱
雙擊 【圖層1】的圖層名稱，將其圖層名稱修改為【背景】，如圖5-1-2所示。
圖5-1-2 修改圖層名稱
專家提示：及時修改圖層名稱讓其與內(nèi)容相對應(yīng)，可以更準(zhǔn)確快速的找到每個圖層中的內(nèi)容，方便編輯與修改，所以養(yǎng)成一個良好的圖層命名習(xí)慣是必要的。
（3）導(dǎo)入背景圖片及人物圖片
單擊【背景】層第一幀，執(zhí)行【文件】|【導(dǎo)入】|【導(dǎo)入到舞臺】命令，將素材包1中的“背景.bmp”圖片導(dǎo)入到場景中，選擇第16幀，按下F5插入幀，使幀的內(nèi)容延續(xù)到第16幀，如圖5-1-3所示。
圖5-1-3 導(dǎo)入背景圖片
新建一個圖層，命名為【人物】。單擊此層第1幀，執(zhí)行【文件】|【導(dǎo)入】|【導(dǎo)入到舞臺】命令，彈出。。。。。將素材包1中的走路系列圖片導(dǎo)入（只需選中走路1.gif導(dǎo)入即可）。此時會彈出一個對話框，如圖5-1-4所示。
圖5-1-4 系列圖片導(dǎo)入
選擇【是】按鈕，Flash會自動把gif中的圖片序列按序號以逐幀形式導(dǎo)入到場景中，如圖5-1-5所示。
圖5-1-5 導(dǎo)入的gif動畫在場景的上方形成幀幀動畫
如下圖5-1-6所示是導(dǎo)入后的動畫序列，它們被Flash自動分配在8個關(guān)鍵幀中。
圖5-1-6 導(dǎo)入的8張圖片
（4）多幀編輯調(diào)整對象大小
雖然圖片已經(jīng)導(dǎo)入進來了，但是導(dǎo)入的序列圖片大小已經(jīng)超出了場景范圍。我們可以一幀幀來調(diào)整圖片大?。合葘⒁环鶊D縮小，將其位圖的寬高值記下，再把其它圖片設(shè)置成相同坐標(biāo)值。但是這種作法非常浪費時間，Flash軟件已經(jīng)為大家準(zhǔn)備好了【編輯多個幀】按鈕，下面就一起來進行多幀編輯。
專家提示：缺省狀況下，導(dǎo)入的對象被放在場景坐標(biāo)“0，0”處，而且大小有可能與場景內(nèi)容不符，所以我們必須調(diào)整其大小并移動它們。
單擊【背景】圖層在【時間軸】面板小黃鎖下方的黑點，對此圖層進行加鎖，如圖5-1-7所示。
圖5-1-7 鎖定背景層
專家提示：在進行多幀編輯時，編輯的是場景中全部對象，為了避免誤操作，所以要將一些不需要編輯的圖層進行鎖定。
單擊【時間軸】面板下方的【編輯多個幀】按鈕，再單擊【修改繪圖紙標(biāo)記】按鈕，在彈出的菜單中選擇【繪制全部】命令，如圖5-1-8所示。
圖5-1-8 選擇顯示全部選項
最后執(zhí)行【編輯】|【全選】命令，此時時間軸和場景效果如圖5-1-9所示。
圖5-1-9 選取多幀編輯
在【屬性】面板上單擊黑鎖按鈕將長寬比例鎖定，設(shè)置寬為120，按下【回車】鍵后所有選中的圖像變小，如圖5-1-10所示。
圖5-1-10 調(diào)整位圖大小
利用【工具箱】中的【選擇工具】將所有圖片拖放到場景中央，執(zhí)行【窗口】|【設(shè)置面板】|【對齊】命令（快捷鍵Ctrl+K），在彈出的【對齊】面板中單擊【上對齊】按鈕，將所有的圖像上方對齊，如圖5-1-11所示。
圖5-1-11 上對齊位圖
單擊【編輯多個幀】按鈕，取消編輯多個幀。再單擊一下【繪圖紙外觀】按鈕，用鼠標(biāo)選中每一幀上的位圖，利用鍵盤上的左右方向鍵移動位圖，使所有位圖重疊在一起，如圖5-1-12所示。
圖5-1-12 移動圖像使其重疊
單擊【繪圖紙外觀】按鈕取消其多幀查看效果。
（5） 插入幀與刪除多余的幀
現(xiàn)在可以按“Ctrl+Enter”測試一下動畫效果，會發(fā)現(xiàn)，一幀一個動作對于人物走動來說速度過于太快，所以在【人物】圖層的各幀上按一下F5（插入一幀），如圖5-1-13所示。
圖5-1-13 將【人物】層各幀延長一幀
指點迷津——插入幀的其它兩種方法是：①在【時間軸】要插入幀的地方右擊，在彈出的快捷菜單中選擇【插入幀】命令。②執(zhí)行【插入】|【時間軸】|【幀】命令。
選中17幀至24幀，在時間軸上右擊，在彈出的快捷菜單中選擇【刪除幀】命令，將多余的幀刪除，如圖5-1-14所示。
圖5-1-14 刪除幀
（6） 測試存盤
執(zhí)行【控制】|【測試影片】命令（快捷鍵Ctrl+Enter），觀察動畫效果，如果滿意，執(zhí)行【文件】|【保存】命令，將文件保存成“走路.fla”文件，如果要導(dǎo)出Flash的播放文件，執(zhí)行【文件】|【導(dǎo)出】|【導(dǎo)出影片】命令。
至此，一個在林中散步的漂亮女孩逐幀動畫就制作完成了（參見素材包1）。
課堂講解
在前面的“課前熱身”中，我們利用實例講解了【對齊面板】中的上對齊功能，利用導(dǎo)入靜態(tài)圖片創(chuàng)建逐幀動畫的方法，還講解了【繪畫紙】里的【繪圖紙外觀】按鈕、【編輯多個幀】按鈕、【修改繪圖紙標(biāo)記】按鈕的使用方法。下面詳細(xì)的講解一下【繪畫紙】的功能、【對齊面板】的應(yīng)用，并給大家歸納總結(jié)創(chuàng)建逐幀動畫的方法。
1．【繪畫紙】的功能
【繪畫紙】是一個幫助定位和編輯動畫的輔助功能，這個功能對制作逐幀動畫特別有用。通常情況下，Flash 在舞臺中一次只能顯示動畫序列的單個幀。使用繪畫紙功能后，你就可以在舞臺中一次查看兩個或多個幀了。
如圖5-1-15所示，這是使用【繪畫紙】功能后的場景，可以看出，當(dāng)前幀中內(nèi)容用全彩色顯示，其它幀內(nèi)容以半透明顯示，它使我們看起來好像所有幀內(nèi)容是畫在一張半透明的繪圖紙上，這些內(nèi)容相互層疊在一起。當(dāng)然，這時你只能編輯當(dāng)前幀的內(nèi)容。
如圖5-1-15 同時顯示多幀內(nèi)容的變化
【繪畫紙】各個按鈕的功能：
● 【繪圖紙外觀】按鈕：按下此按鈕后，在時間幀的上方，出現(xiàn)繪圖紙外觀標(biāo)記。拉動外觀標(biāo)記的兩端，可以擴大或縮小顯示范圍。
● 【繪圖紙外觀輪廓】按鈕：按下此按鈕后，場景中顯示各幀內(nèi)容的輪廓線，填充色消失，特別適合觀察對象輪廓，另外可以節(jié)省系統(tǒng)資源，加快顯示過程。
● 【編輯多個幀】按鈕：按下后可以顯示全部幀內(nèi)容，并且可以進行“多幀同時編輯”。
● 【修改繪圖紙標(biāo)記】按鈕：按下后，彈出菜單，菜單中有以下選項：
【總是顯示標(biāo)記】選項：會在時間軸標(biāo)題中顯示繪圖紙外觀標(biāo)記，無論繪圖紙外觀是否打開。
【錨定繪圖紙】選項：會將繪圖紙外觀標(biāo)記鎖定在它們在時間軸標(biāo)題中的當(dāng)前位置。通常情況下，繪圖紙外觀范圍是和當(dāng)前幀的指針以及繪圖紙外觀標(biāo)記相關(guān)的。通過錨定繪圖紙外觀標(biāo)記，可以防止它們隨當(dāng)前幀的指針移動。 【繪圖紙 2】選項；會在當(dāng)前幀的兩邊顯示兩個幀。
【繪圖紙 5】選項；會在當(dāng)前幀的兩邊顯示五個幀。
【繪制全部】選項；會在當(dāng)前幀的兩邊顯示全部幀。
2．【對齊面板】的應(yīng)用
使用【對齊面板】，可以對編輯區(qū)中多個對像進行排列、分布、匹配大小、調(diào)整間隔等操作，使布局整齊美觀，如圖5-1-16所示。
圖5-1-16 對齊面板
【對齊面板】由排列對齊、分布對齊、匹配大小、間隔以及相對舞臺同幾部分組成：
（1）排列對齊（水平排列和垂直排列）
?、?/span>水平排列：從左到右分邊是水平方向的左對齊、左右居中對齊、右對齊。
?、?/span>垂直排列：從左到右分邊是垂直方向的上對齊、上下居中對齊、下對齊。
（2）分布對齊（水平分布和垂直分布）：
①水平分布：從左到右分別為垂直方向基于上邊緣的分布、基于中心的分布、基于下邊緣的分布。
②垂直分布：從左到右分別為水平方向基于左邊緣的分布、基于中心的分布、基于右邊緣的分布。
（3）匹配大小：將一組對象的寬度、高度或兩者調(diào)整為對象的最大尺寸。從左到右分別為水平對齊、垂直對齊、水平垂直對齊。
（4）間隔：將一組對象在水平或垂直方向上按照等間距的方式排列。從左到右分別為水平間距的調(diào)整、垂直間距的調(diào)整。
（5）相對舞臺：在默認(rèn)狀態(tài)時上述按鈕的操作是對于對象本身的，單擊此按鈕后，則所做的操作是相對于舞臺的。
3．創(chuàng)建逐幀動畫的方法：
（1）用導(dǎo)入的靜態(tài)圖片建立逐幀動畫：用jpg、png等格式的靜態(tài)圖片連續(xù)導(dǎo)入到Flash中，就會建立一段逐幀動畫（參考實例：走路）。
（2）繪制矢量逐幀動畫：用鼠標(biāo)或壓感筆在場景中一幀幀的畫出幀內(nèi)容（參考實例：雪蓮花）。
（3）文字逐幀動畫：用文字作幀中的元件，實現(xiàn)文字跳躍、旋轉(zhuǎn)等特效。
（4）指令逐幀動畫：在時間幀面板上，逐幀寫入動作腳本語句來完成元件的變化。
（5）導(dǎo)入序列圖像：可以導(dǎo)入gif序列圖像、swf動畫文件或者利用第3方軟件（如swish、swift 3D等）產(chǎn)生的動畫序列。
課后練習(xí)
1．利用導(dǎo)入靜態(tài)圖片建立逐幀動畫法制作駿馬飛奔的動畫。（素材包2）
2．利用繪制矢量逐幀動畫法制作盛開的雪蓮花（請參考下載資源中的范例源文件）。
3．利用文字逐幀動畫制作文字跳躍、旋轉(zhuǎn)特效。
4．利用導(dǎo)入素材包4中的7.gif動畫圖片制作小鳥飛的逐幀動畫。
5．利用素材包4中sucai.fla制作出天篷元帥斗篷的飄動效果（在斗篷與領(lǐng)帶兩層制作逐幀動畫）。
專家提示：用選擇工具及部分選取工具逐幀修改對象衣角，形成斗篷與領(lǐng)帶飄動效果，其每幀圖像效果如圖5-1-17所示。
逐幀動畫第1幀 逐幀動畫第2幀 逐幀動畫第3幀
圖5-1-17 天篷元帥斗篷的飄動效果逐幀動畫
|
