CSS Selector Generator | CSS のセレクタ一覧を一発で自動生成!

30

05月2008年

Flashで動画を再生しよう!第 3 回 FLVプレーヤーをつくろう1/2。

nakayama 15:08 PM

集中連載「Flash で動画を再生しよう!」の第 3 回です。
今回は FLV ファイルをブラウザで表示するための、swf ファイルを Flash CS3 のコンポーネント「FLVPlayback」を使って説明します。とても簡単です。

STEP1

まず新規ドキュメントを作成し、ツールから [ウィンドウ(W)] → [コンポーネント(C)]を選択します。

01

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

STEP2

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

03

STEP3

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

04

パラメータの詳細は以下の通りです。

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 です。

05

STEP4

細かい設定が完了したら保存してパブリッシュしてみましょう。完成した swf ファイルはこんな感じです。

こちらをご覧になるには、最新のFlash Playerが必要です。
以下のリンクから最新のFlash Playerをインストールしてください。

Adobe Flash Player ダウンロードセンター

コンポーネントを使うと簡単に FLV プレイヤーを作る事が可能です。手間もあまりかからないので初めての人でも扱いやすいです。

次回はオリジナルの FLV プレイヤーを紹介します。

バシャログスタッフによるWebサイト制作サービス

トラックバック

このエントリーのトラックバックURL
http://c-brains.jp/cgi-bin/mt/###/1556
###はmt-tb.cgiに変更してください。

コメント

こんばんは。
制作プロセスを参考にさせていただきました。

もし、よろしければ、ご返事ください。
コンポーネントのコントローラーで初期設定をミュート(消音)に設定することは可能でしょうか?
ボリュームは0でなく、サウンドボタンがオフになっている状態です。

以上、よろしくお願いします。

返事が遅れてしまい申し訳ありません。
確認してみたのですが、プロパティの設定だけでは無理みたいです。

参考までに、強引ではありますが、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);
-----------------------------------------------------------------

投稿したかは覚えていないのですが、ハンドルネームが同じなので、おそらく私ではないかと思います。

上記、ActionScriptの実装で問題が解決できました。
本当にありがとうございました。
心より御礼申し上げます。

こんにちは。
Flash初心者です、質問させてください。

mmさんとまったく同じことをしたいのですが、
上記のスクリプトを書き込む以外に何か設定が必要なのでしょうか?
別レイヤーにスクリプトを書いただけだと音が出てしまい困っています。

何卒よろしくお願いします。

> 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

よろしくお願いします。

参考にさせていただきました。ありがとうございました。

ところで、Flash CS4でコンプーネントパネルのpreviewで書き出したPNGを表示させたいときは、ActionScriptで設定すると書いてありますが、どうすればよいのでしょうか?

いろいろ調べてみたのですがわかりませんでした。

ご教授いただけると大変助かります。

> tyさん
コメントありがとうございます。
コンポーネントのpreviewプロパティは、オーサリング時の動画のプレビュー画面を設定する項目で、特にActionScriptで設定する必要はないかと思うのですが、いかがでしょうか。CS5だとオーサリング中に動画のライブプレビューができて便利ですね。

お返事ありがとうございます。説明が足りなかったようで、もう少し詳しく書かせていただきます。

CS4ではコンポーネントパネルの中のPreviewをクリックすると、動画の再生パネルが出てきて、そこから静止コマの画像(PNG)の書き出しはできるのですが、Previewの欄には書き出したコマの時間が記述されるだけで、書き換えることができなません。

参照ソースを/images/preview.pngのように記述し直すことができないので、パブリッシュしても、このページのアライグマの動画のように再生ボタンを押す前に、Preview画像が表示されません。(私がPreviewの使い方を勘違いしているのかもしれませんが・・)

そこでAdobeのサイトなどで調べてみたところ「PNGはPreviewより書き出せますが、再生前に表示させたいのならば、ActionScriptが必要です。」と書いてあるだけで、肝心のやり方がわからず・・・。

申し訳ありませんがよろしくお願い致します。

コメントを投稿

ページの先頭へ

POPULAR TAGS
  • バシャログスタッフによるWebサイト制作サービス

ARCHIVE

特集

  • ステップアップ!CakePHP
  • 作って学ぶjQuery