« AS3 Technical Bible - vol.01
マウスイベントと連動した"さざ波"の作成
| DEEP KICK.com Blog | AS3 Technical Bible - vol.03
シーク・ボリューム機能を備えたFLV Playerの作成 »

2008年8月31日

AS3 Technical Bible - vol.02
フルスクリーンモードを備えたFLV Playerの作成

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

w82cover.jpg web creators 2008年10月号 に掲載の連載「ActionScript 3 Technical Bible」のテーマは、「フルスクリーンモードを備えたFLV Playerの作成」になります。

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

誌面の冒頭で述べているように、AS3では、NetConnectionオブジェクトとNetStreamオブジェクトを通してFlash Videoファイル(以下FLV)を制御するように仕様が変更されました。誌面の解説では、FLVを制御するために知っておきたい基本的な仕組みと、FLVコンテンツの再生・一時停止機能およびフルスクリーンモード切替機能について解説しています。サンプルを作成するための詳しい解説は誌面の方を見ていただくとして、ここではvideoインスタンスにFLVを再生するための手順について補足します。

AS3では、FLVの再生に関連する基本的なクラスとして以下の3つのクラスがあります。

FLV再生に関連するクラスと手順

flash.net.NetConnectionクラス
FLVデータが送信されるトンネルを用意するクラス
↓
flash.net.NetStreamクラス
トンネルを通ってくるFLVコンテンツを制御するクラス
↓
flash.media.Videoクラス
FLVコンテンツを表示するクラス

NetConnectionクラスは、FLVと通信するためのトンネルを用意するクラスです。トンネルを通ってきたFLVは、NetConnectionオブジェクトに関連づけられたNetStreamオブジェクトを使って、制御することができます。制御されたFLVが最終的に再生されるのは、Videoオブジェクトです。このサンプルでは、誌面の[Frame1]で作成した新規ビデオオブジェクト[video]がVideoクラスのオブジェクトになります。

以下、少し長くなりますが、FLVを再生するためのコードが記述されたMainクラスを見てみます。

Mainクラス(Main.as)

package {
	// _________________________________
	//             1. クラスのインポート
	import flash.display.*;
	import flash.text.*;
	import flash.events.*;
	import flash.media.Video;
	import flash.net.NetConnection;
	import flash.net.NetStream;

	public class Main extends Sprite {
	// _________________________________
	//                 2. プロパティ設定
		private var flvPass:String = "A_natsu01.flv";
		private var nc:NetConnection;
		private var ns:NetStream;
		private var meta:Object;
		private var playBtn:MovieClip;
		private var screenplayBtn:MovieClip;
		private var pauseBtn:MovieClip;
		private var fullBtn1:MovieClip;
		private var fullBtn2:MovieClip;
		private var screenCenterX:int = 360;
		private var screenCenterY:int = 202;
		private var buffer:Buffer;
		private var loadedBar:LoadedBar;
		private var positionBar:PositionBar;
		
	// _________________________________
	//                 3. コンストラクタ
		public function Main() {
			init();
		}
		
	// _________________________________
	//                   4. メソッド定義
		private function init():void {
			// 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; 
		}
		
		//FLVメタデータ取得コールバック関数
		private function metaDataHandler(data:Object):void {
			meta = data;
			//ビデオメタデータの内容をtraceで表示
			var key:String;
			for (key in meta) {
				trace(key + ":" + meta[key]);
			}
		}
		
	// _________________________________
	//               5. リスナー関数定義
		private function onStatusHandler(event:NetStatusEvent):void {
			switch (event.info.code) {
				case "NetStream.Play.Start" :
					trace(event.info.code);
					break;
				case "NetStream.Buffer.Empty" :
					trace(event.info.code);
					break;
				case "NetStream.Buffer.Full" :
					trace(event.info.code);
					break;
				case "NetStream.Play.Stop" :
					trace(event.info.code);
					break;
			}
		}
	}
}

「1. クラスのインポート」で、Video, NetConnection, NetStreamの各クラスをインポートします。

「2. プロパティ設定」で、Mainクラスで使用するプロパティを宣言していますが、FLVのパスを[flvPass]、NetConnectionオブジェクトを[nc]、NetStreamオブジェクトを[ns]のように宣言しています。

Mainクラスのコンストラクタ内で実行される初期化関数init()を見てみると、

private function init():void {
	// 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; 
}

とありますが、早い話が、「FLVを再生するためにはこのように記述する」ことにして、そのまま覚えてしまいましょう。少々乱暴ではありますが、このように記述するとクラスから作成したオブジェクト同士が関連づけられて、VideoオブジェクトにFLVをロードして再生することができます。それぞれの行で何をしているのかは、誌面やFlashヘルプを調べてみるとより詳細な説明を読むことができます。また誌面では、サンプルに備わっている再生・一時停止ボタンや再生位置表示バーの実装について解説しています。これらのコードの記述は誌面の方で詳しく解説していますので、そちらを読んでみてください。

投稿者 kaoru : 2008年8月31日 14:10

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

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