Flashでムービープレーヤーを作ろう!

2008年6月26日(木)
吉田 光利

インターフェースを作成する

 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;

 これで現在のストリームにメタ情報を使用できるようになり、ビデオ全体の時間も表示できるようになりました。

BRIANS PET TOKYO主催者 WebデザインからRuby on RailsでのWebアプリ構築までをトータルに行うWebコンテンツデザイナ。現在はBRIANS PET TOKYOにてWebアプリケーション「DORIBAR(ドリバー) 」を開発中 http://brianspet.com

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています