nakayama 15:08 PM
集中連載「Flash で動画を再生しよう!」の第 3 回です。
今回は FLV ファイルをブラウザで表示するための、swf ファイルを Flash CS3 のコンポーネント「FLVPlayback」を使って説明します。とても簡単です。
STEP1
まず新規ドキュメントを作成し、ツールから [ウィンドウ(W)] → [コンポーネント(C)]を選択します。

コンポーネントはこんな感じです

STEP2
コンポーネントの [Video] → [FLVPlayback]をドラック&ドロップしてステージに配置。

STEP3
パラメータの設定をします。

パラメータの詳細は以下の通りです。
| align | scaleMode が「MAINTAIN_ASPECT_RATIO」と「NO_SCALE」の場合で、FLV ファイルのサイズがプレイヤーよりも小さい時に表示する位置の設定。 | |
|---|---|---|
| center | 中央に表示します。 | |
| top | 上に表示します。 | |
| left | 左中央に表示します。 | |
| bottom | 下に表示します。 | |
| right | 右中央に表示します。 | |
| topLeft | 左上に表示します。 | |
| topRight | 右上に表示します。 | |
| bottomLeft | 左下に表示します。 | |
| bottomRight | 右下に表示します。 | |
| autoPlay | FLV ファイルをロードした時に自動再生にするかしないかの設定。 | |
| cuePoints | キューポイントを作成します。 ビデオ内の任意の地点にキューポイントを作成することによって、ActionScript からイベントをとることができるようになります。 |
|
| preview | プレビュー用に PNG ファイルを設定・作成します。 | |
| scaleMode | FLV ファイルのロード時の表示サイズの設定。 | |
| MAINTAIN_ASPECT_RATIO | 定義されているサイズ内で、ビデオの縦横比を表示するようになります。 | |
| NO_SCALE | ビデオは自動的に FLV ファイルのサイズになります。 | |
| EXACT_FIT | FLV ファイルのサイズを無視して定義されているサイズに合わせてビデオを拡大 / 縮小します。 | |
| skin | コントローラのデザインの変更。 | |
| skinAutoHide | コントローラの表示方法の設定。 | |
| true | プレイヤーにカーソルが乗っているとき以外は非表示になります。 | |
| false | 常に表示されたままになります。 | |
| skinBackgroundAlpha | コントローラのアルファ値の設定。 | |
| skinBackgroundColor | コントローラの色の設定。 | |
| source | FLV ファイルのパスの設定。※下記参照 | |
| volume | ボリュームコントロール初期値の設定。 | |
FLVファイルのパスの設定
基本的に[source]に FLV ファイルのパスを設定するだけで OK です。

STEP4
細かい設定が完了したら保存してパブリッシュしてみましょう。完成した swf ファイルはこんな感じです。
こちらをご覧になるには、最新のFlash Playerが必要です。
以下のリンクから最新のFlash Playerをインストールしてください。
コンポーネントを使うと簡単に FLV プレイヤーを作る事が可能です。手間もあまりかからないので初めての人でも扱いやすいです。
次回はオリジナルの FLV プレイヤーを紹介します。













コメント
こんばんは。
制作プロセスを参考にさせていただきました。
もし、よろしければ、ご返事ください。
コンポーネントのコントローラーで初期設定をミュート(消音)に設定することは可能でしょうか?
ボリュームは0でなく、サウンドボタンがオフになっている状態です。
以上、よろしくお願いします。
BB | 2008年06月18日 23:46
返事が遅れてしまい申し訳ありません。
確認してみたのですが、プロパティの設定だけでは無理みたいです。
参考までに、強引ではありますが、ActionScript を使って以下の方法で実現できます。
(as2.0の場合)
-----------------------------------------------------------------
var listenerObj:Object = new Object();
listenerObj.ready = function(eventObject:Object):Void {
_level0.flv_comp.skin_mc.volumeMute_mc.on_mc.onRelease()
};
flv_comp.addEventListener("ready", listenerObj);
-----------------------------------------------------------------
nakayama | 2008年06月23日 11:30
投稿したかは覚えていないのですが、ハンドルネームが同じなので、おそらく私ではないかと思います。
上記、ActionScriptの実装で問題が解決できました。
本当にありがとうございました。
心より御礼申し上げます。
BB | 2008年06月26日 15:46
こんにちは。
Flash初心者です、質問させてください。
mmさんとまったく同じことをしたいのですが、
上記のスクリプトを書き込む以外に何か設定が必要なのでしょうか?
別レイヤーにスクリプトを書いただけだと音が出てしまい困っています。
何卒よろしくお願いします。
tomy | 2010年01月12日 17:54
> tomy さん
コメントありがとうございます。
「mmさん」が上記のコメントをくださっているBBさんだと仮定してですが、
FLVplaybackコンポーネントで最初からミュートする場合の対応策です。
ステージ上のFLVplaybackコンポーネントにflvplayerというインスタンス名が付いている場合、以下のスクリプトで最初からミュートできます。
as2.0
-----------------------------------------------------
var listenerObj:Object = new Object();
listenerObj.ready = function(eventObject:Object):Void {
_level0.flvplayer.muteButton = muteBtn;
muteBtn.on_mc.onRelease();
};
flv_comp.addEventListener("ready", listenerObj);
-----------------------------------------------------
以下の記事を参考にしております。
http://level0.kayac.com/2009/11/flvplayback_default_mute.php
よろしくお願いします。
toyama | 2010年01月13日 11:49