這是以 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)
2010/05/12 14:49 2010/05/12 14:49
2010/05/12 14:49 

Trackback Address :: 無法向此文章發送引用


[1]... [15][16][17][18][19][20][21][22][23]... [419]