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

本章簡(jiǎn)介：

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

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

本章簡(jiǎn)介：

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

關(guān)于Animate組件

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