二維動(dòng)畫設(shè)計(jì)軟件應(yīng)用（Animate 2022）（第2版） 課件 項(xiàng)目八 交互功能和影片輸出

項(xiàng)目八交互功能和影片輸出二維動(dòng)畫設(shè)計(jì)軟件應(yīng)用（Animate2022）項(xiàng)目導(dǎo)讀

Animate不僅讓用戶觀看自行播放的動(dòng)畫，還能夠根據(jù)用戶的選擇呈現(xiàn)出不同的動(dòng)畫內(nèi)容，甚至即時(shí)、動(dòng)態(tài)的資料，實(shí)現(xiàn)此功能的就是ActionScript，本項(xiàng)目通過Animate2022中ActionScript3.0的實(shí)例講解，使讀者掌握ActionScript語言的初步應(yīng)用，還將學(xué)習(xí)動(dòng)畫影片的輸出，方便在其他程序或網(wǎng)站中使用該動(dòng)畫產(chǎn)品。儲(chǔ)備新知識(shí)學(xué)習(xí)重點(diǎn)任務(wù)1按鈕交互——移動(dòng)的圓任務(wù)2片頭片尾交互動(dòng)畫——真人實(shí)拍互動(dòng)動(dòng)畫思考與探索項(xiàng)目?jī)?nèi)容任務(wù)3任意跳轉(zhuǎn)功能——原創(chuàng)角色展示任務(wù)4動(dòng)畫導(dǎo)出學(xué)習(xí)重點(diǎn)項(xiàng)目八交互功能和影片輸出——學(xué)習(xí)重點(diǎn)學(xué)會(huì)什么？1.認(rèn)識(shí)“動(dòng)作”面板及ActionScript3.0有關(guān)術(shù)語2.代碼的添加方法3.學(xué)會(huì)動(dòng)畫影片的輸出學(xué)習(xí)重點(diǎn)：本項(xiàng)目重點(diǎn)了解ActionScript3.0相關(guān)知識(shí)，學(xué)習(xí)添加腳本的方法，學(xué)會(huì)動(dòng)畫交互功能的實(shí)現(xiàn)和動(dòng)畫影片輸出。0102儲(chǔ)備新知識(shí)項(xiàng)目八交互功能和影片輸出——儲(chǔ)備新知識(shí)“動(dòng)作”面板ActionScript有關(guān)術(shù)語0102Action（動(dòng)作）,Event（事件）,Class(類),Function(函數(shù)),Objects(對(duì)象)項(xiàng)目八交互功能和影片輸出——儲(chǔ)備新知識(shí)03影片輸出導(dǎo)出的影片類型有：SWF影片(*.swf)、WindowsAVI(*.avi)、GIF動(dòng)畫(*.gif)、QuickTime（*.mov）、WAVAudio（*.wav）、JPEG文件序列(*.jpg)、GIF文件序列(*.gif)、PNG文件序列(*.png)。導(dǎo)出的圖像類型有：SWF影片(*.swf)、位圖(*.bmp)、JPEG圖像(*.jpg)、GIF圖像(*.gif)、PNG(*.png)。任務(wù)1按鈕交互——移動(dòng)的圓項(xiàng)目八交互功能和影片輸出——任務(wù)1任務(wù)分析：

任務(wù)1案例實(shí)際上是一個(gè)基本模型，當(dāng)學(xué)會(huì)了這一模型，再結(jié)合上漂亮的動(dòng)畫表現(xiàn)形式，那么帶有交互功能的優(yōu)秀動(dòng)畫就實(shí)現(xiàn)了。任務(wù)分析如下：首先制作一個(gè)圓從舞臺(tái)左側(cè)移動(dòng)到右側(cè)的動(dòng)畫，接下來制作三個(gè)按鈕，分別為“開始”、“暫?！焙汀爸胤拧薄Ｗ詈鬄槊恳粋€(gè)按鈕實(shí)例添加實(shí)現(xiàn)其功能的代碼。按鈕交互——移動(dòng)的圓項(xiàng)目八交互功能和影片輸出——任務(wù)1任務(wù)實(shí)施——步驟1

選擇“文件”菜單→“新建”命令，選擇“角色動(dòng)畫”→“標(biāo)準(zhǔn)”，創(chuàng)建一個(gè)新文檔。默認(rèn)工作區(qū)寬和高為640像素×480像素。任務(wù)實(shí)施——步驟2

選擇“插入”菜單→“新建元件”命令，新建一個(gè)按鈕元件，名稱設(shè)置為“開始”，利用矩形工具和文本工具創(chuàng)建“開始”按鈕。新建文件參數(shù)設(shè)置“開始”按鈕項(xiàng)目八交互功能和影片輸出——任務(wù)1任務(wù)實(shí)施——步驟3

重復(fù)步驟2，新建“暫?！卑粹o元件和“重放”按鈕元件。

任務(wù)實(shí)施——步驟4

在第1幀處，使用橢圓形工具在舞臺(tái)左側(cè)繪制圓形，選中圓形，按快捷鍵【F8】，將圓形轉(zhuǎn)換為圖形元件，在第50幀按快捷鍵【F6】插入關(guān)鍵幀，將繪制的圓形移動(dòng)到舞臺(tái)右側(cè)。在第1到50幀中間任意位置單擊右鍵，在彈出的快捷菜單中選擇“創(chuàng)建傳統(tǒng)補(bǔ)間”命令。時(shí)間軸按鈕元件任務(wù)實(shí)施——步驟5

新建“圖層2”，按組合快捷鍵【Ctrl+L】，調(diào)出庫面板，將新建的3個(gè)按鈕元件從庫中拖入到舞臺(tái)。

項(xiàng)目八交互功能和影片輸出——任務(wù)1任務(wù)實(shí)施——步驟6

選中“開始”按鈕，在右側(cè)的屬性欄中，將實(shí)例名稱修改為“kaishi_mc”，同樣方法，將“暫?！卑粹o的實(shí)例名稱修改為“zanting_mc”，將“重放”按鈕的實(shí)例名稱修改為“chongfang_mc”。任務(wù)實(shí)施——步驟7

在時(shí)間軸第一幀處，選中“開始”按鈕元件，按住快捷鍵【F9】，調(diào)出“動(dòng)作”面板。點(diǎn)擊右上方的“代碼片段”按鈕，打開“代碼片段”面板。選擇ActionScrip文件夾→“時(shí)間軸導(dǎo)航”中的“單擊以轉(zhuǎn)到幀并播放”命令。根據(jù)動(dòng)作設(shè)定的需要，修改兩個(gè)位置，其一是在代碼片段前加上“停止”代碼“stop();”，讓畫面停留在第1關(guān)鍵幀的位置上。其二是將數(shù)字“5”改為“2”，使單擊元件實(shí)例時(shí)，動(dòng)畫從第2幀開始進(jìn)行播放。此時(shí)會(huì)在時(shí)間軸的圖層頂部自動(dòng)生成一個(gè)Actions圖層，用來存放代碼，第一關(guān)鍵幀上出現(xiàn)了小寫的字母“a”。任務(wù)實(shí)施——步驟9

“重放”的動(dòng)作設(shè)定是當(dāng)舞臺(tái)中的圓運(yùn)行到最右側(cè)的時(shí)候，點(diǎn)擊“重放”按鈕，實(shí)現(xiàn)從頭播放的效果。因此，需要在動(dòng)畫的最后一幀處，選中“重放”按鈕元件，按住快捷鍵【F9】，調(diào)出“動(dòng)作”面板。在右上方找到“代碼片段”按鈕，點(diǎn)擊打開“代碼片段”面板，選擇ActionScrip文件夾→“時(shí)間軸導(dǎo)航”中的“單擊以轉(zhuǎn)到幀并播放”命令。

與“開始”按鈕的代碼修改方法相似，需要修改兩個(gè)位置，其一是在代碼片段前加上“停止”代碼，讓畫面停留在第50關(guān)鍵幀的位置上。其二是將數(shù)字“5”改為“2”，使單擊元件實(shí)例時(shí)，動(dòng)畫從第2幀開始進(jìn)行播放。項(xiàng)目八交互功能和影片輸出——任務(wù)1任務(wù)實(shí)施——步驟8

選中“暫?！卑粹o元件，按住快捷鍵【F9】，調(diào)出“動(dòng)作”面板。再次調(diào)出“代碼片段”面板，選擇ActionScrip文件夾→“時(shí)間軸導(dǎo)航”中的“單擊以轉(zhuǎn)到幀并停止”命令。可以在代碼編輯區(qū)查看到調(diào)用的代碼。根據(jù)動(dòng)畫需要，修改gotoAndStop(5);為stop();即可實(shí)現(xiàn)暫停的功能。任務(wù)實(shí)施——任務(wù)經(jīng)驗(yàn)

任務(wù)1實(shí)現(xiàn)了添加腳本，控制動(dòng)畫播放。在制作過程中，為了提升操作速度，可以使用【F9】快捷鍵快速打開“動(dòng)作”面板。另外還需要特別注意的是：手動(dòng)輸入腳本時(shí)必須在英文輸入法狀態(tài)下進(jìn)行。項(xiàng)目八交互功能和影片輸出——任務(wù)1任務(wù)實(shí)施——步驟10

代碼設(shè)置完成后，按組合快捷鍵【Ctrl+Enter】，運(yùn)行動(dòng)畫，進(jìn)行測(cè)試。動(dòng)畫運(yùn)行沒問題則動(dòng)畫制作完成。如果出現(xiàn)代碼錯(cuò)誤的提示框，則需要根據(jù)提示，結(jié)合之前的制作步驟重新檢查代碼中存在的問題，直到調(diào)試成功。任務(wù)2片頭片尾交互動(dòng)畫——真人實(shí)拍互動(dòng)動(dòng)畫任務(wù)分析：

任務(wù)2是在任務(wù)1模型動(dòng)畫的基礎(chǔ)上進(jìn)行的實(shí)際應(yīng)用，需要實(shí)現(xiàn)兩個(gè)交互功能，首先是為片頭設(shè)計(jì)代碼，實(shí)現(xiàn)點(diǎn)擊“發(fā)射”按鈕，播放動(dòng)畫。其次是為片尾設(shè)計(jì)代碼，實(shí)現(xiàn)點(diǎn)擊“再飛一次”按鈕，動(dòng)畫重新播放。真人實(shí)拍互動(dòng)動(dòng)畫項(xiàng)目八交互功能和影片輸出——任務(wù)2項(xiàng)目八交互功能和影片輸出——任務(wù)2任務(wù)實(shí)施——步驟1

選擇“文件”菜單→“打開”命令，打開“素材\項(xiàng)目八\任務(wù)2\“真人實(shí)拍互動(dòng)動(dòng)畫素材.fla”文件，素材文件是完整的動(dòng)畫文件，包括片頭、片尾兩個(gè)創(chuàng)意按鈕“發(fā)射”和“在飛一次”，我們需要做的是為動(dòng)畫添加交互代碼。任務(wù)實(shí)施——步驟2

選擇“發(fā)射”按鈕，在右側(cè)屬性欄中，將實(shí)例名稱修改為“fashe_mc”。在228幀處，選擇“再飛一次”按鈕，在右側(cè)屬性欄中，將實(shí)例名稱修改為“zailai_mc”。任務(wù)實(shí)施——步驟2

選擇第1幀，在舞臺(tái)中選中“發(fā)射”按鈕，按住快捷鍵【F9】調(diào)出“動(dòng)作面板”，找到面板右上方的“代碼片段”按鈕，打開“代碼片段”面板，選擇ActionScrip文件夾→“時(shí)間軸導(dǎo)航”中的“單擊以轉(zhuǎn)到幀并播放”命令。根據(jù)動(dòng)作設(shè)定的需要，修改兩個(gè)位置，一個(gè)是在代碼片段前加上“停止”代碼“stop();”，讓畫面停留在第1關(guān)鍵幀的位置上。另一個(gè)是將數(shù)字“5”改為“2”，使單擊元件實(shí)例時(shí)，動(dòng)畫從第2幀開始進(jìn)行播放。項(xiàng)目八交互功能和影片輸出——任務(wù)2任務(wù)實(shí)施——步驟4

“再飛一次”的動(dòng)作設(shè)定是當(dāng)動(dòng)畫結(jié)束的時(shí)候，點(diǎn)擊“再飛一次”按鈕，實(shí)現(xiàn)動(dòng)畫從頭播放的效果。因此，需要在動(dòng)畫的最后一幀處，選中“再飛一次”按鈕元件，按住快捷鍵【F9】，調(diào)出“動(dòng)作”面板，在右上方找到“代碼片段”按鈕，點(diǎn)擊打開“代碼片段”面板，選擇ActionScrip文件夾→“時(shí)間軸導(dǎo)航”中的“單擊以轉(zhuǎn)到幀并播放”命令?？梢栽诖a編輯區(qū)查看到調(diào)用的代碼。任務(wù)實(shí)施——步驟5

代碼設(shè)置完成后，按組合快捷鍵【Ctrl+Enter】，運(yùn)行動(dòng)畫，進(jìn)行測(cè)試。任務(wù)實(shí)施——任務(wù)經(jīng)驗(yàn)

任務(wù)中為按鈕實(shí)例添加代碼的時(shí)候，注意要現(xiàn)在屬性欄修改實(shí)例名稱。很多動(dòng)畫片的片頭和片尾交互按鈕都是非常有創(chuàng)意的，不管如何變化，代碼實(shí)現(xiàn)的功能基本都是一致的，方法基本相似。任務(wù)3任意跳轉(zhuǎn)代碼——原創(chuàng)角色展示任務(wù)分析：

任務(wù)3要實(shí)現(xiàn)的是時(shí)間軸上的任意跳轉(zhuǎn)功能，動(dòng)畫源文件素材已經(jīng)準(zhǔn)備好，我們需要做的是為每個(gè)按鈕添加正確的代碼，實(shí)現(xiàn)跳轉(zhuǎn)功能。原創(chuàng)角色展示項(xiàng)目八交互功能和影片輸出——任務(wù)3項(xiàng)目八交互功能和影片輸出——任務(wù)3任務(wù)實(shí)施——步驟1

選擇“文件”菜單→“打開”命令，打開“素材\項(xiàng)目八\任務(wù)3\“原創(chuàng)角色展示素材.fla”文件。任務(wù)實(shí)施——步驟2

首先來了解素材動(dòng)畫的結(jié)構(gòu)，三個(gè)按鈕元件“淘氣灰”、“小狐貍”、“小魚兒”均放在“按鈕”圖層里?！敖巧眻D層有四個(gè)關(guān)鍵幀，第1關(guān)鍵幀中放置三張角色正面圖片，第2關(guān)鍵幀中淘氣灰圖片已經(jīng)替換成了淘氣灰轉(zhuǎn)面動(dòng)畫影片剪輯。第4關(guān)鍵幀中，小狐貍圖片已經(jīng)替換成小狐貍轉(zhuǎn)面動(dòng)畫影片剪輯。第6關(guān)鍵幀中，小魚兒圖片已經(jīng)替換成小魚兒轉(zhuǎn)面動(dòng)畫影片剪輯。目前來看，四個(gè)關(guān)鍵幀中的內(nèi)容表面上看是一樣的，但是當(dāng)運(yùn)行動(dòng)畫之后，影片剪輯元件呈現(xiàn)的就是動(dòng)態(tài)的效果。任務(wù)實(shí)施——步驟3

選擇“淘氣灰”按鈕，在右側(cè)屬性欄中，將實(shí)例名稱修改為“mao_mc”。選擇“小狐貍”按鈕，在右側(cè)屬性欄中，將實(shí)例名稱修改為“huli_mc”。選擇“小魚兒”按鈕，在右側(cè)屬性欄中，將實(shí)例名稱修改為“yu_mc”。項(xiàng)目八交互功能和影片輸出——任務(wù)3任務(wù)實(shí)施——步驟4

選擇第1幀，在舞臺(tái)中選中“淘氣灰”按鈕，按住快捷鍵【F9】，調(diào)出“動(dòng)作”面板，找到面板右上方的“代碼片段”按鈕，打開“代碼片段”面板，選擇ActionScrip文件夾→“時(shí)間軸導(dǎo)航”中的“單擊以轉(zhuǎn)到幀并播放”命令。根據(jù)動(dòng)作設(shè)定的需要，將數(shù)字“5”改為“2”，使單擊“淘氣灰”按鈕時(shí)，動(dòng)畫跳轉(zhuǎn)到第2幀并播放。任務(wù)實(shí)施——步驟5

選擇第1幀，在舞臺(tái)中選中“小狐貍”按鈕，按住快捷鍵【F9】調(diào)出“動(dòng)作”面板，找到面板右上方的“代碼片段”按鈕，打開“代碼片段”面板，選擇ActionScrip文件夾→“時(shí)間軸導(dǎo)航”中的“單擊以轉(zhuǎn)到幀并播放”命令。根據(jù)動(dòng)作設(shè)定的需要，將數(shù)字“5”改為“4”，使單擊“小狐貍”按鈕時(shí)，動(dòng)畫跳轉(zhuǎn)到第4幀并播放。項(xiàng)目八交互功能和影片輸出——任務(wù)3任務(wù)實(shí)施——步驟6

選擇第1幀，在舞臺(tái)中選中“小魚兒”按鈕，按快捷鍵【F9】調(diào)出“動(dòng)作”面板，找到面板右上方的“代碼片段”按鈕，打開“代碼片段”面板，選擇ActionScrip文件夾→“時(shí)間軸導(dǎo)航”中的“單擊以轉(zhuǎn)到幀并播放”命令。根據(jù)動(dòng)作設(shè)定的需要，將數(shù)字“5”改為“6”，使單擊“小魚兒”按鈕時(shí)，動(dòng)畫跳轉(zhuǎn)到第6幀并播放。任務(wù)實(shí)施——步驟7

此時(shí)，跳轉(zhuǎn)代碼設(shè)置完成，但是還缺少一個(gè)關(guān)鍵的設(shè)置，就是為“角色”層的四個(gè)關(guān)鍵幀添加停止代碼，選中“角色”圖層第1幀，按快捷鍵【F9】，調(diào)出“動(dòng)作”面板，找到面板右上方的“代碼片段”按鈕，打開“代碼片段”面板，在英文輸入法狀態(tài)下鍵入代碼“stop();”。同樣的方法，為第2幀，第4幀和第6幀都加上“stop();”。時(shí)間軸效果項(xiàng)目八交互功能和影片輸出——任務(wù)3任務(wù)實(shí)施——步驟8

代碼設(shè)置完成后，按組合快捷鍵【Ctrl+Enter】，運(yùn)行動(dòng)畫，進(jìn)行測(cè)試?！皠?dòng)作”面板代碼任務(wù)實(shí)施——任務(wù)經(jīng)驗(yàn)

ActionScript腳本的功能強(qiáng)大，編寫程序要遵循嚴(yán)密的邏輯性，需要多加訓(xùn)練方可掌握精髓。任務(wù)4動(dòng)畫影片輸出任務(wù)分析：案例1的操作思路為，在Animate2022中打開動(dòng)畫源文件，選擇“文件”菜單→“發(fā)布設(shè)置”命令，在“發(fā)布設(shè)置”對(duì)話框中進(jìn)行相應(yīng)的設(shè)置。案例2導(dǎo)出GIF動(dòng)態(tài)圖片的方法為，選擇“文件”菜單→“導(dǎo)出”子菜單→“導(dǎo)出動(dòng)畫GIF”命令，在“導(dǎo)出圖像”對(duì)話框中進(jìn)行相應(yīng)的設(shè)置。項(xiàng)目八交互功能和影片輸出——任務(wù)4項(xiàng)目八交互功能和影片輸出——任務(wù)4案例1：步驟1打開“項(xiàng)目八交互功能和影片輸出\項(xiàng)目八素材及源文件\任務(wù)4\真人實(shí)拍互動(dòng)動(dòng)畫素材.fla”文件。步驟2選擇“文件”菜單→“發(fā)布設(shè)置”命令，打開“發(fā)布設(shè)置”對(duì)話框。步驟3勾選“Win放映文件”復(fù)選框，單擊“輸出名稱”文本框右側(cè)的“選擇發(fā)布目標(biāo)”交互功能和影片輸出項(xiàng)目八143按鈕，如圖8-22所示。在打開的對(duì)話框中輸入文件名“真人實(shí)拍互動(dòng)動(dòng)畫”，并選擇保存路徑，如圖8-23所示。單擊“保存”按鈕，返回“發(fā)布設(shè)置”對(duì)話框，此時(shí)“輸出名稱”文本框中出現(xiàn)了相應(yīng)的保存路徑和文件名稱“發(fā)布設(shè)置”對(duì)話框項(xiàng)目八交互功能和影片輸出——任務(wù)4步驟4設(shè)置成功后，單擊“發(fā)布設(shè)置”對(duì)話框下方的“發(fā)布”按鈕，即可在相應(yīng)路徑中找到保存的“真人實(shí)拍互動(dòng)動(dòng)畫.exe”文件。步驟5雙擊打開“真人實(shí)拍互動(dòng)動(dòng)畫.exe”文件，可以直接觀看動(dòng)畫項(xiàng)目八交互功能和影片輸出——任務(wù)4案例2：步驟1打開“項(xiàng)目八交互功能和影片輸出\項(xiàng)目八素材及源文件\任務(wù)4\早安表情動(dòng)畫.fla”文件。步驟2選擇“文