模塊十二

遮罩和引導線動畫

模塊十二遮罩和引導線動畫

重點提示：圖層的運用遮罩動畫的原理及制作引導線動畫的原理及制作

模塊十二遮罩和引導線動畫子模塊一FlashCS4的簡介子模塊二引導線動畫的原理及制作工作情境一制作“探照燈”動畫工作情境二制作“反色文字”動畫工作情境三制作“七星瓢蟲”動畫模塊小結模塊訓練子模塊一FlashCS4的簡介

一、圖層管理1．圖層編輯（1）添加圖層單擊【時間軸】面板左下角的按鈕。選擇【插入】→【時間軸】→【圖層】命令。在【時間軸】面板中的圖層上右擊，在彈出的快捷菜單中選擇【插入圖層】命令。（2）刪除圖層有以下兩種方法：在【時間軸】面板中右擊要刪除的圖層，在彈出的快捷菜單中選擇【刪除圖層】命令。選中要刪除的圖層，單擊【時間軸】面板下方的按鈕。

子模塊一FlashCS4的簡介2．設置圖層狀態（1）隱藏圖層：隱藏圖層有以下3種方法：單擊圖層名稱右邊的隱藏欄即可隱藏圖層，再次單擊隱藏欄即可取消隱藏該圖層。在圖層隱藏欄中上下拖動鼠標指針，即可隱藏多個圖層或者取消隱藏多個圖層。單擊隱藏圖標，可以將所有的圖層隱藏，再次單擊隱藏圖標則會取消隱藏所有圖層。（2）鎖定圖層：單擊按鈕，可鎖定某些圖層。子模塊一FlashCS4的簡介二、遮罩動畫原理及制作1．遮罩動畫的概念（1）遮罩：為了得到特殊的顯示效果，用戶可以在遮罩層上創建一個任意形狀的“視窗”，遮罩層下方的對象可以通過該“視窗”顯示出來，而“視窗”之外的對象將不會顯示出來。（2）遮罩的作用：在Flash動畫中遮罩主要有兩種用途，一種是用在整個場景或一個特定區域，使場景外的對象或特定區域外的對象不可見，另一種是用來遮住某個元件的一部分，從而實現一些特殊的效果。

子模塊一FlashCS4的簡介2．創建遮罩的方法在Flash中沒有一個專門的按鈕可以創建遮罩層，遮罩層其實是由普通圖層轉化的。只要在某個圖層上右擊，在彈出的快捷菜單中選擇【遮罩層】命令，該圖層就會成為遮罩層，圖層圖標就會從普通層圖標變為遮罩層圖標，系統會自動把遮罩層下面的圖層關聯為“被遮罩層”。在縮進的同時圖標變為被遮罩層圖標。如果想關聯多個遮罩層，則只要把這些圖層拖到被遮罩層下面即可。

子模塊一FlashCS4的簡介3．應用遮罩時的技巧要在場景中顯示遮罩效果，用戶可以鎖定遮罩層和被遮罩層?？梢詥螕魣D層顯示輪廓按鈕，使之成為線框模式，讓被遮罩層能顯示出來。4．遮罩動畫制作的注意事項不能用遮罩層遮罩另一個遮罩層。不能在被遮罩層中放置動態文本。遮罩可以用于使用.gif圖片生成的動畫中。

子模塊二引導線動畫的原理及制作

一、引導線動畫的概念將一個或多個圖層鏈接到一個運動引導層，使一個或多個對象沿同一條路徑運動的動畫形式稱為“引導線動畫”，這種動畫形式可使一個或多個元件完成曲線或不規則運動形式。

子模塊二引導線動畫的原理及制作二、創建引導線動畫的方法1．創建引導層和被引導層：右擊普通圖層，在快捷菜單中選擇“添加傳統運動引導層”命令，則可創建該圖層為引導層，新添加的圖層為被引導層。2.引導層和被引導層中的對象：引導層是用來指示元件運行路徑的，所以引導層中的內容可以是用鋼筆、鉛筆、線條、橢圓工具、矩形工具或畫筆工具等繪制出來的線段。而被引導層中的對象是跟著引導線運動的，可以使用影片剪輯、圖形元件、按鈕和文字等，但不能應用形狀。3．向被引導層中添加元件：被引導的對象起始點和終點的2個“中心點”一定要對準“引導線”的2個端頭。工作情境一制作“探照燈”動畫

一、工作情境描述及效果工作情境描述通過模擬掃描敵后方的探照燈效果，用戶可以熟悉遮罩動畫的創建和使用技巧。在本案例中分別涉及圖層、元件和遮罩動畫。具體分析如表12-1所示。工作情境一制作第一個Flash動畫知識點功能實現效果圖層運用：正確弄清圖層類型及疊加關系，為以后工作打好基礎動畫重要的組成部分元件使用：弄清楚元件與實例的關系可簡化影片編輯，將多次使用的元素定義為元件遮罩動畫：熟練運用遮罩動畫，使動畫得到理想的效果Flash中經常用到的特殊效果表12-1“探照燈”動畫工作任務分析表工作情境一制作第一個Flash動畫工作情境效果“探照燈”動畫的最終效果如圖12-1所示

。圖12-1探照燈動畫的最終效果工作情境一制作第一個Flash動畫二、工作情境詳解（1）新建一個Flash動畫文檔，在工作區右上角的下拉列表中選擇【顯示全部】選項。（2）選擇【文件】→【導入】→【導入到舞臺】命令，導入一張圖片。單擊工具欄中的【對齊】按鈕，單擊【相對于舞臺】按鈕、【匹配寬度】按鈕、【匹配高度】按鈕、【水平中齊】按鈕、【垂直中齊】按鈕，按快捷鍵<F8>將圖片轉換為圖形元件，如圖12-2所示。（3）選中元件，在【屬性】面板的【樣式】下拉列表中選擇【亮度】選項，調整數值為-60%，調整后的圖形元件如圖12-3所示。工作情境一制作第一個Flash動畫圖12-2轉換為圖形元件圖12-3亮度值調整后的圖形元件工作情境一制作第一個Flash動畫（4）單擊【時間軸】面板左下方的【新建圖層】按鈕，新建一個圖層，然后從【庫】面板中將圖形元件拖放到舞臺中央，與【圖層1】中的圖形元件重疊。（5）再單擊【時間軸】面板的左下方的【新建圖層】按鈕，新建一個圖層，然后選擇工具箱中的【橢圓工具】，在舞臺上繪制一個模仿探照燈大小的橢圓，顏色可任意選擇，按快捷鍵<F8>將其轉換為圖形元件，如圖12-4所示。圖12-4繪制橢圓工作情境一制作第一個Flash動畫（6）分別在【圖層1】和【圖層2】的第30幀處按快捷鍵<F5>插入幀，再分別在橢圓圖層的第15幀和第30幀。按快捷鍵<F6>插入關鍵幀。在第15幀將橢圓移動一個位置，使用【任意變形工具】將其放大，再在第30幀將橢圓移動到另外一個位置，使用【任意變形工具】將其縮小，如圖12-5所示。圖12-5橢圓兩個關鍵幀的位置和大小比較工作情境一制作第一個Flash動畫（7）在每段中間任選一幀并右擊，在彈出的快捷菜單中選擇【創建傳統補間】命令。右擊橢圓圖層的名稱，在彈出的快捷菜單中選擇【遮罩層】命令，這時【時間軸】面板如圖12-6所示。（8）這時按<Enter>鍵預覽動畫，用戶可以看到橢圓經過圖片時照亮圖片的動畫效果。（9）在【庫】面板中右擊“元件2”，在彈出的快捷菜單中選擇【直接復制】命令，彈出如圖12-7所示的對話框，在其中單擊【確定】按鈕，產生一個名為“元件2副本”的元件。圖12-6【時間軸】面板圖12-7【直接復制元件】對話框工作情境一制作第一個Flash動畫（10）雙擊“元件2副本”，進入其編輯狀態，然后在【顏色】面板中設置填充為透明黑色到黑色的放射狀漸變，如圖12-8所示。選擇【漸變變形工具】調整其中心點和范圍，如圖12-9所示。圖12-8【顏色】面板 圖12-9填充變形工作情境一制作第一個Flash動畫（11）單擊【場景1】超鏈接返回場景中，單擊【新建圖層】按鈕，新建一個圖層，將“元件2副本”拖放到與“元件2”重合的位置，如圖12-10所示，在移動的過程中會出現對齊標準線。

圖12-10放置“元件2副本”工作情境一制作第一個Flash動畫（12）分別在新橢圓圖層的第15幀和第30幀處按快捷鍵<F6>插入關鍵幀。在第15幀將橢圓移動到遮罩的位置，利用【任意變形工具】將其放大，使其與“元件2”重合，再在第30幀將橢圓移動到遮罩的位置，利用【任意變形工具】將其縮小，使其與“元件2”重合，如圖12-11所示。圖12-11兩個關鍵幀中橢圓與遮罩重合工作情境一制作第一個Flash動畫（13）在每段中間任選一幀并右擊，在彈出的快捷菜單中選擇【創建補間動畫】命令，這時【時間軸】面板如圖12-12所示。（14）按<Enter>鍵預覽動畫，或者<Ctrl+Enter>組合鍵測試動畫，看到如圖12-1所示探照燈經過的動畫效果。圖12-12【時間軸】面板工作情境二制作“反色文字”動畫

一、工作情境描述及效果

工作情境描述反色文字動畫即文字在黑色背景里是白字，進入白色背景就變成了黑字，這也是巧妙運用遮罩動畫實現的特殊效果。在本案例中分別涉及圖層、文字、遮罩動畫。具體分析如表12-2所示：工作情境二制作“反色文字”動畫知識點功能實現效果圖層運用：正確弄清圖層類型及疊加關系，為以后工作打好基礎動畫重要的組成部分文字使用：掌握文字的創建方法及文字屬性的設置方法正確使用文字工具可創建作品所需藝術風格遮罩動畫：熟練運用遮罩動畫，使動畫得到理想的效果Flash中經常用到的特殊效果表12-2“反色文字”動畫工作任務分析表工作情境二制作“反色文字”動畫工作情境效果“反色文字”動畫的最終效果如圖12-13所示。圖12-13“反色文字”動畫最終效果工作情境二制作“反色文字”動畫二、工作情境詳解（1）新建一個Flash動畫文檔，設置背景色為紅色，在工作區右上角的下拉列表中選擇【顯示全部】選項。（2）選擇【矩形工具】，在【屬性】面板中設置邊框顏色為無，填充顏色為黑色。然后在舞臺上繪制一個矩形，單擊工具欄中的【對齊】按鈕，打開【對齊】面板，單擊【相對于舞臺】按鈕、【匹配寬度】按鈕、【水平中齊】按鈕和【垂直中齊】按鈕，然后使用【選擇工具】選中矩形右半邊，如圖12-14（a）所示。在【屬性】面板中設置填充顏色為白色，制作出左半邊黑色，右半邊白色的背景，如圖12-14（b）所示。工作情境二制作“反色文字”動畫（a） （b）圖12-14“反色文字”動畫（3）單擊時間軸左下角的【新建圖層】按鈕，新建一個圖層，將圖層1的黑白背景復制到圖層

2

中，然后選中圖層

2，選擇【修改】→【變形】→【水平翻轉】命令，將圖層

2

中的變成左白右黑的背景，如圖12-15所示。圖12-15圖層2左白右黑背景工作情境二制作“反色文字”動畫（4）單擊時間軸左下角的【插入圖層】按鈕，新建一個圖層，選擇工具箱中的【文本工具】，在【屬性】面板中設定文字大小為

96，顏色可以任意設置，字體為ArialBlack，然后在舞臺上輸入FLASHCS4。（5）分別在圖層1和圖層2的第30幀處按快捷鍵<F5>插入幀，在文字層的第1幀將文字移動到舞臺右側。選中文字層的第30幀，按快捷鍵<F6>插入關鍵幀，將文字移動到舞臺左側。在中間任選一幀并右擊，在彈出的快捷菜單中選擇【創建傳統補間】命令，文字運動前后的畫面如圖12-16所示。工作情境二制作“反色文字”動畫圖12-16文字運動前后的畫面（6）右擊文字層的名稱，在彈出的快捷菜單中選擇【遮罩層】命令，將文字作為遮罩，左白右黑作為被遮罩，那么就會在左黑右白的背景中顯示如圖12-13所示的反色字了，這時的【時間軸】面板如圖12-17所示。工作情境二制作“反色文字”動畫（7）按<Enter>鍵預覽動畫，或者按<Ctrl+Enter>組合鍵測試動畫。圖12-17【時間軸】面板工作情境三制作“七星瓢蟲”動畫

一、工作情境描述及效果

工作情境描述通過制作“七星瓢蟲”動畫，用戶可以進一步熟悉引導線動畫的制作方法與技巧，在播放過程中可以看到七星瓢蟲在圖書上按一定路線移動的動畫效果。在本案例中分別涉及圖層和引導線動畫。具體分析如表12-3所示。

工作情境三制作“七星瓢蟲”動畫知識點功能實現效果圖層運用：正確弄清圖層類型及疊加關系，為以后工作打好基礎動畫重要的組成部分引導線動畫：熟練運用引導線動畫，使動畫得到理想的效果Flash中經常用到的特殊效果表12-3“七星瓢蟲”動畫工作任務分析表工作情境三制作“七星瓢蟲”動畫工作情境效果“七星瓢蟲”動畫的最終效果如圖12-18所示。圖12-18“七星瓢蟲”動畫的最終效果工作情境三制作“七星瓢蟲”動畫二、工作情境詳解（1）新建一個Flash動畫文檔，命名為“瓢蟲”，設置場景大小為500像素×300像素，背景顏色為黃灰色。（2）選擇【文件】→【導入】→【導入到舞臺】命令，導入圖像素材“書.jpg”到舞臺上，將其作為背景圖形。（3）新建【圖層2】，在場景中用繪圖工具繪制瓢蟲的圖形，如圖12-19所示。（4）選中【圖層

2】并右擊，在彈出的快捷菜單中選擇【添加傳統運動引導層】命令，如圖12-20所示。

工作情境三制作“七星瓢蟲”動畫（5）選中引導層的第1幀，選擇【鉛筆工具】，在選項工具區域中選擇“平滑”模式，然后在舞臺上繪制一條平滑的曲線作為引導路徑，如圖12-21所示。

圖12-2