項(xiàng)目8制作交互動(dòng)畫Animate動(dòng)畫制作立體化教程（Animate2021）（微課版）新形態(tài)立體化精品系列教材2任務(wù)8.1制作電子菜單交互動(dòng)畫任務(wù)8.2制作抽獎(jiǎng)轉(zhuǎn)盤交互動(dòng)畫內(nèi)容導(dǎo)航綜合實(shí)戰(zhàn)任務(wù)8.1?制作電子菜單交互動(dòng)畫米拉翻看了電子菜單交互動(dòng)畫的任務(wù)資料，結(jié)合自身的經(jīng)歷構(gòu)思出電子菜單的大概畫面：菜單由4個(gè)頁(yè)面組成，其中第1頁(yè)是菜單的首頁(yè)，第2～4頁(yè)是店鋪的菜式頁(yè)面，在每頁(yè)中添加控制按鈕，通過(guò)這些控制按鈕可以跳轉(zhuǎn)到所需頁(yè)面?！救蝿?wù)描述】任務(wù)背景中味食堂由于菜式較多，特意引進(jìn)了電子菜單技術(shù)，使消費(fèi)者能夠通過(guò)座位上的橫屏顯示器瀏覽菜單，現(xiàn)需要設(shè)計(jì)師根據(jù)店內(nèi)菜式制作一個(gè)電子菜單交互動(dòng)畫。任務(wù)目標(biāo)①

制作尺寸為1440像素×810像素，幀速率為24幀/秒，平臺(tái)類型為ActionScript3.0的動(dòng)畫文件。②

導(dǎo)入所需的素材，結(jié)合文本工具和繪圖工具制作菜單的首頁(yè)和菜式頁(yè)面，其中首頁(yè)和菜式頁(yè)面中的元素既保持統(tǒng)一，又稍有區(qū)別，以豐富視覺(jué)效果。③

制作控制按鈕，并為控制按鈕添加腳本語(yǔ)言，達(dá)到通過(guò)單擊每頁(yè)的控制按鈕能夠跳轉(zhuǎn)到目的頁(yè)面的效果，由消費(fèi)者自己控制菜單。知識(shí)要點(diǎn)“動(dòng)作”面板、“代碼片斷”面板?！救蝿?wù)描述】本任務(wù)的參考效果如上圖所示【知識(shí)準(zhǔn)備】1．ActionScript與JavaScript交互動(dòng)畫的核心便是為動(dòng)畫文件中的元素添加腳本語(yǔ)言，即代碼，而不同平臺(tái)類型的文件添加的腳本語(yǔ)言有所不同，通用的腳本語(yǔ)言有ActionScript與JavaScript兩類，它們都是基于對(duì)象和事件驅(qū)動(dòng)，并相對(duì)安全的客戶端腳本語(yǔ)言。ActionScript

常用于ActionScript3.0、AIRforDesktop、AIRforiOS或AIRforAndroid平臺(tái)類型的文件中。JavaScript

常用于HTML5Canvas平臺(tái)類型的文件中，可以使Web頁(yè)面響應(yīng)用戶的動(dòng)作?！局R(shí)準(zhǔn)備】2．交互動(dòng)畫的基礎(chǔ)要素（1）變量在交互動(dòng)畫中，變量是存儲(chǔ)和跟蹤數(shù)據(jù)的容器，用來(lái)記錄用戶輸入、保存狀態(tài)信息或控制動(dòng)畫的行為。設(shè)置實(shí)例名稱需要注意以下3點(diǎn)。

變量名只能由字母、數(shù)字和下劃線“_”組成，以字母開(kāi)頭，并且不能有空格和其他符號(hào)。

變量名不能使用ActionScript中的關(guān)鍵字，如as、else、if、new、each等。

在命名變量時(shí)，最好使變量的意義與其代表的意思對(duì)應(yīng)，以免出現(xiàn)錯(cuò)誤?！局R(shí)準(zhǔn)備】2．交互動(dòng)畫的基礎(chǔ)要素（2）數(shù)據(jù)類型數(shù)據(jù)類型簡(jiǎn)單來(lái)說(shuō)就是變量值的類型。如為變量賦值35，由于35為數(shù)值，數(shù)據(jù)類型則為數(shù)字?jǐn)?shù)據(jù)類型。除此之外，還有以下3種數(shù)據(jù)類型。字符串?dāng)?shù)據(jù)類型

字符串包含拉丁字母、漢字、阿拉伯?dāng)?shù)字、希臘字母和符號(hào)，但需使用雙引號(hào)或單引號(hào)引起來(lái)。布爾數(shù)據(jù)類型

只有true和false兩個(gè)數(shù)值，如“varcity1=true”，或“varcity1=false”。Null數(shù)據(jù)類型

只有Null一個(gè)數(shù)值，如“varcity1=Null”，Null是一個(gè)關(guān)鍵字，表示該變量沒(méi)有值?！局R(shí)準(zhǔn)備】2．交互動(dòng)畫的基礎(chǔ)要素（3）表達(dá)式和運(yùn)算符在對(duì)變量進(jìn)行賦值、改變、計(jì)算等一系列操作時(shí)，涉及表達(dá)式和運(yùn)算符。如下圖所示?！局R(shí)準(zhǔn)備】2．交互動(dòng)畫的基礎(chǔ)要素（4）函數(shù)函數(shù)是一個(gè)擁有名字的一系列ActionScript或JavaScript腳本語(yǔ)言的有效組合，只要這個(gè)函數(shù)被調(diào)用，就意味著這一系列腳本語(yǔ)言可以按順序進(jìn)行解釋并執(zhí)行對(duì)應(yīng)操作。常用的函數(shù)有以下4種。play函數(shù)：用于播放時(shí)間軸。stop函數(shù)：用于暫停播放時(shí)間軸。gotoAndPlay函數(shù)：用于跳轉(zhuǎn)到指定幀并播放，參數(shù)為幀編號(hào)或幀標(biāo)簽。gotoAndStop函數(shù)：用于跳轉(zhuǎn)到指定幀并暫停，參數(shù)為幀編號(hào)或幀標(biāo)簽?！局R(shí)準(zhǔn)備】2．交互動(dòng)畫的基礎(chǔ)要素（5）語(yǔ)法規(guī)則在添加腳本語(yǔ)言時(shí)，還需要注意語(yǔ)法規(guī)則。常見(jiàn)的語(yǔ)法包括點(diǎn)語(yǔ)法、括號(hào)和分號(hào)、關(guān)鍵字、字母的大小寫、注釋等類型，這些語(yǔ)法類型的作用和使用要求各不相同，因此具有不同的規(guī)則，如下。點(diǎn)語(yǔ)法01括號(hào)和分號(hào)02關(guān)鍵字03字母的大小寫04注釋05【知識(shí)準(zhǔn)備】2．交互動(dòng)畫的基礎(chǔ)要素（6）語(yǔ)句腳本語(yǔ)言主要有兩種語(yǔ)句。一種是條件語(yǔ)句，如if、switch；另一種是循環(huán)語(yǔ)句，如for、while。單if語(yǔ)句if…else語(yǔ)句if…elseif語(yǔ)句switch語(yǔ)句for語(yǔ)句for…in語(yǔ)句while語(yǔ)句do…while語(yǔ)句【知識(shí)準(zhǔn)備】3．“動(dòng)作”面板（1）認(rèn)識(shí)“動(dòng)作”面板選擇【窗口】/【動(dòng)作】命令，或按【F9】鍵，可打開(kāi)下圖所示的“動(dòng)作”面板，該面板由腳本導(dǎo)航器、“使用向?qū)砑印卑粹o、工具欄和腳本編輯窗口4部分組成?！局R(shí)準(zhǔn)備】3．“動(dòng)作”面板（2）使用“動(dòng)作”面板在“動(dòng)作”面板中可以添加腳本，主要有以下4種方式。添加幀腳本01引入第三方腳本02添加全局腳本03使用向?qū)砑?4【知識(shí)準(zhǔn)備】4．“代碼片斷”面板Animate將一些常用的腳本語(yǔ)言放置在“代碼片斷”面板中。選擇【窗口】/【代碼片斷】命令，打開(kāi)“代碼片斷”面板，腳本語(yǔ)言被放置在其中的ActionScript和HTML5Canvas文件夾中，如左圖所示?！救蝿?wù)實(shí)施】米拉為保證菜單的統(tǒng)一性，計(jì)劃使用相同的圖像素材分別在3個(gè)關(guān)鍵幀中制作菜單的3個(gè)頁(yè)面，并為廚師圖像制作動(dòng)態(tài)效果，具體操作如下。1．制作菜單頁(yè)面01復(fù)制特效圖像02制作第2頁(yè)菜單03修改第3頁(yè)菜單的文本04修改第4頁(yè)菜單的文本【任務(wù)實(shí)施】由于實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)需要媒介來(lái)添加代碼，因此米拉準(zhǔn)備制作“首頁(yè)”“上一頁(yè)”“下一頁(yè)”控制按鈕來(lái)充當(dāng)媒介，具體操作如下。2．制作控制按鈕01創(chuàng)建“下一頁(yè)”、“上一頁(yè)”元件02創(chuàng)建“首頁(yè)”元件03在第2幀中添加控制按鈕后的效果04在第1幀中添加控制按鈕后的效果【任務(wù)實(shí)施】由于添加腳本語(yǔ)言需要為控制按鈕設(shè)置實(shí)例名稱才能起效，因此米拉打算先為3個(gè)控制按鈕設(shè)置實(shí)例名稱，再使用“動(dòng)作”“代碼片斷”面板添加與編輯代碼，制作交互效果，具體操作如下。3．為控制按鈕制作交互效果01設(shè)置“下一頁(yè)”元件的實(shí)例名稱

02“時(shí)間軸”面板【任務(wù)實(shí)施】3．為控制按鈕制作交互效果04為“下一頁(yè)”實(shí)例添加腳本語(yǔ)言03為菜單首頁(yè)添加腳本語(yǔ)言【任務(wù)實(shí)施】3．為控制按鈕制作交互效果06為3個(gè)實(shí)例添加腳本語(yǔ)言05為“上一頁(yè)”實(shí)例添加腳本語(yǔ)言07“動(dòng)作”面板的最終效果21任務(wù)8.1制作電子菜單交互動(dòng)畫任務(wù)8.2制作抽獎(jiǎng)轉(zhuǎn)盤交互動(dòng)畫內(nèi)容導(dǎo)航綜合實(shí)戰(zhàn)任務(wù)8.2?制作抽獎(jiǎng)轉(zhuǎn)盤交互動(dòng)畫米拉接到了制作抽獎(jiǎng)轉(zhuǎn)盤交互動(dòng)畫的任務(wù)，她想到在網(wǎng)上看到過(guò)的多種抽獎(jiǎng)轉(zhuǎn)盤交互動(dòng)畫大多數(shù)都是通過(guò)單擊畫面中的某個(gè)元素來(lái)控制動(dòng)畫的播放。于是她向老洪請(qǐng)教如何實(shí)現(xiàn)這樣的效果，老洪告訴米拉可以使用事件來(lái)達(dá)到這個(gè)目的?；趯?duì)提升動(dòng)畫視覺(jué)效果的考慮，她還準(zhǔn)備為鼠標(biāo)指針制作紅包跟隨效果?！救蝿?wù)描述】任務(wù)背景某某大型商場(chǎng)為慶賀春節(jié)的到來(lái)，準(zhǔn)備開(kāi)展促銷活動(dòng)，凡是消費(fèi)滿100元的顧客都能參與轉(zhuǎn)盤抽獎(jiǎng)。考慮到動(dòng)畫形式的轉(zhuǎn)盤抽獎(jiǎng)比實(shí)體轉(zhuǎn)盤抽獎(jiǎng)具備更高的靈活性和成本效益，也更方便記錄數(shù)據(jù)，同時(shí)視覺(jué)效果也更為美觀，現(xiàn)需要設(shè)計(jì)師制作一個(gè)抽獎(jiǎng)轉(zhuǎn)盤交互動(dòng)畫，通過(guò)鼠標(biāo)的單擊、移動(dòng)等不同狀態(tài)來(lái)控制抽獎(jiǎng)轉(zhuǎn)盤轉(zhuǎn)動(dòng)的效果。任務(wù)目標(biāo)①

制作尺寸為1280像素×720像素，幀速率為24幀/秒，平臺(tái)類型為ActionScript3.0的動(dòng)畫文件。②

制作抽獎(jiǎng)轉(zhuǎn)盤的轉(zhuǎn)動(dòng)效果，通過(guò)添加代碼來(lái)控制動(dòng)畫的播放和暫停，達(dá)成抽獎(jiǎng)的目的。③

在抽獎(jiǎng)動(dòng)畫中添加鼠標(biāo)指針跟隨效果，由移動(dòng)鼠標(biāo)指針帶來(lái)紅包飄落動(dòng)畫，增強(qiáng)抽獎(jiǎng)活動(dòng)的氛圍感。知識(shí)要點(diǎn)“代碼片斷”面板。【任務(wù)描述】本任務(wù)的參考效果如上圖所示【知識(shí)準(zhǔn)備】1．事件

（1）事件內(nèi)容事件包括添加事件、移除事件、是否包含指定事件等內(nèi)容。添加事件

若要為某個(gè)實(shí)例添加事件，首先需要在“屬性”面板中設(shè)置實(shí)例名稱，然后在幀腳本中應(yīng)用addEventListener函數(shù)。移除事件removeEventListener函數(shù)是一種用于從HTML元素中移除事件監(jiān)聽(tīng)器的函數(shù)，使用該函數(shù)可以移除通過(guò)addEventListener函數(shù)為實(shí)例添加的事件。是否包含指定事件

若要查看HTML元素上已添加的事件監(jiān)聽(tīng)器，使用getEventListeners函數(shù)?！局R(shí)準(zhǔn)備】1．事件（2）觸發(fā)事件制作交互動(dòng)畫時(shí)，有鼠標(biāo)事件（MouseEvent）、鍵盤事件（KeyBoardEvent）和幀事件（EN_x0002_TER_FRAME）3種觸發(fā)事件的方式。鼠標(biāo)事件

當(dāng)用戶操作影片中的一個(gè)按鈕時(shí)，會(huì)發(fā)生鼠標(biāo)事件。鍵盤事件用戶操作鍵盤上的按鍵時(shí)，會(huì)發(fā)生鍵盤事件。幀事件

幀事件是交互動(dòng)畫的核心事件，能夠控制代碼跟隨Animate的幀頻播放，即播放每一幀都會(huì)觸發(fā)相應(yīng)的動(dòng)作或代碼?！局R(shí)準(zhǔn)備】1．事件（3）指定事件處理的目標(biāo)通過(guò)事件可以控制當(dāng)前影片、其他影片和外部應(yīng)用程序3個(gè)主要目標(biāo)。當(dāng)前影片

當(dāng)前影片是一個(gè)相對(duì)目標(biāo)，包含觸發(fā)某個(gè)動(dòng)作的按鈕或幀。其他影片其他影片是一個(gè)傳達(dá)目標(biāo)。將某個(gè)事件分配給某個(gè)按鈕或者影片剪輯實(shí)例。外部應(yīng)用程序外部應(yīng)用程序是一個(gè)外部目標(biāo)，不在動(dòng)畫文件內(nèi)，引用外部源需要外部應(yīng)用程序的幫助，目標(biāo)可以是Web瀏覽器、Flash程序、Web服務(wù)器或其他應(yīng)用程序?！局R(shí)準(zhǔn)備】2．播放和停止動(dòng)畫在Animate中，除非添加play和stop語(yǔ)句，否則動(dòng)畫一旦開(kāi)始播放，它將按照時(shí)間軸的幀順序從頭播放到尾。如下圖所示?！局R(shí)準(zhǔn)備】3．鼠標(biāo)指針跟隨動(dòng)畫鼠標(biāo)指針跟隨動(dòng)畫的原理是為舞臺(tái)中的某個(gè)元素添加腳本語(yǔ)言，使其跟隨鼠標(biāo)指針移動(dòng)。簡(jiǎn)單來(lái)說(shuō)便是使用這個(gè)元素代替鼠標(biāo)指針?！皠?dòng)作”面板中將出現(xiàn)如下代碼，表示已經(jīng)將該元素的x、y坐標(biāo)等同于鼠標(biāo)指針的x、y坐標(biāo)?！救蝿?wù)實(shí)施】米拉需要先制作出轉(zhuǎn)盤的轉(zhuǎn)動(dòng)效果和交互按鈕，為后續(xù)添加播放和停止動(dòng)畫腳本代碼提供媒介，具體操作如下。1．制作抽獎(jiǎng)轉(zhuǎn)盤的轉(zhuǎn)動(dòng)效果01輸入文本02輸入并編輯文本03轉(zhuǎn)盤效果【任務(wù)實(shí)施】米拉準(zhǔn)備借助轉(zhuǎn)盤中心的“開(kāi)始”按鈕來(lái)控制動(dòng)畫的播放與停止，但由于播放和停止是兩種不同的效果，而按鈕只有一個(gè)，因此她需要通過(guò)鼠標(biāo)的單擊、移動(dòng)等不同狀態(tài)來(lái)創(chuàng)建鼠標(biāo)事件，這樣才能在鼠標(biāo)的不同狀態(tài)下響應(yīng)對(duì)應(yīng)的事件，具體操作如下。2．制作鼠標(biāo)控制動(dòng)畫播放和停止的效果01創(chuàng)建鼠標(biāo)事件【任務(wù)實(shí)施】2．制作鼠標(biāo)控制動(dòng)畫播放和停止的效果02制作動(dòng)畫播放效果03制作動(dòng)畫暫停效果【任務(wù)實(shí)施】米拉準(zhǔn)備將搜集到的紅包動(dòng)畫效果添加到轉(zhuǎn)盤動(dòng)畫中，再為其制作鼠標(biāo)指針跟隨效果，使其能夠跟隨鼠標(biāo)指針移動(dòng)，具體操作如下。3．制作鼠標(biāo)指針跟隨效果

制作鼠標(biāo)指針跟隨效果34任務(wù)8.1制作電子菜單交互動(dòng)畫任務(wù)8.2制作抽獎(jiǎng)轉(zhuǎn)盤交互動(dòng)畫內(nèi)容導(dǎo)航綜合實(shí)戰(zhàn)綜合實(shí)戰(zhàn)

制作“趣味問(wèn)答”交互動(dòng)畫米拉將自己制作的電子菜單交互動(dòng)畫和抽獎(jiǎng)轉(zhuǎn)盤交互動(dòng)畫交給老洪，并說(shuō)了自己的心得。老洪感覺(jué)米拉已經(jīng)掌握了制作交互動(dòng)畫的精髓，但仍有提升的空間，特別是在動(dòng)畫創(chuàng)意形式方面。因此，老洪便交給米拉制作“趣味問(wèn)答”交互動(dòng)畫的任務(wù)，要求她根據(jù)客戶提供的題目制作出消費(fèi)者通過(guò)選擇問(wèn)題的選項(xiàng)，實(shí)現(xiàn)跳轉(zhuǎn)到下一個(gè)問(wèn)題的動(dòng)態(tài)效果，以引導(dǎo)消費(fèi)者完成問(wèn)答環(huán)節(jié)?！緦?shí)戰(zhàn)描述】實(shí)戰(zhàn)背景“檸檬之家”水果實(shí)體店面對(duì)近期銷售額下降的趨勢(shì)，準(zhǔn)備在店鋪內(nèi)投放“趣味問(wèn)答”交互動(dòng)畫，以邀請(qǐng)進(jìn)店的消費(fèi)者填寫問(wèn)題，收集消費(fèi)者對(duì)購(gòu)買水果的考慮事項(xiàng)，以調(diào)整經(jīng)營(yíng)方向，設(shè)計(jì)師需要根據(jù)問(wèn)答文檔制作交互動(dòng)畫。實(shí)戰(zhàn)目標(biāo)①

制作尺寸為1280像素×7200像素，幀速率為24幀/秒，平臺(tái)類型為ActionScript3.0的動(dòng)畫文件。②

制作問(wèn)答的首頁(yè)，使消費(fèi)者能夠通過(guò)點(diǎn)擊頁(yè)面中的箭頭按鈕來(lái)跳轉(zhuǎn)頁(yè)面。為背景圖添加腳本代碼，使其能夠暫停播放；為檸檬動(dòng)態(tài)效果影片剪輯元件