這是以 ActionScript 啟動 FLVPlayback 組件所有按鈕功能的範例,除了設定組件檢測器外,還可以用這種方式播放 FLV 影片。以最簡易作法盡可能達到最佳影片播放效果是本篇重點。
關於 FLVPlayback Skin 因為是全功能 FLV 播放器,因此選擇 SkinUnderAll(SkinOverAll 有可能擋住預設字幕) FLVPlayback skin 可在以下位置找到: Adobe\Adobe Flash CS4\Common\Configuration
本機測試可以這樣搞(使用正斜線),但測試結束一定要改掉,僅限本機測試使用。 FLVPlayback.skin = "C:/Program Files/Adobe/Adobe Flash CS4/Common/Configuration/FLVPlayback Skins/ActionScript 3.0/SkinOverPlaySeekMute.swf";
關於全螢幕 FLVPlayback 的全螢幕按鈕不需設定,只要在嵌入 swf 的 Html 上設定全螢幕即可。
IE, Firefox, Chrome 皆能接受的 Fullscreen for Flash 語法:
<object width="400" height="300" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"> <param name="wmode" value="transparent"> <param name="allowFullscreen" value="true"> <param name="quality" value="high"> <param name="movie" value="sample.swf"> <embed width="400" height="300" allowFullscreen="true" quality="high" src="sample.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed> </object>
關於字幕 字幕內建 autoLayout 屬性為 true,它可以讓 Flash 自動控制字幕位置,若改為 false 切換到全螢幕時要重新設定字幕位置,為了以最簡易的方式控制字幕,這裡開啟 autoLayout,並採用 SkinUnderAll 避免擋到字幕(使用 Under 系列 Skin 需預留播放器位置,需將 Flash 高度調高 36 pixel),在切換全螢幕時字幕會有小飄移,可能是 autoLayout 的 Bug。
將新細明體當作影片字幕真的是慘不忍睹,至少要換成微軟正黑體(或系統有的黑體字型),另外 Time Text XML 語法 tts:FontFamily 無法順利指定字型,改在 CaptionChangeEvent 設定,美中不足的是,字幕首行要空著才不會露出破綻。
FLVPlayback.fla(先將 FLVPlayback, FLVPlaybackCaptioning 組件拉到元件庫)
import fl.video.FLVPlayback; import fl.video.FLVPlaybackCaptioning; import fl.video.CaptionChangeEvent;
var fpb:FLVPlayback = new FLVPlayback(); fpb.width = 400; fpb.height = 300; fpb.skin = "SkinUnderAll.swf"; fpb.source = "wii.flv"; fpb.skinBackgroundColor = 0x00004F; fpb.autoPlay = false; fpb.skinAutoHide = false; fpb.addEventListener(VideoEvent.COMPLETE, completeHandler); addChild(fpb);
var fpbcap:FLVPlaybackCaptioning = new FLVPlaybackCaptioning(); fpbcap.source = "Caption.xml"; fpbcap.flvPlayback = fpb; fpbcap.addEventListener(CaptionChangeEvent.CAPTION_CHANGE,onCaptionChange); addChild(fpbcap);
function completeHandler(event:VideoEvent):void{ fpb.seek(0); }
function onCaptionChange(event:CaptionChangeEvent):void { var captxt:TextField = event.target.captionTarget; var captf:TextFormat = new TextFormat(); var captxtDropShadow:DropShadowFilter = new DropShadowFilter(2, 45, 0x000000, 25, 3, 3, 2, 2); captf.font = "微軟正黑體"; captxt.defaultTextFormat = captf; captxt.filters = [captxtDropShadow]; }
Caption.xml
<?xml version="1.0" encoding="UTF-8"?> <tt xml:lang="zh-TW" xmlns="http://www.w3.org/2006/04/ttaf1" xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling"> <head> <styling> <style id="myStyle" tts:FontFamily="Arial" tts:backgroundColor="transparent" tts:fontSize="14" tts:fontWeight="bold" tts:textAlign="center"/> </styling> </head> <body> <div xml:lang="en"> <p begin="00:00:00.10" style="myStyle"></p> <p begin="00:00:01.00" style="myStyle">影片開始</p> <p begin="00:00:03.30" style="myStyle">這是 Wii 早期的宣傳影片</p> <p begin="00:00:08.30" style="myStyle">示範 AS3 播放 FLV 加上字幕的作法</p> <p begin="00:00:16.00" style="myStyle">打桌球</p> <p begin="00:00:22.00" style="myStyle">煮菜</p> <p begin="00:00:28.50" style="myStyle">演奏</p> <p begin="00:00:33.70" style="myStyle">太鼓達人</p> <p begin="00:00:36.70" style="myStyle">打棒球</p> <p begin="00:00:39.50" style="myStyle">釣魚</p> <p begin="00:00:45.20" style="myStyle">??</p> <p begin="00:00:51.00" style="myStyle">超級瑪莉</p> <p begin="00:00:58.00" style="myStyle">特異功能啟動</p> <p begin="00:01:04.00" style="myStyle">鬼屋探險</p> <p begin="00:01:10.30" style="myStyle">四人對戰</p> <p begin="00:01:18.50" style="myStyle">槍戰</p> <p begin="00:01:26.00" style="myStyle">打蚊子</p> <p begin="00:01:35.00" style="myStyle">武士決鬥</p> <p begin="00:01:43.50" style="myStyle">電話來了...</p> <p begin="00:01:51.00" style="myStyle">非常神奇</p> <p begin="00:01:54.00" style="myStyle">Wii</p> <p begin="00:02:00.00" style="myStyle">示範結束</p> </div> </body> </tt>
相關連結:Adobe Flash Professional * Use Timed Text captions(Time Text XML) |