1、大連理工大學出版社Flash CS4 Professional 實用案例教程實用案例教程第第4 4章章有條不紊有條不紊 圖層與時間軸圖層與時間軸 FLASH CS4 PROFESSIONAL SHIYONG ANLI JIAOCHENG主編：洪主編：洪 光光4.1 任務-01 了解圖層與時間軸 在【時間軸】面板上，影片中的“圖層”在時間軸左側(cè)的列中，每個層中包含的幀則顯示在該層名稱右側(cè)的一行中。在時間軸上可以查看每一幀的情況，調(diào)整動畫播放的速度，安排幀的內(nèi)容，改變幀與幀之間的關(guān)系以及添加各種特效，從而可以實現(xiàn)不同的動畫效果。因此，對時間軸的了解以及對圖層與幀的操作顯得尤為重要。時間軸中的層與幀

2、的功能如圖4-1所示。圖4-1【時間軸】面板 4.1 任務-01 了解圖層與時間軸4.1.1 4.1.1 任務簡介任務簡介 本任務通過對時間軸中的圖層與幀中術(shù)語的了解，詳細介紹幀與【圖層】面板的屬性及功能，為后續(xù)完成制作“引導層”動畫、“遮罩”動畫奠定基礎(chǔ)。任務快速流程任務快速流程 了解安裝注意事項啟動安裝填入序列號確認位置進入安裝完成安裝。 4.1.2 4.1.2 知識點知識點1.1. 時間軸時間軸 時間軸的主要組件是圖層、幀和播放頭。在時間軸底部顯示的時間軸狀態(tài)指示所選的幀編號、當前幀速率以及到當前幀為止的運行時間。播放頭指示當前在舞臺中顯示的幀，播放動畫時，播放頭從左向右通過時間軸。與膠

3、片一樣，F(xiàn)lash文檔也將時長分為幀。幀是構(gòu)成動畫的基本單位。4.1 任務-01 了解圖層與時間軸2.2.時間軸有關(guān)術(shù)語時間軸有關(guān)術(shù)語（1）幀頻率 幀頻率是動畫播放的速度，以每秒播放的幀數(shù) (fps) 為度量單位。幀頻率太慢會使動畫看起來一頓一頓的，幀頻率太快會使動畫的細節(jié)變得模糊。24 fps的幀速率是新Flash文檔的默認設置，通常在Web上提供最佳效果。標準的動畫速率也是24 fps。 （2）幀 關(guān)鍵幀關(guān)鍵幀：是指時間軸中其元件實例首次出現(xiàn)在舞臺上的幀。用來定義動畫變化，也包括含有動作腳本的幀。在時間軸中關(guān)鍵幀以黑色的實心圓點顯示，用來實現(xiàn)無法用漸變動畫實現(xiàn)的效果。 空白關(guān)鍵幀空白關(guān)鍵幀

4、：空白關(guān)鍵幀是特殊的關(guān)鍵幀，以空心圓表示。它的作用是將前面的關(guān)鍵幀內(nèi)容清除掉，而使畫面的內(nèi)容變?yōu)榭瞻祝词箘赢嬛械膶ο笙У簟?.1 任務-01 了解圖層與時間軸 屬性關(guān)鍵幀屬性關(guān)鍵幀：屬性關(guān)鍵幀是在補間范圍中為補間目標對象顯示定義一個或多個屬性值的幀。定義的每個屬性都有它自己的屬性關(guān)鍵幀?？梢栽凇緞赢嬀庉嬈鳌棵姘逯胁榭囱a間范圍的每個屬性及其屬性關(guān)鍵幀；還可以從補間范圍上下文菜單中選擇可在時間軸中顯示的屬性關(guān)鍵幀類型。補間幀補間幀：是作為補間動畫的一部分的任何幀。靜態(tài)幀靜態(tài)幀：靜態(tài)幀也稱為普通幀，顯示同一層上最后一個關(guān)鍵幀的內(nèi)容。（3）圖層的屬性 Flash CS4 Professional中

5、的圖層具有多種不同的屬性，可以通過【圖層屬性】對話框?qū)D層的屬性進行設置，每一層都有唯一的一組屬性。彈出【圖層屬性】對話框最快的方法是雙擊當前圖層的名稱左側(cè)的“圖層”圖標 。4.1 任務-01 了解圖層與時間軸 【圖層屬性】對話框如圖4-2所示。 圖層高度：可設置圖層的高度，這在層中處理波形（如聲波）時很實用，有100%、200%和300%三種高度。設置前的圖層如圖4-3所示。將該【圖層】面板中圖層1的圖層高度設置為200%，將引導層：圖層1的圖層高度設置為300%，如圖4-4所示。 圖4-2 【圖層屬性】對話框圖4-3 設置前的圖層 圖4-4 設置為不同高度的圖層 4.2 任務-02 制作“

6、綠葉與瓢蟲”引導層動畫案例4.1.2 4.1.2 任務簡介任務簡介 本任務主要完成“綠葉與瓢蟲”引導層動畫的制作，完成的動畫效果如圖4-5所示。 任務快速流程任務快速流程 圖4-5“瓢蟲與綠葉”的效果新建文件文檔屬性導入素材插入關(guān)鍵幀添加傳統(tǒng)引導層繪制路徑完成動畫制作。 4.2.2 4.2.2 知識點知識點 本任務主要應用創(chuàng)建新層、導入位圖、轉(zhuǎn)換為元件、時間軸中的幀、添加引導層、創(chuàng)建傳統(tǒng)補間動畫等知識來完成。通過本案例的制作，能夠深刻理解時間軸中“圖層與幀”的應用方法。4.2 任務-02 制作“綠葉與瓢蟲”引導層動畫案例4.2.3 4.2.3 快速上手快速上手 步驟步驟1 1 新建一個動畫文件

7、。選擇【修改】【文檔】命令，在打開的【文檔屬性】對話框中修改動畫的屬性，設置背景色為黑色。 步驟步驟2 選擇“導入”“導入到庫”，導入一個“綠葉”的背景圖像，如圖4-6所示。創(chuàng)建一名為“瓢蟲”的圖形元件，如圖4-7所示。圖4-6導入到庫中的圖像 圖4-7創(chuàng)建“瓢蟲”元件 步驟步驟3 3 單擊【新建圖層】按鈕 ，新增一個圖層，命名為“瓢蟲” 選取【窗口】【庫】，打開元件庫，在元件庫中選取導入的“背景”與“瓢蟲”元件，將其拖入到舞臺，創(chuàng)建該元件的實例。并調(diào)整到合適大小，如圖4-8所示。 圖4-8創(chuàng)建的元件實例 4.2 任務-02 制作“綠葉與瓢蟲”引導層動畫案例4.2 任務-02 制作“綠葉與瓢蟲

8、”引導層動畫案例 步驟步驟4 選中“背景”圖層，在時間軸的第30幀處右擊，在彈出的菜單中選取【插入幀】命令，令背景一直可見，并鎖定，如圖4-9所示。 步驟步驟5 5 選擇“瓢蟲”圖層，在30幀處右擊，在彈出的菜單中選擇【插入關(guān)鍵幀】命令或按F6鍵，將第30幀設置為關(guān)鍵幀。在第30幀的畫面上，將“瓢蟲”移動到綠葉上的合適位置，并適當縮小其尺寸，如圖4-10所示。圖4-9 令背景一直可見 圖4-10將“瓢蟲”移動到綠葉上的合適位置 4.2 任務-02 制作“綠葉與瓢蟲”引導層動畫案例 步驟步驟6 6 在“瓢蟲”圖層上右擊，在彈出的菜單中選擇【添加傳統(tǒng)運動引導層】命令，添加一個“引導層”。引導層的功

9、能是為一般的圖層提供路徑，以制作自定義軌跡的“引導層動畫”，如圖4-11所示。圖4-11 添加一個“傳統(tǒng)運動引導層” 步驟步驟7 將播放頭移動到第1幀，單擊【工具】面板上的【鉛筆工具】 ，再單擊選項的【平滑】按鈕 ，在引導層上繪制一條平滑的路徑，如圖4-12所示。圖4-12 在引導層上繪制一條平滑的路徑 4.2 任務-02 制作“綠葉與瓢蟲”引導層動畫案例 步驟步驟8 單擊“主工具欄”或工具選項中的【貼緊至對象】按鈕，啟動該模式。 步驟步驟9 選取“瓢蟲”圖層的第1幀，拖曳“瓢蟲”元件的中心點（小十字）到路徑的右端點，使瓢蟲上的中心點與路徑相結(jié)合。 步驟步驟10 將播放頭移至第30幀，選取瓢蟲

10、，拖曳瓢蟲的中心點（小十字）到路徑的左端點，使瓢蟲上的圓點與路徑相結(jié)合，如圖4-13所示。圖4-13 使瓢蟲上的圓點與路徑相結(jié)合 4.2 任務-02 制作“綠葉與瓢蟲”引導層動畫案例 步驟步驟1111 選取“瓢蟲”層，在中間幀的位置右擊，在出現(xiàn)的快捷菜單中選取【創(chuàng)建傳統(tǒng)補間】命令。在時間軸面板上的第1幀到第29幀將出現(xiàn)淡色底紋。如圖4-14所示。 步驟步驟1212 啟動繪圖紙功能，設置繪圖紙效果范圍為全部，查看瓢蟲運動效果，如圖4-15所示。圖4-14 創(chuàng)建傳統(tǒng)補間 圖4-15 洋蔥皮效果 4.2 任務-02 制作“綠葉與瓢蟲”引導層動畫案例 步驟步驟1313 按Enter鍵，播放動畫，按Ct

11、rl+Enter鍵，可以測試動畫。若覺得路徑礙事，可以將運動引導圖層隱藏 4.2.4 4.2.4 相關(guān)知識相關(guān)知識鉛筆工具鉛筆工具（1）選擇【鉛筆工具】。 （2）選擇【窗口】【屬性】命令，然后選擇筆觸顏色、線條粗細和樣式。 （3）在【工具】面板的“選項”下，選擇一種繪制模式： 若要繪制直線，并將接近三角形、橢圓、圓形、矩形和正方形的形狀轉(zhuǎn)換為這些常見的幾何形狀，可選擇“伸直” 。若要繪制平滑曲線，可選擇“平滑” 。若要繪制不用修改的手畫線條，可選擇“墨水” 。 若要使用【鉛筆工具】繪制，可單擊舞臺并拖動，按住Shift鍵拖動可將線條限制為垂直或水平方向。 4.2 任務-02 制作“綠葉與瓢蟲”

12、引導層動畫案例4.2.5 4.2.5 相關(guān)知識相關(guān)知識幀的操作幀的操作1. 1. 在時間軸中插入幀在時間軸中插入幀 選擇【插入】【時間軸】【關(guān)鍵幀】或者右擊要在其中放置關(guān)鍵幀的幀，然后從上下文菜單中選擇【插入關(guān)鍵幀】；還可以在時間軸上選取一幀，再按F6鍵，可以創(chuàng)建新關(guān)鍵幀。 選擇【插入】【時間軸】【空白關(guān)鍵幀】或者右鍵單擊要在其中放置關(guān)鍵幀的幀，然后從上下文菜單中選擇【插入空白關(guān)鍵幀】。還可以在時間軸上選取一幀，再按F7鍵，可以創(chuàng)建新的空白關(guān)鍵幀。2. 2. 在時間軸中選擇幀在時間軸中選擇幀 若要選擇一個幀，可以單擊該幀。如果已啟用“基于整體范圍的選擇”，可以按住Ctrl鍵并單擊該幀。若要選擇

13、多個連續(xù)的幀，可以按住Shift鍵并單擊其他幀。選擇【插入】【時間軸】【幀】或按F5鍵，可以插入新幀。4.2 任務-02 制作“綠葉與瓢蟲”引導層動畫案例 若要選擇多個不連續(xù)的幀，可以先按下Ctrl鍵，然后分別單擊要選取的幀。 若要選擇時間軸中的所有幀，可以選擇【編輯】【時間軸】【選擇所有幀】。 若要選擇整個靜態(tài)幀范圍，可以雙擊兩個關(guān)鍵幀之間的幀。如果已啟用【基于整體范圍的選擇】，可以單擊序列中的任何幀。3. 3. 復制、粘貼幀或幀序列復制、粘貼幀或幀序列 選擇幀或序列并選擇【編輯】【時間軸】【復制幀】。選擇要替換的幀或序列，然后選擇【編輯】【時間軸】【粘貼幀】?；虬醋lt鍵再單擊，并將關(guān)鍵

14、幀拖到要粘貼的位置。4. 4. 刪除幀或幀序列刪除幀或幀序列 選擇幀或序列并選擇【編輯】【時間軸】【刪除幀】或者右擊幀或序列，從上下文菜單中選擇【刪除幀】。 4.2 任務-02 制作“綠葉與瓢蟲”引導層動畫案例5. 5. 移動關(guān)鍵幀或幀序列及其內(nèi)容移動關(guān)鍵幀或幀序列及其內(nèi)容將關(guān)鍵幀或序列拖到目標位置。如圖4-16、圖4-17所示。圖4-16 移動單個幀 圖4-17 移動幀序列 6. 6. 更改靜態(tài)幀序列的長度更改靜態(tài)幀序列的長度 在按住Ctrl鍵的同時向左或向右拖動范圍的開始或結(jié)束幀，可以更改靜態(tài)幀序列的長度。7. 7. 將關(guān)鍵幀轉(zhuǎn)換為幀將關(guān)鍵幀轉(zhuǎn)換為幀 選擇關(guān)鍵幀并選擇【編輯】【時間軸】【清

15、除關(guān)鍵幀】或者右擊關(guān)鍵幀并從上下文菜單中選擇【清除關(guān)鍵幀】。4.2 任務-02 制作“綠葉與瓢蟲”引導層動畫案例8. 8. 幀居中和幀居中和【繪圖紙繪圖紙】工具工具在時間軸下方的狀態(tài)欄上設置如下的功能： （1）幀居中 ：幀居中按鈕。單擊該按鈕可以將播放指針所在的幀在時間軸中間顯示出來，在動畫較長且播放指針位于最多可顯示的幀總數(shù)一半以上的位置時才有效，如圖4-18所示。圖4-18 幀居中（2）“繪圖紙”功能：繪圖紙外觀。：繪圖紙外觀輪廓。：編輯多個幀。4.3 任務-03 制作“遮罩文字”動畫案例4.3.1 4.3.1 任務簡介任務簡介 本任務將以一個具體實例來演示創(chuàng)建簡單“遮罩文字動畫”的過程。

16、通過本任務的制作，可以深刻理解時間軸中“圖層”的應用方法。本案例完成的效果如圖4-19所示。圖4-19 遮罩文字動畫任務快速流程任務快速流程 新建文件輸入文字導入素材轉(zhuǎn)換為元件編輯文字創(chuàng)建動畫測試動畫保存動畫。 4.3.2 4.3.2 知識點知識點 “遮罩文字動畫”的制作主要是應用【文本工具】 創(chuàng)建遮罩的文字層；然后導入位圖，應用“傳統(tǒng)運動補間動畫”的原理，創(chuàng)建運動的被遮罩層，完成制作。4.3 任務-03 制作“遮罩文字”動畫案例4.3.3 4.3.3 快速上手快速上手 步驟步驟1 1 新建文件，命名為“遮罩文字”，將背景設為白色，大小為400200像素。 步驟步驟2 2 輸入文字。將“圖層1

17、”名稱改為“文字”，選擇工具箱中的文本工具，在舞臺上輸入文本“Mask”，文字大小為100，字體為Arial Black，顏色任意（因為變成遮罩層后，文字的顏色不顯示），執(zhí)行【對齊】面板中的與命令，將文字與舞臺中心對齊，如圖4-20、圖4-21所示。圖4-20 文字圖層 圖4-21 輸入文本 4.3 任務-03 制作“遮罩文字”動畫案例 步驟步驟3 3 新建圖層，命名為“圖像”，將“圖像”層移動到“文字”層下方，如圖4-22所示。 步驟步驟4 4 導入圖像。選擇【文件】【導入】【導入到舞臺】，將光盤“素材”“遮罩動畫”文件夾中的“花.jpg”導入到舞臺上，使用【任意變形工具】 ，將圖片縮放到合

18、適大?。梢员任枧_本身更長一些），將其與文字左端靠近，如圖4-23所示。圖4-22 創(chuàng)建圖像圖層 圖4-23 導入圖像 4.3 任務-03 制作“遮罩文字”動畫案例 步驟步驟5 5 轉(zhuǎn)換為元件。將位圖圖像選中，選擇【修改】【轉(zhuǎn)換為元件】命令，將圖像轉(zhuǎn)換為圖形元件，命名為“圖像”，如圖4-24所示。 步驟步驟6 6 選中圖像層的第20幀，按F6鍵，插入關(guān)鍵幀，如圖4-25所示。圖4-24 轉(zhuǎn)換為元件圖4-25 插入關(guān)鍵幀 步驟步驟7 7 在文字層上選中第20幀，按F5鍵，插入幀。在圖像層的第20幀上將圖片移動到舞臺左側(cè)，使其右邊與文字靠近，如圖4-26所示。圖4-26 將圖片移動到舞臺左側(cè) 4.

19、3 任務-03 制作“遮罩文字”動畫案例 步驟步驟8 8 創(chuàng)建動畫。選擇“圖像”層中間幀，右擊，在彈出的快捷菜單中選擇【創(chuàng)建傳統(tǒng)補間】，創(chuàng)建運動補間動畫，如圖4-27所示。 步驟步驟9 9 創(chuàng)建遮罩層。在“文字”層上右擊，在彈出菜單中選擇【遮罩層】，如圖4-28所示。圖4-27 創(chuàng)建運動補間動畫 圖4-28 創(chuàng)建遮罩層 4.3 任務-03 制作“遮罩文字”動畫案例 步驟步驟1111 測試動畫。我們可以看到圖像在文字中流過的效果，如圖4-30所示。步驟步驟1010 創(chuàng)建完成后的圖層顯示如圖4-29所示。圖4-29 圖層顯示 圖4-30 圖像在文字中流過的效果 4.3 任務-03 制作“遮罩文字”

20、動畫案例4.3.4 4.3.4 相關(guān)知識相關(guān)知識創(chuàng)建和編輯圖層或文件夾創(chuàng)建和編輯圖層或文件夾1. 1. 創(chuàng)建圖層或文件夾創(chuàng)建圖層或文件夾執(zhí)行下列操作之一：單擊圖層底部的【插入圖層】 按鈕或【新建文件夾】 按鈕。 右擊一個圖層名稱，然后選擇快捷菜單中的【插入圖層】或【插入文件夾】。2. 2. 選擇圖層或文件夾選擇圖層或文件夾執(zhí)行下列操作之一：單擊圖層或文件夾的名稱。 單擊要選擇的圖層的任意一個幀或在舞臺中選擇要選擇的圖層上的一個對象。 要選擇連續(xù)的幾個圖層或文件夾，可按住Shift鍵單擊它們的名稱。 若要選擇幾個不連續(xù)的圖層或文件夾，可按住Ctrl鍵單擊時間軸中它們的名稱。4.3 任務-03 制

21、作“遮罩文字”動畫案例3. 3. 移動、展開、折疊圖層或文件夾移動、展開、折疊圖層或文件夾 要將圖層或文件夾移動到文件夾中，可將該圖層或文件夾的名稱拖到目標文件夾的名稱中。 要更改圖層或文件夾的順序，可將一個或多個圖層或文件夾拖到所需位置。 要展開或折疊文件夾或所有文件夾，可單擊該文件夾名稱左側(cè)的三角形；或右擊，選擇快捷菜單中的【展開所有文件夾】或【折疊所有文件夾】。4. 4. 重命名圖層或文件夾重命名圖層或文件夾執(zhí)行下列操作之一：雙擊圖層或文件夾的名稱，然后輸入新名稱。 選擇該圖層或文件夾或右擊其名稱，然后選擇【修改】【時間軸】【圖層屬性】或從彈出的菜單中選擇【屬性】。在【圖層屬性】對話框的

22、“名稱”中輸入新名稱，然后單擊【確定】。4.3 任務-03 制作“遮罩文字”動畫案例5. 5. 復制圖層或文件夾復制圖層或文件夾 （1）要復制圖層或文件夾的內(nèi)容，可選擇圖層或文件夾。然后選擇【編輯】【時間軸】【復制幀】。 （2）單擊新圖層，然后選擇【編輯】【時間軸】【粘貼幀】，便可將圖層或文件夾的內(nèi)容復制了。6. 6. 刪除圖層或文件夾刪除圖層或文件夾 單擊時間軸中的【刪除圖層】 按鈕或?qū)D層或文件夾拖到【刪除圖層】 按鈕。執(zhí)行下列操作之一： 右擊該圖層或文件夾的名稱，然后選擇快捷菜單中的【刪除圖層】或【刪除文件夾】。4.3 任務-03 制作“遮罩文字”動畫案例7. 7. 鎖定或解鎖一個或多個

23、圖層或文件夾鎖定或解鎖一個或多個圖層或文件夾 要鎖定圖層或文件夾，可以單擊該圖層或文件夾名稱右側(cè)的“鎖定”列。要解鎖該圖層或文件夾，可再次單擊“鎖定”列。 要鎖定所有圖層和文件夾，可以單擊掛鎖圖標。要解鎖所有圖層和文件夾，可再次單擊它。 要鎖定或解鎖多個圖層或文件夾，可以在“鎖定”列中拖動。 若要鎖定所有其他圖層或文件夾，可以按住Alt鍵單擊圖層或文件夾名稱右側(cè)的“鎖定”列。要解鎖所有圖層或文件夾，可再次按住Alt鍵單擊“鎖定”列。8. 8. 圖層的輪廓圖層的輪廓如圖4-31、圖4-32所示。調(diào)出輪廓顯示的方法如下：4.3 任務-03 制作“遮罩文字”動畫案例 單擊圖層名稱右邊的顯示模式欄即可

24、將圖層轉(zhuǎn)換為輪廓模式；再次單擊顯示模式欄則取消輪廓模式。 圖4-31 為舞臺中各層的對象 圖4-32 為顯示輪廓后的效果 單擊【顯示所有圖層的輪廓】 圖標，可以將所有圖層以輪廓模式顯示；再次單擊輪廓模式圖標則取消輪廓模式。4.4 任務-04 使用命名錨記、幀標簽與幀注釋 如果要在最終的Flash影片中使用“命名錨記”關(guān)鍵幀，需要在【發(fā)布設置】對話框中的HTML選項卡的【模板】下拉菜單中選擇“帶有命名錨記的Flash”選項，如圖4-33所示。圖4-33 設置命名錨記4.4 任務-04 使用命名錨記、幀標簽與幀注釋4.4.1 4.4.1 任務簡介任務簡介 本任務通過在幀【屬性】面板的“名稱”文本框里輸入文本，在類型下拉列表中選擇“錨記”、“注釋”或“名稱”，可為幀添加命名錨記、幀注釋或幀標簽。添加了命名錨記后的【屬性】面板和時間軸如圖4-34、圖4-35所示。 圖4-34 添加“命名錨記”名稱 圖4-35 時間軸上的“命名錨記” 4.4 任務-04 使用命名錨記、幀標簽與幀注釋4.4.2 4.4.2 知識點知識點 無論在幀中添加