FLASHのお勉強　ーアクションスクリプトの実践的事始めー
(20)FLASH de 動画再生　　　　　　　　2005/10/5

　Ｗｅｂページで動画を再生するのに、WindowsメディアプレイヤーやQuickTimeあるいはReal Playerがポップアップするのは、何ともさえないし、読み込みが長々と掛かるのもいただけない。　最新FlashPlayerでは外部映像ファイルを読み込みながら再生する機能(擬似ストリーミング)が付いて、素早く再生が開始できるのと、プレイヤー画面のデザインもできるので、動画はぜひFlashで見せたいものだ。　ということで、そのお勉強に早速取り掛かりたいが、まずは手始めとして、スクリプトは使わずに、メディアコンポーネントを使う方法のお勉強である。
　メディアコンポーネントには、MediaDisplay、MediaController、MediaPlaybackの三つが用意されている。
　　MediaDisplay：単に動画スクリーンが表示されて、動画を再生させる。見る人には停止、再生などの制御は出来ない。
　　　　　　　　　　　とにかくシンプルに動画を見せるときに使う。
　　MediaController：MediaDisplayのコントロール部として使う。再生、一時停止、最初に戻る、ボリュームコントロールなどが可。
　　MediaPlayback：上記二つを組み合わせたもので、表示部、コントロール部が一体になっている。
　Display＆Controllerの組み合わせを使うと、それぞれのサイズやデザインをカスタマイズできる。
　なお、これらのコンポーネントを使っても、スクリプトを追加することでいろいろ制御ができるようであるが、ここでは、単にコンポーネントを使う方法を示したい。
　flashストリーミングで使うFLVファイルについては、文末を参照のこと　なお、ｆｌｖファイルを使わずに、mpgやwmvファイルを埋め込みにする方法があるが、flashの読み込みが非常に遅くなるので、お勧めしない。
　なお、サンプル用のVideoClipはhttp://www.puntopower.com/から引用した。
Mediadisplay&MediaControllerの設定例
（１）幅300pix、高さ260pixの新規ドキュメントを開く
（２）コンポーネントウインドウからMediaDisplayをドラッグし、ステージにドロップする。x=0､y=0に設置
（３）コンポーネントインスペクターウインドウを開き、ｆｌｖにチェック
（４）URLボックスに、ｆｌｖファイルのパスとファイル名を入れる
　　　例では、同じホルダーにflashファイルとｆｌｖファイルがあるので、
　　　単に、punto2.flvと記入
　　　Automatically Playにチェックを入れる（自動再生)
　　　Use Preferred Media SizeとRespect Aspect Ratioのチェックをはずす
　　　（元ファイルに関係なくステージのMediaDisplayのサイズで表示される）
（５）コンポーネントウインドウからMediaControllerをドラッグし、
　　MediaDisplayの下部にドロップする
　　インスタンス名をcontrolとする（何でも良い)
　　プロパティーでcontrollerPolicyをonに設定（見えるようにする)
（６）MediaDisplayを選択し、ビヘイビアウインドウでビヘイビアの追加ボタン（左上の十の字ボタン）をクリックし、「メディア」「コントローラを関連付ける」をクリック、開いたウインドウで、control、相対を選択する
MediaPlaybackの設定例
（１）から（４）までは、DisplayとControllerの組み合わせと全く同じ。ただし、この場合は、Automatically Play（自動再生)のチェックをはずしている

次いで、インスペクターウインドウで、
　Control Placementで、コントローラの位置を決める（例では、bottom）
　Control Visibilityで、コントローラを見えるようにするか（on）、
　マウスがのったときに表示するか（auto）、
　表示しないか(off）を決める。

これだけ！
アクションスクリプトでの設定例
　MX2004で外部 ｆｌｖ ファイルの制御のために追加された、NetConnection、NetStreamクラスを使った、動画の再生、制御の例を示しながら、勉強することにしたい。

（１）幅300pix、高さ275pixの新規ドキュメントを開く
（２）ライブラリウインドウの上部右隅をクリックして「新規ビデオ」をクリック
（３）ライブラリーに作成された「埋め込みビデオ１」をステージにドラッグしてドロップする
（４）プロパティーでx=0､y=0、w=300､h=190に設定しインスタンス名をvideoに設定
（５）最初に表示する画像（300*240）をステージ上部に設置し、シンボルに変換インスタンス名をphoto
（６）画像下部にビデオ再生ボタンを3個、STOPボタンを1個配置し、シンボルに変換する
（７）再生ボタンのインスタンスをそれぞれbtn1、btn2、btn3とし、STOPボタンをstpとする
（８）インスタンスphotoをダブルクリックし、タイムライン上でトゥイーンを作成
　Frame1→15：アルファ100→0 (Fade Out)
　Frame20→35：アルファ0→100 (Fade In)
　Frame１，１５，３５にstop();を記述
スクリプト（_rootに）
var count:Number=0;
var obj_nc:NetConnection=new NetConnection();
_root.obj_nc.connect(null);
var obj_ns:NetStream=new NetStream(obj_nc);
_root.video.attachVideo(obj_ns);
obj_ns.setBufferTime(3);

_root.btn1.onPress = mov1;
_root.btn2.onPress = mov2;
_root.btn3.onPress = mov3;
_root.stp.onPress = terminate;

function mov1() {
if (count<1){_root.photo.gotoAndPlay("2");}
_root.obj_ns.play("punto1.flv");
count++;
}

function mov2() {
if (count<1){_root.photo.gotoAndPlay("2");}
_root.obj_ns.play("punto2.flv");
count++;
}

function mov3() {
if (count<1){_root.photo.gotoAndPlay("2");}
_root.obj_ns.play("puntoteam.flv");
count++;
}

function terminate() {
_root.obj_ns.play("");
_root.photo.gotoAndPlay("20");
count=0;
}
 countの定義　0に設定
ネットコネクションインスタンスobj_ncを生成
FLV再生用ローカル接続を開く
ネットストリームインスタンスobj_nsを生成
videoのソースにobj_nsを設定
バッファー時間3sec（ロード/再生のずれ防止)

btn1がクリックされたらfunction mov1を実施
btn2がクリックされたらfunction mov2を実施
btn3がクリックされたらfunction mov3を実施
stpがクリックされたらfunction terminateを実施


もし、countが１以下だったらphotoをFadeOut
obj_nsとしてpunto1.flvを再生
count値に１をたす



もし、countが１以下だったらphotoをFade Out
obj_nsとしてpunto2.flvを再生させる
count値に１をたす



もし、countが１以下だったらphotoをFadeOut
obj_nsとしてpuntoteam.flvを再生
count値に１をたす



obj_nsとして何も再生しない(止める)
photoをFade Inさせる
countを0に戻す
注）countは動画再生とは関係がない。静止画をFadeOut、FadeInさせるための指標にしていてcount=0のときに写真を消している
　　２-５行のscriptは、サーバーにあるｆｌｖファイルの再生に必要な手続きと考え、そのまま、真似して使えば動きます。
FLVファイルの作り方
FLVファイルはＦｌａｓｈ特有のファイルで、今のところ一般的ではないので、自分で変換して作成しなければならない。動画を埋め込んで再生する場合には、ｍｐｇ，ｗｍｖ，ａｖｉなどのファイルがそのまま使えるが、外部ファイルを読み込みながら再生するにはＦＬＶファイルが必要となる。
ｍｐｇファイルなどからＦＬＶファイルを作るもっとも簡単な方法は、Ｆｌａｓｈ（2004以降）のライブラリーに読み込んで、ライブラリーで読み込まれたビデオファイルを右クリックし、プロパティーを選択、ウインドウで書き出しを選択すればＦＬＶファイルとして書き出すことが出来る。
本稿で使ったＦＬＶファイルは、フリーソフトのＲｉｖａ FLV Encoder（http://rivavx.de/）を使って変換した。こちらの方が画質がいいように感じたからである。
もっとＦｌａｓｈでの動画再生が盛んになれば（間違いなく盛んになる)、いろいろなソフトが登場し、FLVがメジャーのフォーマットになっていくのではなかろうか。

　HOME　　　お勉強総リスト