著作權所有 © 旗標出版股份有限公司

Flash 網頁設計與特效January 6, 2008

Page 2January 6, 2008

大綱

• 11-1 樣版介紹• 11-2 三分鐘製作 Flash▫ 編修樣版

• 11-3 自製樣版

Page 3January 6, 2008

11-1 樣版介紹

• 檔案 開新檔案 樣版• 九種樣版模式▫ 有些只是定義好標準規格及尺寸的空白檔案▫ 有些包含版式設計與程式

Page 4January 6, 2008

11-2 三分鐘輕鬆製作 Flash

• 幻燈片展示相片• 編修樣版▫ 增加影像▫ 修改文字▫ 調整延遲

Page 5January 6, 2008

11-3 自製樣版• 檔案 另存成樣版

• 投影片簡報樣版▫ exercise/簡報資料▫ 如何製作圓形照片框？

實做練習

著作權所有 © 旗標出版股份有限公司

Flash 網頁設計與特效January 6, 2008

Page 7January 6, 2008

大綱

• 12-1 匯入聲音• 12-2 匯入視訊

Page 8January 6, 2008

12-1 匯入聲音

• Flash 動畫中可以加入各種不同的音效，例如背景音樂、人物對白，以及按下按鈕或元件所發出的音效。不論是想要在動畫中插入哪種音效，你都必須先將聲音匯入到元件庫後，才能夠拉曳到舞台中使用。

Page 9January 6, 2008

將聲音匯入至元件庫

• 請執行『檔案/匯入/匯入至舞台』或『檔案/匯入/匯入至元件庫』命令，並選擇你自己電腦中的聲音檔後，就可以將聲音匯入元件庫了。

Page 10January 6, 2008

將聲音插入動畫中

• 不只動畫可以在圖層中製作，聲音也同樣可以安排在圖層中使用。

• 當你建立好要放置聲音的圖層後，點選關鍵影格或空白關鍵影格，再從元件庫面板將聲音拉曳到舞台中，當動畫播放到放置聲音的關鍵影格時，便會開始播放聲音。

Page 11January 6, 2008

按鈕元件加入音效

• 動畫中若有按鈕元件，你也可以為按鈕加上生動的音效，例如滑鼠移到按鈕上時發出聲音，或者是按一下按鈕就會發出聲音，以製作更有趣的互動按鈕。

Page 12January 6, 2008

聲音的屬性設定

• 若想要設定聲音的各種效果，你可以點選已經插入聲音的關鍵影格或空白影格後，開啟屬性面板來設定聲音屬性（若尚未開啟請執行『視窗/屬性/屬性』命令開啟）。

Page 13January 6, 2008

聲音同步類型的特性與用途

• 事件：聲音播放長度，不會受到關鍵影格長度限制，只要播放就會播放完整個聲音。此聲音類型比較適用於簡短音效，如果是很長的音效，可能會發生動畫已經播放完畢，但聲音卻還不絕於耳的情況。

• 事件類型允許相同的聲音在前、後不同的時間點播放。就好比一個人先鼓掌，接著第二個人一起鼓掌…越來越多人一起鼓掌的效果。

Page 14January 6, 2008

聲音同步類型的特性與用途

• 開始：和事件類型相當類似，同樣是只要播放就會播放完整個聲音。不同的地方是開始同步類型多了偵測的功能。此類型的聲音在播放之前會先做檢查，假如其他圖層已經在播放相同的聲音，那麼就不會再播放，以確保同一時間內，每個聲音只有一個實體在播放。

Page 15January 6, 2008

聲音同步類型的特性與用途

• 停止：讓聲音停止播放，影格上聲音的波形，會變成一個藍色實心的小正方形。

Page 16January 6, 2008

聲音同步類型的特性與用途• 串流：將聲音分配在聲音長度所需的影格中，例如 2 秒的聲音，以 12 fps 來計算，聲音便會放在 24 格影格中。串流類型的聲音會強制動畫與聲音同步，如果電腦處理速度不夠快，畫面來不及更新，那麼就會捨棄一些動畫影格來配合聲音的播放。

• 當影格長度小於聲音長度時，影格播放結束後，聲音也會同時中斷，以達到影音同步的目的，所以適合用於人物的對白。

Page 17January 6, 2008

聲音的重複播放設定• 重複：選擇屬性面板中的重複項目時，旁邊會多一個欄位讓你設定聲音的重複次數（輸入 0 或 1 都是只播放一次）。

• 重複播放：選擇屬性面板中的重複播放項目後，如果再搭配事件或開始的聲音同步類型，音樂就會反覆不停的播放；若是搭配串流同步類型，則聲音重複播放到最後一個影格就會停止。

Page 18January 6, 2008

聲音同步類型配合重複次數設定

• 我們假設在動畫總共有 50 影格，聲音安排在 1 至 10 影格中，而且正好可以播放完畢的情況下。

• 如果重複次數同樣設定為 6 次，設定為事件和開始的聲音同步類型會將 6 次全部播完；若聲音是選擇串流類型，那麼就會因為與影格同步，所以只能播放 5 次。

Page 19January 6, 2008

聲音效果

• 你可以在效果欄選擇 Flash 提供的聲音特效：

Page 20January 6, 2008

自訂音效變化

• 假如自己想要調整音量的大小變化，或者改變聲音播放的起始、結束點，那麼你可以在效果列示窗選擇自訂，進入編輯分封線交談窗來設定：

Page 21January 6, 2008

自訂音效變化

• 調整音量：在聲音分封線按一下便可加入分封線控制點，往下拉曳分封線控制點可以把聲音調小，控制點位置越低聲音越小。如果想讓音樂更自然，建議你可以在音樂開始和結束的地方降低音量，營造聲音淡入、淡出的效果。

• 調整音樂片段：如果只想播放聲音中的某一小段，你可以調整時間軸上的開始時間與結束時間控制桿的位置，這樣就只會播放其中的那個音樂段落。

Page 22January 6, 2008

自訂音效變化

Page 23January 6, 2008

設定元件庫中的聲音元件屬性

• 匯入到元件庫中的聲音就是聲音本尊，而我們之後拉曳插入動畫中的聲音都是本尊的分身，這個道理和實體與元件的關係相同。所以我們在分身上做任何屬性設定都不會影響到本尊，但直接修改本尊卻會影響所有分身的屬性。

• 若要修改元件庫中的聲音實體，請在元件庫面板中點選聲音，並按滑鼠右鈕執行『屬性』命令開啟聲音屬性交談窗來修改：

Page 24January 6, 2008

設定元件庫中的聲音元件屬性

Page 25January 6, 2008

更新以及匯入來源聲音

• 更新：若來源的聲音檔有變更，按此鈕即可直接連結到來源路徑中，更新修改過的聲音檔。

• 匯入：按下此鈕可以更換元件庫中的聲音檔，聲音更換後，元件庫中的聲音名稱不會改變。

Page 26January 6, 2008

選擇聲音壓縮格式

• 聲音壓縮的程度，會因為選擇壓縮類型和設定的不同，而會有聲音品質及大小的差異，所以當你要匯出動畫或將動畫發佈成網頁時，就必須考量到傳輸、處理效率的問題，你可以藉由不同的壓縮設定，取得介於聲音品質和檔案大小之間最適合的壓縮方式。

Page 27January 6, 2008

選擇聲音壓縮格式

• 預設：先不對聲音做任何處理，等到要發佈檔案或網頁時，就會依據當時的聲音輸出設定來壓縮。

• ADPCM：適合使用於匯出成簡短的音效，例如按下按鈕的音效。

• MP3：在匯出較長的聲音時，建議使用此壓縮選項。

Page 28January 6, 2008

• RAW：匯出沒有壓縮的聲音。

• 語音：特別適用在人物說話的聲音，建議語音壓縮選擇 11 kHz 的取樣頻率。

選擇聲音壓縮格式

Page 29January 6, 2008

聲音的匯出技巧

• 若要得到最佳的聲音匯出效果，除了選擇壓縮方式或調整取樣頻率，另外還可以加上一些小技巧，再降低聲音檔大小，或是有效率的使用聲音。下面我們列出幾項小技巧。

• 在編輯分封線交談窗中，設定前面介紹過的淡出和淡入點，可減去音效開頭和結尾沒聲音的地方，降低檔案大小。

Page 30January 6, 2008

聲音的匯出技巧

• 當你在不同影格中插入同一個聲音時，可以利用編輯分封線交談窗中的分封線控制點，設定每個影個中的聲音產生不同的效果。

• 背景音效建議使用同步串流，當影片播放完畢時，聲音也同時停止播放；若電腦處理速度不夠快，動畫也會自動略過顯示速度較慢的影格與聲音同步。

Page 31January 6, 2008

實做練習

• 企鵝互動音效（exercise/互動音效.fla）▫ 製作企鵝按鈕元件▫ 滑鼠點擊時變換動作並發出聲音

Page 32January 6, 2008

12-2 匯入視訊

• 要在 Flash 動畫中播放視訊，可以選擇直接將視訊嵌入動畫中，或是以外部檔案連結的方式來進行播放。

• 透過這兩種方式加入的視訊，都可以再利用Flash 動畫與視訊產生互動，例如加上字幕、音效…等，也能以 ActionScript 來控制視訊的播放效果，甚至藉由 ActionScript 為視訊套用各種濾鏡，做出特殊的視訊效果。

Page 33January 6, 2008

匯入視訊

• 除了這些共通點之外，我們再分別說明使用嵌入視訊與外部視訊連結兩種方式在製作動畫及修改上的差異。

Page 34January 6, 2008

嵌入視訊

1. 發佈成動畫檔時只會產生一個檔案，但影片會內嵌在 swf 檔案中，所以檔案體積會比以外部檔案連結的檔案來得大。

2. 視訊會直接內嵌在 swf 檔案中，且畫面會直接轉換成影格顯示，加入、編輯動畫時較容易找到視訊中相對應的位置。

3. 由於視訊直接嵌在 swf 檔案中播放，所以若要更換視訊檔，就必須重新製作。

Page 35January 6, 2008

外部視訊連結（Basic 版不提供此功能）1. 由於動畫播放時會由外部連結視訊檔，所以會產生兩個以上的檔案，需要將所有需要的檔案一併上傳，才能順利播放視訊。

2. 視訊必須在發佈後才會開始播放（播放時才進行呼叫），若要配合影片加入 Flash 動畫，必須在匯入視訊時設定提示點再加入修改，步驟較嵌入檔案複雜。關於提示點我們將在稍後進行說明。

3. 視訊檔是由外部匯入 swf 檔中，所以只要在原始檔中，更改播放器匯入視訊檔的路徑及名稱，就能夠更換要播放的視訊檔。

Page 36January 6, 2008

匯入視訊的準備工作

• 請確定電腦中已安裝 QuickTime 7 或以上的版本。您可以連至蘋果電腦公司的官方網站（http://www.apple.com.tw/）進行下載。

• 請確定電腦中已安裝 DirectX 9 或以上的版本。您可以連至微軟網站，以關鍵字 DirectX 進行搜尋。下載前必需先通過授權認證的步驟，安裝之後請重新開機，DirectX 才會生效。

Page 37January 6, 2008

匯入視訊的準備工作

• 可匯入的視訊檔案格式包括：.avi、.mpg、.mpeg、.mov、.dv、.wmv、.flv，請檢查要匯入的檔案是否為上述的檔案格式。

• 無論你是利用內嵌或外部連結的方式匯入視訊，所選擇的視訊檔案最好不要經過壓縮，或者是內容經過複雜處理的視訊檔案（例如視訊轉場效果），後面我們將會有詳細的說明。

Page 38January 6, 2008

匯入外部視訊影片

1. 首先請執行『檔案/匯入/匯入視訊』命令，開啟匯入視訊交談窗，選擇你要匯入的影片。

Page 39January 6, 2008

匯入外部視訊影片

2. 這裡我們選擇從網站伺服器漸進式下載項目

Page 40January 6, 2008

匯入外部視訊影片

3. 在 Flash 的視訊編碼中，我們除了可以選擇視訊和音訊的編碼方式外，還能夠設定影片播放時間的事件，以及裁切視訊時間和大小。

Page 41January 6, 2008

匯入外部視訊影片

Page 42January 6, 2008

匯入外部視訊影片4. 我們可以在外觀元素列示窗中，選擇各類型的播放器，每種會有不同的面板按鈕功能，可依需求選擇適合的面板。

Page 43January 6, 2008

匯入外部視訊影片

5. 接下來只要依照交談窗中的步驟，將視訊檔案儲存並經過編碼後，播放器組件就會自動插入舞台中。

Page 44January 6, 2008

匯入外部視訊影片

Page 45January 6, 2008

匯入外部視訊影片

Page 46January 6, 2008

匯入外部視訊影片

• 完成視訊編碼後，你可以在舞台中看到 FLVPlayback播放器，且在儲存原始檔案的資料夾中，也會產生 flv視訊檔。

Page 47January 6, 2008

匯入外部視訊影片

• 最後我們只要執行『控制/測試影片』命令，將影片發佈成 .swf 檔後，就可以播放視訊影片。

Page 48January 6, 2008

匯入外部視訊影片

Page 49January 6, 2008

各種匯入視訊的方法

• 從網站伺服器漸進式下載：可以將完成匯入的視訊檔案，上傳到一般的伺服器使用，例如自己所架設的伺服器空間，但只適用於 Flash Professional 版本。

• Flash 視訊串流服務的串流：將視訊檔案上傳到有提供 Flash 視訊串流服務（Flash Video Streaming Service，簡稱 FVSS）的代管主機上使用（網路上所申請，支援視訊串流的網路伺服器），此功能只適用於 Flash Professional 版本。

Page 50January 6, 2008

各種匯入視訊的方法

• Flash communication 伺服器的串流：利用Macromedia 開發的伺服器軟體 Flash Communication Server 來管理視訊串流（軟體提供視訊串流、資料廣播、虛擬會議室、留言板、線上視訊對談等...功能，此功能只適用於 Flash Professional 版本。

Page 51January 6, 2008

各種匯入視訊的方法

• 在 SWF 中內嵌視訊並在時間軸中播放：內嵌的視訊會直接嵌在文件中，而且你可以在時間軸中，看到影格所表示的視訊長度，所以可以很方便的與 Flash 製作互動的效果，但是發佈的 SWF 檔案會比較大。

Page 52January 6, 2008

內嵌視訊影片

• 內嵌的視訊影片，是將視訊檔直接嵌入檔案中，成為 Flash 文件的一部分。現在請開啟新檔案，執行『檔案/匯入/匯入視訊』命令，開啟匯入視訊交談窗：

1. 首先選擇要嵌入文件的視訊檔，再選擇使用在SWF 中內嵌視訊並在時間軸中播放功能，準備在文件中嵌入視訊。

Page 53January 6, 2008

內嵌視訊影片

Page 54January 6, 2008

內嵌視訊影片

Page 55January 6, 2008

內嵌視訊影片

2. 元件類型選擇內嵌視訊，接著設定視訊影音的品質，以完成內嵌的動作。

Page 56January 6, 2008

內嵌視訊影片

Page 57January 6, 2008

內嵌視訊影片

3. 最後我們只要完成視訊編碼後，你就會看到視訊嵌在文件裡面，而且還可以直接看到視訊的內容。

Page 58January 6, 2008

內嵌視訊影片

Page 59January 6, 2008

內嵌視訊影片

• 視訊檔案內嵌後，就可以結合 Flash 動畫，製作出許多種效果，現在你可以執行『控制/測試影片』命令，發佈檔案看看內嵌視訊的效果。

Page 60January 6, 2008

視訊編碼的進階設定

• 在匯入視訊交談窗中，按下顯示進階設定鈕後，你可以在編碼、提示點、裁切和修剪頁次中，進階設定視訊影片（其中編碼及提示點功能，只適用於 Flash Professional 版本）。下面我們就分別來介紹各頁次的設定內容。

Page 61January 6, 2008

編碼• 編碼頁次中主要是調整視訊影像及聲音的編碼，此外還有支援影像去背的特殊選項。下面我們來看看有哪些設定項目：

Page 62January 6, 2008

編碼 Alpha 色版的應用• 如果你的影片已經有做好去背，當要將影片編碼時，可勾選編碼頁次中的編碼 Alpha 色版支援去背效果，以配合 Flash 動畫使用。

Page 63January 6, 2008

提示點

• 在視訊上設定提示點後，可以利用 ActionScript 指令，偵測提示點參數控制 Flash 動畫播放，例如想要在視訊播放到某一時間點時，播放跑馬燈字幕的說明。

Page 64January 6, 2008

裁切和修剪• 裁切可以改變視訊影片的尺寸，或是裁切掉某些區域，以突顯影片中的某個區塊；而修剪功能則是可以剪去視訊的起始或結束位置，只取某一個段落來播放。

Page 65January 6, 2008

如何選擇視訊檔案

• 使用未經壓縮的影片來編碼：若使用壓縮過的視訊檔來進行編碼，可能會產生雜訊，所以建議使用未經壓縮的視訊來編碼。

• 避免使用過大的影片檔：將視訊上傳到網路上，若使用的視訊檔太大，對於頻寬較小的人，就必須等待檔案下載，所以盡量避免使用過大的視訊檔。

• 影片內容盡量簡單：避免選擇有轉場效果的影片，例如影片翻頁、畫面逐漸消失等效果。這些效果都可能在播放視訊時，產生定格的現象。

Flash 網頁設計與特效大綱11-1 樣版介紹11-2 三分鐘輕鬆製作 Flash11-3 自製樣版Flash 網頁設計與特效大綱12-1 匯入聲音將聲音匯入至元件庫將聲音插入動畫中按鈕元件加入音效聲音的屬性設定聲音同步類型的特性與用途聲音同步類型的特性與用途聲音同步類型的特性與用途聲音同步類型的特性與用途聲音的重複播放設定聲音同步類型配合重複次數設定聲音效果自訂音效變化自訂音效變化自訂音效變化設定元件庫中的聲音元件屬性設定元件庫中的聲音元件屬性更新以及匯入來源聲音選擇聲音壓縮格式選擇聲音壓縮格式選擇聲音壓縮格式聲音的匯出技巧聲音的匯出技巧實做練習12-2 匯入視訊匯入視訊嵌入視訊外部視訊連結 �（Basic 版不提供此功能）匯入視訊的準備工作匯入視訊的準備工作匯入外部視訊影片匯入外部視訊影片匯入外部視訊影片匯入外部視訊影片匯入外部視訊影片匯入外部視訊影片匯入外部視訊影片匯入外部視訊影片匯入外部視訊影片匯入外部視訊影片匯入外部視訊影片各種匯入視訊的方法各種匯入視訊的方法各種匯入視訊的方法內嵌視訊影片內嵌視訊影片內嵌視訊影片內嵌視訊影片內嵌視訊影片內嵌視訊影片內嵌視訊影片內嵌視訊影片視訊編碼的進階設定編碼編碼 Alpha 色版的應用提示點裁切和修剪如何選擇視訊檔案