汇入视讯档课件.ppt

1、本章提要本章提要v動畫元件與流程說明v設定動畫屬性與匯入視訊檔v建立元件v建立影片影片片段元件v組合電視框與影片v加入影片播放控制鈕視訊物件的應用視訊物件的應用動畫元件與流程說明動畫元件與流程說明v元件介紹v動畫製作流程v重點說明元件介紹元件介紹動畫製作流程動畫製作流程重點說明重點說明v此範例雖然元件眾多,不過其中 10 個字幕與 1 個視訊檔都是要用來組合影片影片片段元件中的零件,所以我們把這些元件統一放置在元件庫面板的影片零件資料夾中,以便管理。重點說明重點說明v本範例使用了許多文字物件來製作字幕,而使用非向量字體的文字物件在變形(如旋轉)後,將無法正常發佈,所以若要完整製作本範例,必須先

2、安裝好適當的向量字型(本範例使用的是全真綜藝體),並取消屬性面板的使用裝置字體選項。重點說明重點說明v雖然 Flash 擁有強大的影片壓縮技術,不過建議你還是不要匯入太大的視訊檔,一方面是編輯時會佔用很多記憶體,造成電腦負擔,一方面是輸出後檔案要是太大(超過 2、3 MB),在觀賞時容易出現停格、不順暢的現象。因此,在匯入視訊檔前可以先用影片剪輯軟體剪接好你要的片段,再匯入 Flash 中使用。假如沒有其他剪輯軟體,那麼在 Flash 匯入影片的過程中,也有提供簡單的影片剪輯功能。設定動畫屬性與匯入視訊檔設定動畫屬性與匯入視訊檔v設定動畫文件屬性v匯入視訊檔設定動畫文件屬性設定動畫文件屬性v為

3、了在建立元件時可以對照舞台的大小與背景色,最好在開新檔案後就立即設定文件屬性。所以請各位 在開啟一個新的 空白檔案後,立 即依下圖設定文 件屬性：匯入視訊檔匯入視訊檔v文件屬性設定完成後,接著就來匯入最重要的視訊檔吧！以檔案/匯入/匯入至元件庫命令將視訊檔直接匯入元件庫中。下圖是本範例匯入視訊檔時的設定狀況：匯入視訊檔匯入視訊檔匯入視訊檔匯入視訊檔建立元件建立元件v字幕v電視框與螢幕遮罩v雜訊線條字幕字幕v本範例中的 10 個字幕(字幕 1 字幕 10)都是圖像元件,單純由文字物件與圖像物件組合而成。電視框與螢幕遮罩電視框與螢幕遮罩v電視框圖像元件的製作並不難,只要將電視框各部分一一繪製在不同

4、圖層中,然後仔細依上下順序組合好即可。由於我們繪製的是具立體感的電視框,為了避免編輯時不小心破壞其他圖像物件,請把每一圖層中的圖像物件都群組起來。電視框與螢幕遮罩電視框與螢幕遮罩v另外要做一個螢幕遮罩圖像元件,這個元件是做為螢幕顯示範圍的遮色片,所以大小必須和電視框圖像元件中間螢幕的部分一樣大,故你可以直接將電視框圖像元件的螢幕部分(本範例中為圖層 2 去掉外框線的部分)複製後貼到螢幕遮罩圖像元件中即可。電視框與螢幕遮罩電視框與螢幕遮罩雜訊線條雜訊線條v雜訊線條影片片段元件,則是由一條淺灰色的斜線左右跳動組成的一個簡單動畫。為了做出細微的加速效果,我們使用了形狀補間動畫,並將它做成影片片段元件

5、,以便不斷地循環播放。建立影片影片片段元件建立影片影片片段元件v安排圖層並置入視訊檔v加入字幕v遺失字體警告v設定 ActionScript安排圖層並置入視訊檔安排圖層並置入視訊檔v首先要安排影片影 片片段 元件的圖層並置入視訊檔,請直接進入影片影片片段元件的編輯模式：安排圖層並置入視訊安排圖層並置入視訊檔檔加入字幕加入字幕v接著配合視訊檔內容來加入字幕,其中只有第一個開頭標題字幕 1 圖像元件加上了淡入淡出動畫,製造出開場的感覺。1.首先製作字幕 1 圖像元件的淡入淡出動畫。加入字幕加入字幕加入字幕加入字幕遺失字體警告遺失字體警告v在本章範例中所使用的向量字體是全真綜藝體,若是你的電腦中沒有

6、安裝此字體,建議你使用 ch22-learn2.fla 來練習此範例。若你的電腦中並無此字體,而直接使用 ch22-learn1.fla 時,在步驟 1 拉曳字幕 1 元件進入舞台時,便會開啟如下的警告視窗：遺失字體警告遺失字體警告遺失字體警告遺失字體警告遺失字體警告遺失字體警告v雖然 Flash 提供了替代字體的方法來解決瀏覽者可能看不到字體的問題,但整個動畫的原始設計及創意卻可能因此被破壞。因此,為了確保瀏覽者能看到正確的結果,當你的電腦中沒有這個字體時,建議你將文字打散成圖像物件或是將文字內嵌在動畫中兩種方法來製作動畫。加入字幕加入字幕2.接下來插入其他靜態的字幕。以下是將字幕 2 圖像

7、元件插入在影格 1622 間的方法。加入字幕加入字幕3.接著把字幕 3 字幕 6 圖像元件依序插入在特定的位置。加入字幕加入字幕4.字幕 7 和字幕 8 圖像元件則要安排一點漸進式的動畫。我們要讓字幕圖層的影格 120122、123125、126128、129131、132140 處,分別出現 1、2、3、4、5 個字幕 7 實體,而字幕 8 圖像元件則在影格 132 處才出現,以表現出分數一一揭曉的感覺。加入字幕加入字幕加入字幕加入字幕5.最後把字幕 9 和字幕 10 圖像元件依序插入在特定的位置,即完成所有字幕。設定設定 ActionScriptv我們希望影片播放完一遍後可以停住,所以要在

8、 Actions 圖層的影格 233 處(即影片的最後一格)插入一個停止播放的指令：組合電視框與影片組合電視框與影片v接下來就要進行組合電視框與影片的工作,若是你尚未完成影片影片片段元件的製作,可以直接開啟練習檔 ch22-learn3.fla(若你剛才使用的是 ch22-learn2.fla,在此請開啟 ch22-learn4.fla)來操作：1.請回到場景 1 中,將圖層安排妥當,並將需要的元件一一插入各圖層的舞台中：組合電視框與影片組合電視框與影片組合電視框與影片組合電視框與影片2.接著將影片影片片段元件放到影片圖層的影格 1,並將影片實體稍微變形,以配合螢幕的形狀：組合電視框與影片組合

9、電視框與影片組合電視框與影片組合電視框與影片3.最後啟動遮色片功能,讓影片和雜訊線條實體都只在電視螢幕的範圍中顯示,便大功告成！加入影片播放控制鈕加入影片播放控制鈕v加入控制鈕v加上控制鈕的行為加入影片播放控制鈕加入影片播放控制鈕v這個範例一樣先利用視訊檔及遮色片,製作一個電視機螢幕 播放影片的效果 。不同的是我們 還利用按鈕元件 搭配行為指令面 板,做出一排可 控制影片播放的按鈕：加入控制鈕加入控制鈕v請開啟練習檔 ch22-learn5.fla,首先我們要在電視機下面加上一排控制鈕。你可以自己製作漂亮的按鈕,或者執行視窗/其他面板/內建元件庫/按鈕命令,直接使用 Flash 內建的按鈕元件

10、庫：加入控制鈕加入控制鈕加上控制鈕的行為加上控制鈕的行為v接下來,要利用行為指令面板為每顆按鈕加上功能指令,這樣我們才能真正透過這些按鈕來控制影片的播放。假如你還沒把控制鈕插入動畫中,可開啟練習檔 ch22-learn6.fla 來進行以下的步驟。1.首先我們要幫動畫中的影片實體取個名字,方便稍後指定要控制的影片對象：加上控制鈕的行為加上控制鈕的行為加上控制鈕的行為加上控制鈕的行為2.現在要開始幫每個按鈕加上行為指令。請選取動畫中的 鈕,然後從行為指令面板選擇內嵌視訊/暫停：加上控制鈕的行為加上控制鈕的行為3.接著會開啟暫停視訊交談窗讓你指定要控制的影片實體：加上控制鈕的行為加上控制鈕的行為加上控制鈕的行為加上控制鈕的行為v停止鈕：加上控制鈕的行為加上控制鈕的行為v播放鈕：加上控制鈕的行為加上控制鈕的行為v顯示影片鈕：加上控制鈕的行為加上控制鈕的行為v隱藏影片鈕：