第18課動畫的輸出與發(fā)布(15).ppt

1、對于要將Flash動畫應(yīng)用于實(shí)際的動畫設(shè)計(jì)者來說，F(xiàn)lash動畫制作完成后，對其進(jìn)行測試和優(yōu)化是相當(dāng)重要的工作。測試Flash動畫是為了了解Flash動畫是否完全按照設(shè)計(jì)者的思路產(chǎn)生預(yù)期的動畫效果，或者將其發(fā)布到網(wǎng)絡(luò)后是否仍能有同樣優(yōu)質(zhì)的效果；優(yōu)化動畫主要是為了使Flash動畫體積更小，更便于網(wǎng)絡(luò)下載和觀看，這是設(shè)計(jì)Flash動畫必須考慮的一個因素。,第 十八課動畫的輸出與發(fā)布,測試Flash動畫,Flash動畫制作完成后，常常需要對其進(jìn)行測試，測試Flash動畫時應(yīng)考慮以下幾個方面：,Flash動畫是否按照設(shè)計(jì)思路產(chǎn)生了預(yù)期的效果。 Flash動畫的體積是否處于最小狀態(tài)，能不能更小一些。 在

2、網(wǎng)絡(luò)環(huán)境下，是否能正常地下載和觀看動畫。,最好在多臺電腦上測試Flash動畫，因?yàn)槊颗_電腦的運(yùn)行速度不同，一個好的Flash動畫能夠在運(yùn)行速度不同的電腦上和網(wǎng)絡(luò)上具有相同的效果。,既可以測試單獨(dú)場景的下載性能，也可以測試整個動畫的下載性能。測試動畫文件的具體操作如下： （1）打開要測試的Flash動畫，按【Ctrl+Enter】鍵播放動畫，將打開如圖18-1所示的動畫測試界面（該界面因動畫不同而不同），這時即可測試Flash動畫的播放情況了。這個正在播放的文件是一個SWF文件。,每個.fla文件被播放一次后都會自動在.fla文件所在位置生成一個SWF文件，以后只需直接雙擊該文件即可播放動畫。,

3、圖18-1,圖18-2,（2）選擇視圖下載設(shè)置菜單命令，在彈出的如圖18-2所示的子菜單中選擇一個下載速度來確定Flash模擬的數(shù)據(jù)流速率，如“14.4KB/s”、“28.8KB/s”、“56KB/s”、“DSL”、“T1”或“用戶設(shè)置”等。,（3）如果要自定義一個下載速度，可以選擇“自定義”命令，打開如圖18-3所示的對話框，在其中即可自己設(shè)置一個下載速度。 （4）在觀看SWF文件時，選擇視圖帶寬設(shè)置菜單命令可以顯示如圖18-4所示的帶寬顯示圖，以查看動畫的下載性能。再次選擇該命令可以隱藏該顯示圖。,圖18-4,圖18-3,在帶寬顯示圖中，各部分的作用如下：,窗口右邊顯示動作各幀的數(shù)據(jù)量。矩

4、形條越長，說明該幀的數(shù)據(jù)量越大，最下面的紅色水平線是動畫傳輸率告警線，其位置由傳輸條件決定，當(dāng)色條高于紅色水平線時，說明在播放到這一幀時可能會產(chǎn)生停頓。 影片：顯示動畫的舞臺大小、播放速度、文件大小和總的幀數(shù)。 設(shè)置：顯示當(dāng)前設(shè)置的網(wǎng)絡(luò)傳輸條件。 狀態(tài)：顯示當(dāng)前在右邊窗口中被選中的動畫某一幀（被選中的幀其色條顏色為綠色）的位置、數(shù)據(jù)量及整個動畫已經(jīng)下載的數(shù)據(jù)量。,（5）選擇視圖模擬下載菜單命令，可以打開或隱藏帶寬顯示圖下方的SWF文件。如果隱藏了SWF文件，則文檔在不模擬Web連接的情況下就開始下載，如圖18-5所示。,圖18-5,（6）單擊圖表上的條形區(qū)域會在左側(cè)窗口中顯示對應(yīng)幀的設(shè)置，并停

5、止文檔下載。 （7）選擇視圖數(shù)據(jù)流圖表菜單命令可以顯示哪些幀會引起暫停。 （8）最后關(guān)閉測試窗口返回到Flash動畫的制作場景中，測試完畢。,另外還有一種比較簡單的動畫測試方法，就是通過控制器來測試。選擇窗口工具欄控制器菜單命令，打開如圖18-6所示的控制器。利用其中的按鈕可以實(shí)現(xiàn)動畫的停止、播放、前進(jìn)、倒退等。,圖18-6,優(yōu)化Flash動畫,動畫制作過程中的優(yōu)化 對元素的優(yōu)化 對文本的優(yōu)化 對色彩的優(yōu)化,Flash動畫文件越大，其下載和播放速度就越慢，需要的時間也越長，為了減小Flash動畫的體積，加快動畫的下載速度，在導(dǎo)出動畫之前，需要對動畫文件進(jìn)行優(yōu)化。優(yōu)化動畫主要包括在動畫制作過程的

6、優(yōu)化、對元素的優(yōu)化、對文本的優(yōu)化和對色彩的優(yōu)化。,動畫制作過程中的優(yōu)化,在動畫制作過程中的優(yōu)化主要有以下幾個方面：,制作動畫時盡量使用補(bǔ)間動畫，盡可能減少逐幀動畫的使用，因?yàn)檠a(bǔ)間動畫中的過渡幀是系統(tǒng)計(jì)算得到的，而逐幀動畫的過渡幀是通過手動添加對象得到的，因此補(bǔ)間動畫的數(shù)據(jù)量遠(yuǎn)遠(yuǎn)小于逐幀動畫。如果制作相同的動畫效果，逐幀動畫的體積要比漸變動畫大得多。 最好將動畫中所有相同的對象轉(zhuǎn)換為元件，這樣可以使多個相同內(nèi)容的對象只保存一次，而可以使用多次，有效地減少動畫的數(shù)據(jù)量。 調(diào)用素材時盡量使用矢量圖，而不使用位圖，因?yàn)槲粓D比矢量圖的體積大得多，很容易使Flash動畫變得臃腫不堪。,對元素的優(yōu)化,對元素

7、的優(yōu)化主要有以下幾個方面：,減少矢量圖形的形狀復(fù)雜程度。 最好少用特殊形狀的矢量線條，如虛線、斑馬線、點(diǎn)線等。 避免過多地導(dǎo)入外部素材，特別是位圖，它會明顯地增加動畫大小。 導(dǎo)入聲音文件時最好使用體積較小的MP3格式。 對動畫中的各元素最好分層管理。 盡量使用矢量線條代替矢量色塊，因?yàn)槭噶烤€條的數(shù)據(jù)量比矢量色塊小。,對文本的優(yōu)化,對文本的優(yōu)化主要有以下幾個方面 ：,使用文本時不宜使用過多種類的字體和樣式，因?yàn)槭褂眠^多的字體和樣式不但會增大動畫的數(shù)據(jù)量，而且不易統(tǒng)一風(fēng)格。 盡量不要將文字打散。,對色彩的優(yōu)化,如果對動畫畫面的影響不大，建議最好使用單色，減少漸變色的使用。,輸出動畫,測試完動畫的下

8、載性能并優(yōu)化后，就可以將動畫導(dǎo)出到其他應(yīng)用程序中了，以便將其應(yīng)用于網(wǎng)頁或多媒體等領(lǐng)域。導(dǎo)出動畫文件的具體操作如下： （1）打開要導(dǎo)出的Flash動畫，選取某幀或場景中的某個對象。,圖18-7,（2）選擇文件導(dǎo)出導(dǎo)出影片菜單命令，打開如圖18-7所示的“導(dǎo)出影片”對話框。,圖18-8,（3）在“保存在”下拉列表框中指定文件要導(dǎo)出的路徑。 （4）在“文件名”文本框中輸入文件名稱，在“保存類型”下拉列表框中選擇保存類型，默認(rèn)情況下為.swf格式。 （5）單擊 按鈕，將打開如圖18-8所示的“導(dǎo)出Flash Player”對話框。,“導(dǎo)出Flash Player”對話框中各選項(xiàng)的含義如下 ：,版本：在

9、該下拉列表框中可選擇以何種方式保存導(dǎo)出的Flash動畫。 加載順序：在該下拉列表框中可選擇需要的加載順序，包括“由下而上”和“由上而下”兩個選項(xiàng)。 動作腳本版本：在該下拉列表框中可選擇需要的版本，由于動作腳本2.0是Flash MX 2004新增的功能，因此如果需要以較低版本打開，最好還是選擇動作腳本1.0。 選項(xiàng)：在該欄中選中其中的復(fù)選框可以進(jìn)行相應(yīng)的操作，建議選中復(fù)選框，以減小動畫的體積。各選項(xiàng)的含義如下 ：,選項(xiàng)：在該欄中選中其中的復(fù)選框可以進(jìn)行相應(yīng)的操作，建議選中復(fù)選框，以減小動畫的體積。各選項(xiàng)的含義如下：,：創(chuàng)建一個文本文件，并記錄最終導(dǎo)出動畫文件的大小。 ：防止發(fā)布的動畫文件被其他

10、人下載到Flash中進(jìn)行編輯。 ：設(shè)定忽略當(dāng)前動畫中的跟蹤命令。 ：允許對動畫進(jìn)行調(diào)試。 ：減少文件的大小。,JPEG品質(zhì)：用于調(diào)整JPEG的品質(zhì)好壞，品質(zhì)越高越好，但體積也會相應(yīng)增大。在后面的滾動條上左右拖動滑塊即可調(diào)整JPEG的品質(zhì)，越向右品質(zhì)越高。 按鈕：單擊該按鈕將打開如圖18-9所示的“聲音設(shè)置”對話框，在其中可以對導(dǎo)入的音頻格式重新設(shè)置，建議使用MP3格式。,圖18-9,導(dǎo)出Flash動畫后，可以在導(dǎo)出的位置找到該動畫，在“打開”對話框中單擊按鈕即可打開該動畫，如圖18-10所示。,圖18-10,（6）設(shè)置完成后單擊 按鈕即可將該文件導(dǎo)出。,發(fā)布Flash動畫,設(shè)置發(fā)布動畫的格式

11、Flash文件的發(fā)布設(shè)置 HTML文件的發(fā)布設(shè)置 將Flash動畫發(fā)布到網(wǎng)上,利用“發(fā)布”命令即可對制作好的Flash動畫文件進(jìn)行發(fā)布。 選擇文件發(fā)布設(shè)置菜單命令，打開“發(fā)布設(shè)置”對話框，如圖18-11所示。在該對話框中包括3個選項(xiàng)卡：格式、Flash、HTML。,設(shè)置發(fā)布動畫的格式,在“發(fā)布設(shè)置”對話框中，系統(tǒng)默認(rèn)打開的是“格式”選項(xiàng)卡?！案袷健边x項(xiàng)卡用于設(shè)置動畫的發(fā)布格式，包括Flash、HTML以及其他圖形文件和視頻文件格式，如圖18-11所示。在其中的“類型”欄中可以選擇以哪種格式進(jìn)行發(fā)布，建議選擇 和 復(fù)選框。,圖18-11,Flash文件的發(fā)布設(shè)置,在“發(fā)布設(shè)置”對話框中單擊“Fl

12、ash”選項(xiàng)卡，對話框變?yōu)槿鐖D18-12所示。其設(shè)置方法與前面的“導(dǎo)出Flash Player”對話框完全相同，這里不再贅述。,圖18-12,HTML文件的發(fā)布設(shè)置,在“發(fā)布設(shè)置”對話框中選擇“HTML”選項(xiàng)卡，對話框變?yōu)槿鐖D18-13所示。其中各選項(xiàng)的含義如下：,圖18-13,模板：在該下拉列表框中可選擇所使用的模板，默認(rèn)為“僅限Flash”，單擊右邊的 按鈕，將顯示該模板的有關(guān)信息，如圖18-14所示。,圖18-14,尺寸：在該下拉列表框中可設(shè)置動畫的寬度和高度值，包括“匹配影片”、“像素”、“百分比”3個選項(xiàng)：,匹配影片：將發(fā)布的尺寸設(shè)置為動畫的實(shí)際尺寸大小。 像素：設(shè)置影片的實(shí)際寬度和

13、高度，選擇該項(xiàng)后可在“寬度”和“高度”文本框中輸入具體的像素值。 百分比：設(shè)置動畫相對于瀏覽器窗口的尺寸大小。,回放：在該欄中可對發(fā)布的影片進(jìn)行設(shè)置，其中包括4個復(fù)選框：,：使動畫在開始時處于暫停狀態(tài)，只有單擊動畫中的“播放”按鈕或從快捷菜單中選擇“Play”命令后，動畫才開始播放。 ：使用戶單擊鼠標(biāo)右鍵時，彈出的快捷菜單中的命令有效。 ：使動畫反復(fù)播放。 ：用系統(tǒng)備自帶的字體取代用戶系統(tǒng)中未安裝的字體。,品質(zhì)：該下拉列表框用于設(shè)置動畫的品質(zhì)，其中包括低、自動降低、自動升高、高和最佳5個選項(xiàng)。 窗口模式：該下拉列表框用于設(shè)置安裝有Flash ActiveX的IE瀏覽器，該模式有以下幾種選項(xiàng)：,

14、窗口：在網(wǎng)頁窗口中播放Flash動畫。 不透明無窗口：使Flash動畫后面的元素移動，但不會在穿過動畫時顯示出來。 透明無窗口：使嵌有Flash動畫的HTML頁面背景從動畫中所有透明的地方顯示出來。,HTML對齊：在該下拉列表框中可決定動畫窗口在瀏覽器窗口中的位置。 縮放：在該下拉列表框中可定義動畫以何種形式放進(jìn)由Width和Height文本框所設(shè)定的尺寸范圍中。該選項(xiàng)只有當(dāng)文本框中輸入的尺寸與動畫的原始尺寸不同時才有效。其中包括以下4個選項(xiàng)：,默認(rèn)（全部顯示）：在指定區(qū)域內(nèi)顯示整個動畫，并保持動畫原有的長寬比。 無邊框：使動畫在保持原有長寬比的基礎(chǔ)上填滿指定區(qū)域。 精確匹配：使動畫保持原有的

15、長寬比。 無縮放：使整個動畫顯示在指定的區(qū)域內(nèi)，但不一定要保持動畫原有的尺寸比例。,Flash對齊：在該欄中可定義動畫在窗口中的位置，也可將動畫裁剪到窗口尺寸。在“水平”和“垂直”下拉列表中選擇需要的對齊方式。 ：選中該復(fù)選框可以警示HTML標(biāo)簽代碼中所出現(xiàn)的錯誤。,將Flash動畫發(fā)布到網(wǎng)上,在將Flash動畫發(fā)布到網(wǎng)上之前必須先預(yù)覽。預(yù)覽發(fā)布效果的具體操作如下： （1）選擇文件發(fā)布預(yù)覽菜單命令，彈出如圖18-15所示的子菜單。,圖18-15,（2）在該菜單中選擇一種要預(yù)覽的文件格式即可在預(yù)覽界面中看到該動畫發(fā)布后的效果，如圖18-16所示是一個動畫的發(fā)布預(yù)覽效果。,圖18-16,如果預(yù)覽動

16、畫時沒有任何問題，就可以將其發(fā)布出來了，發(fā)布動畫的具體操作如下： （1）選擇文件發(fā)布設(shè)置菜單命令，打開“發(fā)布設(shè)置”對話框，如圖18-11所示。 （2）在“格式”選項(xiàng)卡的“類型”欄中選擇要發(fā)布的文件格式，一般選擇HTML格式。 （3）分別對選定的文件格式進(jìn)行具體設(shè)置。 （4）設(shè)置完畢后，單擊 按鈕即可完成動畫的發(fā)布，并在Flash源文件所在位置生成一個網(wǎng)頁格式的文件，用鼠標(biāo)右鍵單擊它，在彈出的快捷菜單中選擇“打開”命令即可打開發(fā)布的文件。 如果要按默認(rèn)的格式和設(shè)置發(fā)布Flash動畫，可直接選擇文件發(fā)布菜單命令或按【Shift+F12】鍵來實(shí)現(xiàn)。,上機(jī)實(shí)戰(zhàn),在本課上機(jī)實(shí)戰(zhàn)中將練習(xí)將前面制作的Fla

17、sh動畫發(fā)布到網(wǎng)上，本次練習(xí)以第十五課制作的用戶調(diào)查表為例進(jìn)行練習(xí)，讀者也可以用自己制作的其他動畫來練習(xí)。在本次練習(xí)中，將首先測試該動畫，看它是否完全正確，然后將動畫輸出到桌面上，最后將該動畫以HTML的格式發(fā)布出來，其具體操作如下。,（1）打開第十五課制作的“用戶調(diào)查表”，按【Ctrl+Enter】鍵播放動畫，打開其動畫測試界面。在其中輸入自己要填寫的內(nèi)容，如圖18-17所示。,圖18-17,（2）單擊“提交”按鈕，出現(xiàn)如圖18-18所示的畫面，可以發(fā)現(xiàn)顯示完全正確，看來該Flash動畫沒有問題。 （3）關(guān)閉測試畫面，回到Flash制作場景中，選擇文件導(dǎo)出導(dǎo)出影片菜單命令，打開“導(dǎo)出影片”對話框。,圖18-18,（4）在“保存在”下拉列表框中選擇“桌面”，在“文件名”文本框中輸入文件名“用戶調(diào)查表”，在“保存類型”下拉列表框中保持默認(rèn)設(shè)置，如圖18-19所示。,圖18-19,（5）單擊 按鈕，將打開“導(dǎo)出Flash Player”對話框，在其中保持默認(rèn)設(shè)置