feb19.jp blog - life is creative!

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

ブックマークに追加する tags:    

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で返すメソッドを作ってもよかったかもね。しばらくしたら更新するかも。

2007年08月31日10:05

Webデザインブログ

「Flash Videoをひたすら簡単に自作Flashに組み込むためのクラス」の関連エントリー

 iTunes Store(Japan)

コメント (6)

uumma:

これ、flv埋め込みじゃなくて、外部flvを読めたら最高なんですが。

feb19:

すいません 最近スパムが多くて返信遅れちゃいました。。。

これは埋め込みじゃなくて外部FLVを読むクラスですよー。ビデオオブジェクト(インスタンス)はステージ上に置く必要があるのですが。

というか埋め込みFLVの操作=MovieClipの操作ですよね。

akira:

はじめまして、サンプルをダウンロードさせていただいたのですが、
わからないところがあるので質問をさせてください。

外部FLVの読み込みの部分で、
読み込むFLVをFlashVarsで指定したいと思うのですが、
自分の力では出来そうにないのです。

出来ないものなのでしょうか。。


可能であるのならどうすれば出来るのかを教えていただけたらうれしいです。
よろしくお願いします。

akira:

連続投降申し訳ありません。。
FlashVarsでの設定の件なのですが、自己解決いたしました。

お手数おかけしましてすみませんでした。

feb19:

はじめまして。
そして解決おめでとうございます。
そしてスパムだらけで申し訳ありません。
そしてレス遅くて申し訳ありません。
コメントをいただくのが久し振りだったのであります。
もう少し悩んでいただければ・・・(笑

aoki:

これ、ローダーが機能していませんよね?
空欄の状態からいきなりバカっとゲージが満タンになる感じなのですが。

コメントを投稿

トラックバック

このエントリーのトラックバックURL:
http://feb19.jp/mt/mt-tb.cgi/95

Navigation

古:アルファチャンネルグラデーションマスクを使う
新:getter/setterの意味が分かった
トップページ

Recently Entries
Flash 上でパブリッシュしたとき、型宣言されていない変数・関数があったら警告を出す
Flex SDK (mxmlc)や Flex Builder とかで...
Flash Builder 4 Standard 導入
色々メモリリークチェックとか出来る Premium は必要になってか...
Mac でファイルの関連付けを変える(Mac で AIR アプリがアップデート出来ないを解決する方法)
ファイルを右クリックして「情報を見る」を選び、表示されたウィンドウの...
Mac OS X 10.6 Snow Leopard から入ってるフォント「Menlo」がコーディング作業にいい感じ
Xcode でコード書いているとき、Eclipse でコード書くより...
AIR で JSON 形式ファイルの入出力
AIR 祭り開催中。今回はファイル入出力。AS3 で扱っている Ob...
Adobe CS5 ティザーサイトオープン
カウントダウンが始まっています。いよいよ CS5 ですね。globa...
AIR でファイルがドラッグアンドドロップされたことを NativeDragEvent で検知する
最近また AIR が楽しい気がして触っているのですが、 Google...
iPhone アプリ "iBeat - BPM Counter" を発売しました & iPhone インタラクションデザインについて
BPM 計測アプリです。既に似たようなアプリはいくつか発売されている...
AS3 の演算子 ||= について
AS3 だけでつかえるものではないのですが、AS3 での動作を確認し...
iPhone SDK 「カテゴリ」について+NSString の空白文字を除去する
Objective-C では、高位のフレームワークで、低位のフレーム...