學習單元5元件、實例與庫動畫設計與制作知識目標1.了解Animate中元件的類型、特點和用途；2.掌握元件與實例之間的關聯(lián)與區(qū)別；3.了解“庫”面板的作用，學習有效管理和組織庫中的元件及其他素材。能力目標素養(yǎng)目標1.能夠根據(jù)需要創(chuàng)建圖形、影片剪輯和按鈕元件，并進行編輯；

2.能夠熟練將元件實例化到場景中，并根據(jù)實際調(diào)整實例的屬性；3.能夠使用“庫”面板高效地管理庫項目，通過有效利用庫資源，提高動畫制作效率和質(zhì)量。1.培養(yǎng)學生自主學習的能力，并通過實踐和創(chuàng)新，提高動畫制作水平和藝術修養(yǎng)；2.培養(yǎng)學生與人溝通、協(xié)作的能力，同時提高學生的表達能力；3.培養(yǎng)學生信息素養(yǎng)、信息加工處理和合理運用的能力。思維導圖基礎任務5.1

制作海底世界動畫

【任務描述】海洋大約占據(jù)了地球表面的71%，是地球上最為廣闊且復雜的生態(tài)系統(tǒng)。這片蔚藍的世界孕育了無數(shù)獨特的生物種類和地形景觀，其美麗與神秘令人嘆為觀止。在本次任務中，我們將構建一個絢麗多姿的海底世界情境，借助元件與實例，描繪海底世界的奇異景色和豐富物產(chǎn)。通過這一任務實施，引導學生深刻領悟“保護海洋生態(tài)系統(tǒng)，人與自然和諧共生”的重要道理。任務儲備1元件相關知識

元件是Animate中最重要、最基本的元素，它可以是一個反復使用的圖形、按鈕或影片剪輯。使用元件不僅使編輯動畫變得更加簡單，還可以提高動畫效率。1.元件的類型

⑴圖形元件：圖形元件是制作動畫的基本元素之一，用于創(chuàng)建可重復使用的靜態(tài)圖像或動畫片段，它有自己的編輯區(qū)與時間軸。在場景中創(chuàng)建圖形元件的實例，那么圖形元件的播放受到場景中時間軸的約束。⑵影片剪輯元件：使用影片剪輯可以創(chuàng)建反復播放的動畫片段，它也有自己的編輯區(qū)與時間軸，但又不完全相同。影片剪輯元件的時間軸是獨立的，不受該實例在主場景時間軸的控制。⑶按鈕元件：用于創(chuàng)建響應鼠標的交互式按鈕，通過事件激發(fā)它的動作，有“彈起”“指針經(jīng)過”“按下”和“點擊”4個狀態(tài)幀。任務儲備1元件相關知識2.直接創(chuàng)建元件的方法⑴創(chuàng)建影片剪輯元件①選擇【插入】|【新建元件】命令（或使用快捷鍵Ctrl+F8），在彈出的【創(chuàng)建新元件】對話框中，在【名稱】文本框中輸入元件名稱，在【類型】列表框中選擇“影片剪輯”，點擊【確定】按鈕，如圖5-1-1所示。②在打開的“元件編輯”窗口中，可以繪制、導入素材、拖入其他元件的實例等方法制作元件，如圖5-1-2所示。制作完成后，單擊元件名稱左側(cè)的“返回”按鈕，退出元件編輯窗口。

圖5-1-1“創(chuàng)建影片剪輯元件”對話框圖5-1-2元件編輯窗口任務儲備1元件相關知識⑵創(chuàng)建圖形元件①選擇【插入】|【新建元件】命令（或使用快捷鍵Ctrl+F8），在彈出的【創(chuàng)建新元件】對話框中，在【名稱】文本框中輸入元件名稱，在【類型】列表框中選擇“圖形”，點擊【確定】按鈕，如圖5-1-3所示。②在打開的“元件編輯”窗口中，可以繪制、導入素材、拖入其他元件的實例等方法制作元件。制作完成后，單擊元件名稱左側(cè)的“返回”按鈕，退出元件編輯窗口。

圖5-1-3“創(chuàng)建圖形元件”對話框任務儲備1元件相關知識⑶創(chuàng)建按鈕元件①選擇【插入】|【新建元件】命令（或使用快捷鍵Ctrl+F8），在彈出的【創(chuàng)建新元件】對話框中，在【名稱】文本框中輸入元件名稱，在【類型】列表框中選擇“按鈕”，點擊【確定】按鈕，如圖5-1-4所示。②在打開的“元件編輯”窗口中，時間軸上僅顯示4個狀態(tài)幀，分別是“彈起”“指針經(jīng)過”“按下”“點擊”，如圖5-1-5所示。制作完成后，單擊元件名稱左側(cè)的“返回”按鈕，退出元件編輯窗口。

圖5-1-4“創(chuàng)建按鈕元件”對話框任務儲備1元件相關知識按鈕元件中4個狀態(tài)幀代表的含義是：“彈起”：代表鼠標指針不在按鈕上的狀態(tài)；“指針經(jīng)過”：代表鼠標指針經(jīng)過按鈕上方的狀態(tài)；“按下”：代表鼠標指針在按鈕按下時候的狀態(tài)；“點擊”：代表鼠標指針響應的區(qū)域。【注意】用直接創(chuàng)建元件的方法，元件并不顯示在工作區(qū)中，而是直接存放在【庫】面板中。

圖5-1-5“按鈕”元件時間軸顯示任務儲備1元件相關知識3.轉(zhuǎn)換元件的方法選定要轉(zhuǎn)換為元件的對象并單擊鼠標右鍵，在彈出的菜單中選擇【轉(zhuǎn)換為元件】命令（或使用快捷鍵F8），如圖5-1-6所示。在彈出的【轉(zhuǎn)換為元件】對話框中，在【名稱】文本框中輸入元件名稱，在【類型】列表框中選擇元件的類型，【對齊】中設置元件中心點（共有9個中心定位點），單擊“確定”按鈕，將其轉(zhuǎn)換為元件，如圖5-1-7所示。

圖5-1-7“轉(zhuǎn)換為元件”對話框圖5-1-6“轉(zhuǎn)換為元件”命令

任務儲備1元件相關知識4.元件的編輯對于創(chuàng)建好的元件，Animate提供了3種方式進行編輯，分別是在當前位置編輯、編輯元件和在新窗口中編輯。元件編輯完成后，將更新該元件的所有實例。①在當前位置編輯元件：選擇【編輯】|【在當前位置編輯】命令，或者鼠標雙擊元件的實例，可以在顯示舞臺背景的狀態(tài)下編輯該元件。②編輯元件模式：通過以下幾種方法進入元件編輯模式。

第一種方法：在【庫】面板中，雙擊元件圖標；

第二種方法：選擇【編輯】|【編輯元件】命令（或使用快捷鍵Ctrl+E）；

第三種方法：右擊元件實例，選擇【編輯元件】命令；③在新窗口中編輯：選中舞臺上要編輯的元件實例并右擊，在彈出的菜單中選擇【在新窗口中編輯】命令，會打開一個新的文件窗口，編輯完成后單擊該窗口右上角的“關閉”按鈕，即關閉新窗口。

任務儲備1元件相關知識5.轉(zhuǎn)換元件的類型選中【庫】面板中的元件，單擊【庫】面板下方的“屬性”按鈕，如圖5-1-11所示。在彈出的“元件屬性”對話框中，在【類型】中設置要轉(zhuǎn)換的類型，單擊“確定”按鈕，如圖5-1-12所示，即將原來的圖形元件轉(zhuǎn)換為影片剪輯元件。同樣，也可以選中【庫】面板中的元件并右擊，在彈出的菜單中選擇【屬性】命令，進行轉(zhuǎn)換元件的類型。

圖5-1-11“庫”面板圖5-1-12“元件屬性”對話框任務儲備2庫相關知識1.認識【庫】面板在Animate中，創(chuàng)建的元件及導入文件的聲音、視頻、圖片都存儲在【庫】面板中，【庫】面板主要用來顯示、存放、組織“庫”中所有的項目。選擇【窗口】|【庫】命令（或使用快捷鍵Ctrl+L），可以打開【庫】面板，如圖5-1-13所示。選擇【庫】面板中的項目時，面板頂部會顯示該項目的縮略圖預覽。如果選定的元件是影片剪輯，則在預覽區(qū)的右上方有“停止”和“播放”按鈕。單擊“播放”按鈕，則在預覽區(qū)域播放動畫。單擊“停止”按鈕，停止播放動畫。預覽區(qū)下方顯示出當前【庫】面板的元件以及其他資源。

圖5-1-13“庫”面板

圖5-1-14“直接復制”命令

任務儲備2庫相關知識2.庫管理可以應用【庫】面板來管理庫中的項目，如重命名、刪除和移動等，還可以將各項目組織到文件夾中以方便管理。庫項目重命名：雙擊【庫】面板中項目名稱或者右擊項目名稱選擇【重命名】命令。復制庫元件：選中【庫】面板中要復制的元件并右擊，在彈出的菜單中選擇【直接復制】命令。創(chuàng)建文件夾：在【庫】面板中可以創(chuàng)建文件夾，按照元件的類型分類存放。刪除庫項目：選中【庫】面板中的項目，按Delete鍵直接刪除或者右擊選擇“刪除”命令。

任務儲備3實例相關知識1.創(chuàng)建實例將元件從【庫】面板中拖動到舞臺，即創(chuàng)建一個實例。元件只需建立一次，但是一個元件可以創(chuàng)建無數(shù)個實例，修改元件則更新所有實例，如圖5-1-15所示。

圖5-1-15創(chuàng)建實例效果任務儲備3實例相關知識2.設置實例的屬性選擇實例后，可以在【屬性】面板中設置實例名稱，修改其顏色、透明度、大小和位置等屬性。圖形元件和影片剪輯元件的【屬性】面板，如圖5-1-16、5-1-17所示?！咀⒁狻繉嵗龅摹緦傩浴棵姘宓母闹粫绊憣嵗旧?，并不會影響元件以及其他實例對象。其中混合模式、濾鏡效果只有影片剪輯元件和按鈕元件具有。圖5-1-16圖形元件“屬性”面板

圖5-1-17“屬性”面板任務儲備3實例相關知識3.更改實例的元件選中要更改的實例并右擊，在彈出的菜單中選擇【交換元件】命令，如圖5-1-18所示。在【交換元件】對話框中選擇要交換的元件，如圖5-1-19所示。【注意】新元件的實例將仍然保留原來實例的屬性。4.分離實例將實例與所對應的元件進行分離，使它不再與元件有關聯(lián)，成立一個獨立的對象。選中實例右擊，在彈出的菜單中選擇【分離】命令（或使用快捷鍵Ctrl+B），即實現(xiàn)元件的分離。圖5-1-18“交換元件”命令圖5-1-19“交換元件”對話框

任務實施1制作海底背景⑴選擇【文件】|【新建】命令，在彈出的【新建文檔】對話框中，使用【高清】尺寸，

將【幀頻】設置為24fps，在【平臺類型】列表框中選擇【ActionScript3.0】選項，點擊【創(chuàng)建】按鈕，如圖5-1-20所示。圖5-1-20新建文件⑵選擇【文件】|【導入】|【導入到庫】命令，在彈出的【導入到庫】對話框中，先選擇“貝殼.png”，再按住Shift鍵選擇“魚2.png”素材文件，單擊【打開】按鈕，如圖5-1-21所示，將素材文件導入到庫中。圖5-1-21導入素材任務實施1制作海底背景⑶將“圖層_1”重命名為“背景”。打開【庫】面板，將素材“背景.jpg”拖動到舞臺中，使用【任意變形工具】調(diào)整大小及位置，如圖5-1-22所示。選中“背景”素材并單擊鼠標右鍵，在彈出的菜單中選擇【轉(zhuǎn)換為元件】命令（或使用快捷鍵F8），在彈出的【轉(zhuǎn)換為元件】對話框中，在【名稱】文本框中輸入“背景”，將【類型】設置為“圖形”，單擊“確定”按鈕，將其轉(zhuǎn)換為圖形元件，如圖5-1-23所示。圖5-1-22放置“背景”⑷選中“背景”層第1幀，使用【選擇工具】選中“背景”圖形元件實例，在【屬性】面板中，將【色彩效果】設置為“亮度”，“亮度”值修改為“-60%”，如圖5-1-24所示。當前舞臺效果，如圖5-1-25所示。圖5-1-24修改亮度

圖5-1-25當前效果

圖5-1-23轉(zhuǎn)換元件任務實施1制作海底背景⑸在“背景”層上方新建“圖層_2”，重命名為“海星和貝殼”，從【庫】面板中將素材“海星1.png、海星2.png、貝殼.png”依次拖動到舞臺中，使用【任意變形工具】調(diào)整大小、方向，并放至合適位置，如圖5-1-26所示。圖5-1-26放置“海星和貝殼”⑹在“海星和貝殼”層上方新建“圖層_3”，重命名為“海草”，從【庫】面板中將素材“海草.png”拖動到舞臺中，放至合適位置。選中“海草”并按住Alt拖動進行復制，使用【任意變形工具】調(diào)整海草的大小和位置，如圖5-1-27所示。圖5-1-27放置“海草”任務實施2制作螃蟹爬動動畫⑴在“海草”層上方新建“圖層_4”，重命名為“螃蟹”，選擇【插入】|【新建元件】命令（或使用快捷鍵Ctrl+F8），在彈出的【創(chuàng)建新元件】對話框中，【名稱】文本框輸入“螃蟹蟹夾動”，【類型】設置為“影片剪輯”，如圖5-1-28所示。在該元件編輯模式下，選中第1幀，從【庫】面板中將素材“螃蟹1.png”拖動到舞臺中，依次選中第10幀、第20幀，按F6插入關鍵幀。選擇第10幀，選中“螃蟹1.png”素材并右擊，在彈出的菜單中選擇“交換位圖”命令，如圖5-1-29所示。在打開的“交換位圖”對話框中選擇素材“螃蟹2.png”，單擊“確定”按鈕，如圖5-1-30所示，單擊“返回”按鈕，回到場景1中。圖5-1-28創(chuàng)建元件

圖5-1-29“交換位圖”命令圖5-1-30交換位圖“螃蟹2.png”任務實施2制作螃蟹爬動動畫⑵選中“螃蟹”層第1幀，從【庫】面板中將影片剪輯元件“螃蟹蟹夾動”拖動到舞臺中，選中“螃蟹蟹夾動”影片剪輯實例并單擊鼠標右鍵，在彈出的菜單中選擇【轉(zhuǎn)換為元件】命令（或使用快捷鍵F8），在彈出的【轉(zhuǎn)換為元件】對話框中，在【名稱】文本框中輸入“螃蟹跑動”，將【類型】設置為“影片剪輯”，單擊“確定”按鈕，將其轉(zhuǎn)換為元件，如圖5-1-31所示。⑶雙擊“螃蟹跑動”影片剪輯實例，在元件編輯模式下，選中第1幀的“螃蟹蟹夾動”實例，使用【任意變形工具】調(diào)整大小并放至合適位置，如圖5-1-32所示。依次選中第100幀、第200幀，按F6插入關鍵幀，選中第100幀，調(diào)整至合適的位置，如圖5-1-33所示。用鼠標右鍵單擊時間線任意位置，在彈出的菜單中選擇【創(chuàng)建傳統(tǒng)補間】命令，時間軸如圖5-1-34所示，單擊“場景1”名稱，返回場景1。圖5-1-31創(chuàng)建“螃蟹跑動”影片剪輯元件圖5-1-32第1幀當前位置圖5-1-34時間軸顯示圖5-1-33第100當前位置任務實施2制作螃蟹爬動動畫⑷選中“螃蟹”層第1幀，使用【選擇工具】選中“螃蟹跑動”影片剪輯實例，按住Alt拖動該實例復制到其他適合的位置，使用【任意變形工具】調(diào)整大小和位置。⑸將“海草”圖層移動到“螃蟹”圖層上方，當前舞臺效果如圖5-1-35所示，時間軸如圖5-1-36所示。圖5-1-35當前舞臺效果圖5-1-36時間軸顯示任務實施3制作水母游動動畫⑴在“海草”層上方新建“圖層_5”，重命名為“水母”。

選擇【插入】|【新建元件】命令（或使用快捷鍵Ctrl+F8），在彈出的【創(chuàng)建新元件】對話框中，【名稱】文本框輸入“水母”，【類型】設置為“影片剪輯”，如圖5-1-37所示。在元件編輯模式下，選擇【文件】|【導入】|【導入到舞臺】命令，在彈出的【導入】對話框中，選擇“水母”文件夾中“水母1.png”文件，單擊【打開】按鈕，在彈出的對話框中單擊【是】按鈕，將序列圖片導入到舞臺中，如圖5-1-38所示。⑵在“水母”元件編輯模式下，右擊時間軸中的【編輯多個幀】按鈕，從下拉列表中選擇【所有幀】?？蜻x所有幀，按Ctrl+K鍵打開【對齊】面板，在【對齊】面板中選擇【與舞臺對齊】，單擊【水平中齊】按鈕、【垂直中齊】按鈕，將對象置于舞臺中心，如圖5-1-39所示。單擊“返回”按鈕，回到場景1中。圖5-1-39舞臺居中效果圖5-1-38導入序列圖5-1-37創(chuàng)建“水母”元件

任務實施3制作水母游動動畫⑶選擇【插入】|【新建元件】命令（或使用快捷鍵Ctrl+F8），在彈出的【創(chuàng)建新元件】對話框中，在【名稱】文本框中輸入“水母上升運動”，將【類型】設置為“影片剪輯”，單擊“確定”按鈕，如圖5-1-40所示。在該元件編輯模式下，從【庫】面板中將影片剪輯元件“水母”拖動到舞臺中，使用【任意變形工具】調(diào)整大小，放至合適位置，如圖5-1-41所示。在第200幀，按F6插入關鍵幀，使用【選擇工具】放至合適位置，如圖5-1-42所示。用鼠標右鍵單擊時間線任意位置，在彈出的菜單中選擇【創(chuàng)建傳統(tǒng)補間】命令，創(chuàng)建動畫。單擊“返回”按鈕，進入場景1中。⑷選中“水母”層第1幀，從【庫】面板中將影片剪輯元件“水母上升運動”拖動到舞臺中創(chuàng)建該元件實例，按住Alt拖動該實例進行復制，使用【任意變形工具】調(diào)整大小、位置和方向，如圖5-1-43所示。圖5-1-41“水母”位置

圖5-1-40創(chuàng)建“水母上升運動”元件圖5-1-43當前舞臺效果圖5-1-42“水母”位置

任務實施4制作魚兒游動動畫⑴在“水母”層上方新建“圖層_6”，重命名為“魚1”。

從【庫】面板中將素材“魚1.png”拖動到舞臺中，使用【任意變形工具】調(diào)整大小并放至合適位置，選中素材“魚1.png”并單擊鼠標右鍵，在彈出的菜單中選擇【轉(zhuǎn)換為元件】命令（或使用快捷鍵F8），在彈出的【轉(zhuǎn)換為元件】對話框中，在【名稱】文本框中輸入“魚1游”，將【類型】設置為“影片剪輯”，單擊“確定”按鈕，如圖5-1-44所示。⑵雙擊“魚1游”影片剪輯元件實例，進入元件編輯模式，將“圖層_1”重命名為“魚1”。選中“魚1”層第1幀，選中素材“魚1.png”并右擊，在彈出的菜單中選擇【轉(zhuǎn)換為元件】命令（或使用快捷鍵F8），在彈出的【轉(zhuǎn)換為元件】對話框中，在【名稱】文本框中輸入“魚1”，將【類型】設置為“圖形”，單擊“確定”按鈕，將其轉(zhuǎn)換為元件，如圖5-1-45所示。⑶選中“魚1”圖層并右擊，在彈出的菜單中選擇【添加傳統(tǒng)運動引導層】命令，如圖5-1-46所示。在引導層中，選擇【鋼筆工具】繪制一條不規(guī)則的曲線路徑，如圖5-1-47所示。圖5-1-45創(chuàng)建“魚1”元件

圖5-1-44創(chuàng)建“魚1游”元件圖5-1-46添加引導層圖5-1-47繪制引導線任務實施4制作魚兒游動動畫⑷選中“魚1”層第1幀，使用【選擇工具】將“魚1”實例移動到路徑的起始端點，如圖5-1-47所示。在第100幀、第200幀，按F6鍵插入關鍵幀（其他圖層按F5插入普通幀）。在第100幀將“魚1”移動到路徑的中間端點，如圖5-1-48所示。用鼠標右鍵單擊時間線任意位置，在彈出的菜單中選擇【創(chuàng)建傳統(tǒng)補間】命令。在第200幀將“魚1”移動到路徑的結(jié)束端點，如圖5-1-49所示。用鼠標右鍵單擊時間線任意位置，在彈出的菜單中選擇【創(chuàng)建傳統(tǒng)補間】命令，單擊“場景1”按鈕，返回到場景1。⑸在主場景中選擇“魚1”層第1幀，選中“魚1游”影片剪輯實例，按住Alt拖動進行復制，使用【任意變形工具】調(diào)整大小并放至合適位置。選中復制后的實例右擊，在彈出的菜單中選擇【變形】中的【水平翻轉(zhuǎn)】命令，如圖5-1-50所示。選中復制后的實例，在【屬性】面板中，【色彩效果】設置為【高級】，詳細參數(shù)如圖5-1-51所示，舞臺效果如圖5-1-52所示。圖5-1-49當前舞臺位置

圖5-1-48當前舞臺位置圖5-1-50“水平翻轉(zhuǎn)”命令圖5-1-51顏色設置圖5-1-52舞臺效果任務實施4制作魚兒游動動畫⑹選中【庫】面板圖形元件“魚1”并右擊，在彈出的菜單中選擇【直接復制】命令。在打開的【直接復制元件】對話框中，在【名稱】文本框修改為“魚2”，單擊【確定】按鈕。雙擊【庫】面板圖形元件“魚2”的圖標，進入元件編輯模式，選中素材“魚1.png”并右擊，在彈出的快捷菜單中選擇“交換位圖”命令，在打開的對話框中選擇“魚2.png”，單擊“確定”按鈕，如圖5-1-53所示。⑺選中【庫】面板“魚1游”影片剪輯元件并右擊，在彈出的菜單中選擇【直接復制】命令。在打開的【直接復制元件】對話框中，在【名稱】文本框修改為“魚2游”，單擊【確定】按鈕，如圖5-1-54所示。圖5-1-54直接復制“魚2游”元件圖5-1-53交換位圖“魚2.png”任務實施4制作魚兒游動動畫⑻在“魚1”層上方新建“圖層_7”，重命名為“魚2”，

從【庫】面板中將影片剪輯元件“魚2游”拖動到舞臺中，使用【任意變形工具】調(diào)整大小，放至合適位置，如圖5-1-55所示。雙擊“魚2游”影片剪輯實例，進入元件編輯模式，選中“魚1”層第1幀，選中圖形實例“魚1”并右擊，在彈出的菜單中選擇【交換元件】命令，在【交換元件】對話框中選擇圖形元件“魚2”，如圖5-1-56所示。選中第100幀和第200幀上的圖形實例“魚1”右擊，重復應用【交換元件】命令，選擇圖形元件“魚2”。使用【選擇工具】調(diào)整引導層的軌跡形狀，如圖5-1-57所示。單擊“場景1”，返回到場景1中。

圖5-1-57調(diào)整后的運動軌跡圖5-1-55當前舞臺效果

圖5-1-56交換圖形元件“魚2”任務實施4制作魚兒游動動畫⑼選擇“魚2”層第1幀，選中“魚2游”元件實例，按住Alt拖動進行復制。選中復制后的實例右擊，在彈出的菜單中選擇【變形】中的【水平翻轉(zhuǎn)】命令，使用【任意變形工具】調(diào)整大小，放至合適位置。在【屬性】面板中，【色彩效果】設置為【高級】，詳細參數(shù)如圖5-1-58所示。

圖5-1-60時間軸顯示圖5-1-58修改“色彩效果”設置

圖5-1-59測試影片效果⑽按“Ctrl+Enter”組合鍵測試動畫效果，影片效果如圖5-1-59所示，時間軸如圖5-1-60所示。任務小結(jié)1制作海底世界動畫1.影片剪輯元件有獨立的時間軸，而圖形元件與場景時間軸同步；2.元件一次建立可應用多次，實例是由元件創(chuàng)建的，更改元件會更新所有實例，而更改實例不會影響元件以及其他實例；3.可以利用元件嵌套來制作復雜的動畫；4.靈活運用“交換元件”和“直接復制”命令，提高動畫實戰(zhàn)制作技巧。綜合提升5.2

制作二十四節(jié)氣交互動畫

【任務描述】二十四節(jié)氣，這一凝聚著中國古代農(nóng)耕文明智慧結(jié)晶的時間知識體系，不僅是古人對太陽周年運動的細致觀察與深刻理解的產(chǎn)物，更是中國傳統(tǒng)文化中一顆璀璨的明珠，承載著豐富的文化內(nèi)涵和深厚的歷史底蘊。在本任務中，我們將巧妙運用按鈕元件和腳本實現(xiàn)交互動畫，生動展現(xiàn)二十四節(jié)氣的科普知識。通過這一創(chuàng)新方式，引導學生領略傳統(tǒng)文化的獨特魅力，深化對中華文化的認同感與自豪感，從而自覺肩負起傳承文化基因的重任。任務儲備添加動作代碼相關知識1.“動作”面板

在Animate中提供專門處理動作腳本的編輯環(huán)境“動作”面板。通過在“動作”面板中輸入或添加腳本來實現(xiàn)交互動畫，Animate的“動作”面板提供了代碼片斷、設置代碼格式等功能。選擇【窗口】|【動作】命令（或快捷鍵F9），打開動作面板。動作面板包含“腳本編輯器”和“腳本導航器”兩個窗格，如圖5-2-1所示。

(1)腳本導航器列出當前文檔中所有幀動作信息，單擊腳本導航器中的某一個對象，會呈現(xiàn)與該對象相關的腳本內(nèi)容，同時播放頭會跳轉(zhuǎn)到時間軸對應的位置。圖5-2-1“動作”面板腳本導航器工具欄腳本編輯器任務儲備添加動作代碼相關知識(2)工具欄說明固定腳本：將腳本固定到“腳本編輯器”窗格中各個腳本的固定標簽。將腳本固定，以保留代碼在動作面板中的打開位置，然后在各個打開的不同腳本中切換，本功能在調(diào)試時非常有用。插入實例路徑和名稱：設置腳本中某個動作的絕對或相對目標路徑。代碼片斷：單擊該按鈕，彈出“代碼片斷”面板，如圖5-2-3所示。該面板列出Animate文檔中的腳本，可以快速查看或調(diào)用這些腳本。設置代碼格式：幫助設置代碼格式。查找：查找并替換腳本中的文本。幫助:顯示“腳本編輯器”窗格中所選ActionScript元素的參考信息。圖5-2-3“代碼片斷”面板(3)“腳本編輯器”窗口在“腳本編輯器”窗口，直接輸入或調(diào)用ActionScript代碼。任務儲備添加動作代碼相關知識2.添加動作

⑴為幀添加動作選擇時間軸要添加動作的關鍵幀，右擊“動作”命令（或按F9），即打開“動作”面板。在“動作”面板“腳本編輯”窗格中，輸入代碼或者利用“代碼片斷”引用代碼。當動畫播放到該幀，會自動運行幀中的腳本程序。需要注意的是，為關鍵幀添加ActionScript代碼后，該關鍵幀上將出現(xiàn)一個“a”符號?！咀⒁狻勘仨氃陉P鍵幀上才能給幀添加動作。⑵為對象添加動作選擇“按鈕”或“影片剪輯”實例，首先在“屬性”面板中設置實例的名字，再打開“動作”面板，添加腳本語句內(nèi)容?！咀⒁狻繛榱朔奖憧刂莆枧_對象，必須在“屬性”面板中設定對象的實例名稱，實例名稱需以字母字符或其他受支持的符號開頭的標識符。任務儲備添加動作代碼相關知識3.使用“代碼片斷”面板“代碼片斷”面板是Animate中編寫代碼的一種非常方便的工具，它能幫助用戶在不精通代碼編輯的前提下，快速輕松地實現(xiàn)簡單代碼的編寫。操作步驟如下：(1)選擇時間軸中的某個關鍵幀或者選中舞臺對象（必須設定對象的實例名稱）；(2)單擊“動作”面板中的“代碼片斷”或選擇【窗口】|【代碼片斷】命令，即打開【代碼片斷】面板；(3)在【代碼片斷】面板中，根據(jù)要添加的腳本類型，選擇相應的文件夾；(4)雙擊所選動作，即將代碼添加到“動作”面板中；(5)此時時間軸所有圖層之上，生成一個Actions圖層。任務實施1制作“二十四節(jié)氣”片頭動畫⑴選擇【文件】|【新建】命令，在彈出的【新建文檔】對話框中，使用默認【高清】尺寸，

將【幀頻】設置為24fps，在【平臺類型】列表框中選擇【ActionScript3.0】選項，點擊【創(chuàng)建】按鈕，如圖5-2-4所示。圖5-2-5導入素材⑵選擇【文件】|【導入】|【導入到庫】命令，在彈出的【導入到庫】對話框中，先選擇素材“背景音樂.mp3”，再按住Shift鍵選擇最后一個素材文件“主標題.png”，單擊【打開】按鈕，如圖5-2-5所示，將素材文件導入到庫中。按Ctrl+L打開【庫】面板，依次創(chuàng)建文件夾“按鈕”“素材”“剪輯”“圖形”等文件夾，將導入素材分類存放到所對應的文件夾中。圖5-2-4新建文件任務實施1制作“二十四節(jié)氣”片頭動畫⑶將“圖層_1”重命名為“背景”。按Ctrl+L打開【庫】面板，將素材“古風背景.png”拖動到舞臺中。按Ctrl+L打開【對齊】面板，在面板中選擇【與舞臺對齊】，單擊【水平中齊】按鈕、【垂直中齊】按鈕，使用【任意變形工具】調(diào)整背景素材的大小及位置，如圖5-2-6所示。圖5-2-7“背景”圖形元件⑷選中素材“古風背景.png”并單擊鼠標右鍵，在彈出的菜單中選擇【轉(zhuǎn)換為元件】命令（或使用快捷鍵F8），在彈出的【轉(zhuǎn)換為元件】對話框中，在【名稱】文本框中輸入“背景”，將【類型】設置為“圖形”，單擊“確定”按鈕，將其轉(zhuǎn)換為元件，如圖5-2-7所示。圖5-2-6對齊面板的設置

任務實施1制作“二十四節(jié)氣”片頭動畫⑸在“背景”層第1幀，使用【選擇工具】選中“背景”圖形元件實例，【屬性】面板中【色彩效果】列表框中選擇“Alpha”選項，并設置值為“0%”，如圖5-2-8所示。選擇第15幀，按F6鍵插入關鍵幀，在【屬性】面板【色彩效果】設置“Alpha”值為“100%”。用鼠標右鍵單擊時間線任意位置，在彈出的菜單中選擇【創(chuàng)建傳統(tǒng)補間】命令，時間軸狀態(tài)如圖5-2-9所示。

圖5-2-9時間軸狀態(tài)圖5-2-8“屬性”面板的設置

任務實施1制作“二十四節(jié)氣”片頭動畫⑹在“背景”層上方新建“圖層_2”，重命名為“標題動畫”。在第15幀，按F7鍵插入空白關鍵幀，從【庫】面板中將素材“主標題.png”拖動到舞臺中，調(diào)整大小并放至合適位置，如圖5-2-10所示。選中素材“主標題.png”并單擊鼠標右鍵，在彈出的菜單中選擇【轉(zhuǎn)換為元件】命令（或使用快捷鍵F8），在彈出的【轉(zhuǎn)換為元件】對話框中，在【名稱】文本框中輸入“主標題”，將【類型】設置為“圖形”，單擊“確定”按鈕，將其轉(zhuǎn)換為元件，如圖5-2-11所示。

圖5-2-11“主標題”圖形元件圖5-2-10“主標題”舞臺效果

任務實施1制作“二十四節(jié)氣”片頭動畫⑺在“標題動畫”層第15幀，使用【選擇工具】選中“主標題”圖形實例，在【屬性】面板中的【色彩效果】列表框中選擇“Alpha”選項并設置值為“0%”，在【位置和大小】中設置寬和高各為1，如圖5-2-12所示。在第30幀，按F6鍵插入關鍵幀（其他圖層按F5插入普通幀），在【屬性】面板中設置“Alpha”值為“100%”，【位置和大小】中的寬和高參數(shù)設置，如圖5-2-13所示。用鼠標右鍵單擊時間線任意位置，在彈出的菜單中選擇【創(chuàng)建傳統(tǒng)補間】命令。圖5-2-13“屬性”面板設置

圖5-2-12“屬性”面板設置任務實施1制作“二十四節(jié)氣”片頭動畫⑻在“標題動畫”層上方新建“圖層_3”，重命名為“印章”。選中“印章”層第31幀，按F7鍵插入空白關鍵幀，從【庫】面板中將素材“印章.png”拖動到舞臺中，放至合適位置，如圖5-2-14所示。⑼選中“標題動畫”層第31幀，按F6鍵插入關鍵幀（其他圖層按F5插入普通幀），選中“主標題”圖形元件實例，在【屬性】面板中，將【實例行為】列表框由“圖形”類型改為“按鈕”類型，【實例名稱】文本框中輸入btn，如圖5-2-15所示。圖5-2-15修改為“按鈕”元件

圖5-2-14當前舞臺效果任務實施2制作“二十四節(jié)氣”導航按鈕⑴選擇【插入】|【新建元件】命令（或使用快捷鍵Ctrl+F8），在彈出的【創(chuàng)建新元件】對話框中，設置參數(shù)如圖5-2-16所示。在元件編輯模式下，將“圖層_1”重命名為“圖片”。將播放頭置于“彈起”狀態(tài)，選擇【橢圓工具】，設置“筆觸顏色”為無，按住Alt+Shift在舞臺中央繪制一個正圓。使用【選擇工具】選中圓形，在【顏色】面板中，將【顏色類型】設置為“位圖填充”，選擇文件“24節(jié)氣.png”，

如圖5-2-17所示。使用【漸變變形工具】調(diào)整圖像，將播放頭置于“點擊”狀態(tài)，按F5插入普通幀。圖5-2-16“創(chuàng)建新元件”按鈕

圖5-2-17位圖填充設置任務實施2制作“二十四節(jié)氣”導航按鈕⑵在“圖片”層上方新建“圖層_2”，重命名為“文字”。將播放頭置于“指…”狀態(tài)，按F7插入空白關鍵幀，使用【文本工具】輸入“節(jié)氣內(nèi)涵”，調(diào)整大小及位置，將播放頭置于“點擊”狀態(tài)，按F5插入普通幀，時間軸如圖5-2-18所示，按鈕效果如圖5-2-19所示。單擊“返回”按鈕，切換到場景1。圖5-2-18按鈕時間軸顯示

圖5-2-19按鈕效果任務實施2制作“二十四節(jié)氣”導航按鈕⑶在【庫】面板中選中按鈕“btn1”并右擊，在彈出的菜單中選擇【直接復制】命令，在打開的【直接復制元件】對話框中，設置【名稱】為“btn2”，單擊【確定】按鈕。雙擊【庫】面板“btn2”前面的圖標，進入元件編輯模式。使用【選擇工具】選中圓形，在【顏色】面板中，選擇文件“春夏秋冬.png”，使用【漸變變形工具】調(diào)整圖像。重復（3）操作，復制按鈕元件重命名為“btn3”，

在【顏色】面板選擇文件“古詩詞與節(jié)氣.jpg”，使用【漸變變形工具】調(diào)整圖像。

⑷在“印章”層上方新建“圖層_4”，重命名為“導航按鈕”。在第32幀，按F7插入空白關鍵幀，從【庫】面板中將按鈕“btn1、btn2、btn3”依次拖動到舞臺中，調(diào)整大小放至舞臺下方，如圖5-2-20所示。依次選擇按鈕，在其【屬性】面板中，將【實例名稱】分別設置為“btn1、btn2、btn3”，舞臺效果時間軸如圖5-2-21所示。圖5-2-20導航按鈕效果圖5-2-21時間軸顯示任務實施3制作“二十四節(jié)氣”科普內(nèi)容動畫⑴選擇“背景”層第32幀，從【庫】面板中將素材“祥云背景.png”拖動到舞臺中，利用【對齊】面板，置于舞臺中央。⑵在“導航按鈕”層上方新建“圖層_5”，重命名為“小標題”。選擇第32幀，從【庫】面板中依次將素材“小標題.png、印章.png”拖動到舞臺中，放至合適位置，如圖5-2-22所示。⑶在“小標題”層上方新建“圖層_6”，重命名為“節(jié)氣內(nèi)涵”。在第32幀按F7插入空白關鍵幀，使用【矩形工具】，填充顏色為“#CCCCCC”，筆觸顏色為無，繪制矩形?！緦傩浴棵姘澹O置矩形大小寬954高452。選中繪制的矩形，按F8將其轉(zhuǎn)換為“圖形”元件，命名為“24節(jié)氣內(nèi)涵”，如圖5-2-23所示。圖5-2-23創(chuàng)建“24節(jié)氣內(nèi)涵”圖形元件圖5-2-22舞臺效果任務實施3制作“二十四節(jié)氣”科普內(nèi)容動畫⑷雙擊“24節(jié)氣內(nèi)涵”圖形實例，進入元件編輯模式。將“圖層_1”重命名為“主邊框”，單擊第1幀，選定繪定的邊框右擊，在彈出的菜單中選擇“轉(zhuǎn)換元件”命令。在“轉(zhuǎn)換為元件”對話框中，設置【名稱】為主邊框，【類型】為影片剪輯，單擊【確定】按鈕。選定“主邊框”影片剪輯實例，在【屬性】面板中，添加【濾鏡】效果中的【投影】效果，如圖5-2-24所示?！就队啊繀?shù)設置，如圖5-25所示。⑸新建圖層重命名為“文字內(nèi)容”。打開“素材”文件夾中“文字內(nèi)容.txt”文件，選中文字內(nèi)容Ctrl+C復制到剪貼板，使用【文本工具】在舞臺創(chuàng)建文本框，Ctrl+V將文字內(nèi)容粘貼到文本框中，在【屬性】面板中設置適合的文字大小及行距，切換到“場景1”中，舞臺效果如圖5-2-26所示。圖5-2-26當前舞臺效果圖5-2-24添加投影圖5-2-25設置投影任務實施3制作“二十四節(jié)氣”科普內(nèi)容動畫⑹在“節(jié)氣內(nèi)涵”層上方新建“圖層_7”，重命名為“節(jié)氣詳解”。選擇【插入】|【新建元件】命令（或使用快捷鍵Ctrl+F8），在彈出的【創(chuàng)建新元件】對話框中，【名稱】為“24節(jié)氣詳解”，【類型】為影片剪輯，如圖5-2-27所示。進入元件編輯模式下，將“圖層_1”重命名為“節(jié)氣詳解”，從【庫】面板中將素材“節(jié)氣1.png”拖動到舞臺中，利用【對齊】面板置于舞臺中央。圖5-2-27“創(chuàng)建新元件”按鈕

任務實施3制作“二十四節(jié)氣”科普內(nèi)容動畫⑺按F6插入關鍵幀，選中第2幀的素材“節(jié)氣1.png”右擊，在彈出的快捷菜單選擇【交換位圖】命令，如圖5-2-28所示。在打開的對話框中選擇“節(jié)氣2.png”，單擊“確定”按鈕，如圖5-2-29所示。再按F6插入關鍵幀，選中第3幀上的對象右擊，在彈出的快捷菜單選擇【交換位圖】命令，在打開的對話框中選擇“節(jié)氣3.png”，單擊“確定”按鈕，最終完成二十四節(jié)氣圖片的展示。圖5-2-28交換位圖圖5-2-29對話框任務實施3制作“二十四節(jié)氣”科普內(nèi)容動畫(8)在“節(jié)氣詳解”層上方新建“圖層_2”，重命名為“翻頁按鈕”。選擇【多角星形工具】，在【屬性】面板中，設置【顏色和樣式】填充顏色為“#C8C8C8”，“筆觸顏色”為無，【工具選項】中【邊數(shù)】修改為“3”，在舞臺繪制三角形，并調(diào)整大小方向及位置，圖5-2-30所示。選中繪制的“三角形”按F8，在彈出的【轉(zhuǎn)換為元件】對話框中，【名稱】為“page”，【類型】為“按鈕”，圖5-2-31所示。選中“page”，在【屬性】面板中設置【實例名稱】為“btn6”。雙擊進入所創(chuàng)建元件編輯模式，將播放頭置于“點擊”狀態(tài)，按F5插入普通幀，單擊“24節(jié)氣詳解”影片剪輯，切換到影片剪輯元件中。圖5-2-30繪制翻頁按鈕圖5-2-31“page”按鈕元件任務實施3制作“二十四節(jié)氣”科普內(nèi)容動畫(9)選中“翻頁按鈕”層第1幀，使用【選擇工具】按住Alt拖動“page”按鈕實例，移動到節(jié)氣圖片的最左側(cè)。選中左側(cè)的“page”按鈕實例并右擊，在彈出的快捷菜單中選擇【變形】|【水平翻轉(zhuǎn)】命令，如圖5-2-32所示。在【屬性】面板中，設置【實例名稱】為“btn5”。選擇“翻頁按鈕”層第3幀，按F5鍵插入普通幀。圖5-2-32“水平翻轉(zhuǎn)”命令

任務實施3制作“二十四節(jié)氣”科普內(nèi)容動畫(10)選定“翻頁按鈕”層第1幀并右擊，在快捷菜單選擇【動作】命令（或按F9），在打開的【動作面板】中，單擊【代碼片斷】按鈕。在彈出的【代碼片斷】面板中，雙擊【ActionScript】|【時間軸導航】|【在此幀處停止】命令，如圖5-2-33所示。此時，【動作】面板中【腳本編輯器】窗格代碼如圖5-2-34所示。時間軸的所有圖層之上添加一個Actions圖層，第1幀出現(xiàn)“a”標記，時間軸如圖5-2-35所示。圖5-2-33“代碼片斷”面板圖5-2-34代碼顯示

圖5-2-35時間軸顯示

任務實施3制作“二十四節(jié)氣”科普內(nèi)容動畫(11)選擇“Actions”層第1幀右擊，在快捷菜單選擇【動作】命令（或按F9），打開“動作面板”。選中舞臺右側(cè)“btn6”按鈕實例，單擊【動作】|【代碼片斷】按鈕。在彈出的【代碼片斷】面板中，雙擊【ActionScript】|【時間軸導航】|【單擊以轉(zhuǎn)到下一幀并停止】，如圖5-2-36所示。選中舞臺左側(cè)“btn5”按鈕實例，單擊【動作】|【代碼片斷】按鈕。在彈出的【代碼片斷】面板中，雙擊【ActionScript】|【時間軸導航】|【單擊以轉(zhuǎn)到前一幀并停止】，如圖5-2-37所示。

選擇“Actions”圖層第1幀，【動作面板】中代碼如圖5-2-38所示。單擊“返回”按鈕，返回到場景1中。圖5-2-36“代碼片斷”面板

圖5-2-37“代碼片斷”面板

圖5-2-38代碼顯示效果

圖5-2-39舞臺效果任務實施3制作“二十四節(jié)氣”科普內(nèi)容動畫(12)選定“節(jié)氣詳解”層第33幀，從【庫】面板中拖動影片剪輯元件“24節(jié)氣詳解”到舞臺中，使用【任意變形工具】調(diào)整大小及位置。在“導航按鈕”“小標題”“背景”層分別按F5鍵插入幀，當前舞臺效果如圖5-2-39所示。(13)在“節(jié)氣詳解”層上方新建圖層，重命名為“節(jié)氣里的古詩詞”，選擇第34幀按F7插入空白關鍵幀。選擇【插入】|【新建元件】命令（或使用快捷鍵Ctrl+F8），在彈出的【創(chuàng)建新元件】對話框中，【名稱】為“古詩詞”，【類型】為影片剪輯，如圖5-2-40所示。將“圖層_1”重命名為“古詩詞”，選中第1幀，選擇【文件】|【導入】|【導入到舞臺】命令。在打開的【導入】對話框中選擇“節(jié)氣里的古詩詞”文件夾中的“01.jpeg”文件，單擊“打開”按鈕，如圖5-2-41所示。在彈出的對話框中單擊“是”按鈕，將序列圖片導入到舞臺中，如圖5-2-42所示。圖5-2-40創(chuàng)建影片剪輯

圖5-2-41“導入”對話框

任務實施3