FlashCS6中文版基礎(chǔ)教程：第14章 創(chuàng)建引導(dǎo)層動(dòng)畫

1第14章創(chuàng)建引導(dǎo)層動(dòng)畫在本章的學(xué)習(xí)中，我們通過詳細(xì)的講解和實(shí)例練習(xí)，來學(xué)習(xí)引導(dǎo)層動(dòng)畫的知識(shí)，引導(dǎo)層動(dòng)畫如圖14-1所示。214.1引導(dǎo)層的原理在創(chuàng)建引導(dǎo)層動(dòng)畫之前，我們首先來了解一下它的基礎(chǔ)知識(shí)。引導(dǎo)層動(dòng)畫主要分為引導(dǎo)層和被引導(dǎo)層，上面一層是傳統(tǒng)運(yùn)動(dòng)引導(dǎo)層，它的圖層圖標(biāo)為；下面一層是被引導(dǎo)層，它的圖層圖標(biāo)為。在普通圖層上右擊，在彈出的快捷菜單中選擇【添加傳統(tǒng)運(yùn)動(dòng)引導(dǎo)層】命令，該層的上面就會(huì)添加一個(gè)傳統(tǒng)運(yùn)動(dòng)引導(dǎo)層，同時(shí)該普通層縮進(jìn)成為被引導(dǎo)層，如圖14-2所示。314.1引導(dǎo)層的原理引導(dǎo)層是用來指示元件運(yùn)動(dòng)路徑的，如圖14-3所示。引導(dǎo)動(dòng)畫最基本的操作就是使一個(gè)運(yùn)動(dòng)動(dòng)畫附著在引導(dǎo)線上。所以操作時(shí)需特別注意引導(dǎo)線的兩端，被引導(dǎo)的對(duì)象起始、終點(diǎn)的2個(gè)中心點(diǎn)一定要對(duì)準(zhǔn)引導(dǎo)線的2個(gè)端點(diǎn)，如圖14-4所示。414.2創(chuàng)建引導(dǎo)層和編輯被引導(dǎo)層被引導(dǎo)層中的對(duì)象在被引導(dǎo)運(yùn)動(dòng)時(shí)，還可作更細(xì)致的設(shè)置。比如運(yùn)動(dòng)方向，啟用【屬性】面板上的【調(diào)整到路徑】復(fù)選框，對(duì)象的運(yùn)動(dòng)路線就會(huì)自動(dòng)調(diào)整貼合運(yùn)動(dòng)路徑。而啟用【同步】復(fù)選框，元件的注冊(cè)中心點(diǎn)就會(huì)與運(yùn)動(dòng)路徑對(duì)齊，如圖14-5所示。引導(dǎo)層中的內(nèi)容在播放時(shí)是不可見的。利用這一特性，可以創(chuàng)建出一個(gè)不含被引導(dǎo)層的引導(dǎo)層。該引導(dǎo)層中可以放置一些文字說明、元件位置參考等。此時(shí)，引導(dǎo)層的圖標(biāo)為，如圖14-6所示。514.2創(chuàng)建引導(dǎo)層和編輯被引導(dǎo)層在做引導(dǎo)路徑動(dòng)畫時(shí)，單擊【工具】面板上的【緊貼至對(duì)象】按鈕，如圖14-7所示。可以使“對(duì)象附著于引導(dǎo)線”的操作更容易成功。在被引導(dǎo)層中放入元件時(shí)，在動(dòng)畫“開始”和“結(jié)束”的關(guān)鍵幀上，要讓元件的注冊(cè)點(diǎn)對(duì)準(zhǔn)線段的開始和結(jié)束的端點(diǎn)，如圖14-8所示。不對(duì)齊就不能創(chuàng)建有效的引導(dǎo)動(dòng)畫。614.2創(chuàng)建引導(dǎo)層和編輯被引導(dǎo)層若要將引導(dǎo)層轉(zhuǎn)換為其他屬性的圖層，有兩種方法。一是把被引導(dǎo)層拖離開引導(dǎo)層；二是在圖層區(qū)的引導(dǎo)層名稱上右擊，在彈出的快捷菜單中選擇【屬性】命令，在彈出的【圖層屬性】對(duì)話框中選擇想要轉(zhuǎn)換的圖層類型，如圖14-9所示。714.2.1創(chuàng)建傳統(tǒng)運(yùn)動(dòng)引導(dǎo)層要?jiǎng)?chuàng)建引導(dǎo)層，在被引導(dǎo)層上右擊，在彈出的快捷菜單中選擇【添加傳統(tǒng)運(yùn)動(dòng)引導(dǎo)層】命令，如圖14-10所示。814.2.1創(chuàng)建傳統(tǒng)運(yùn)動(dòng)引導(dǎo)層下面我們來詳細(xì)介紹創(chuàng)建傳統(tǒng)引導(dǎo)層的方法。(1)首先打開一個(gè)場(chǎng)景文件，如圖14-11所示。(2)在【圖層1】的第50幀，按F6鍵插入關(guān)鍵幀，如圖14-12所示。(3)在【圖層1】的第1幀到第50幀之間右擊，在彈出的快捷菜單中選擇【創(chuàng)建傳統(tǒng)補(bǔ)間】命令，創(chuàng)建傳統(tǒng)補(bǔ)間動(dòng)畫，如圖14-13所示。914.2.1創(chuàng)建傳統(tǒng)運(yùn)動(dòng)引導(dǎo)層(4)在【圖層1】上右擊，在彈出的快捷菜單中選擇【添加傳統(tǒng)運(yùn)動(dòng)引導(dǎo)層】命令，添加引導(dǎo)層，如圖14-14所示。(5)選擇【工具】面板中的【線條工具】，在引導(dǎo)層中繪制一條引導(dǎo)線，如圖14-15所示。(6)選擇【圖層1】中的第50幀，調(diào)整圖形的位置，如圖14-16所示。(7)按Ctrl+Enter組合鍵，播放動(dòng)畫觀察引導(dǎo)層動(dòng)畫的效果，如圖14-17所示。1014.2.2編輯被引導(dǎo)層下面我們來具體講解如何編輯被引導(dǎo)層。(1)首先打開一個(gè)繪制好的場(chǎng)景文件，如圖14-18所示。(2)選擇【窗口】|【屬性】菜單命令，如圖14-19所示。打開【屬性】檢查器面板，如圖14-20所示。1114.2.2編輯被引導(dǎo)層(3)播放場(chǎng)景中的動(dòng)畫，觀察昆蟲的運(yùn)動(dòng)。雖然實(shí)例是按照引導(dǎo)層的路徑在進(jìn)行運(yùn)動(dòng)，但是和我們繪制的路徑配合得并不是很好，在轉(zhuǎn)彎處昆蟲的頭部沒有配合路徑運(yùn)動(dòng)，如圖14-21所示。(4)打開被引導(dǎo)層的【屬性】檢查器面板，分別啟用【調(diào)整到路徑】、【同步】、【貼緊】復(fù)選框，如圖14-22所示。1214.2.2編輯被引導(dǎo)層(5)再次播放場(chǎng)景中動(dòng)畫，發(fā)現(xiàn)昆蟲的運(yùn)動(dòng)和我們繪制的引導(dǎo)線配合得很好，看起來更加的流暢自然，如圖14-23所示。1314.3上機(jī)實(shí)踐操作本范例源文件：\14\源文件.fla。本范例完成文件：\14\手臂文字.fla、手臂文字.swf。多媒體教學(xué)路徑：光盤→多媒體教學(xué)→第14章。1414.3.1實(shí)例介紹和展示本例通過運(yùn)用【打開】命令、【文字工具】、【屬性】檢查器面板、【插入普通幀】命令、【新建圖層】按鈕、【庫】面板、【添加傳統(tǒng)運(yùn)動(dòng)引導(dǎo)層】命令、【新建引導(dǎo)層】命令、【鉛筆工具】、【任意變形工具】、【創(chuàng)建傳統(tǒng)補(bǔ)間】命令、【矩形工具】等制作手臂文字動(dòng)畫。動(dòng)畫效果如圖14-24所示。1514.3.2制作手臂文字(1)首先打開第14章的場(chǎng)景文件“源文件.fla”。(2)選擇【工具】面板中的【文本工具】，在文本工具的【屬性】檢查器面板中設(shè)置字體為“黑體”，字體大小為“20”，如圖14-25所示。(3)設(shè)置完成后，在場(chǎng)景中單擊輸入文字：“北京云杰漫步多媒體科技有限公司竭誠為您服務(wù)”，如圖14-26所示。1614.3.2制作手臂文字(4)在【圖層1】上雙擊鼠標(biāo)，將【圖層1】名稱修改為“文字”，如圖14-27所示。(5)單擊【文字】圖層，在第40幀，按F5鍵，插入普通幀，如圖14-28所示。(6)單擊【新建圖層】按鈕，在【文字】圖層上創(chuàng)建一個(gè)新圖層，并命名為“手臂”，如圖14-29所示。1714.3.2制作手臂文字(7)選擇【庫】面板中的【手握筆】圖形元件，并拖曳到【手臂】圖層中，如圖14-30所示。(8)單擊【手臂】圖層，在第40幀按F6鍵，插入關(guān)鍵幀，如圖14-31所示。1814.3.3創(chuàng)建引導(dǎo)動(dòng)畫(1)在【手臂】圖層上右擊，在彈出的快捷菜單中選擇【添加傳統(tǒng)運(yùn)動(dòng)引導(dǎo)層】命令，如圖14-32所示。(2)在【手臂】圖層上新建一個(gè)引導(dǎo)層，如圖14-33所示。1914.3.3創(chuàng)建引導(dǎo)動(dòng)畫(3)確認(rèn)引導(dǎo)層為當(dāng)前圖層，選擇【工具】面板中的【鉛筆工具】按鈕繪制出一條曲線，如圖14-34所示。(4)單擊【手臂】圖層中的第1幀，選擇【工具】面板中的【任意變形工具】按鈕，調(diào)整手臂的位置，并將中心點(diǎn)移動(dòng)到筆尖處，如圖14-35所示。2014.3.3創(chuàng)建引導(dǎo)動(dòng)畫(5)單擊【手臂】圖層中的第40幀，選擇【工具】面板中的【任意變形工具】按鈕，將手臂的中心點(diǎn)調(diào)整到筆尖處，并拖曳手臂到引導(dǎo)線的最右端，如圖14-36所示。(6)在【手臂】圖層的第1幀到第40幀之間右擊，在彈出的快捷菜單中選擇【創(chuàng)建傳統(tǒng)補(bǔ)間】命令，創(chuàng)建傳統(tǒng)補(bǔ)間動(dòng)畫，如圖14-37所示。(7)單擊【文字】圖層，單擊【新建圖層】按鈕，添加一個(gè)新的圖層，并命名為“文字框”，如圖14-38所示。2114.3.3創(chuàng)建引導(dǎo)動(dòng)畫(8)在【文字框】圖層，選擇【工具】面板中的【矩形工具】按鈕，在工作區(qū)中繪制一個(gè)白色的矩形，大小正好能夠蓋住文字，如圖14-39所示。(9)在【文字框】圖層的第40幀按F6鍵，插入關(guān)鍵幀，如圖14-40所示。(10)在【文字框】圖層的第40幀插入的關(guān)鍵幀中，選擇矩形并拖曳到文字的右側(cè)，如圖14-41所示。2214.3.3創(chuàng)建引導(dǎo)動(dòng)畫(11)在【文字框】圖層的第1幀到第40幀之間右擊，在彈出的快捷菜單中選擇【創(chuàng)建傳統(tǒng)補(bǔ)間】命令，創(chuàng)建補(bǔ)間動(dòng)畫。(12)按Ctrl+Enter組合鍵，測(cè)試動(dòng)畫，如圖14-42所示。2314.3.3創(chuàng)建引導(dǎo)動(dòng)畫(13)觀察動(dòng)畫后，我們發(fā)現(xiàn)手臂的移動(dòng)速度比文字出現(xiàn)的速度快，可以通過設(shè)置被引導(dǎo)層的屬性來解決這個(gè)問題。在【手臂】圖層的第1幀到第40幀之間右擊，在彈出的快捷菜單中選擇【屬性】命令，打開【屬性】檢查器面板，設(shè)置【緩動(dòng)】