↓sample↓    AS3:XMLファイルを読み込んで表示する字幕機能付flvプレーヤー          
ステージの準備
●AS3プロジェクトで、540×410ピクセル、12fps、背景色"#fbf8f3"を設定。(この頁が#fbf8f3の為。色は自由です。)

●コンポーネントウインドウを開き、ライブラリーにFLVPlayback、FLVPlaybackCaptioning、UILoaderをドラッグして格納。

●ライブラリーからFLVPlaybackをステージにドラッグし、x座標は0、y座標は0、コンポーネントインスペクタで
"SkinUnderAll.swf"を選び、スキンの色を"#0x666666"、flvのソ−スは"../Sample/BONUS_video.flv"とする。
"BONUS_video.flv"は540×360ピクセルの4:3画像でビットレート400kbpsでエンコードしてある1分少々の動画。
動画は支障のないものと変えてありますので、キャプション文字と何ら関係ありませんがお気になさらず。

●デバックで再生を確認。その時にコントロール部分をキャプチャーし、フォトショップ等の画像編集ソフトで静止画を作る。
静止画
隅の透明部分が確保される保存方法がいい。この場合は、"contoller.psd"とした。

●次にフォトショップ等の画像編集ソフトでボタンを作る。
ボタン ← 540×360ピクセルで、レイヤーが2つに分かれている。(BGとbutton)"button.psd"で保存。

●FLASHに戻り、"contoller.psd"と"button.psd"をライブラリーにムービークリップで読み込み、格納する。

●ムービークリップ"contoller"は、プロパティを開いてクラスを「contoroller」としてリンケージ書き出しする。

●ライブラリーのムービークリップ"BG"をステージの新規レイヤーにドラッグし、x座標は0、y座標は0、に配置する。
"BG"を新規シンボルでボタンとして書き出し、ムービークリップ"button"を追加して編集する。
↓こんな感じ。シンボル名は"btn"
ボタン編集

←クリックすると
大きい画像が開きます。
ライブラリー                      ボタン編集が終わったら、ボタンクリップ"btn"は、プロパティを開いてクラスを「Button」としてリンケージ書き出しする。
 リンケージ書き出しについて、詳しくは「ActionScript に対するライブラリシンボルのリンケージ書き出し」を参考にしてください。

 ●ステージに配置したスキンやボタンなど、すべて削除します。ステージは空のレイヤー1つのみ。
 ←ライブラリーはこんな状態です。

 ●../Sampleフォルダに静止画(jpg)を用意する。今回用意した静止画は"main_540.jpg"(←クリックすると開きます)540×360ピクセルの4:3画像。

 ●captionフォルダに"videoPlay.xml"を用意する。このXMLファイルは、ビデオのアドレス、静止画像のアドレス、袋文字の色、キャプションの座標などを記述。videoPlay.xml
 リンクが開いたら、ソースを見てください。UTF-8形式で保存。

 ●captionフォルダに"caption_video.xml"を用意する。このXMLファイルは、字幕用のキャプションファイルです。caption_video.xml
 リンクが開いたら、ソースを見てください。"xml:space="preserve"というのは「スペース」を認識する、という意味です。UTF-8形式で保存。

 ●skinファイルが格納されているフォルダーから選んだskinファイルをコピーして、スキンのファイルを保存するフォルダに用意する。
 skinが格納されているフォルダ:
 CS3: C:\Program Files\Adobe\Adobe Flash CS3\ja\Configuration\FLVPlayback Skins\ActionScript 3.0
 CS4: C:\Program Files\Adobe\Adobe Flash CS4\Common\Configuration\FLVPlayback Skins\ActionScript 3.0
 今回使用したスキンは、"SkinUnderAll.swf"。これをコピーして格納する。

フォルダ構造 印のファイルはサイトにUPしなくていい
 SkinUnderAll.swf ←コピーしたスキンファイル フォルダ構造
 AC_RunActiveContent.js ←ジャバスクリプトファイル(caption_video.htmlに必要)
 caption(フォルダ)  caption_video.html  ←このファイル
 この↑フォルダの
 命名は何でもいい。
 videoPlay.xml  ←読み込むXMLファイル
 caption_video.xml  ←読み込むXMLファイル
 caption_video.swf  ←今回作ったプレーヤー
 caption_video.fla ←FLASHプロジェクト
 FukuromojiField.as ←アクションスクリプトファイル
 MyFLVPbCaptioning.as ←アクションスクリプトファイル
 Sample(フォルダ)  BONUS_video.flv  ←動画ファイル
   main_540.jpg  ←静止画ファイル
 

●FLASHプロジェクトと同じ階層に、まず、ドキュメントクラス用にアクションスクリプトファイルを作っておきます。
・FukuromojiField.as、・MyFLVPbCaptioning.as、の2つ。                           

アクションスクリプト(FukuromojiField.asに記述)
------------------------------------------------------------------

package {
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldType;
import flash.text.AntiAliasType;
import flash.filters.DropShadowFilter;
import flash.filters.BitmapFilterQuality;

public class FukuromojiField extends TextField {
//コンストラクタ
function FukuromojiField(sdwColor:uint){
this.type = TextFieldType.DYNAMIC;
//背景を透明にする
this.background = false;
this.antiAliasType = AntiAliasType.ADVANCED;
this.width = 540;
this.height = 40;
//フィルタを掛ける
this.filters = fukuromojiFilters(sdwColor);
}
//袋文字にするフィルタ
public function fukuromojiFilters(sdwColor:uint):Array {
var dsf:DropShadowFilter = new DropShadowFilter();
dsf.blurX = dsf.blurY = 4;
dsf.color = sdwColor;
dsf.strength = 64;
dsf.distance = 0;
dsf.quality = BitmapFilterQuality.MEDIUM;
return [dsf];
}
}
}

アクションスクリプト(MyFLVPbCaptioning.asに記述)
--------------------------------------------------------

package {
import fl.video.FLVPlaybackCaptioning;
import fl.video.FLVPlayback;
import flash.text.TextField;

public class MyFLVPbCaptioning extends FLVPlaybackCaptioning {
//コンストラクタ
function MyFLVPbCaptioning(flvPB:FLVPlayback,source:String,capFld:TextField,layout:Boolean=false){
this.flvPlayback = flvPB;
this.source = source;
//キャプション用のフィールド
this.autoLayout = layout;
this.captionTarget = capFld;
capFld.multiline = true;//複数行可能にする。(フリカナの為)
capFld.condenseWhite = true;//空白を認識
}
}
}
--------------------------------------------------------

●FLASHプロジェクトと同じ階層に、FukuromojiField.as、MyFLVPbCaptioning.as、を置いたら、
FLASHプロジェクトを開き、ステージの1フレームの空白フレームに以下のスクリプトを記述。

アクションスクリプト(ステージの1フレームに記述)
------------------------------------------------------------------------------------------------------------------------------------------------------------------

import flash.text.*;
import fl.containers.UILoader;
import flash.net.*;
import flash.display.*;
import flash.events.*;
import fl.video.*;
import FukuromojiField;//今回作ったドキュメントクラスを読み込む(FukuromojiField.as)
import MyFLVPbCaptioning;//今回作ったドキュメントクラスを読み込む(MyFLVPbCaptioning.as)

var container:Sprite = new Sprite();
addChild(container);

var box:Sprite = new Sprite();

//"videoPlay.xml"を読み込んで使えるようにする。
var myXML:XML = new XML();
var XML_URL:String = "videoPlay.xml";
var myXMLURL:URLRequest = new URLRequest(XML_URL);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener("complete", xmlLoaded);
function xmlLoaded(event:Event):void{
myXML = XML(myLoader.data);
var element:XML;
for each (element in myXML..item){
var Pskin:String = element.Pskin.toString();
var flv:String = element.flv.toString();
var img:String = element.img.toString();
var col:String = element.col.toString();
var xtag:String = element.xtag.toString();
var ytag:String = element.ytag.toString();

//最初に静止画像を表示する為の(box)を作成。
var contoro_mc:contoroller = new contoroller();//リンケージ格納したコントロールバ−画像を、contoro_mcとしてスクリプトで呼び出す。
contoro_mc.x = 0;
contoro_mc.y = 360;
contoro_mc.alpha = 50;
box.addChild(contoro_mc);
var aLoader:UILoader = new UILoader(); //UILoaderの呼び出し
aLoader.source = myXML.channel.item.img.toString();//UILoaderのソース画像アドレスを"videoPlay.xml"から読み込む
aLoader.scaleContent = false;
box.addChild(aLoader);
var inv_btn:Button = new Button();//リンケージ格納したボタンクリップ(btn)を、inv_btnとしてスクリプトで呼び出す。
inv_btn.x = inv_btn.y = 0;
box.addChild(inv_btn);

container.addChild(box);//boxの表示

//クリックすると静止画(box)を見えなくして、ビデオの再生を始める。
container.addEventListener(MouseEvent.CLICK,cliked);
function cliked(event:MouseEvent):void{

box.visible = false;

//playerを作成
var player:Sprite = new Sprite();
var myFLVPb:FLVPlayback = new FLVPlayback();
//キャプション用フィールドを作る
var sdwColor:uint = myXML.channel.item.col.toString();//袋文字用の色をvideoPlay.xmlから読み込む
var myCapFld:FukuromojiField = new FukuromojiField(sdwColor);
//キャプション管理のFLVPbCaptioningを作り、"caption_video.xml"から字幕を読み込む。
var capURL:String = "caption_video.xml";
var layout:Boolean = false;
var myFLVPbCap:MyFLVPbCaptioning = new MyFLVPbCaptioning(myFLVPb,capURL,myCapFld,layout);
//ビデオスキン(FLVPlayback)の設定
myFLVPb.x = 0;
myFLVPb.y = 0;
myFLVPb.width = 540;
myFLVPb.height = 360;
myFLVPb.volume = 0.5;//ボリューム0.1〜1.0で指定
myFLVPb.autoPlay = true;
myFLVPb.skin = myXML.channel.item.Pskin.toString();//スキンアドレスをvideoPlay.xmlから読み込む
myFLVPb.source = myXML.channel.item.flv.toString();//動画アドレスをvideoPlay.xmlから読み込む
myFLVPb.skinBackgroundColor = myXML.channel.item.Pskincol.toString();//スキンの色をvideoPlay.xmlから読み込む
myFLVPb.skinBackgroundAlpha = 1;
myFLVPb.skinAutoHide = false;
//以上の3つを表示する
addChild(myFLVPb);
addChild(myCapFld);
addChild(myFLVPbCap);
//キャプション用フィールドの座標などの設定を"videoPlay.xml"から読み込む。
myCapFld.x = myFLVPb.x+myXML.channel.item.xtag.toString();//x座標
myCapFld.y = myFLVPb.y+myXML.channel.item.ytag.toString();//y座標

addChild(player);//playerの表示
}

}
}

              ●完成!!・・・と思いましたが、ウインドウズで見てみたら、いい位置にフリカナされないぃぃぃ……。Macのサファリでは、完璧だけど・・・
              ブラウザによって、PC設定によって、地域によって、色んな場合に対応した、フリカナはどうやら無理のようです。
              もともとhtmlタグの"<ruby></ruby>"はインターネットエクスプローラではちゃんとフリカナになりますが、サファリやファイヤーフォックスでは無視、ですしね。
              ブラウザのデフォルトで等倍フォント使用かプロポーショナルフォント使用かで、文字間隔もちがってきますし。
              とりあえず無難な「MS明朝体」を使いましたが、同じ「MS明朝体」でもMacとWindowsではフォント表示が違う。……DVDの様にはいきませんね。
              ・・・という言い訳をとりあえずしておき、Macでのサファリやオペラでは以下のように表示されます。(美しいです)

              マックのサファリ

              ●袋文字やフリカナなんて必要ない!、と思われる方はもっと簡単にキャプションを作れます。参照サイトは以下↓
               ・ActionScript 3.0 コンポーネントガイド > FLVPlayback キャプションコンポーネントの使用 > FLVPlaybackCaptioning コンポーネントの使用
                   開いたら「関連トピック」 FLVPlaybackCaptioning コンポーネントへのキャプションの追加を見てください。
               ・CS3コンポーネントで楽々字幕入りコンテンツを作る
                   音楽ミキシングエンジニア、かつプログラマーさんのブログ


FLASH関連リンク