《電子商務網頁設計》課程教案項目八（2）授課教師班級學時6授課日期主題或任務第8章使用Animate制作網頁中的動畫課型專業課授課地點●多媒體教室○企業○專業教室○實訓室教學目標1、知識目標：了解AdobeAnimate2020的基礎知識、工作界面2、技能目標：掌握AdobeAnimate2020的基本操作和常用工具的使用方法3、素質目標：利用AdobeAnimate2020制作電子商務網頁中常用的簡單動畫學習內容使用Animate2020制作節日活動動畫遮罩文字效果制作按鈕ActionScript腳本重點難點重點：Animate2020的基本操作及使用實例難點：Animate2020基本操作的掌握教學方法●理論講授●小組討論●項目教學●任務驅動○參觀教學○模擬教學○實驗實訓○演示教學○其他素材資源○文本素材○實物展示●PPT幻燈片○音頻素材●視頻素材○動畫素材●圖形/圖像素材●網絡資源○其他教學設計本章分3次進行授課，每次90分鐘，具體:1、課程導入（1）課程內容回顧（2）宣布教學內容、目的（3）新知導入（10分鐘）參考說辭：本任務在Animate動畫中為紅包按鈕加入ActionScript腳本用于控制動畫。當沒有點中正確的紅包時紅包雨不停，在幀上的ActionScript腳本自動跳到第1幀重新開始動畫，只到點到正確的紅包按鈕ActionScript腳本跳到中獎信息幀。通過動畫以實現網站與消費者之間的互動。互動討論（5分鐘）1、你覺得Animate2020軟件最難掌握的工具是什么？觀察環節(5分鐘)：你覺得以下圖片有什么特別之處？通過觀察，讓學生進一步加深對動畫的興趣。2、教學內容任務三：使用Animate2020制作節日活動動畫1.動畫的基本類型(1)逐幀動畫。(2)傳統補間(3)補間動畫(4)補間形狀(5)運動引導層動畫(6)遮罩層動畫2.圖層在Flash中,圖層是最基本也是最重要的概念之一。圖層基本可以處理所有對象,包括文本、圖形等。任務3.1遮罩文字效果任務實施1.教師布置任務，發送網頁素材和效果圖，演示遮罩文字的操作方法。(1)運行Animate2020,執行“文件”→“新建”菜單命令,在彈出的“新建文檔”對話框中,選擇預設中的“標準”，,然后單擊“創建”按鈕,如圖8—26所示。圖8—26“新建文檔”對話框(2)選擇菜單欄的“窗口”→“庫”菜單命令,打開庫面板，在庫面板中單擊新建元件按鈕，在彈出的“創建新元件”對話框中,在名稱欄輸入文字，如圖8-27所示。圖8—27創建新元件對話框(3)設置工具面板的前景色為黑色，如圖9-28所示，單擊文字工具，在文字元件中輸入一個“福”字。圖8—29創建新元件(4)選擇菜單欄的“窗口”→“屬性”菜單命令，打開屬性面板，選擇工具欄的選擇工具，單擊“福”字，在屬性面板里設置文字大小為150px，如圖8-30所示。圖8-30屬性面板圖8-31福到了（5）單擊工具欄的任意變形工具，將文字180度翻轉，如圖8-31所示。（6）在庫面板中單擊新建元件按鈕，在彈出的“創建新元件”對話框中,在名稱欄輸入遮罩文字，類型選擇為“影片剪輯”，單擊“確定”，如圖8-27所示。圖8-32創建新元件（7）將庫面板的文字元件拖動到影片剪輯窗口中，再新建圖層，設置前景色為紅色，在圖層中使用矩形工具繪制一個矩形，再單擊菜單欄“修改”→“變形”→“縮放與旋轉”，在彈出的對話框中設置旋轉為45度，單擊“確定”，如圖8-33所示圖8-33縮放和旋轉對話框（8）在新建圖層2的文字上雙擊，修改圖層名為背景，并將它拖動到圖層1的下面。再修改圖層1的名字為底字，并調整文字的位置使文字能在紅色背景的中心，如圖8-34所示圖8-34圖層操作圖8-35圖層操作（9）在“底字”圖層的上面再新一個圖層，并命名為遮罩文字，再次將文字元件拖動到“遮罩文字”圖層上，并調整位置使兩個文字元件重合，如圖8-35所示。（10）選擇“遮罩文字”圖層的文字，在屬性面板中選擇色彩效果下的色調選項，并將色調的調到最右邊使文字變成白色，如圖8-36所示。圖8-36屬性面板設置（11）在最上層新建圖層命名為遮罩，設置前景色為黑色，用矩形工具繪制一個長方形，并用任意變形工具旋轉矩形，如圖8-37所示。圖8-37遮罩層內容（12）黑色矩形的上面右鍵在彈出的菜單上面選擇“轉換為元件”，在彈出的“轉換為元件“對話框中單擊”，單擊“確定”。（13）在時間軸上20幀上按左鍵拖動，選擇全部圖層的20幀。在面板的“插入鍵”按鈕上左鍵按著，在彈出的列表中選擇幀，為全部圖層添加幀，如圖8-38所示。圖8-38插入幀（14）單擊遮罩層的黑色矩形，右鍵在彈出的菜單中選擇“創建補間動畫”，單擊遮罩層最后一幀，將黑色矩形拖動到文字的下方，如圖8-39所示。圖8-39添加補間動畫圖8-40設置遮罩（15）在遮罩層上右鍵，在彈出的菜單中選擇“遮罩層”，如圖8-40所示。這樣黑色矩形經過的地方，下方白色的文字就能顯示出來，就像文字發光一樣。（16）單擊舞臺左上方“←”，返回“場景1”，將庫中的“遮罩文字”拖到舞臺上，按“Ctrl+Enter”測試動畫，如圖8-41所示。圖8-41測試動畫（17）單擊菜單欄的“文件”→“保存”,在保存對話框中輸入文件名為簡單動畫，類型為Animate文檔（*.fla），完成操作。2．學生按要求上機實踐完成任務。3．教師指導檢查任務完成效果。小結：本任務通過Animate遮罩動畫制作網頁常看到的發光文字效果。發光效果不僅僅只有文字，還可以是圖像，如果大家留意就會發現很多網址上也會有發光的動畫效果。任務3.2制作按鈕任務實施1.教師布置任務，演示制作按鈕的操作方法。(1)運行Animate2020,執行“文件”→“打開”菜單命令,在彈出的“打開”對話框中,選擇上次任務文件簡單動畫.fla。（2）執行“文件”→“導入”→“導入到庫”菜單命令,在“導入”對話框中,打開圖片文件“紅包.jpg”、“背景云1.jpg”、“背景云2.jpg”，在庫面板中我們就看到了導入的三個jpg內容。（3）單擊庫面板的新建元件按鈕，在打開的創建新元件對話框中在名稱中輸入紅包，類型選擇為按鈕，單擊“確定”，如圖8-42所示。圖8-42創建新元件對話框（3）將庫面板中的圖像紅包.jpg拖動到按鈕舞臺上，打開屬性面板設置圖像寬為50，高為50。（4）在時間軸面板上點擊關鍵幀按鈕分別為“指針經過”、“按下”、“點擊”添加關鍵幀，如圖8-43所示。圖8-43按鈕狀態鍵（5）單擊庫面板的新建元件按鈕，在打開的創建新元件對話框中在名稱中輸入紅包雨，類型選擇為圖形，單擊“確定”，如圖8-44所示。圖8-44創建新元件（6）在紅包雨元件的舞臺上放多個紅包按鈕，返回場景1。（7）在場景新建兩個圖層，分別命名為背景、前景，調整圖層的位置，將背景層放在最底部，前景圖層放在最上面，再把圖層1重命名為福字，如圖8-45所示。圖8-45新建圖層（8）在背景圖層放背景云1.jpg、在前景圖層上放背景云2.jpg，調整圖像的位置，如圖8-46所示。圖8-46添加背景（9）在前景圖層下新建圖層并命名為紅包雨，把庫面板中的紅包雨元件拖動到舞臺上，并調整位置，如圖8-47所示。圖8-47添加紅包雨（10）在40幀處拖動鼠標從第一個圖層到最后一個圖層并添加幀，在紅包雨元件上右鍵選擇“創建補間動畫”，并在40幀處向下移動紅包雨元件，完成補間動畫，如圖8-48所示。圖8-48創建補間動畫（11）單擊菜單欄“文件”→“保存”，Ctrl+Enter測試動畫，完成操作。2．學生按要求上機實踐完成任務。3．教師指導檢查任務完成效果。小結：本任務是在Animate下制作紅包雨動畫效果，這在很多網址、APP上都有搶紅包活動，點擊紅包搶優惠，在Animate中按鈕主要是負責鼠標的各種事件處理。任務3.3ActionScript腳本任務實施1.教師布置任務，演示ActionScript腳本的操作方法。(1)運行Animate2020,執行“文件”→“打開”菜單命令,在彈出的“打開”對話框中,選擇上次任務文件簡單動畫.fla。(2)在紅包雨圖層的上面新建一個圖層并命名為紅包,單擊菜單欄“窗口”→“庫”，打開庫面板，將紅包按鈕拖動到新建的紅包圖層，如圖8-49所示。圖8-49新建紅包圖層（3）單擊菜單欄“窗口”→“屬性”，打開屬性面板，選擇紅包按鈕，在屬性面板中實例名稱輸入btn，如圖8-50所示。圖8-50屬性面板（4）在紅包按鈕上面右鍵，在彈出的菜單中選擇“創建補間動畫”，選擇40幀，再將紅包按鈕移動一下位置，如圖8-51所示。圖8-51補間動畫（5）選擇第40幀，單擊菜單欄“窗口”→“動作”，打開動作面板，單擊動作面板的“代碼片斷”按鈕，在彈出的對話框中選擇“ActionScript”→“時間軸導航”→“在此幀處停止”，雙擊“在此幀處停止”，Animate就會在自動添加一個Action圖層并在40幀處加上stop();這個語句，同時40幀上還會有一a，表示該幀上有動作，如圖8-52所示。圖8-52動作面板（6）修改stop();為gotoAndPlay(1);讓動畫到第40幀的時候再從頭開始。（7）在前景圖層下新建一個圖層并命名為中獎，在第41幀處單擊時間軸面板插入關鍵幀按鈕，同時在前景、背景圖層的41幀處同樣插入關鍵幀，如圖8-53所示。圖8-53插入關鍵鍵（8）中將圖層中使用文字工具，在舞臺中輸入“恭喜您抽中巧克力一盒”，打開屬性面板，設置大小為50Pt，填充顏色為紅色，調整文字位置，如圖8-54所示。圖8-54添加文字（9）選擇Action圖層的第40幀，單擊菜單欄“窗口”→“動作”，打開動作面板，單擊動作面板的“代碼片斷”按鈕，在彈出的對話框中選擇“ActionScript”→“時間軸導航”→“單擊以跳以轉到幀并停止”，單擊舞臺中紅包圖層的紅包按鈕，雙擊“單擊以跳以轉到幀并停止”，如圖8-55所示。圖8-55添加按鈕動作（10）將gotoAndStop(5);修改為gotoAndStop(41);完成ActionScript的腳本添加，關閉動作面板，Ctrl+s保存文件，Ctrl+Enter測試動畫。(11)單擊菜單欄“文件”→“發布設置”，在打開的發布設置對話框中單擊“發布”，如圖8-56所示，文件夾中就會有擴展名為.swf和.html的文件。圖8-56發布設置2．學生按要求上機實踐完成任務。3．教師指導檢查任務完成效果。教師總結（10分鐘）(1)繪圖和編輯圖形不但是創作Animate動畫的基本功,也是進行多媒體創作的基本功。在繪圖過程中要學習怎樣使用元件來組織圖形元素,這是Animate動畫的一個特點。(2)補間動畫是整個Animate動畫設計的核心,也是Animate動畫的最大優點,它有動畫補間和形狀補間兩種形式。(3)遮罩是Animate動作創作中不可缺少的,使用遮罩配合補間動畫,可以創建更多豐富多彩的動畫效果。(4)幾種類型幀的小結:關鍵幀在時間軸上顯示為實心圓點,空白關鍵幀在時間軸上顯示為空心圓點,普通幀在時間軸上顯示為灰色填充的小方格。同一圖層中,在前一個關鍵幀的后面任何一幀處插入關鍵幀,都是復制前一個關鍵幀上的對象,并可對其進行編輯;如果插入普通幀,是延續前一個關鍵幀上的內容,不可對其進行編輯;如果插入空白關鍵幀,則可以清除該幀后面的延續內容,可以在空白關鍵幀上添加新的實例對象。另外,關鍵幀和空白關鍵幀上都可以添加幀動作腳本,普通幀上則不能。(5)幾種類型元件的小結:影片剪輯元件可以理解為電影中的小電影,可以完全獨立于主場景時間軸,并且可以重復播放。按鈕元件實際上是一個只有4幀的影片剪輯,但它的時間軸不能播放,只是根據鼠標指針的動作做出簡單的響應,并轉到響應的幀。通過給舞臺上的按鈕實例添加動作語句而實現Flash影片強大的交互性。圖形元件是可以重復使用的靜態圖像,或連接到主影片時間軸上的可重復播放的動畫片段。圖形元件與影片的時間軸同步運行。思考并討論（5分鐘）同學們將學習過程中的疑難問題記錄下來,和大家交