feb19.jp

Nobuhiro Takahashi
Designer / Engineer

Flash Videoをひたすら簡単に自作Flashに組み込むためのクラス

Flash Videoをひたすら簡単に自作Flashに組み込むためのクラス

.flvを簡単に自分の作ったSWF内に組み込むためのクラスを作りました。これを使う事で、通常よりはるかに簡単にビデオギャラリーなどのFlashコンテンツを作る事ができます。

こちらがサンプルです。

サンプル

実用性を重視しておりますので、たくさんの機能を用意しておりやや長めのコード&説明になっていますが、このクラスだけで「指定する.flvを指定するVideoオブジェクトで再生」「オーディオトラックを指定のムービークリップに割り当てる」「ローダー」「再生」「一時停止」「早送り」「頭出し」「リプレイ」「時間0秒点に移動」「ボリュームコントロールスライダー」「シークタイムスライダー」必要だと思われる機能全てを網羅しました。

ただし、onMetaDataでflvのメタデータを取得しているので、メタデータが記述されている.flvしか機能を使う事ができません(今時メタデータが書いてないflvなんかそうそう見ない気がしますしまぁいいかなと)。

このクラスは、ビデオを再生する内部処理を行うという振る舞いをします。そのため再生ボタンやスライダーなどの「UI部分」に関しては別に作らなければなりません。ただ、その分柔軟なクラスになっていると思います。

VideoClip.as
ストリーミングflvを再生する一連の内部処理を一括して担うクラスとそのサンプル

これをFLASHで組み込むには例えば以下のようなフレームアクションを作ります。

例)VideoClip.fla

var videoClip = new VideoClip(this);	//コンストラクタでインスタンスを生成
videoClip.init("video.flv", video, this, loader_mc);
	//再生するビデオへのファイルパス、対象のビデオインスタンス、
	//NetStreamの音を割り当てるムービークリップのターゲット、ローダー用ムービークリップ
play_btn.onRelease = function(){
	//再生
	videoClip.play();
	time_mc.onEnterFrame = function(){
		//再生位置をパーセントで取得
		this._xscale = videoClip.getPositionPercent()*100;
	}
}
pause_btn.onRelease = function(){
	//一時停止
	videoClip.pause();
}
rw_btn.onPress = function(){
	this.onEnterFrame = function(){
		//巻き戻し
		videoClip.rw();
	}
}
rw_btn.onRelease = function(){
	delete this.onEnterFrame;
}
ff_btn.onPress = function(){
	this.onEnterFrame = function(){
		//早送り
		videoClip.ff();
	}
}
ff_btn.onRelease = function(){
	delete this.onEnterFrame;
}
stop_btn.onRelease = function(){
	//停止
	videoClip.stop();
}
replay_btn.onRelease = function(){
	//リプレイ
	videoClip.replay();
}
v100_btn.onRelease = function(){
	//音量を100(最大)に
	videoClip.audioVol100();
}
v0_btn.onRelease = function(){
	//音量を0に
	videoClip.audioVol0();
}
vol_mc._active = false;
vol_mc.onPress = function(){
	this.startDrag(false,281,172,365,172);
	this._active = true;
}
vol_mc.onRelease = vol_mc.onReleaseOutside = function(){
	this.stopDrag();
	this._active = false;
}
vol_mc.onMouseMove = function(){
	if(this._active){
		//音量をスライダー位置で変更
		videoClip.audioVol(281,365,this._x);
	}
}
seek_mc._active = false;
seek_mc.onEnterFrame = function(){
	if(!this._active){
		//再生位置をスライダーに反映
		this._x = videoClip.getPositionPercent()*(380-258) + 258;
	}
}
seek_mc.onPress = function(){
	this.startDrag(false, 258, 122, 380, 122);
	this._active = true;
}
seek_mc.onRelease = seek_mc.onReleaseOutside = function(){
	this.stopDrag();
	this._active = false;
}
seek_mc.onMouseMove = function(){
	if(this._active){
		//再生位置をスライダー位置で変更
		videoClip.seekAt(258, 380, this._x);
	}
}

サンプルをダウンロード

せっかくMetaDataを取得するんだからObjectで返すメソッドを作ってもよかったかもね。しばらくしたら更新するかも。

Tweet Share Bookmark

Navigation

prev: アルファチャンネルグラデーションマスクを使う
next: getter/setterの意味が分かった

Recently Entries