« AS3 Technical Bible - vol.02
フルスクリーンモードを備えたFLV Playerの作成
| DEEP KICK.com Blog | 連載を一冊にまとめた「ActionScript クリエイティブテクニック - Flash CS3/8対応版」発売! »

2008年9月30日

AS3 Technical Bible - vol.03
シーク・ボリューム機能を備えたFLV Playerの作成

このエントリーをはてなブックマークに追加

w83cover.jpg web creators 2008年11月号 に掲載の連載「ActionScript 3 Technical Bible」のテーマは、「シーク・ボリューム機能を備えたFLV Playerの作成」になります。

FLVPlayer2.png できあがりのサンプルはこちらをクリック。

前回のweb creators 2008年10月号で解説したAS3版FLV Playerに改良を加えて、シーク機能とボリュームコントローラーを実装したFLV Playerを作成します。便宜上、前回作成したものを「ver. 1」、今回のものを「ver. 2」と呼ぶことにします(サンプルは上のリンクをクリック)。
今回作成する「ver. 2」のポイントは2つあります。1つは、ドラッグ可能領域となるバーの上を左右にスライドすることができるボタンを作成すること。もう1つは、そこから得た値を、FLVの再生ヘッドの位置やボリュームに適用することです。実際にできあがったサンプルのコントロールエリア部分を操作してみて、各機能を把握するとよいでしょう。詳しい解説は誌面のほうにゆずりますが、ここでは「ver. 2」で新たに追加したコードについて補足します。

ver.2では、新たに下記のクラスをインポートして使います。

ver.2から追加したクラスのインポート

import flash.geom.Rectangle;
import flash.media.SoundTransform;

次にMainクラスで使用するプロパティを宣言しますが、シーク機能関連とボリュームコントロール関連のプロパティを追加します。

ver.2から追加したプロパティ設定

//シーク機能関連のプロパティ
private var seekBtn:BtnKnob;
private var seekBtnBounds:Rectangle;
private var seekBtnWide:Number;
private var seekBtnDefaultX:Number;
private var seekOffsetValue:Number;

//ボリュームコントロール関連のプロパティ
private var volBarWidth:Number;
private var volBtn:BtnKnob;
private var volBtnBounds:Rectangle;
private var volBtnWide:Number;
private var volBtnMinX:Number;
private var volBtnMaxX:Number;
private var volBtnOffsetValue:Number = 100;
private var volTransform:SoundTransform;

これらは誌面で、バー部分をレールにしてスライドさせることができるボタンとして解説されています。BtnKnobクラスはスライドの「つまみ部分」のボタンとなるクラスで、MCとして作成したものを、リンケージで呼び出します。「seekOffsetValue」と「volBtnOffsetValue」ですが、これらはスライドの位置により、[0?100]の数値が代入されます。ツマミ部分が左端にある場合は最小値の0、右端にある場合は最大値の100、ちょうど中間にある場合は50、というようにオフセット値を代入するためのプロパティとなります。

初期化関数init()

private function init():void {
	//コントローラー関連初期化
	setController();
	// NetConnectionオブジェクトの作成
	nc = new NetConnection();
	nc.connect(null);
	// NetStreamオブジェクトの作成
	ns = new NetStream(nc);
	//ロードするFLVファイルを指定
	ns.play(flvPass);
	// clientオブジェクトの初期化
	var client:Object = new Object();
	// コールバック関数を指定
	client.onMetaData = metaDataHandler;
	ns.client = client;	
	// VideoオブジェクトとNetStreamオブジェクトを関連づける
	video.attachNetStream(ns);
	ns.addEventListener(NetStatusEvent.NET_STATUS, onStatusHandler);
	ns.bufferTime = 5;
	
	//ver.2から追加/////////////////////////////////
	//ボリュームの初期化
	volTransform = new SoundTransform();
	setVolume(volBtnOffsetValue);
	////////////////////////////////////////////////
}

初期化関数init() では、コントローラー関連を初期化する関数setController()に追加する処理を記述し、ボリュームの初期化を行う処理を追加します。関数setController() では、スライドのレールとなるバー部分と、つまみ部分それぞれのインスタンスを設定し、マウスイベントにリスナー関数を登録する処理を記述しますが、誌面の[Frame3 シーク機能とボリュームコントローラを実装する]で解説していますので、そちらを参照してください。以下、FLVの再生ヘッドを指定位置へシークする機能とFLVのボリュームを制御する機能を実装するための関数を見ていきましょう。

ver.2から追加するメソッド定義

//FLVの再生ヘッドを指定位置へシークする
private function seekVideo(Num:Number):void {
	ns.seek(Num);
	playBtn.visible = false;
	pauseBtn.visible = true;
	screenplayBtn.visible = false;	
	currentTime.text = formatTime(Num);
	//trace("seekVideo");
}

//FLVのボリュームを制御する
private function setVolume(Num:Number):void {
	volTransform.volume = Num/100;
	ns.soundTransform = volTransform;
	//アイコン表示
	if(Num < 1) {
		volumeicon.gotoAndStop(1);
	} else if(Num < 33) {
		volumeicon.gotoAndStop(2);
	} else if(Num < 66) {
		volumeicon.gotoAndStop(3);
	} else {
		volumeicon.gotoAndStop(4);
	}
	//trace(ns.soundTransform.volume);
}

関数seekVideo() の引数は、下記のように計算された数値[seekPosition]を受け取ります。

var seekPosition:Number = meta.duration * seekOffsetValue / 100;

meta.durationには、FLVの長さが[14.981]秒のように入っています。seekOffsetValueには、FLV再生ヘッドシークバーのつまみの位置により[0?100]の数値が入っていますので、seekPositionには、どの位置にFLVの再生ヘッドの位置を移動すればよいかを示す数値が、秒数で入ります。

ns.seek(Num);

を実行し、実際にFLVの再生ヘッドをシークします。
関数setVolume() の引数は、volBtnOffsetValueを受け取ります。volBtnOffsetValueを100で割った数値をSoundTransformクラスのオブジェクトのvolumeプロパティに代入し、[ns]のsoundTransformプロパティにSoundTransformクラスのオブジェクトを適用して、サウンドのボリュームを制御します。関数setVolume() の後半では、サウンドの音量を示すアイコンを変化させています。

以上、長くて分かりづらい点もありますが、詳しいサンプルの解説は誌面をご覧ください。サンプルファイルをダウンロードするためのパスワードは、誌面に掲載されています。

投稿者 kaoru : 2008年9月30日 15:12

このエントリーをはてなブックマークに追加

contents
about
contact
Photo Gallery
blog
iPhone/iPad アプリ
Kindle book
portfolio