配信するときに字幕ツールがあると便利です。でもスクロールができてシンプルなものが見つからなかったので自作をしました。
デスクトップの画面キャプチャソフトであるSCFH DSFを愛用していて、これはHTML内のFlash部分だけをキャプチャできるので、字幕の入力部分はHTMLにして表示部分をFlashにしました。
つまりJavaScript→Flashという通信です。
現状、デモとして動いているのはこちらです。
※自分用につくったのでフォントをデバイスフォントではなく「Meiryo UI」にしているので、Win7の人以外は文字がでてこないかもですね。コピペして改変してもらって構いません。
http://mizubuki.heteml.jp/test/subtitle/
テキストボックスが3つあるのは、「ちょい離席ー」みたいなのは別枠で残しておいてもいいかなぁと思いまして。入力文言がFlashの表示領域を超えると最初と最後で3秒停止します。
今回はちょっとかっちょよく（？）、ドキュメントのASを外部のMain.asに書いて、flaファイルはただのカラファイルなので華麗に貼れますね！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
package { import flash.display.MovieClip; import flash.text.*; import flash.events.Event; import flash.external.*; import flash.system.Security; public class Main extends MovieClip { var subtitle:TextField; var tFormat:TextFormat; var cnt:uint; const STAY_TIME:uint = 24 * 3; public function Main() { subtitle = new TextField(); tFormat = new TextFormat(); tFormat.size = 40; tFormat.font = "Meiryo UI"; subtitle.defaultTextFormat = tFormat; subtitle.width = 800; subtitle.selectable = false; this.addChild(subtitle); ExternalInterface.addCallback("flashCallbackFunc", setup); } public function setup(arg:*):void { cnt = 0; subtitle.scrollH = 0; subtitle.text = arg; if(subtitle.maxScrollH > 0){ this.addEventListener(Event.ENTER_FRAME, loopFrame, false, 0, true); } } private function loopFrame(event:Event):void { if(subtitle.scrollH >= subtitle.maxScrollH){ ++cnt; if(cnt >= STAY_TIME){ subtitle.scrollH = 0; cnt = 0; } } else if(subtitle.scrollH == 0){ ++cnt; if(cnt >= STAY_TIME){ subtitle.scrollH = 1; cnt = 0; } } else { ++subtitle.scrollH; } } } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>SUBTITLE</title> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; var params = { scale:'noScale', salign:'lt', menu:'false', allowscriptaccess :'aways', allowfullscreen :'true'}; var attributes = { id:"externals", name:"externals" }; swfobject.embedSWF("subtitle.swf", "swf", "800", "60", "10.0.0", "expressInstall.swf", flashvars, params, attributes); </script> <script type="text/javascript"> function setText(arg){ var doc = document.getElementById("externals"); doc.flashCallbackFunc(arg); } </script> <style type="text/css"> input { font-size: 12px; width: 600px; } body { background-color: #EEE; } form { padding: 0px; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } </style> </head> <body> <div id="swf"></div> <div> <form id="frame1" onSubmit="javascript:setText(frame1.textfield1.value);return false;"> <input type="text" name="textfield1" id="textfield1"> </form> <form id="frame2" onSubmit="javascript:setText(frame2.textfield2.value);return false;"> <input type="text" name="textfield2" id="textfield2"> </form> <form id="frame3" onSubmit="javascript:setText(frame3.textfield3.value);return false;"> <input type="text" name="textfield3" id="textfield3"> </form> </div> </body> </html> |
