プログレスバー

質問

flashvideoについてなのですが、
外部のflvファイルをよみこむときに、プログレスバーを表示させたいのですが、ステージ上でのローディングバーの使い方は分かるのですが、外部ファイルしかもｆｌｖとなると、かなり難しくて困っております。どなたか、教えていただけませんか？

回答No.1

DPE

読み込み済み容量と総容量は、NetStream クラスの bytesLoaded と bytesTotal プロパティに保存されています。
完了率の算出方法やプログレスバーの作り方は swf ファイルに付ける時と全く同じで、要するに情報を得るために見るものが違うだけです。

FLV のプリロードを作る時の問題は、100 ％読み込まれるまで動画を止めておき、読み込みの完了を待って再生し始める処理だと思います。
手ヌキでいくなら、読み込みが完了するまで動画を非表示・音声を消音（ミュート）にしておいて、100 ％読み込まれた時には画面を表示・音を出して先頭から再生することで、いわゆるプリロードを実現できます。

非表示にしておくと画面が見えないだけの話で、読み込み中にもわずかながら再生処理が行われています。
この処理が少しでも惜しいと思うのなら、イベントを利用してまず pause で止め、全体が読み込まれたら pause を解除するといった方法もあります。

-----------------------------------------------------------------

ステージにビデオシンボルのインスタンス” flv_view ”とプログレスバーのムービークリップ” prog_bar ”があるとします。

プリロードの作り方は様々な方法がありますが、今回はフレームアクションで作ります。
フレームアクションは再生ヘッドがフレームに来た時１度しか実行されないので、前のフレームとの間をループしながら繰り返し実行されるようにします。
ですから、フレームの構成は

　フレーム１：初期設定と動画の読み込みなど。
　フレーム２：読み込み完了を待つフレーム。スクリプトはなし。
　フレーム３：完了率の算出と読み込み完了後の処理。

このようになります。
ビデオインスタンスとプログレスバーは、フレーム１から３まで配置してください。

スクリプトは、大体、次のようになります。
このスクリプトはメインのタイムラインに設定してください。

（↓各行頭に全角のスペースが入っています。コピーする際はご注意ください）

　●フレーム１のスクリプト

　//ローカル接続を確立
　connect_obj = new NetConnection();
　connect_obj.connect( null );

　//ストリーミングの準備
　stream_obj = new NetStream( connect_obj );
　flv_view.attachVideo( stream_obj );

　//ストリーミングの状況を監視
　stream_obj.onStatus = function( info:Object )
　{
　　switch( info.code )
　　{
　　　//読み込みが完了するまでは再生しない
　　　case 'NetStream.Play.Start':
　　　　if( _root.per < 100 )
　　　　{
　　　　　stream_obj.pause( true );
　　　　}
　　　　break;

　　　//再生が終了した時：オーディオ用のダミーMCを削除
　　　case 'NetStream.Play.Stop':
　　　　removeMovieClip( _root.flv_audio );
　　　　break;

　　　default:
　　　　break;
　　}
　};

　//動画の読み込み
　stream_obj.setBufferTime( 5 );
　stream_obj.play( "***.flv" );

　//最初は非表示にしておく
　flv_view._visible = false;

　//オーディオ制御用のオブジェクトを作成
　_root.createEmptyMovieClip( "flv_audio" , 0 );
　flv_audio.attachAudio( stream_obj );
　flv_snd = new Sound( flv_audio );

　//音を出さないようにしておく
　flv_snd.setVolume( 0 );

　//読み込み完了率を保持
　loaded = 0;
　total = 0;
　per = 0;

　●フレーム３のスクリプト

　//読み込み完了率を算出
　if( stream_obj.bytesLoaded != 0 )
　{
　　loaded = stream_obj.bytesLoaded;
　　total = stream_obj.bytesTotal;
　　per = Math.floor( loaded / total * 100 );
　}

　//読み込み完了を待つ
　if( per < 100 )
　{
　　prog_bar._xscale = per;
　　gotoAndPlay( _currentframe - 1 );
　}
　else
　{
　　//画面を表示し、消音を解除
　　flv_view._visible = true;
　　flv_snd.setVolume( 100 );

　　//先頭に巻き戻して再生
　　stream_obj.seek( 0 );
　　stream_obj.pause( false );

　　//プログレスバーを消す
　　prog_bar._visible = false;
　　stop();
　}

*****************************

ビデオインスタンスには、ムービークリップと同様に _visible プロパティがあります。
true で表示、false で非表示となります。
今回は一旦 false にして非表示にし、100 ％読み込まれた時に true に書き換えています。

NetStream で外部 FLV を再生している時は、onStatus イベントハンドラに処理を定義しておくと、再生中に何か起こるたびにこの処理が呼び出されます。
呼び出される関数では、”何が起こったのか”を表す情報を受け取ることができます。
情報が２つあるので Object 型の変数にまとめて渡されてきます。
この２つとは code と level ですが、code に入っているメッセージで何が起こったのかを把握できます。

code には、再生が始まった時に” NetStream.Play.Start ”、再生が終了した時に” NetStream.Play.Stop ”という文字列が入っています。
上記のスクリプトではこのメッセージを判別して、再生開始時に pause メソッドで一旦停止させ、再生終了時に後始末（オーディオ制御用のオブジェクトを削除）を行っています。
読み込み中に多少の再生処理が行われても構わないのなら、一時停止の部分は省略することもできます。

*****************************

FLV ファイルに入っている音声は何もしなくても映像とともに再生されますが、ムービークリップを作って関連付けることでボリュームのコントロールなどが可能になります。

まず、ダミーのムービークリップを作ります。シンボルで作ってもいいのですが、今回は createEmptyMovieClip メソッドで絵のない空っぽのムービークリップ（上記のスクリプトでは” flv_audio ”）を作っています。
できたムービークリップを、attachAudio メソッドで動画と関連付けます。

更に、このムービークリップの音を管理する Sound クラスのオブジェクト（上記のスクリプトでは” flv_snd ”）を作ります。
この Sound オブジェクトのメソッドで、ボリューム等の制御を行います。
上記のスクリプトでは一旦 setVolume メソッドでボリュームを絞り、読み込み終了後にフルボリュームに戻すことで、読み込まるまでは音が出ないようにしています。

FLV に音声が含まれていない場合は、オーディオに関するスクリプトは省略しても構いません。

*****************************

フレーム３では、前のフレーム２の間をループさせることでスクリプトを繰り返し実行させます。

進捗状況の表示は NetStream クラスの bytes***プロパティを見て読み込みの完了率を算出し、プログレスバーを伸長させます。
これは、いわゆるプログレスバーの作り方と同じです。

100 ％読み込まれたと判断された時には、ビデオインスタンスを表示（ _visible プロパティを true ）・先頭まで巻き戻し・ボリュームを戻す・プログレスバーを非表示にするといった処理を行っています。
あまり難しい部分はないと思いますが、見慣れない部分は seek とpauseでしょうか。
seek( 0 ) で、FLV ファイルの先頭に再生ヘッドが移動します。
再生開始時に pause で一時停止状態にしていますので、続けてこれを解除してください。
一時停止の処理を省略した時は、この pause も省略できます。

ローカルディスクにある FLV ファイルでは、ダウンロードされる様子が確認できません。
FLV ファイルをサーバーにアップし、ネット経由で動作をチェックしてみてください。

プログレッシブダウンロード（サーバーとの連携によるストリーミング再生ではなく、単純に外部から読み込む方法）で読み込まれた FLV ファイルはブラウザのキャッシュに保存され、２度目以降はバーが伸びずいきなり再生が始まることがあります。
再度動作を検証する時は、キャッシュの中から FLV ファイルを削除してください。