WEB動(dòng)畫(huà)制作與設(shè)計(jì)課件：高級(jí)動(dòng)畫(huà)

高級(jí)動(dòng)畫(huà)制作高級(jí)動(dòng)畫(huà)制作高級(jí)動(dòng)畫(huà)制作1、了解引導(dǎo)層的特點(diǎn)及引導(dǎo)層動(dòng)畫(huà)的制作原理；2、掌握運(yùn)動(dòng)引導(dǎo)層的動(dòng)畫(huà)制作方法；3．了解遮罩層的特點(diǎn)及遮罩的動(dòng)畫(huà)制作原理；4、掌握遮罩的動(dòng)畫(huà)制作方法；【課堂學(xué)習(xí)目標(biāo)】【案例學(xué)習(xí)目標(biāo)】本案例將使用繪圖工具制作引導(dǎo)層，使用創(chuàng)建補(bǔ)間動(dòng)畫(huà)命令制作動(dòng)畫(huà)。【案例知識(shí)要點(diǎn)】1、了解引導(dǎo)層的特點(diǎn)；2、能使用鉛筆工具繪制線條并添加運(yùn)動(dòng)引導(dǎo)層；3、能夠使用創(chuàng)建補(bǔ)間動(dòng)畫(huà)命令制作出飄落的花瓣效果。【課堂案例】—制作“飄落的花瓣”1、圖層的基本操作（1）創(chuàng)建圖層

選擇“插入>時(shí)間軸>圖層”命令來(lái)創(chuàng)建一個(gè)新的圖層，或在“時(shí)間軸”面板下方單擊“插入圖層”按鈕，創(chuàng)建一個(gè)新的圖層?！纠碚撝R(shí)】——制作引導(dǎo)層動(dòng)畫(huà)1、圖層的基本操作（2）選取圖層

在“時(shí)間軸”面板中選中該圖層即可。當(dāng)前圖層會(huì)在“時(shí)間軸”面板中以深色顯示，鉛筆圖標(biāo)表示可以對(duì)該圖層進(jìn)行編輯。

按住Ctrl鍵的同時(shí)，用鼠標(biāo)在要選擇的圖層上單擊，可以一次選擇多個(gè)圖層；按住Shift鍵的同時(shí)，用鼠標(biāo)單擊兩個(gè)圖層，在這兩個(gè)圖層中間的其他圖層也會(huì)被同時(shí)選中。【理論知識(shí)】——制作引導(dǎo)層動(dòng)畫(huà)1、圖層的基本操作（3）排列圖層

點(diǎn)選需要移動(dòng)的圖層，按住鼠標(biāo)不放，拖動(dòng)圖層到指定位置松開(kāi)即可。（4）復(fù)制、粘貼圖層

首先單擊要復(fù)制的圖層，選擇“編輯>時(shí)間軸>復(fù)制幀”命令，然后創(chuàng)建一個(gè)新的圖層，選中新的圖層，選擇“編輯>時(shí)間軸>粘貼幀”命令，在新建的圖層中粘貼復(fù)制過(guò)來(lái)的內(nèi)容。【理論知識(shí)】——制作引導(dǎo)層動(dòng)畫(huà)1、圖層的基本操作（5）刪除圖層有以下兩種方法：A、先選中要?jiǎng)h除的圖層，在面板下方單擊“刪除圖層”按鈕，即可刪除選中圖層；B、選中要?jiǎng)h除的圖層，按住鼠標(biāo)不放，將其向下拖曳到“刪除圖層”按鈕上進(jìn)行刪除?！纠碚撝R(shí)】——制作引導(dǎo)層動(dòng)畫(huà)1、圖層的基本操作（6）重命名圖層有以下兩種方法：A、雙擊“時(shí)間軸”面板中的圖層名稱(chēng)，名稱(chēng)變?yōu)榭删庉嫚顟B(tài)，輸入要更改的圖層名稱(chēng)即可。B、可選中要修改名稱(chēng)的圖層，選擇“修改>時(shí)間軸>圖層屬性”命令，在彈出的“圖層屬性”對(duì)話框中修改圖層的名稱(chēng)。【理論知識(shí)】——制作引導(dǎo)層動(dòng)畫(huà)【理論知識(shí)】——制作引導(dǎo)層動(dòng)畫(huà)2．圖層文件夾（1）創(chuàng)建圖層文件夾有兩種方法：A、選擇“插入>時(shí)間軸>圖層文件夾”命令，在“時(shí)間軸”面板中創(chuàng)建圖層文件夾。B、還可單擊“時(shí)間軸”面板下方的“插入圖層文件夾”按鈕?！纠碚撝R(shí)】——制作引導(dǎo)層動(dòng)畫(huà)2．圖層文件夾（2）刪除圖層文件夾有兩種方法：A、在“時(shí)間軸”面板中選中要?jiǎng)h除的圖層文件夾，單擊面板下方的“刪除圖層”按鈕。B、還可在“時(shí)間軸”面板中選中要?jiǎng)h除的圖層文件夾，將其向下拖曳到“刪除圖層”按鈕上進(jìn)行刪除。【理論知識(shí)】——制作引導(dǎo)層動(dòng)畫(huà)3．普通引導(dǎo)層（1）創(chuàng)建普通引導(dǎo)層有兩種方法：

A、鼠標(biāo)右鍵單擊“時(shí)間軸”面板中的某個(gè)圖層，在彈出的菜單中選擇“引導(dǎo)層”命令，該圖層轉(zhuǎn)換為普通引導(dǎo)層，此時(shí)，圖層前面的圖標(biāo)變?yōu)?/p>

。B、在“時(shí)間軸”面板中選中要轉(zhuǎn)換的圖層，選擇“修改>時(shí)間軸>圖層屬性”命令，在彈出的對(duì)話框中的“類(lèi)型”選項(xiàng)組中選擇“引導(dǎo)層”單選項(xiàng)，單擊“確定”按鈕，選中的圖層轉(zhuǎn)換為普通引導(dǎo)層。【理論知識(shí)】——制作引導(dǎo)層動(dòng)畫(huà)3．普通引導(dǎo)層（2）將普通引導(dǎo)層轉(zhuǎn)換為普通圖層有兩種方法：

A、鼠標(biāo)右鍵單擊“時(shí)間軸”面板中的引導(dǎo)層，在彈出的菜單中選擇“引導(dǎo)層”命令，引導(dǎo)層即可以轉(zhuǎn)換為普通圖層，此時(shí)，圖層前面的圖標(biāo)變?yōu)?/p>

。B、中引導(dǎo)層，選擇“修改>時(shí)間軸>圖層屬性”命令，在彈出的對(duì)話框中“類(lèi)型”選項(xiàng)組中選擇“一般”單選項(xiàng)，單擊“確定”按鈕。【理論知識(shí)】——制作引導(dǎo)層動(dòng)畫(huà)4．引導(dǎo)層動(dòng)畫(huà)原理（1）引導(dǎo)層的作用

引導(dǎo)層是設(shè)置對(duì)象運(yùn)動(dòng)路徑的導(dǎo)向，使與之相鏈接的被引導(dǎo)層中的對(duì)象沿著路徑運(yùn)動(dòng)。（2）引導(dǎo)路徑的繪制

引導(dǎo)層上的路徑必須是利用“鋼筆”工具、“鉛筆”工具、“線條”工具、“橢圓”工具、“矩形”工具或“刷子”工具所繪制的曲線。

【理論知識(shí)】——制作引導(dǎo)層動(dòng)畫(huà)4．引導(dǎo)層動(dòng)畫(huà)原理（3）引導(dǎo)層動(dòng)畫(huà)原理引導(dǎo)層動(dòng)畫(huà)是通過(guò)創(chuàng)建引導(dǎo)層來(lái)實(shí)現(xiàn)的。將一個(gè)或多個(gè)圖層鏈接到一個(gè)引導(dǎo)層，使一個(gè)或多個(gè)對(duì)象沿同一條路徑（引導(dǎo)線）運(yùn)動(dòng)的動(dòng)畫(huà)形式就叫“引導(dǎo)層動(dòng)畫(huà)”。【理論知識(shí)】——制作引導(dǎo)層動(dòng)畫(huà)4．引導(dǎo)層動(dòng)畫(huà)原理（4）引導(dǎo)線的特點(diǎn)A、引導(dǎo)線是繪制在引導(dǎo)層中。B、引導(dǎo)線可以是任意的有起點(diǎn)和終點(diǎn)的連續(xù)線條；C、引導(dǎo)線在動(dòng)畫(huà)發(fā)布后是不可見(jiàn)的；D、引導(dǎo)線可以引導(dǎo)一個(gè)或多個(gè)對(duì)象運(yùn)動(dòng)。1．導(dǎo)入圖片（1）新建一個(gè)Flash文件，設(shè)置舞臺(tái)窗口的“寬度”設(shè)為400像素，“高度”設(shè)為550像素。（2）按Ctrl+L組合鍵，調(diào)出“庫(kù)”面板，將“素材>制作飄落的花瓣>底圖、蝴蝶”文件導(dǎo)入到“庫(kù)”面板中。（3）將“庫(kù)”面板中的位圖“底圖”拖曳到舞臺(tái)窗口中，設(shè)置其寬為400像素，高為550像素，使圖片在舞臺(tái)窗口的正中位置。【課堂案例】—制作“飄落的花瓣”1．導(dǎo)入圖片（4）創(chuàng)建新的圖層并將其命名為“蝴蝶”。將“庫(kù)”面板中的位圖“蝴蝶”拖曳到舞臺(tái)窗口中。選擇位圖“屬性”面板，設(shè)置其寬為138像素，高為130.5像素，X坐標(biāo)為18，Y軸坐標(biāo)為34，將蝴蝶圖片放置在舞臺(tái)窗口的左上方。（5）選擇“文件>導(dǎo)入>導(dǎo)入到庫(kù)”命令，將素材“花瓣1”文件導(dǎo)入到“庫(kù)”面板中?！菊n堂案例】—制作“飄落的花瓣”2．繪制引導(dǎo)線制作落花效果（1）創(chuàng)建“新建元件”，在彈出“創(chuàng)建新元件”對(duì)話框中“名稱(chēng)”選項(xiàng)的文本框中輸入“花瓣動(dòng)1”，選擇“影片剪輯”類(lèi)型，單擊“確定”按鈕，新建一個(gè)影片剪輯元件“花瓣動(dòng)1”，舞臺(tái)窗口也隨之轉(zhuǎn)換為影片剪輯元件的舞臺(tái)窗口。單擊“圖層1”上單擊鼠標(biāo)右鍵選擇“添加傳統(tǒng)引導(dǎo)層”命令，為“圖層1”添加運(yùn)動(dòng)引導(dǎo)層?！菊n堂案例】—制作“飄落的花瓣”2．繪制引導(dǎo)線制作落花效果（2）選擇“鉛筆”工具，設(shè)置“筆觸顏色”設(shè)為黑色，選中工具箱下方“選項(xiàng)”選項(xiàng)組中的平滑選項(xiàng)，在引導(dǎo)層上繪制出一條曲線，效果如圖左所示。選中引導(dǎo)層的第55幀，按F5鍵插入普通幀，選中“圖層1”的第1幀，將“庫(kù)”面板中的圖形元件“花瓣1”拖曳到舞臺(tái)窗口中，放在曲線上方的端點(diǎn)上，效果如圖右所示。【課堂案例】—制作“飄落的花瓣”2．繪制引導(dǎo)線制作落花效果（3）選中“圖層1”的第55幀，按F6鍵插入關(guān)鍵幀，用選擇工具將第55幀中的花瓣移動(dòng)到曲線下方的端點(diǎn)上，效果如圖所示?！菊n堂案例】—制作“飄落的花瓣”2．繪制引導(dǎo)線制作落花效果（4）用鼠標(biāo)右鍵單擊“圖層1”中的第1幀，在彈出的菜單中選擇“創(chuàng)建補(bǔ)間動(dòng)畫(huà)”命令，在第1幀和第55幀之間生成動(dòng)作補(bǔ)間動(dòng)畫(huà)。（5）創(chuàng)建新的影片剪輯元件“花瓣動(dòng)2”，單擊“圖層1”上單擊鼠標(biāo)右鍵選擇“添加傳統(tǒng)引導(dǎo)層”命令，為“圖層1”添加運(yùn)動(dòng)引導(dǎo)層。選擇“鉛筆”工具，在引導(dǎo)層上繪制出一條曲線，效果如圖所示?！菊n堂案例】—制作“飄落的花瓣”2．繪制引導(dǎo)線制作落花效果（6）選中引導(dǎo)層的第65幀，按F5鍵插入普通幀。選中“圖層1”的第1幀，將“庫(kù)”面板中的圖形元件“花瓣1”拖曳到舞臺(tái)窗口中，放在曲線上方的端點(diǎn)上，效果如圖所示。選中“圖層1”的第65幀，按F6鍵插入關(guān)鍵幀。用選擇工具將第65幀中的花瓣移動(dòng)到曲線下方的端點(diǎn)上，效果如圖所示。【課堂案例】—制作“飄落的花瓣”2．繪制引導(dǎo)線制作落花效果（7）用鼠標(biāo)右鍵單擊“圖層1”中的第1幀，在彈出的菜單中選擇“創(chuàng)建傳統(tǒng)補(bǔ)間動(dòng)畫(huà)”命令，在第1幀～第65幀生成動(dòng)作補(bǔ)間動(dòng)畫(huà)，如圖所示?！菊n堂案例】—制作“飄落的花瓣”2．繪制引導(dǎo)線制作落花效果（7）同樣的方法創(chuàng)建影片剪輯元件“花瓣動(dòng)3”。單擊“時(shí)間軸”面板下方的“添加運(yùn)動(dòng)引導(dǎo)層”按鈕，為“圖層1”添加運(yùn)動(dòng)引導(dǎo)層。選擇“鉛筆”工具，在引導(dǎo)層上繪制出一條曲線。選中引導(dǎo)層的第85幀，按F5鍵插入普通幀。選中“圖層1”的第1幀，將“庫(kù)”面板中的圖形元件“花瓣1”拖曳到舞臺(tái)窗口中，放在曲線上方的端點(diǎn)上。選中“圖層1”的第85幀，按F6鍵插入關(guān)鍵幀。用選擇工具將第85幀中的花瓣移動(dòng)到曲線下方的端點(diǎn)上。在第1幀和第85幀之間生成動(dòng)作補(bǔ)間動(dòng)畫(huà)?！菊n堂案例】—制作“飄落的花瓣”2．繪制引導(dǎo)線制作落花效果（8）單擊“時(shí)間軸”面板下方的“場(chǎng)景1”圖標(biāo)，進(jìn)入“場(chǎng)景1”的舞臺(tái)窗口。單擊“時(shí)間軸”面板下方的“插入圖層“按鈕，創(chuàng)建新圖層并將其命名為“花朵1”。選中圖層“花朵l”，將“庫(kù)”面板中的影片剪輯元件“花瓣動(dòng)1”拖曳到舞臺(tái)窗口中，效果如圖所示?！菊n堂案例】—制作“飄落的花瓣”2．繪制引導(dǎo)線制作落花效果（9）同樣將“庫(kù)”面板中的影片剪輯元件“花瓣動(dòng)2”拖曳到舞臺(tái)窗口中，放置在其他花瓣的旁邊，效果如左圖所示。將影片剪輯元件“花瓣動(dòng)3”也拖曳到舞臺(tái)窗口中，效果如右圖所示。【課堂案例】—制作“飄落的花瓣”2．繪制引導(dǎo)線制作落花效果（10）選中“底圖”圖層的第85幀，按F5鍵，在該幀上插入普通幀。選中“蝴蝶”圖層的第85幀，按F5鍵，在該幀上插入普通幀。選中“花朵1”圖層的第85幀，按F5鍵，在該幀上插入普通幀。單擊“時(shí)間軸”面板下方的“插入圖層”按鈕，創(chuàng)建新圖層并將其命名為“花朵2”。選中圖層“花朵2”圖層的第15幀，按F6鍵，在該幀上插入關(guān)鍵幀?！菊n堂案例】—制作“飄落的花瓣”2．繪制引導(dǎo)線制作落花效果（11）選中第15幀，將“庫(kù)”面板中的影片剪輯元件“花瓣動(dòng)1”拖曳到舞臺(tái)窗口中，放置在其他花瓣的旁邊，效果如左圖所示。將影片剪輯元件“花瓣動(dòng)2”拖曳到舞臺(tái)窗口中，效果如中圖所示。將影片剪輯元件“花瓣動(dòng)3”拖曳到舞臺(tái)窗口中，效果如右圖所示。飄落的花瓣效果制作完成，按Ctrl+Enter組合鍵即可查看效果?！菊n堂案例】—制作“飄落的花瓣”六、對(duì)齊對(duì)象任務(wù):制作翩翩起舞的蝴蝶動(dòng)畫(huà)操作提示：本案例主要是通過(guò)在兩個(gè)圖層上創(chuàng)建蝴蝶由下向上移動(dòng)的傳統(tǒng)補(bǔ)間動(dòng)畫(huà)，再在這兩個(gè)圖層上添加傳統(tǒng)運(yùn)動(dòng)引導(dǎo)層，并在引導(dǎo)層上繪制引導(dǎo)線，使蝴蝶按照引導(dǎo)線的路徑進(jìn)行運(yùn)動(dòng)來(lái)實(shí)現(xiàn)?！?/p>

舉一反三】六、對(duì)齊對(duì)象任務(wù):制作“蜓橋相會(huì)”效果操作提示：本案例就是使用Flash的引導(dǎo)層動(dòng)畫(huà)制作手段設(shè)計(jì)出三條路徑，使多個(gè)被引導(dǎo)對(duì)象“蜻蜓”沿著這三條路徑進(jìn)行運(yùn)動(dòng)，從而實(shí)現(xiàn)動(dòng)畫(huà)效果，效果如圖所示?！?/p>

課后練習(xí)】高級(jí)動(dòng)畫(huà)制作高級(jí)動(dòng)畫(huà)制作高級(jí)動(dòng)畫(huà)制作高級(jí)動(dòng)畫(huà)制作1、了解引導(dǎo)層的特點(diǎn)及引導(dǎo)層動(dòng)畫(huà)的制作原理；2、掌握運(yùn)動(dòng)引導(dǎo)層的動(dòng)畫(huà)制作方法；3．了解遮罩層的特點(diǎn)及遮罩的動(dòng)畫(huà)制作原理；4、掌握遮罩的動(dòng)畫(huà)制作方法；【課堂學(xué)習(xí)目標(biāo)】【案例學(xué)習(xí)目標(biāo)】使用繪圖工具、浮動(dòng)面板制作圖形，使用創(chuàng)建補(bǔ)間動(dòng)畫(huà)命令制作動(dòng)畫(huà)效果，使用遮罩層命令制作遮罩動(dòng)畫(huà)?！景咐R(shí)要點(diǎn)】1、使用矩形工具和顏色面板繪制漸變矩形；2、使用創(chuàng)建補(bǔ)間動(dòng)畫(huà)命令制作動(dòng)畫(huà)效果；3、使用遮罩層命令制作遮罩動(dòng)畫(huà)效果?！菊n堂案例】—制作“文字遮罩效果”1、遮罩層動(dòng)畫(huà)（1）創(chuàng)建遮罩層一個(gè)遮罩效果的實(shí)現(xiàn)至少需要兩個(gè)圖層，上面的圖層是遮罩層，下面的圖層是被遮罩層。要?jiǎng)?chuàng)建遮罩層，可以在選定的圖層上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“遮罩層”命令。【理論知識(shí)】——制作遮罩層動(dòng)畫(huà)1、遮罩層動(dòng)畫(huà)（2）遮罩原理與普通層不同，在具有遮罩層的圖層中，只能透過(guò)遮罩層中所含對(duì)象的形狀，才可以看到被遮罩層上的內(nèi)容?！纠碚撝R(shí)】——制作遮罩層動(dòng)畫(huà)1．導(dǎo)入圖片并制作圖形元件（1）新建一個(gè)Flash文件，將背景顏色設(shè)為淡黃色（#FFFFE6）。（2）選擇“文件>導(dǎo)入>導(dǎo)入到庫(kù)”命令，將“素材>文字遮罩效果>底圖、人物”文件，導(dǎo)入到“庫(kù)”面板。（3）創(chuàng)建一個(gè)新元件，在“名稱(chēng)”選項(xiàng)的文本框中輸入“文字”，類(lèi)型為“圖形”選項(xiàng)，單擊“確定”按鈕，新建圖形元件“文字”?！菊n堂案例】—制作“文字遮罩效果”1．導(dǎo)入圖片并制作圖形元件（4）選擇“文本”工具T，在文字“屬性”面板中進(jìn)行設(shè)置，在舞臺(tái)窗口中輸入大小為16，字體為隸書(shū)的黑色文字，舞臺(tái)窗口中的效果如圖所示?！菊n堂案例】—制作“文字遮罩效果”1．導(dǎo)入圖片（5）單擊“時(shí)間軸”面板下方的“場(chǎng)景1”圖標(biāo)，進(jìn)入“場(chǎng)景1”的舞臺(tái)窗口。將“圖層1”重新命名為“底圖”。將“庫(kù)”面板中的位圖圖像“底圖”拖曳到舞臺(tái)窗口中。選中“底圖”圖層的第400幀，按F5鍵，在該幀上插入普通幀?！菊n堂案例】—制作“文字遮罩效果”1．導(dǎo)入圖片（6）在“底圖”圖層上創(chuàng)建新的圖層并將其命名為“人物”。將“庫(kù)”面板中的圖形元件“人物”拖曳到舞臺(tái)窗口的左側(cè)?！菊n堂案例】—制作“文字遮罩效果”2．制作遮罩文字效果（1）

創(chuàng)建新的圖層并將其命名為“遮罩”。選擇“窗口>顏色”命令，彈出“顏色”面板，在“類(lèi)型”選項(xiàng)的下拉列表中選擇“線性”，單擊色帶，添加兩個(gè)色塊，選中色帶上左右兩側(cè)的色塊，將其設(shè)為白色，在“Alpha”選項(xiàng)中將其不透明度設(shè)為0％，選中色帶上中間的兩個(gè)色塊，將其設(shè)為黑色，如圖所示?！菊n堂案例】—制作“文字遮罩效果”2．制作遮罩文字效果（2）選擇“矩形”工具，在工具箱中將“筆觸顏色”設(shè)為無(wú)，在舞臺(tái)窗口中繪制一個(gè)長(zhǎng)方形作為遮罩圖形。選中長(zhǎng)方形，在形狀“屬