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,出現第一則駱馬的影片等待播放,並於右側文字窗格顯示指
定的文字內容。