課件-ch11動畫測試與發(fā)布

1、第第11章章動畫測試與發(fā)布學(xué)學(xué) 習(xí)習(xí) 目目 標(biāo)標(biāo)l在完成了Flash動畫制作后，就可以將Flash文件發(fā)布，或?qū)С鰹槠渌袷降奈募?，或?qū)lash動畫發(fā)布到Web網(wǎng)站上，使用戶能夠在互聯(lián)網(wǎng)上看到完成的動畫作品。在將Flash文件發(fā)布或?qū)С銮埃€要對文件進行必要的測試和優(yōu)化，以保證動畫能夠順利播放和在網(wǎng)絡(luò)中被瀏覽者欣賞。本章主要介紹了Flash動畫的測試、優(yōu)化、導(dǎo)出和發(fā)布，詳細介紹了導(dǎo)出和發(fā)布相關(guān)參數(shù)的設(shè)置及導(dǎo)出和預(yù)覽、發(fā)布動畫的方法步驟。本本 章章 重重 點點測試Flash動畫優(yōu)化Flash動畫導(dǎo)出Flash動畫發(fā)布Flash動畫11.1 測試測試Flash動畫動畫 lFlash CS3提供了

2、強大的測試功能，因為Flash動畫一般是在網(wǎng)絡(luò)上播放，所以文件的大小對動畫的播放流暢度影響很大，如果文件太大，瀏覽者很可能沒有耐心等待動畫加載完畢。作為優(yōu)秀的動畫設(shè)計師，不但要有全面的設(shè)計技術(shù)、敏銳的藝術(shù)感覺、新鮮的創(chuàng)意和創(chuàng)造力，還應(yīng)掌握用最小的文件表現(xiàn)最完美的動畫效果。l可以在兩種環(huán)境下測試影片，動畫編輯環(huán)境和動畫測試環(huán)境。 11.1.1 在動畫編輯環(huán)境下測試在動畫編輯環(huán)境下測試l1. 簡單動畫測試l簡單動畫測試無需打開任何專門窗口，直接在動畫編輯環(huán)境下，就可以對動畫進行測試了。進行簡單測試的方法有：l（1）直接按下Enter鍵。l（2）選擇【控制】菜單下的菜單命令，如圖11-1 所示。圖1

3、1-1 “控制”菜單l（3）選擇【窗口】【工具欄】【控制器】命令，打開如圖11-2 所示的播放控制器，單擊其中的播放控制按鈕進行動畫測試。圖11-2 播放控制器l但在簡單測試中，動畫中的影片剪輯元件、按鈕元件以及腳本語言也就是影片的交互式效果均不能得到測試。而且在動畫編輯模式下測試影片得到的動畫速度比輸出或優(yōu)化后的影片慢。圖11-2 播放控制器2. 基本交互控制測試基本交互控制測試l在編輯環(huán)境下通過設(shè)置，可以對按鈕元件以及簡單的幀動作（play、stop、gotoplay和gotoandstop）進行測試。l(1) 按鈕元件測試l要在動畫編輯環(huán)境下測試按鈕元件，選擇【控制】【啟用簡單按鈕】命令

4、。此時按鈕將做出與最終動畫中一樣的響應(yīng)，包括這個按鈕所附加的腳本語言，如圖11-3 所示的四個禮物按鈕，啟用簡單按鈕命令后，就可以在編輯環(huán)境下測試按鈕動作了。圖11-3 啟用簡單按鈕測試l(2) 簡單幀動作測試l要在動畫編輯環(huán)境下測試簡單的幀動作（play、stop、gotoplay和gotoandstop等），選擇【控制】【啟用簡單幀動作】命令。11.1.2 在動畫測試環(huán)境下測試在動畫測試環(huán)境下測試l1. 打開動畫測試窗口要測試一個動畫的全部內(nèi)容，選擇【控制】【測試影片】命令。Flash將自動導(dǎo)出當(dāng)前動畫中的所有場景，然后將文件在新窗口中打開，如圖11-4所示。圖11-4 “測試影片”窗口

5、l要測試一個場景的全部內(nèi)容，選擇【控制】【測試場景】命令。Flash僅導(dǎo)出當(dāng)前動畫中的當(dāng)前場景，然后將文件在新窗口中打開，且在文件選項卡中標(biāo)示出當(dāng)前測試的場景，如圖11-5所示。圖11-5 “測試場景”窗口2. 下載性能圖表下載性能圖表lFlash自帶了一個下載性能圖表工具，利用它可以形象的獲得在指定的網(wǎng)速下動畫每一幀所發(fā)送的數(shù)據(jù)。這樣可以清楚的看到數(shù)據(jù)傳輸中的瓶頸所在，這些瓶頸發(fā)送數(shù)據(jù)量大，可能導(dǎo)致播放中斷。（1）打開下載性能圖表）打開下載性能圖表l只有在動畫測試環(huán)境中才能看到下載性能圖表，在動畫測試窗口，選擇【視圖】【帶寬設(shè)置】命令，可顯示下載性能圖表。如圖11-6所示。下載性能圖表分為左

6、右兩部分。左邊顯示的是動畫的一些基本參數(shù)、測試設(shè)置和動畫狀態(tài)。右邊顯示了下載測試的直觀圖表。圖11-6 下載性能圖表-數(shù)據(jù)流圖表（2）下載性能圖表兩種形式）下載性能圖表兩種形式l選擇【視圖】【數(shù)據(jù)流圖表】命令，如圖11-6所示，以數(shù)據(jù)流圖的方式顯示動畫帶寬情況。在圖表中交替顯示的淡灰色和深灰色塊，代表各個幀。 當(dāng)點擊色塊時，在左側(cè)會顯示其幀序號和字節(jié)大小。第一個幀存儲元件的內(nèi)容，因此它通常大于其它幀。l選擇【視圖】【幀數(shù)圖表】命令，如圖11-7所示，該視圖以逐幀方式顯示動畫帶寬情況，有助于查看哪些幀導(dǎo)致數(shù)據(jù)流延遲。如有幀塊延伸到紅線之上，則動畫播放到此處時必須等待該幀下載完畢。圖11-7 下載

7、性能圖表-幀數(shù)圖表（3）下載速率設(shè)置）下載速率設(shè)置l在測試環(huán)境下，可以模擬在指定的網(wǎng)絡(luò)環(huán)境下，下載動畫時的狀況。選擇【視圖】【下載設(shè)置】命令，如圖11-8所示，選擇一個下載速度來確定 Flash 模擬的數(shù)據(jù)流速率。若要自定義設(shè)置，請選擇【自定義】。圖11-8 下載速率設(shè)置菜單11.2 優(yōu)化優(yōu)化Flash動畫動畫l隨著Flash文件的增大，其下載和回放時間也會增加?？梢圆扇《喾N方法，獲得最佳回放質(zhì)量。在發(fā)布過程中，F(xiàn)lash 會自動對文檔進行一些優(yōu)化。在導(dǎo)出文檔之前，可以使用多種策略來減小文件的大小，減少下載時間。l1. 多使用元件。在動畫中使用兩次或兩次以上的元素要轉(zhuǎn)換為元件。元件只在庫中保存

8、一次。重復(fù)使用一個元件不會明顯加大動畫文件的大小，并只被下載一次。l2. 多使用補間動畫。創(chuàng)建動畫時，盡可能使用補間動畫，盡量避免使用逐幀動畫。補間動畫的過渡幀是計算得到，因此其數(shù)據(jù)量遠遠少于逐幀動畫。l3. 位圖優(yōu)化。位圖一般作為背景或靜態(tài)元素，因盡量避免使它運動。如果將位圖轉(zhuǎn)換為矢量圖，還應(yīng)對轉(zhuǎn)換后的矢量圖進行優(yōu)化。導(dǎo)入的位圖應(yīng)在庫面板中進行壓縮，操作方法如下，雙擊庫面板中的位圖圖標(biāo)，彈出“位圖屬性”對話框，取消“使用文檔默認品質(zhì)”復(fù)選框的勾選，設(shè)置JPEG的壓縮品質(zhì)，品質(zhì)值越高，文件就越大，如圖11-9所示。圖11-9 “位圖屬性”對話框l4. 合理使用聲音文件。盡可能使用 mp3 這種

9、占用空間最小的聲音格式，如非必需，不要添加太長的聲音文件。l5. 元素優(yōu)化。盡可能組合相關(guān)元素。將動畫過程中發(fā)生變化的元素與保持不變的元素分散在不同的圖層上。l6. 選擇【修改】【形狀】【優(yōu)化】將用于描述形狀的分隔線的數(shù)量降至最少，如圖11-10所示。圖11-10 “形狀優(yōu)化”對話框l7. 多用實線，少用虛線。限制特殊線條類型（如虛線、點線、波浪線等）的數(shù)量。 實線所需的內(nèi)存較少。用“鉛筆”工具創(chuàng)建的線條比用刷子筆觸創(chuàng)建的線條所需的內(nèi)存更少。l8. 文字優(yōu)化。盡量減少字體和字體樣式的數(shù)量。將字體打散并不能減少文件體積，相反會使文件變大，如果要重復(fù)使用文字，建議將其轉(zhuǎn)換為元件 。l9. 色彩優(yōu)化

10、。盡量使用顏色調(diào)色板中的顏色，盡量少用過渡色。使用【顏色】面板（【窗口】【顏色】），使文檔的調(diào)色板與瀏覽器特定的調(diào)色板相匹配。 11.3 導(dǎo)出導(dǎo)出Flash動畫動畫l將Flash動畫優(yōu)化并測試后，就可以利用導(dǎo)出命令將動畫導(dǎo)出為其他文件格式。導(dǎo)出與發(fā)布不同，每次導(dǎo)出操作只能生成一種格式的文件，同時導(dǎo)出的設(shè)置不被存儲起來。導(dǎo)出的文件可以在其它應(yīng)用程序中編輯和使用。在【文件】【導(dǎo)出】菜單下有兩個導(dǎo)出命令，如圖11-11所示。 “導(dǎo)出圖像”命令用于導(dǎo)出靜態(tài)圖，“導(dǎo)出影片”命令用于導(dǎo)出動態(tài)作品或動畫序列圖像。圖11-11 Flash導(dǎo)出命令 11.3.1 導(dǎo)出影片導(dǎo)出影片l導(dǎo)出影片的操作步驟為：1. 選

11、擇【文件】【導(dǎo)出】【導(dǎo)出影片】命令，彈出“導(dǎo)出影片”對話框，如圖11-12所示。要求用戶選擇導(dǎo)出文件的保存路徑和文件類型，并輸入導(dǎo)出文件名。Flash支持導(dǎo)出的動畫類型如表11-1所示，這里有單個的動畫文件，也有多個圖像文件組成的圖像序列。圖11-12 “導(dǎo)出影片”對話框l2. 從“保存類型”下拉列表中選擇要導(dǎo)出的文件類型（默認為swf），選擇保存路徑，輸入文件名，點擊“保存”按鈕。這時會根據(jù)用戶選擇的文件類型彈出相應(yīng)的參數(shù)設(shè)置對話框，可以對參數(shù)進行設(shè)置。l3. 保持默認設(shè)置，會出現(xiàn)一個導(dǎo)出進度條，如圖11-13所示，文件被導(dǎo)出為一個獨立的動畫文件或動畫序列文件。l4. 在磁盤的保存路徑中找到

12、導(dǎo)出的動畫文件，雙擊就可以播放了，這說明動畫文件已經(jīng)可以脫離Flash編輯環(huán)境獨立播放了。圖11-13 “導(dǎo)出影片”進度條11.3.2 導(dǎo)出圖像導(dǎo)出圖像l導(dǎo)出圖像的操作步驟與導(dǎo)出影片相似，不同的是：（1）需要選擇【文件】【導(dǎo)出】【導(dǎo)出圖像】命令；（2）只支持導(dǎo)出單個圖像文件，如圖11-14所示。圖11-14 “導(dǎo)出圖像”對話框11.4 發(fā)布發(fā)布Flash動畫動畫l可以將Flash影片發(fā)布成多種格式，而在發(fā)布之前需進行必要的發(fā)布設(shè)置，定義發(fā)布的格式以及相應(yīng)的設(shè)置，以達到最佳效果。在“發(fā)布設(shè)置”對話框中，可以一次性發(fā)布多種格式文件，且每種文件均保存為指定的發(fā)布設(shè)置，可以擁有不同的名字。本節(jié)將詳細介

13、紹Flash動畫的發(fā)布設(shè)置、發(fā)布預(yù)覽和發(fā)布。11.4.1 設(shè)置發(fā)布參數(shù)設(shè)置發(fā)布參數(shù)l1. 發(fā)布前的格式設(shè)置選擇【文件】【發(fā)布設(shè)置】命令。彈出“發(fā)布設(shè)置”對話框，如圖11-15所示。圖11-15 “發(fā)布設(shè)置”對話框l勾選“類型”選項組中的格式，可以設(shè)置發(fā)布的文件類型，默認只發(fā)布Flash和HTML兩種格式文件，當(dāng)勾選其他文件類型前的復(fù)選框（如圖11-15中的GIF圖像和JPEG圖像），則會添加該類型文件的選項卡。l在“文件”下面的文本框中有與Flash源文件（*.fla）同名的名稱，也可以輸入文件名為相應(yīng)的文件類型命名。如果選擇了多種發(fā)布格式，動畫發(fā)布后，可以同時生成多個文件。l2. Flash

14、發(fā)布設(shè)置這是flash默認的發(fā)布格式，F(xiàn)lash發(fā)布設(shè)置選項卡如圖11-16所示。圖11-16 “Flash”設(shè)置選項卡l3. GIF發(fā)布設(shè)置l使用 GIF 文件可以導(dǎo)出繪畫和簡單動畫，以供在網(wǎng)頁中使用。標(biāo)準(zhǔn) GIF 文件是一種壓縮位圖。GIF 動畫文件（有時也稱作 GIF89a）提供了一種簡單的方法來導(dǎo)出簡短的動畫序列。GIF發(fā)布設(shè)置選項卡如圖11-22所示。圖11-22 “GIF”設(shè)置選項卡l4. JPEG發(fā)布設(shè)置lJPEG格式可將圖像保存為高壓縮比的24位位圖。通常，GIF 格式對于導(dǎo)出矢量繪畫效果較好，而JPEG格式更適合顯示包含連續(xù)色調(diào)（如照片、漸變色或嵌入位圖）的圖像。JPEG發(fā)布

15、設(shè)置選項卡如圖11-23所示。圖11-23 “JPEG”設(shè)置選項卡l5. PNG發(fā)布設(shè)置lPNG是唯一支持透明度的跨平臺位圖格式。PNG發(fā)布設(shè)置選項卡如圖11-24所示。圖11-24 “PNG”設(shè)置選項卡11.4.2 預(yù)覽發(fā)布效果預(yù)覽發(fā)布效果l發(fā)布預(yù)覽命令可以使發(fā)布的文件格式在默認打開的應(yīng)用程序中打開預(yù)覽，可以預(yù)覽的文件格式類型是以“發(fā)布設(shè)置”對話框中的設(shè)置為基礎(chǔ)的。l預(yù)覽發(fā)布效果的操作步驟為：1. 選擇【文件】【發(fā)布預(yù)覽】命令，在彈出的下一級子菜單中進行選擇，如圖11-25所示。在這個子菜單中處于可選狀態(tài)的選項，是在“發(fā)布設(shè)置”對話框中所選擇的文件類型，可以分別預(yù)覽設(shè)置好參數(shù)的不同格式的文件

16、。圖11-25 “發(fā)布預(yù)覽”子菜單l2. 在圖11-25 的子菜單中選擇要預(yù)覽的文件類型，會顯示“正在發(fā)布”進度條如圖11-26所示。l3. 發(fā)布完成，就可以預(yù)覽動畫發(fā)布效果，如果對效果滿意，可以將該動畫正式發(fā)布。 圖11-26 “正在發(fā)布”進度條11.4.3 發(fā)布動畫發(fā)布動畫l當(dāng)制作完動畫并對預(yù)覽效果滿意，就可以發(fā)布動畫了。選擇【文件】【發(fā)布】命令，也會彈出如圖11-26所示的“正在發(fā)布”進度條。默認情況下，發(fā)布完后的文件以所選的文件類型的擴展名保存在和源文件同一個目錄下。l在對生日賀卡的發(fā)布中，選擇了Flash、HTML、GIF、JPEG和PNG幾種格式，采用默認設(shè)置，發(fā)布完成后的目錄結(jié)構(gòu)如圖11-27所示。l發(fā)布完成后