Transcript CH13
13 探險動物園-視訊影片設計 13.1 13.2 13.3 13.4 13.5 13.6 13.7 動畫搶先看 將影片轉成 FLV 格式 設計影片選單按鈕 用組件製作文字捲動窗格 使用播放組件載入外部視訊 透過程式碼控制視訊播放 透過程式碼讀取外部文字 13.1 動畫搶先看 本章動畫作品要動手設計影片的播放，了解如何在 Flash 中加入視訊 元素。一開始會先出現 「駱馬」 影片等待播放，接著可透過上方選 單按鈕切換至 「大貓熊」 影片，除此之外影片右側也會搭配相關文 字說明，讓瀏覽者更了解播放的內容。 動態效果 元件角色 此範例元件庫內的元件主要是協助作品：美化設計、影片控制、文字 呈現...等動作，分為以下主要內容： 製作流程 13.2 將影片轉成 FLV 格式 Flash 近期版本軟體中，視訊在格式支援與編輯上有著重大變革。以 往可以匯入與支援的 mov、avi、mpeg 或其他格式視訊檔，現在必須 要先將視訊轉換成 F4V 或 FLV 格式編碼，才可以匯入使用。 01 開啟 Adobe Media Encoder 軟體 若手邊的視訊影片是 .avi 、.mpg、.mp4、.mov、wmv...等格式時， 需先將視訊轉換成 F4V 或 FLV 格式編碼，才可以匯入 Flash CS6 中 使用。Adobe Media Encoder 是套在安裝 Flash 時就已一起安裝好的 轉檔程式，提供轉存 FLV、 F4V 格式。 02 加入需轉換編碼格式的視訊檔 03 調整視訊檔案的相關轉換設定 04 裁切視訊播放尺寸 05 修剪影片長度 06 調整影片品質 07 執行轉檔編碼處理 08 將第二個影片轉檔成 FLV 格式 13.3 設計影片選單按鈕 此章視訊影片作品希望要播放的有 「駱馬」 與 「大貓熊」 二則影片 ，這時如果設計上對應主題的影片選單按鈕，不但方便操作也會替作 品大大加分。 請開啟本章範例原始檔 <13-01.a>，當有一則以上的影片時，就需要 透過選單按鈕來選擇想要播放的影片項目，現在來為作品設計二個選 單按鈕。 此練習檔已於 背景 圖層佈置上動畫的底圖、圖樣 及標題文字，而後續說明要加入的影片、按鈕與程 式元素將會一一設計在其他相關圖層中。 01 轉換為按鈕元件 02 設計第一個按鈕 03 設計第二個按鈕 04 訂立按鈕的實體名稱 13.4 用組件製作文字捲動窗格 組件可以是簡單的介面控制項，如：按鈕、選單按鈕或核取方塊；也 可以是複雜的控制元素。這一節將運用組件為作品設計一個顯示影片 資訊的文字捲動窗格，讓瀏覽影片的同時更可透過文字了解內容。 01 加入 TextArea 文字區域組件 02 調整 TextArea 文字區域組件位置與大小 03 訂立 TextArea 文字區域組件實體名稱 04 製作第二個影片的文字捲動窗格 05 組件參數設定 完成 TextArea 文字區域組件的建立後，還可以再透過 屬性 面板設定 組件參數，調整該組件的相關屬性，以下是 TextArea 文字區域組件 中常用的參數說明： 13.5 使用播放組件載入外部視訊 完 成 13.2 節 視 訊 檔 格 式 的 轉 換 動 作 後 ， 請 確 定 轉 換 後 的 <movie01.flv>、<movie02.flv> 二視訊檔是否與目前的作品檔 (*.fla) 存放在同一個資料夾中，這樣一來就可以動手設計載入外部視訊檔。 01 匯入視訊 02 調整視訊物件的位置 03 修改播放組件相關參數 04 匯入第二個視訊與修改組件參數 13.6 透過程式碼控制視訊播放 目前作品中的視訊影片、選單控制鈕...等元素均已安排好，就只差如 何指揮這些元素「動起來」，在視訊影片的部分將透過程式碼 addEventListener 函式為按鈕物件加上偵聽動作，以有效的控制視訊 與按鈕的關係。 01 設定不自動播放下一影格內容 02 為按鈕 1 指定動作 03 為按鈕 2 指定動作 04 測試按鈕與影片間的互動效果 13.7 透過程式碼讀取外部文字 此章視訊作品最重要的二大元素：影片與說明文字，均採讀取外部檔 案的方式來設計，這樣做法一方面可減輕檔案大小、另一方面可在不 用開啟 Flash 軟體的情況下直接調整說明文字與影片內容，有利於後 續維護人員的更新動作。 01 自訂物件讀取外部文字檔案資料 ActionScript 3 中可利用 URLRequest 函式宣告載入外部檔案的路徑 ，再用 Loader 或 URLLoader 類別下載資料， 其中 Loader 類別可用 來載入 SWF 檔案或影像檔 (JPG、PNG 或 GIF)，而 URLLoader 類 別則適用於下載文字檔、XML 或其他資訊，在此例我們要載入的是外 部文字檔案資料，所以採用後者。 02 為讀入的文字資料指定顯示位置 03 讀入第二則影片的文字資料並指定顯示位置 04 測試作品完成結果 完成此節讀取外部文字檔資料程式碼設計後，請儲存檔案再按 + 鍵，瀏覽整個作品的動態效果。按右上方第一個按鈕會執行 影格 1，出現第一則駱馬的影片等待播放，並於右側文字窗格顯示指 定的文字內容。