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

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

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

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

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

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

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

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

保存文件，然后按“Ctrl+Enter”鍵播放動畫查看效果。任務(wù)2加載進(jìn)度條任務(wù)分析：利用“矩形”繪圖工具和“形狀補(bǔ)間”制作進(jìn)度條影片剪輯元件，在場景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

選擇“文件”→“新建”菜單命令，新建一個flash文檔。設(shè)置寬、高為550像素×400像素。任務(wù)實(shí)施——步驟2選擇“插入”→“新建元件”菜單命令，新建一個影片剪輯元件，名稱為“進(jìn)度條”，在“屬性”選項(xiàng)板中設(shè)置實(shí)例名稱為“bar”，在舞臺上利用長方形工具畫一個進(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ǔ)間形狀”動畫。創(chuàng)建“補(bǔ)間形狀”動畫變形“進(jìn)度條”項(xiàng)目八交互功能和影片輸出——任務(wù)2任務(wù)實(shí)施——步驟5

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

回到主場景，圖層1，將創(chuàng)建的“進(jìn)度條”影片剪輯元件拖到舞臺，并延續(xù)到第14幀。在第15幀插入關(guān)鍵幀，導(dǎo)入圖片，延續(xù)到第30幀。選中第15幀，在“動作”面板添加以下代碼：stop();任務(wù)實(shí)施——步驟8新建圖層2，選中第1幀，在“動作”面板添加以下代碼：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幀，在“動作”面板添加以下代碼：

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

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

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

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

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

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

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

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