社内でFlash動画を教材として作成・公開する手順

今日は半分仕事の話。
イントラネットでFlash動画を、ユーザ部門向けの画面操作の研修教材にしたい場合の手順をまとめておく。
(1)CamStudioで画面操作をAVI形式で動画キャプチャーする。
(2)Windowsムービーメーカーで説明の字幕をつける。
(3)WindowsムービーメーカーでWMV形式で書き出す。
(4)Any Video ConvertorでFLV形式に変換する。
(5)JW FLV MEDIA PLAYERを埋め込みプレーヤーとして再生する
まず画面動画キャプチャーソフト「CamStudio」を入手し、インストールする。必要にして十分な機能のフリーウェアだ。
http://nonn-et-twk.net/twk/CamStudio/
このソフトはSWF形式で画面操作を保存できるが、後ほどWindowsムービーメーカーで説明字幕をつけるので、AVI形式で保存する。
また、WindowsムービーメーカーでWMV形式で書き出した後、FLV形式に変換するときの最大サイズは640×480なので、CamStudioでキャプチャーするときも、必ず640×480に収まる大きさにすること。
次にWindowsムービーメーカーに、操作を記録したAVIファイルを読み込ませ、新規プロジェクトを作成し、説明の字幕をつけていく。画面の配色にも夜が、赤い太字ゴシックが適切と思われる。ここの字幕は短く簡潔に。
そしてWindowsムービーメーカーから「最高画質」で640×480のサイズ、毎秒30フレームのWMV形式ファイルで字幕つきの動画を書き出す。
次にAny Video Converter フリー版を入手し、インストールする。
http://www.anvsoft.jp/any-video-converter-free.php
このAny Video ConvertorでWMV形式ファイルを読み込み、640×480サイズのFLV形式ファイルに変換する。音声がない場合は、変換時に音声出力を無効にしておくと良い。
これでFLV形式の動画教材ができた。
次に、社内に公開するための埋め込み式FLVプレーヤー「JW FLV MEDIA PLAYER」を入手する。
http://www.longtailvideo.com/players/jw-flv-player/
ダウンロードしたZIPファイルの中にある player-viral.swf が埋め込みプレーヤーの本体で、swfobject.js がプレーヤー制御用のJavaScriptだ。
この二つのファイルを社内の適当なWebサーバにアップロードする。全社員がアクセス権を持つディレクトリにアップロードすること。
そしてFLV形式のファイルは別のWebサーバでも構わないので、適当なWebサーバにアップロードする。
次に、埋め込みFLVプレーヤーをユーザに見せるためのHTMLファイルを作成する。1ページのHTMLファイルに、いくつでも埋め込みプレーヤーを並べることができる。
当然のことながらユーザのパソコンにAdobe Flash Playerがインストールされている必要がある。(たぶんAdobe Flash Player 6以上でないとダメ)
基本的なコードは以下の通りだ。
まずHTMLのヘッダーセクション<head></head>の内部に次の1行を追加する。
<script type=”text/javascript” src=”http://XXXXXXX/XXXXXX/swfobject.js”></script>
ここでは先ほど swfobject.jp をアップロードした場所のURLを正確に入力するようにしよう。
次にbodyセクションの任意の場所に以下のコードを追加する。
<div id=”container1″><a href=”http://www.macromedia.com/go/getflashplayer”>このページを見るにはFlashプレーヤーをインストールして下さい。</a></div>
<script type=”text/javascript”>
var s1 = new SWFObject(“http://XXXXXXX/XXXXXX/player-viral.swf”,”ply”,”660″,”500″,”9″,”#FFFFFF”);
s1.addParam(“flashvars”,”file=http://XXXXXXXX/XXXXXXXX.flv”);
s1.write(“container1”);
</script>
最初のdivタグのid属性に指定した名前(ここではcontainer1)と、JavaScript内の最後の行のwriteメソッドの引数は一致していなければならない。
なぜなら、id属性に指定された名前をターゲットにして、JavaScriptが埋め込みFLVプレーヤーを表示させるからだ。
JavaScriptの冒頭に player-viral.swf のURLを入力する部分があるので、こちらも先ほど player-viral.swf をアップロードした場所のURLを正確に入力しよう。
次の660、500という数字は埋め込みプレーヤーのタテ・ヨコの表示サイズだ。動画自体が640×480なので、少し余裕をもった大きさにしておく。
次の行では再生したいFLV形式ファイルへのURLを正確に入力する。
JavaScriptの最後の行の引数は、先ほど解説したとおり、冒頭のdivタグのid属性と同一の文字列にしなければならない。
このdivタグのid属性を変えることで、同じページの中に複数の埋め込みプレーヤーを並べることができる。つまり2つめの埋め込みプレーヤーは「container2」などの違う名前にしておけばよい。
作成したHTMLファイルを社内の適当なWebサーバにアップロードする。こちらは閲覧制限されたWebサーバでも構わない。
以上で、フリーウェアだけで社内での研修用FLV動画公開が可能になる。