f60k@Lab

ファイルが再生できる形まで前回完成していたので、あとはzincで書き出すだけ。再生時間と再生過程を表すバーを追加したい。このバーはドラッグするとその位置から再生する機能も追加したい。

mdmスクリプトの準備
まず前回後回しにしていたmdmスクリプトの基本部分を考えていく。as3でmdmスクリプトを使う場合、flex builderに設定をする必要があり、まずzincをインストールしたディレクトリにswcファイルがあることを確認する。無い場合は、バージョンが古いので、updateをzincのページからダウンロードしてインストールする。swcファイルはmdmスクリプトのライブラリが入っているので、これをflex builderのライブラリパスにadd swc...ボタンから追加を行う。追加後、mdmスクリプトを使うクラスにimport mdm.*;を行う。

初期化
今回はflexではなくasのプロジェクトなので、まずコンストラクタに次のようにコールバック関数を加えた一文を挿入する。onInitメソッドを後で加える必要があるが、このプロジェクトではコンストラクタですべて行っているのでonInitは空にしてある。

mdm.Application.init(this, onInit);

時間をフォーマットする
現在の再生時間とムービーの全体の時間を表示する場合、再生時間はstream.timeで取得できるが、全体の時間はstreamにはなく、movieファイルであるflvがメタデータとして持っているので、as2でもあったonMetaDataを使う。as3では、flv自体はstream.clientプロパティとなるので、次のようになる。

stream=new NetStream(conn);
var client:Object=new Object();
client.onMetaData=onMetaData;
stream.client=client;
private function onMetaData(data:Object):void{
	_duration=data.duration;
}

_durationとstream.timeは秒表示なので時間を00:00:00というわかりやすい形にしたい。これには前回markXのサイトでも同様のものを作成したので同じ考え方で次のような関数を用意した。

private function _formatTime(time:Number):String{

	var hh:* = Math.floor(time / 3600);
	var mm:* = Math.floor(time / 60);
	var ss:* = Math.floor(time % 60);
	
	if (ss<10) {
		ss = "0"+ss;
	}
	if(mm<10){
		mm = "0"+mm;
	}
	if(hh<10){
		hh = "0"+hh;
	}
	return hh + ":" + mm + ":" + ss;
}

ss、hhやmmが文字列でありながら数値でもあるのでエラーが起きるので*型にしている。

プログレスバー
バーはドラッグできる。ドラッグしたい時はstartDrag()を使う。

private function onThumbPress(e:MouseEvent):void{
//area:ドラッグできる範囲
	var area:Rectangle=new Rectangle(100,253,210-5,5-5);
	thumb.startDrag(false, area);
			
			
	stream.pause();
			
	_isPressing=true;
}

private function onThumbRelease(e:MouseEvent):void{
	thumb.stopDrag();
			
	seek();
	stream.resume();
			
	_isPressing=false;
}

ドラッグ中は映像もその場所を示して（シークして）欲しいので、一定時間毎に処理をする仕組みが欲しい。その場合タイマーを使う。コンストラクタに次の記述が要る。

var timer:Timer=new Timer(100);
timer.addEventListener(TimerEvent.TIMER, onTick);
timer.start();

一定毎にする仕事をonTickメソッドに記述する。バーの移動幅に合わせて尺と比較し現在のつまみの位置を決定する。シーク動作はマウスを押しているときのみ、要するにドラッグ中のみし、ドラッグしていない時は逆にバーの位置は再生状況にあわせて時間から位置を設定する。この位置設定はドラッグ中にはいらないので次のようになる。

private function onTick(e:TimerEvent):void{
	var size:Number=210-5;//移動最大幅
	var position:int=stream.time/_duration*size;
			
	if(_isPressing){
		seek();//シーク
	}else{
		thumb.x=100+position;//押してない時は位置を変える
	}
	label.text=_formatTime(stream.time) + "/" + _formatTime(_duration);
}

時間の表示もここで更新する。若干ドラッグ回りにはバグがあるのでさらに修正などがいるが、アプリとして機能するバージョン(MACOSX用)はここにある。このソースファイルも落とすことが出来る。