メニューバー

HOME HELP 新着記事 ツリー表示 スレッド表示 トピック表示 発言ランク ファイル一覧 検索 過去ログ

ツリー一括表示

Nomal ちょっと脱線:字幕を表示・非表示させるAS3 /mitt (09/12/17(Thu) 02:37) [ID:vS2O7xY5] #309
Nomal 1フレームに記述のアクションスクリプト3.0 /mitt (09/12/17(Thu) 02:57) [ID:vS2O7xY5] #310
  └Nomal Re[2]: ちょっと脱線:字幕を表示・非表示させるAS3 /mitt (09/12/17(Thu) 03:02) [ID:vS2O7xY5] #311
    └Nomal MyFLVPbCaptioning.as /mitt (09/12/17(Thu) 03:03) [ID:vS2O7xY5] #312
      └Nomal FukuromojiField.as /mitt (09/12/17(Thu) 03:07) [ID:vS2O7xY5] #313
        └Nomal Re[3]: ちょっと脱線:字幕を表示・非表示させるAS3 /mitt (09/12/17(Thu) 03:08) [ID:vS2O7xY5] #314 20091217.gif/50KB


親記事 / ▼[ 310 ]
■309 / 親階層)  ちょっと脱線:字幕を表示・非表示させるAS3
□投稿者/ mitt クラウンプライズ(57回)-(2009/12/17(Thu) 02:37:53) [ID:vS2O7xY5]
http://mitt3210.com
    動画配信の際、撮影したビデオをflv化する前に、
    アドビプレミアで、順位やらタイムやら、クラスを字幕にして一緒に焼き込む、編集をまずやるんですが。。

    なんか、XMLに記述して読み込んで、ボタンで表示・非表示できる、という
    キャプションという機能があるらしい。
    http://www.logicalyze.net/blog/?p=162

    で、ちょっと脱線して、トライしてみた。このリンク先にある動画のようでもいいんだけど、
    やっぱり、袋文字がいいし、色とか表示位置とか変えたいな〜。という事で結局本を購入。
    ふりかなをつけたかったんで、更にカスタマイズして見ました。
    ところが、Macのサファリでは、完璧だけど、ウインドウズでは半角スペースの残像が残ってしまう……。

    まあ、とりあえず、完成品です。↓
    http://mitt3210.s39.coreserver.jp/UP/caption/caption_video.html
    動画は支障のないものに変えてあります。キャプションと咬み合いませんが、お気になさらず。

    表示に必要なファイル
    フォルダ構造は、キャッシュを見ればわかると思うので、割合。

    videoPlay.xml              //XMLファイル
    caption_video.xml              //XMLファイル
    SkinUnderAll.swf     //プレーヤースキン
    caption_video.swf             //今回作ったプレーヤー
    BONUS_video.flv             //動画
    main_540.jpg             //静止画

    キャプションファイルは、
    http://mitt3210.s39.coreserver.jp/UP/caption/caption_video.xml
    で、たぶんエラー扱いになると思うけど、ソースを見ればすべて表示します。

    その上、videoPlay.xmlを使い、
    http://mitt3210.s39.coreserver.jp/UP/caption/videoPlay.xml
    ビデオ、静止画像、袋文字の色、キャプションの座標など、読み込んで表示する、仕様にしました。(これもソース見て下さい。)

    つまり、プレーヤーをいくつも作らなくてもいい、と言う事です。

    ポイント

    まず、ドキュメントクラス用にアクションスクリプトファイルを作っておきます。
    ・MyFLVPbCaptioning.as
    ・FukuromojiField.as
    の2つ。
    ・ライブラリーにFLVPlaybackを格納しておく。
    ・ライブラリーにUILoaderを格納しておく。
    ・作成したボタンをリンケージ格納しておき、inv_btnとしてスクリプトで呼び出す。
    ・作成したコントロールバ−画像をリンケージ格納しておき、contoro_mcとしてスクリプトで呼び出す。
    ・BONUS_video.flvとmain_540.jpgの大きさは640×480ピクセル。4:3画像です。
    ・ステージの1フレームに、下記スクリプトを記述。

[ □ Tree ] 返信 削除キー/

▲[ 309 ] / ▼[ 311 ]
■310 / 1階層)  1フレームに記述のアクションスクリプト3.0
□投稿者/ mitt クラウンプライズ(58回)-(2009/12/17(Thu) 02:57:45) [ID:vS2O7xY5]
http://mitt3210.com
    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の表示
    }

    }
    }

[ 親 309 / □ Tree ] 返信 削除キー/

▲[ 310 ] / ▼[ 312 ]
■311 / 2階層)  Re[2]: ちょっと脱線:字幕を表示・非表示させるAS3
□投稿者/ mitt クラウンプライズ(59回)-(2009/12/17(Thu) 03:02:01) [ID:vS2O7xY5]
http://mitt3210.com
    ・MyFLVPbCaptioning.as
    ・FukuromojiField.as
    のスクリプトファイルは、以下の通り。
    FLASHプロジェクトと同じフォルダに置いておきます。

[ 親 309 / □ Tree ] 返信 削除キー/

▲[ 311 ] / ▼[ 313 ]
■312 / 3階層)  MyFLVPbCaptioning.as
□投稿者/ mitt クラウンプライズ(60回)-(2009/12/17(Thu) 03:03:55) [ID:vS2O7xY5]
http://mitt3210.com
    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;//空白を認識
    }
    }
    }
[ 親 309 / □ Tree ] 返信 削除キー/

▲[ 312 ] / ▼[ 314 ]
■313 / 4階層)  FukuromojiField.as
□投稿者/ mitt クラウンプライズ(61回)-(2009/12/17(Thu) 03:07:26) [ID:vS2O7xY5]
http://mitt3210.com
    package {
    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];
    }
    }
    }

[ 親 309 / □ Tree ] 返信 削除キー/

▲[ 313 ] / 返信無し
■314 / 5階層)  Re[3]: ちょっと脱線:字幕を表示・非表示させるAS3
□投稿者/ mitt クラウンプライズ(62回)-(2009/12/17(Thu) 03:08:50) [ID:vS2O7xY5]
http://mitt3210.com
    ●袋文字やフリカナなんて必要ない!、と思われる方はもっと簡単にキャプションを作れます。参照サイトは以下↓
    ・ActionScript 3.0 コンポーネントガイド > FLVPlayback キャプションコンポーネントの使用 > FLVPlaybackCaptioning コンポーネントの使用
    http://livedocs.adobe.com/flash/9.0_jp/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000599.html
    開いたら「関連トピック」 FLVPlaybackCaptioning コンポーネントへのキャプションの追加を見てください。
    ・CS3コンポーネントで楽々字幕入りコンテンツを作る
    http://www.logicalyze.net/blog/?p=162
    音楽ミキシングエンジニア、かつプログラマーさんのブログ


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



785×300 => 250×95

20091217.gif
/50KB
[ 親 309 / □ Tree ] 返信 削除キー/


Mode/  Pass/

HOME HELP 新着記事 ツリー表示 スレッド表示 トピック表示 発言ランク ファイル一覧 検索 過去ログ

- Child Tree -