Animate實例教程（Animate2020）電子活頁微課版 課件 第11、12 交互式動畫的制作、組件與動畫預(yù)設(shè)

本章簡介：

Animate動畫具有交互性，可以通過對按鈕的控制來更改動畫的播放形式。本章將介紹控制動畫播放、按鈕狀態(tài)變化、添加控制命令的方法。讀者通過學(xué)習(xí)要了解并掌握如何實現(xiàn)動畫的交互功能，從而實現(xiàn)人機交互的操作方式。第11章交互式動畫的制作課堂學(xué)習(xí)目標掌握播放和停止動畫的方法掌握按鈕事件的應(yīng)用了解添加控制命令的方法11.1播放和停止動畫課堂案例——制作祝福語動態(tài)海報播放和停止動畫使用導(dǎo)入素材制作按鈕元件；使用創(chuàng)建補間形狀命令和遮罩命令制作文字動畫效果；使用動作面板添加腳本語言。效果圖11.1.1課堂案例——制作祝福語動態(tài)海報控制動畫的播放和停止所使用的動作腳本如下。（1）stop()：用于在此幀進行停止。例如：stop();（2）gotoAndStop()：用于轉(zhuǎn)到某幀并停止播放。例如：stop_Btn.addEventListener(MouseEvent.CLICK,nowstop);functionnowstop(event:MouseEvent):void{gotoAndStop(2);}11.1.2播放和停止動畫（3）gotoAndPlay()：用于轉(zhuǎn)到某幀并開始播放。例如：start_Btn.addEventListener(MouseEvent.CLICK,nowstart);functionnowstart(event:MouseEvent):void{gotoAndPlay(2);}11.1.2播放和停止動畫（4）addEventListener()：用于添加事件的方法。例如：所要接收事件的對象.addEventListener(事件類型、事件名稱、事件響應(yīng)函數(shù)的名稱)；{//此處是為響應(yīng)的事件所要執(zhí)行的動作}11.1.2播放和停止動畫11.2按鈕事件stop();//處于靜止狀態(tài)varplayBtn:playbutton=newplaybutton();//創(chuàng)建一個按鈕實例

playBtn.addEventListener(MouseEvent.CLICK,handleClick);//為按鈕實例添加監(jiān)聽器varstageW=stage.stageWidth;varstageH=stage.stageHeight;11.2按鈕事件//依據(jù)舞臺的寬和高playBtn.x=stageW/1.2;playBtn.y=stageH/1.2;this.addChild(playBtn);//添加按鈕到舞臺中，并將其放置在舞臺的左下角（“stageW/1.2”“stageH/1.2”寬和高在x軸和y軸的坐標）functionhandleClick(event:MouseEvent){ gotoAndPlay(2); }//單擊按鈕時跳到下一幀并開始播放動畫控制鼠標跟隨所使用的腳本如下。root.addEventListener(Event.ENTER_FRAME,元件實例);function元件實例(e:Event){varh:元件=new元件();//添加一個元件實例h.x=root.mouseX;h.y=root.mouseY;//設(shè)置元件實例在x軸和y軸的坐標位置root.addChild(h);//將元件實例放入場景}11.3鼠標效果使用導(dǎo)入命令導(dǎo)入素材制作元件；使用創(chuàng)建傳統(tǒng)補間命令制作傳統(tǒng)補間動畫；使用動作面板添加腳本語言。課堂練習(xí)——制作端午海報效果圖使用橢圓工具制作圓形裝飾圖形；使用文本工具輸入文本；使用創(chuàng)建元件命令制作按鈕元件。課后習(xí)題——制作動態(tài)圖標效果圖

本章簡介：

在AnimateCC中，系統(tǒng)預(yù)先設(shè)定了組件和動畫預(yù)設(shè)命令功能來協(xié)助用戶制作動畫，以提高制作效率。本章主要講解組件、動畫預(yù)設(shè)的使用方法。通過對本章的學(xué)習(xí)，讀者可以了解并掌握如何應(yīng)用系統(tǒng)自帶的功能，事半功倍地完成動畫制作。第12章組件與動畫預(yù)設(shè)課堂學(xué)習(xí)目標了解組件及組件的設(shè)置掌握動畫預(yù)設(shè)的應(yīng)用、導(dǎo)入、導(dǎo)出和刪除12.1組件關(guān)于Animate組件設(shè)置組件組件可以是單選按鈕、對話框、下拉列表、預(yù)加載欄甚至是根本沒有圖形的某個項，如定時器、服務(wù)器連接實用程序或自定義XML分析器等。對于編寫ActionScript不熟悉的用戶，可以直接向文檔添加組件。添加的組件可以在“屬性”面板中設(shè)置其參數(shù)，然后可以使用“代碼片段”面板處理其事件。用戶無需編寫任何ActionScript代碼，就可以將“轉(zhuǎn)到Web頁”行為附加到一個Button組件，用戶單擊此按鈕時會在Web瀏覽器中打開一個URL。12.1.1

關(guān)于Animate組件

選擇“窗口>組件”命令，或按Ctrl+F7組合鍵，彈出“組件”面板。AnimateCC提供了兩類組件，用于創(chuàng)建界面的UserInterface類組件和控制視頻播放的Video組件?！敖M件”面板12.1.2設(shè)置組件12.2使用動畫預(yù)設(shè)課堂案例——制作運動鞋橫版海報預(yù)覽動畫預(yù)設(shè)應(yīng)用動畫預(yù)設(shè)將補間另存為自定義動畫預(yù)設(shè)導(dǎo)出和導(dǎo)入動畫預(yù)設(shè)刪除動畫預(yù)設(shè)使用導(dǎo)入命令導(dǎo)入素材制作圖形元件，使用從頂部飛入、從底部飛入、從左邊飛入、從右邊飛入和脈搏預(yù)設(shè)制作運動鞋橫版海報動畫效果。效果圖12.2.1課堂案例—制作運動鞋橫版海報選擇“窗口>動畫預(yù)設(shè)”命令，彈出“動畫預(yù)設(shè)”面板?！皠赢嬵A(yù)設(shè)”面板12.2.2預(yù)覽動畫預(yù)設(shè)12.2.3應(yīng)用動畫預(yù)設(shè)在舞臺上選中可補間的對象（元件實例或文本字段）后，可單擊“應(yīng)用”按鈕來應(yīng)用預(yù)設(shè)。每個對象只能應(yīng)用一個預(yù)設(shè)。如果將第二個預(yù)設(shè)應(yīng)用于相同的對象，則第二個預(yù)設(shè)將替換第一個預(yù)設(shè)。應(yīng)用動畫預(yù)設(shè)12.2.4將補間另存為自定義動畫預(yù)設(shè)如果用戶想將自己創(chuàng)建的補間，或?qū)摹皠赢嬵A(yù)設(shè)”面板應(yīng)用的補間進行更改，可將它另存為新的動畫預(yù)設(shè)。新預(yù)設(shè)將顯示在“動畫預(yù)設(shè)”面板中的“自定義預(yù)設(shè)”文件夾中。應(yīng)用動畫預(yù)設(shè)12.2.5導(dǎo)入和導(dǎo)出動畫預(yù)設(shè)在AnimateCC中動畫預(yù)設(shè)除了默認預(yù)設(shè)和自定義預(yù)設(shè)外，還可以通過導(dǎo)入和導(dǎo)出的方式添加動畫預(yù)設(shè)。1．導(dǎo)出動畫預(yù)設(shè)在AnimateCC中除了導(dǎo)入動畫預(yù)設(shè)外，還可以將制作好的動畫預(yù)設(shè)導(dǎo)出為XML文件，以便與其他Animate用戶共享。在“動畫預(yù)設(shè)”面板中選擇需要導(dǎo)出的預(yù)設(shè)，單擊“動畫預(yù)設(shè)”面板右上角的選項按鈕，在彈出的菜單中選擇“導(dǎo)出”命令。2．導(dǎo)入動畫預(yù)設(shè)動畫預(yù)設(shè)存儲為XML文件，導(dǎo)入XML補間文件可將其添加到“動畫預(yù)設(shè)”面板。單擊“動畫預(yù)設(shè)”面板右上角的選項按鈕，在彈出的菜單中選擇“導(dǎo)入”命令，在彈出的“導(dǎo)入動畫預(yù)設(shè)”對話框中選擇要導(dǎo)入的文件。12.2.6刪除動畫預(yù)設(shè)可從“動畫預(yù)設(shè)”面板中刪除預(yù)設(shè)。在刪除預(yù)設(shè)時，Animate將從磁盤中刪除其XML文件。請考慮制作以后再次使用的預(yù)設(shè)的備份，方法是先導(dǎo)出這些預(yù)設(shè)的副本。在“動畫預(yù)設(shè)”面板中選擇需要刪除的預(yù)設(shè)，單擊面板下方的“刪除項目”按鈕，系統(tǒng)將會彈出