flvのミュートとループについて教えてください

質問

Flash8を使って作業しています。

現在、タイムラインには
・FLV Playback を使って配置したflv
・コンポーネントのミュートボタン
を配置しています。

【flvは、ミュート状態から開始したい。】
【flvはループ再生したい】
という場合は、どのようにすれば良いのでしょうか…。

flvのコンポーネントインスペクタのパラメータなどをみると
ボリュームの設定はあるのですが
ミュート状態からflvを開始する事ができません。

スクリプト集なども調べてみましたが、
flvの制御が見つけられず、困っています…。

どなたか、おわかりになる方、よろしくお願いします(>_<)

回答No.1

DPE

FLVPlayback コンポーネントでは、FLV ファイルを最後まで再生した時に” complete ”というイベントが発生します。
このイベントが発生した時に再度最初から再生するようにスクリプトを組むと、ループ再生になります。

カスタムＵＩ等を利用してコンポーネントの制御に使う部品を取り替えるのは簡単にできても、各部品の動作に関わる処理は FLVPlayback クラスの内部に隠されているものが殆どです。
ミュートに限らずボリュームコントローラなどもそうなのですが、カスタムＵＩのコンポーネントを使っている限りは、スクリプトでの独自の制御は難しいと思われます。

ミュートは、要するにボリュームが 0 になっている状態です。
FLVPlayback コンポーネントのボリュームは、volume というプロパティを通じて操作できます。
MuteButton コンポーネントは、クリックするたびに音声ありとなしが切り替わるとともに、ボタンの外観も変化しています。
外観を変える動作は gotoAndStop アクションと _visible プロパティで作れますので、いっそのことコンポーネントを使わず自作してみてはいかがでしょう。

MuteButton コンポーネントをステージにドラッグした時に、コンポーネントに使われているシンボルがライブラリに登録されます。
これらを使って作れば、再生ボタン等のコンポーネントを利用している場合でもデザインを統一できます。

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

自作ミュートボタンシンボルは、次のように作ります。

まず、音声ありの時に表示するムービークリップと、音声なしの時に表示するムービークリップをそれぞれ作ります。

MuteButton コンポーネントでは、音声あり・なしのどちらの状態の時でも、マウスカーソルを重ねた時やクリックした時には緑色の枠が出ていました。
これは、１フレームごとに各状態の絵を１つずつ配置しておいて、マウス操作に応じて表示するフレームを切り替えることで実現できます。

ムービークリップには、_up ・ _over ・ _down というフレームラベルを付けておくと、ボタンシンボルと同様にマウス操作に応じてフレームを自動で切り替えてくれる機能があります。
ムービークリップのフレーム自動切り替えについては、こちらをご参考になさってください。

　・ Flash ドキュメンテーション
　　ActionScript 2.0 の学習：イベントの処理 - ボタン状態を持つムービークリップの作成
　　http://livedocs.macromedia.com/flash/8_jp/main/00001382.html

今回はこの機能を使いますが、onRollOver 等のイベントハンドラを利用して gotoAndStop でフレームを切り替える方法もあります。

MuteButton コンポーネントを構成しているシンボルは、「ライブラリ」パネルの「 FLV Playback Skins 」フォルダの「 Mute Button 」フォルダの中にあります。
いろいろなシンボルが収められていますが、３つの箱が重なっているようなアイコンが付いているシンボルと「 Assets 」フォルダ内にあるシンボルを除いた８つのムービークリップシンボルが、MuteButton コンポーネントの外観に用いられているシンボルです。
例えば、” MuteButtonOffNormal ”は消音状態の時に普段表示しておく絵、” MuteButtonOnOver ”は音声ありの時でミュートボタンにマウスカーソルを重ねた場合に表示する絵です。

音声ありのムービークリップと音声なしのムービークリップの外観は、これらを利用してもいいですし、もちろん、自分で描いても構いません。
自分で描く場合は、これらの絵をムービークリップに変換する必要はありません。
とにかく、普段の状態・ロールオーバー時・クリック時・クリックできない時の絵を、各フレームに１つずつ配置して作ってください。

そして、ムービークリップのフレーム自動切り替えを使うために、それぞれのフレームに _up ・ _over ・ _down というフレームラベルを付けます。
無効の状態の絵を置いたフレームは自動切り替え機能とは特に関係ありませんので、分かりやすいフレームラベルを付けてください。ここでは仮に” disabled ”とします。

例えば、音声ありのムービークリップの構成は

　フレーム１： MuteButtonOnNormal シンボルを配置、フレームラベルは” _up ”
　フレーム２： MuteButtonOnOver シンボルを配置、フレームラベルは” _over ”
　フレーム３： MuteButtonOnDown シンボルを配置、フレームラベルは” _down ”
　フレーム４： MuteButtonOnDisabled シンボルを配置、フレームラベルは” disabled ”

というように作ります。
音声なしのムービークリップも、同様の要領で作ってください。

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

音声ありとなしのムービークリップができましたら、次は、実際にミュートボタンとして使うシンボルを作ります。
新しいシンボルを追加し、この中に、先ほどの２つを重ねて配置します。
レイヤーは分けても分けなくても構いませんが、分けた方が管理しやすくなります。

配置した２つのシンボルに、それぞれインスタンス名を付けます。
ここでは仮に、音声ありのインスタンス名を” on_mc ”、音声なしのインスタンスを” off_mc ”とします。

以上で自作ミュートボタンのシンボルは完成です。
ステージにドラッグし、インスタンス名を付けてください。
仮に” mute_btn ”とします。

次は、このボタンをクリックした時にボリュームを操作するスクリプトを書きます。

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

ステージに FLVPlayback コンポーネントのインスタンス” flv_player ”と、自作したミュートボタンのムービークリップシンボルのインスタンス” mute_btn ”があるとします。

ミュートボタンの制御およびビデオを無限ループ再生するスクリプトは、次のようになります。
このスクリプトは、メインのタイムラインのフレームに設定してください。

（↓各行頭に全角のスペースが入っています。コピーする際は、全て半角のスペースかタブに置き換えてください）

　/////////////////////////////////////////////////////////////
　// FLVPlayback カスタムＵＩの関連付け
　/////////////////////////////////////////////////////////////

　/*ここに、コンポーネントと部品を関連付けるスクリプトを書く*/

　/////////////////////////////////////////////////////////////
　//自作ミュートボタンに関する処理
　/////////////////////////////////////////////////////////////

　//ボリュームの最大値を設定
　volume_max = 100;

　//ミュートボタンの初期設定
　//音声なし・ボタン無効の状態を表示し、ボタンのクリックを禁止する
　mute_btn.on_mc._visible = false;
　mute_btn.off_mc._visible = true;
　mute_btn.off_mc.gotoAndStop( "disabled" );
　mute_btn.off_mc.enabled = false;

　/*消音時にミュートボタンがクリックされた時の動作を定義*/
　mute_btn.off_mc.onRelease = function()
　{
　　//ボリュームを上げる
　　flv_player.volume = volume_max;

　　//自分自身を非表示にし、音声ONの状態のボタンを表示する
　　this._visible = false;
　　mute_btn.on_mc._visible = true;
　　mute_btn.on_mc.gotoAndStop( "_up" );
　};

　/*音声ありの時にミュートボタンがクリックされた時の動作を定義*/
　mute_btn.on_mc.onRelease = function()
　{
　　//ボリュームを絞る
　　flv_player.volume = 0;

　　//自分自身を非表示にし、音声OFFの状態のボタンを表示する
　　this._visible = false;
　　mute_btn.off_mc._visible = true;
　　mute_btn.off_mc.gotoAndStop( "_up" );
　};

　/////////////////////////////////////////////////////////////
　// FLVPlayback のイベント処理
　/////////////////////////////////////////////////////////////

　//リスナーオブジェクトの作成
　flv_listener = new Object();

　/*ループ再生処理：再生終了時に先頭から再度再生*/
　flv_listener.complete = function()
　{
　　flv_player.seek( 0 );
　　flv_player.play();
　};

　/*再生の準備ができた時、ミュートにする*/
　flv_listener.ready = function()
　{
　　//ボリュームを絞る
　　flv_player.volume = 0;

　　//自作ミュートボタンをクリック可能にする
　　mute_btn.off_mc.enabled = true;
　　mute_btn.off_mc.gotoAndStop( "_up" );
　};

　//リスナーオブジェクトを登録
　flv_player.addEventListener( "complete" , flv_listener );
　flv_player.addEventListener( "ready" , flv_listener );

　/////////////////////////////////////////////////////////////
　//タイムラインを止めておく
　/////////////////////////////////////////////////////////////

　stop();

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

コンポーネントとカスタムＵＩの部品を関連付ける方法は、前回 http://okwave.jp/qa2562723.html で説明しました通りです。再生ボタンなどの必要な部品を関連付けてください。
ただし、今回は自前で用意したミュートボタンを使いますから、muteButton プロパティには何も設定しないでください。

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

今回の目玉の、自作ミュートボタンの制御についてですが。

基本的には、クリックされた時に on_mc と off_mc の _visible プロパティを変更して音声の状況を表す方だけを表示するようにし、同時にボリュームの操作も行います。
なお、ボリュームコントローラの使用は考慮しておりません。ミュートボタンをクリックした時は、ボリュームを単純に 0 と 100 （変数 volume_max の値を書き換えると変更できます）に切り替えるだけです。

クリックした時の処理は、ミュートボタン本体の onRelease イベントハンドラではなく、子である on_mc と off_mc のものを使うところがポイントです。
_visible プロパティを false にすると、ムービークリップやボタンのボタン機能が無効になります。つまり、_visible が false の間は、onRelease イベントハンドラを使った処理が定義されていても、クリックしても何も起こりません。
従って、フラグなどでミュートの状態を管理して処理を分けなくても、on_mc が表示されている間は on_mc の onRelease 、off_mc が表示されている時は off_mc の onRelease で定義された処理が、ミュートボタンをクリックした時に呼び出されるというわけです。

一般に FLV ファイルは容量が大きく、再生を開始するまでにそれなりに時間がかかります。
この間にミュートボタンを操作されては困ります。
最初はミュートを有効、つまり音声なしですので、ミュートボタンの初期設定として、まず off_mc を表示し on_mc を非表示にします。

off_mc では release イベントを利用しているため、これだけでは off_mc はクリック可能です。
そこで、off_mc の enabled プロパティを false にしてボタン機能を無効化しクリックを検出しないようにします。
”クリックできない”状態を表す絵は、off_mc のフレーム４にあります。上記の作例ではフレーム４に” disabled ”というフレームラベルを付けましたので、これを利用して gotoAndStop で表示しています。

どんなに容量のあるファイルでも、通信が正常に行われていれば、いつかは読み込みが終わります。
読み込みが済んで再生が始まった時には、ミュートボタンをクリックできるようにしなければなりません。
切り替えのタイミングは、FLVPlayback コンポーネントが持っている” ready ”というイベントを利用して検出できます。
ready はビデオの再生の準備が整った時に発生します。

FLVPlayback コンポーネントのイベント処理については、次のループ再生処理と合わせて説明いたします。

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

コンポーネントには、ムービークリップやボタンにはない、独特のイベントが用意されていることがあります。
FLVPlayback コンポーネントにも独特のイベントがあります。
複雑な機能を持っているだけにイベントも多く、なんと、こんなにあります。

　・ Flash ドキュメンテーション： FLVPlayback クラスのイベント一覧
　　http://livedocs.macromedia.com/flash/8_jp/main/00003514.html

イベントが多ければ、それだけ、コンポーネントを使っている時に起こる様々な状況や閲覧者が何かを操作した結果などを細かく把握できます。

ループ再生とはつまり、最後まで再生されたら最初に巻き戻して、再度再生することです。
としますと、FLV ファイルの最後まで再生が完了したときに発生する” complete ”イベントが使えそうです。

また、読み込みの間はミュートボタンを無効にしていました。
読み込みが済んだ時にはミュートボタンを有効にするのですが、これには、FLV ファイルの再生準備が整った時に発生するという” ready ”イベントが使えそうです。
というわけで、今回はこの２つのイベントを利用します。

FLVPlayback だけでなく Flash に付属のコンポーネントでのイベント処理は、

　1) on アクションを使い、インスタンスにオブジェクトアクションとして書く
　2)イベントの情報を代理で受け取って処理する、リスナーオブジェクトを登録する

の、２通りの方法があります。
上記のスクリプトでは、2) のリスナーオブジェクトを使う方法をとっています。

リスナーオブジェクトを使う方法は、まず、イベントの情報を代理で受け取る、Object 型の変数を用意します。
Object 型の変数は汎用型で、どんな情報でも持つことができます。
作った変数に使いたいイベントの名前と同じ要素を作り、これらにイベントが起きた時に呼び出す関数を定義します。これは、ムービークリップやボタンで ○○○.onRelease = function ・・・と定義するのと似ています。

最後に、リスナーオブジェクトの登録を行います。コンポーネントの場合は、addEventListener というメソッドを使います。
この書式は

　コンポーネントのインスタンス名.addEventListener( "イベント名" , リスナーオブジェクトの参照 );

です。
上記のスクリプトでは、complete と ready の２つのイベントを flv_listener という１つのリスナーオブジェクトで処理しています。

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

FLV は Flash のタイムラインとは違う、独自の時間の管理システムを持っています。
このため、Flash のフレームレートに左右されることなく動画を再生できる特長があります。
しかし、それゆえに、特定の箇所を再生したり最初から再生したりするには、Flash のフレームを移動する gotoAnd*** メソッドでは制御できないようになっています。

FLV のタイムラインの単位は秒です。
再生する箇所を指定するには、seek というメソッドを使います。
ファイルの先頭は 0 秒ですから、seek( 0 ); で再生ヘッドが先頭に戻ります。

再生ヘッドを移動しただけでは、動画がそこで止まってしまいます。
そこで、現在再生ヘッドがある位置から再生を開始する play メソッドを続けて実行します。
サーバーと連携したストリーミング再生の場合は、再生ヘッドを移動しようとした先のデータがまだ読み込まれていなかったり、既に破棄されてなくなっていたりして移動に失敗する可能性もあり、もう少し真面目にエラー処理などを作らなければなりませんが、今回はそこまでは考えません。

ループ再生とは、最後まで再生したら最初から再生すること、です。
上記の処理を、最後まで再生した時に発生する complete イベントを検出して作ることで、無限ループ再生を実現できます。

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

FLV 関連のイベントではもう１つ、ready というイベントを利用してミュートボタンの準備をします。

ready は再生の準備が整った時に発生するので、このイベントの発生を待って、ミュートボタンをクリック可能にし、ボリュームを絞ってミュート状態から動画を再生します。
動画の再生処理などは全て FLVPlayback コンポーネントが引き受けてくれますから、ready イベント発生時に行う処理はミュートに関するものだけです。

紙面の都合上、一部の説明を省略させていただきました。
不明な点がありましたら、補足してください。
長くなってすみませんでした。

お礼

丁寧にわかりやすく教えて頂いて、ありがとうございます(;_;)
とてもよくわかりました。

最初、FLVとどう連携させればよいかもわからず、単純にカスタムＵＩのミュートボタンのon、offレイヤーをいれかえてのせてみたりしていました…(>_<)
DPEさんの記事を参考に、実際に自作ボタンから作成してみます！！取り急ぎ、お礼を先に投稿させて頂きました。ありがとうございます。