Flashでムービープレーヤーを作ろう!
インターフェースを作成する
Illustratorで作成したものをFlashに読み込んで、今後コントロールすべきところ(例えば再生ボタンやスライダーなど)をムービークリップ化します(図2の青矢印)。
そして、時間を表示する部分にテキストボックスを作成して、それをダイナミックテキストにして、それぞれインスタンス名をつけます(図2の赤矢印)。
準備ができたところで、最初にトグルボタンを作成します。NetStreamには便利なメソッドtogglePauseが用意されています。これは最初に再生を一時停止して、次に呼び出したときには再生をまた始めてくれます。このメソッドを使用すると1つのボタンを押すだけで、再生を一時停止または再生できるようにしてくれます。
作成したムービークリップtoggle_btnに対してリスナーを設定します。
toggle_btn.addEventListener(MouseEvent.CLICK, onTogglePause);
そして以下のように書くだけで、トグルボタンを作成することができます。
function onTogglePause(evt:MouseEvent):void{
stream.togglePause();}
今回は「再生中かそうではないか」で分岐させ、toggle_btn内のフレームで再生ボタンと一時停止ボタンを切り替えています。まずisPlayingというフラグを立てます
var isPlaying:Boolean = true;
それをif文でチェックします。再生しているのであればムービークリップtoggle_btnのフレームをplayというラベルに進めます。そしてisPlayingフラグをfalseにします。
if (this.isPlaying == true){
toggle_btn.gotoAndStop("play");
this.isPlaying = false; }
再生していなければ、ラベルpauseに進みます。そしてisPlayingフラグをtrueにします。
else{
toggle_btn.gotoAndStop("pause");
this.isPlaying = true;}
こうすることによって、簡単にトグルボタンを作成できるようになっています。
メタデータの取得
次に再生スライダーと再生時間を作成したいと思うのですが、これを作成するためにはビデオ全体のデュレーション(時間)を知る必要があります。ムービーのデュレーションの値を取得して、そこから再生スライダーの位置や現在再生している時間を割り出します。この値を取得するためにはflvファイルが持っているメタデータを参照する必要があります。このメタデータには以下のような情報が記述されています。代表的なメタデータの種類は以下になります。
duration:ビデオの全体の長さ(秒)
width, height:ビデオの幅とビデオの高さ(px)
videodatarate:ビデオのデータレート(kbps)
framerate:ビデオのフレームレート(fps)
今回は「duration」の値を使います。
このようにビデオに関するさまざまな情報をメタデータから得ることができ、ActionScriptでそれを活用することができます。今回はNetStreamのイベントハンドラであるonMetaDataを使用して、メタデータを取得します。
このメタデータを取得するためにはまず適当なオブジェクトを作成します。
var client:Object = new Object();
そのオブジェクトにメタデータを渡します。メタデータを取得したついでに、トータル時間を表示するために作成したテキストボックスにデュレーションの値を入れます。
client.onMetaData = function(param:Object){
time_total.text = param.duration;
duration = param.duration;};
そしてNetStreamオブジェクトのclientプロパティに渡します。
stream.client = client;
これで現在のストリームにメタ情報を使用できるようになり、ビデオ全体の時間も表示できるようになりました。