《二維動(dòng)畫(huà)設(shè)計(jì)軟件應(yīng)用（Flash CS6）》項(xiàng)目八 交互功能和影片輸出

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

Flash不僅讓用戶觀看自行播放的動(dòng)畫(huà)，還能夠根據(jù)用戶的選擇呈現(xiàn)出不同的動(dòng)畫(huà)內(nèi)容甚至即時(shí)、動(dòng)態(tài)的資料，實(shí)現(xiàn)此功能的就是ActionScript，本章通過(guò)Flash中ActionScript的實(shí)例講解，使讀者掌握ActionScript的初步應(yīng)用，還將學(xué)習(xí)Flash動(dòng)畫(huà)影片的輸出，方便在其他程序或網(wǎng)站中使用Flash動(dòng)畫(huà)。儲(chǔ)備新知識(shí)學(xué)習(xí)重點(diǎn)任務(wù)1按鈕交互——移動(dòng)的圓任務(wù)2下載進(jìn)度條思考與探索項(xiàng)目?jī)?nèi)容學(xué)習(xí)重點(diǎn)項(xiàng)目八交互功能和影片輸出——學(xué)習(xí)重點(diǎn)學(xué)會(huì)什么？1.認(rèn)識(shí)動(dòng)作面板及ActionScript有關(guān)術(shù)語(yǔ)2.向幀中添加腳本、向按鈕中添加腳本3.學(xué)會(huì)Flash動(dòng)畫(huà)影片的輸出學(xué)習(xí)重點(diǎn)：本項(xiàng)目重點(diǎn)了解ActionScript相關(guān)知識(shí)，學(xué)習(xí)在按鈕中和在幀中添加腳本的方法，學(xué)會(huì)flash動(dòng)畫(huà)交互功能的實(shí)現(xiàn)和動(dòng)畫(huà)影片輸出。0102儲(chǔ)備新知識(shí)項(xiàng)目八交互功能和影片輸出——儲(chǔ)備新知識(shí)“動(dòng)作”面板ActionScript有關(guān)術(shù)語(yǔ)0102Event（事件）：在按鈕(Button)中添加ActionScript腳本在幀(Frame)中添加ActionScript腳本Action（動(dòng)作）：用于控制在動(dòng)畫(huà)播放過(guò)程中相應(yīng)的程序流程和播放狀態(tài)，所有的ActionScript程序在動(dòng)畫(huà)中都要通過(guò)動(dòng)作體現(xiàn)出來(lái)，程序是通過(guò)動(dòng)作與動(dòng)畫(huà)發(fā)生直接聯(lián)系的。項(xiàng)目八交互功能和影片輸出——儲(chǔ)備新知識(shí)03影片輸出導(dǎo)出的影片類型有：SWF影片(*.swf)、WindowsAVI(*.avi)、GIF動(dòng)畫(huà)(*.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ù)分析：在圖層1第1幀使用繪圖工具在屏幕左側(cè)繪制圖形，在最后1幀插入關(guān)鍵幀，將繪制的圖形移動(dòng)到屏幕右側(cè)然后選擇“創(chuàng)建補(bǔ)間形狀”命令，在第1幀添加腳本。在圖層2的舞臺(tái)導(dǎo)入3個(gè)新建的按鈕元件，分別進(jìn)行腳本編輯，控制圖層1中圖形的播放、暫停和重放。按鈕交互——移動(dòng)的圓項(xiàng)目八交互功能和影片輸出——任務(wù)1任務(wù)實(shí)施——步驟1

選擇“文件”→“新建”菜單命令，新建一個(gè)flash文檔。設(shè)置寬、高為550像素×400像素。任務(wù)實(shí)施——步驟2

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

在第1幀利用“橢圓”繪圖工具在舞臺(tái)左側(cè)繪制圓形并填充，在第50幀插入關(guān)鍵幀，將繪制的圓形移動(dòng)到舞臺(tái)右側(cè)。在第1幀中添加以下ActionScrip腳本：stop();選擇第1幀，鼠標(biāo)右鍵單擊，在彈出的菜單中選擇“創(chuàng)建補(bǔ)間形狀”。任務(wù)實(shí)施——步驟4

新建圖層2，將新建的3個(gè)按鈕元件導(dǎo)入到舞臺(tái)。時(shí)間軸按鈕元件項(xiàng)目八交互功能和影片輸出——任務(wù)1任務(wù)實(shí)施——步驟5

添加代碼，選中舞臺(tái)上的“開(kāi)始”按鈕，在“動(dòng)作”面板添加以下代碼：on(release){ play(); }任務(wù)實(shí)施——步驟6添加代碼，選中舞臺(tái)上的“暫?！卑粹o，在“動(dòng)作”面板添加以下代碼：on(release){ stop();}任務(wù)實(shí)施——步驟7添加代碼，選中舞臺(tái)上的“重放”按鈕，在“動(dòng)作”面板添加以下代碼：on(release){ gotoAndplay(2); }任務(wù)實(shí)施——任務(wù)經(jīng)驗(yàn)本實(shí)例通過(guò)給按鈕添加腳本，控制動(dòng)畫(huà)播放，可以利用F9鍵快速打開(kāi)“動(dòng)作”面板，腳本的標(biāo)點(diǎn)符號(hào)必須為英文輸入法環(huán)境之下的。項(xiàng)目八交互功能和影片輸出——任務(wù)1任務(wù)實(shí)施——步驟8

保存文件，然后按“Ctrl+Enter”鍵播放動(dòng)畫(huà)查看效果。任務(wù)2加載進(jìn)度條任務(wù)分析：利用“矩形”繪圖工具和“形狀補(bǔ)間”制作進(jìn)度條影片剪輯元件，在場(chǎng)景1的圖層1中導(dǎo)入進(jìn)度條影片剪輯元件，延續(xù)到第14幀，在第15幀導(dǎo)入圖片延續(xù)到第30幀。在圖層2的第1幀、第14幀和第15幀添加代碼，控制文件加載和播放。加載進(jìn)度條項(xiàng)目八交互功能和影片輸出——任務(wù)2項(xiàng)目八交互功能和影片輸出——任務(wù)2任務(wù)實(shí)施——步驟1

選擇“文件”→“新建”菜單命令，新建一個(gè)flash文檔。設(shè)置寬、高為550像素×400像素。任務(wù)實(shí)施——步驟2選擇“插入”→“新建元件”菜單命令，新建一個(gè)影片剪輯元件，名稱為“進(jìn)度條”，在“屬性”選項(xiàng)板中設(shè)置實(shí)例名稱為“bar”，在舞臺(tái)上利用長(zhǎng)方形工具畫(huà)一個(gè)進(jìn)度條。新建文件參數(shù)設(shè)置繪制影片剪輯“進(jìn)度條”項(xiàng)目八交互功能和影片輸出——任務(wù)2任務(wù)實(shí)施——步驟3

在第100幀處插入關(guān)鍵幀，返回到第1幀，利用變形工具，改變進(jìn)度條的形狀。任務(wù)實(shí)施——步驟4創(chuàng)建“補(bǔ)間形狀”動(dòng)畫(huà)。創(chuàng)建“補(bǔ)間形狀”動(dòng)畫(huà)變形“進(jìn)度條”項(xiàng)目八交互功能和影片輸出——任務(wù)2任務(wù)實(shí)施——步驟5

在影片剪輯“進(jìn)度條”的編輯區(qū)里新建圖層2，制作進(jìn)度條的外框。任務(wù)實(shí)施——步驟6選中圖層2，選擇文本工具，在舞臺(tái)合適的位置加入一個(gè)動(dòng)態(tài)文本框，在屬性面板上設(shè)置文本類型：動(dòng)態(tài)文本，字體：Arial,變量名：loaded，單行，字體大小顏色自定義。動(dòng)態(tài)文本框進(jìn)度條外框項(xiàng)目八交互功能和影片輸出——任務(wù)2任務(wù)實(shí)施——步驟7

回到主場(chǎng)景，圖層1，將創(chuàng)建的“進(jìn)度條”影片剪輯元件拖到舞臺(tái)，并延續(xù)到第14幀。在第15幀插入關(guān)鍵幀，導(dǎo)入圖片，延續(xù)到第30幀。選中第15幀，在“動(dòng)作”面板添加以下代碼：stop();任務(wù)實(shí)施——步驟8新建圖層2，選中第1幀，在“動(dòng)作”面板添加以下代碼：getloaded=_root.getBytesLoaded();bytetotal=_root.getBytesTotal();loaded=int(getloaded/bytetotal*100);bar:loaded=loaded+"%";bar.gotoAndStop(loaded);導(dǎo)入進(jìn)度條影片剪輯和圖片項(xiàng)目八交互功能和影片輸出——任務(wù)2任務(wù)實(shí)施——步驟9

選中第14幀，在“動(dòng)作”面板添加以下代碼：

if(getloaded==bytetotal){ gotoAndPlay(15);}else{ gotoAndPlay(1);}任務(wù)實(shí)施——步驟10選中第15幀，在“動(dòng)作”面板添加以下代碼，并延續(xù)到第30幀。stop();時(shí)間軸最終效果任務(wù)實(shí)施——步驟11保存文件，然后按“Ctrl+Enter”鍵播放動(dòng)畫(huà)查看效果。任務(wù)實(shí)施——任務(wù)經(jīng)驗(yàn)制作進(jìn)度條時(shí)需要給“實(shí)例名稱”命名，以便其接收代碼指令；動(dòng)態(tài)文本框能夠?qū)崿F(xiàn)動(dòng)態(tài)接收信息的功能，需要指定變量名。最終效果項(xiàng)目八交互功能和影片輸出——任務(wù)2任務(wù)3魚(yú)兒游任務(wù)分析：利用繪圖工具和“顏料桶”制作fish影片剪輯元件，在場(chǎng)景1的圖層1中導(dǎo)入fish影片剪輯元件,在圖層2的第1幀添加ActionScript腳本代碼，控制動(dòng)畫(huà)播放。魚(yú)兒游項(xiàng)目八交互功能和影片輸出——任務(wù)3項(xiàng)目八交互功能和影片輸出——任務(wù)3任務(wù)實(shí)施——步驟1

選擇“文件”→“新建”菜單命令，新建一個(gè)flash文檔。設(shè)置寬、高為550像素×400像素。任務(wù)實(shí)施——步驟2選擇“插入”→“新建元件”菜單命令，新建一個(gè)影片剪輯元件，名稱為“fish”，在舞臺(tái)上利用繪圖工具和顏料桶工具繪制魚(yú)兒。新建文件參數(shù)設(shè)置繪制影片剪輯“fish”項(xiàng)目八交互功能和影片輸出——任務(wù)3任務(wù)實(shí)施——步驟3

返回到主場(chǎng)景，選中庫(kù)中的“fish”影片剪輯元件，右鍵單擊，選擇“屬性”命令，在彈出的“元件屬性”對(duì)話框，單擊按鈕，選擇“為ActionScript導(dǎo)出”和“在第1幀中導(dǎo)出”復(fù)選框，設(shè)置“標(biāo)識(shí)符”為fish，然后單擊按鈕。任務(wù)實(shí)施——步驟4將“fish”影片剪輯元件導(dǎo)入到主場(chǎng)景的舞臺(tái)上?！霸傩浴睂?duì)話框?qū)朐?xiàng)目八交互功能和影片輸出——任務(wù)3任務(wù)實(shí)施——步驟5

新建圖層2，選中該圖層的第1幀，按“F9”鍵打開(kāi)“動(dòng)作”面板，在“動(dòng)作”面板添加代碼。任務(wù)實(shí)施——步驟6保存文件，然后按“Ctrl+Enter”鍵播放動(dòng)畫(huà)查看效果。“動(dòng)作”面板代碼任務(wù)實(shí)施——任務(wù)經(jīng)驗(yàn)

ActionScript腳本的功能很強(qiáng)大，編寫腳本程序遵循嚴(yán)密的邏輯性，需要經(jīng)常練習(xí)方可掌握精髓。任務(wù)4動(dòng)畫(huà)導(dǎo)出任務(wù)分析：制作完成的Flash動(dòng)畫(huà)，利用“文件”菜單導(dǎo)出“影片”，選擇相應(yīng)的影片格式即可導(dǎo)出動(dòng)畫(huà)影片。影片輸出項(xiàng)目八交互功能和影片輸出——任務(wù)4項(xiàng)目八交互功能和影片輸出——任務(wù)4任務(wù)實(shí)施——步驟1

打開(kāi)“加載進(jìn)度條”源文件。任務(wù)實(shí)施——步驟2選擇“文件”→“導(dǎo)出”→“導(dǎo)出影片”菜單命令。導(dǎo)出影片“加載進(jìn)度條”源文件項(xiàng)目八交互功能和影片輸出——任務(wù)4任務(wù)實(shí)施——步驟3

彈出“導(dǎo)出影片”對(duì)話框，在“文件名”文本框中輸入視頻的名稱，在“保存類型”下拉列表中選擇“WindowsAVI(*.avi)”選項(xiàng)，然后單擊“保存”按鈕。任務(wù)實(shí)施——步驟4彈出“導(dǎo)出WindowsAVI”對(duì)話框，如圖8-29所示，在對(duì)話框中設(shè)置視頻的尺寸、格式及聲音格式等參數(shù)，然后單擊按鈕。“導(dǎo)出WindowsAVI”對(duì)話框項(xiàng)目八交互功能和影片輸出——任務(wù)4任務(wù)實(shí)施——步驟5

導(dǎo)出完成后，找到導(dǎo)出的視頻文件可以看到動(dòng)畫(huà)已經(jīng)變成視頻格式，利用視頻播放軟件就能夠播放該文件觀看效果。任務(wù)實(shí)施——任務(wù)經(jīng)驗(yàn)打開(kāi)“導(dǎo)出影片”對(duì)話框的快捷鍵是“Ctrl+Alt+Shift+S”，如果在電視上流暢地播放動(dòng)畫(huà)，在制作時(shí)需要將動(dòng)畫(huà)設(shè)置成每秒播放2