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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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