PR

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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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