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

30

05月2008年

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

nakayama 15:08 PM

  • はてなブックマークに登録
  • livedoorクリップに登録
  • Yahoo!ブックマークに登録
  • deliciousに追加

集中連載「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

よろしくお願いします。

コメントを投稿

ページの先頭へ

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

ARCHIVE

特集

RECENT COMMENTS

ishida on CSS Nite in Ginza, Vol.49「バシャログ LIVE」 で紹介したDreamweaverの正規表現クエリーを公開します
>市川さん コメントありがとうございます。 前提条件の部分
ichikawa on 1.2.3で整えるPHP開発環境【STEP.1】 XAMPPをインストール
いつもバシャログ。をご覧いただきありがとうございます。 >
市川 on CSS Nite in Ginza, Vol.49「バシャログ LIVE」 で紹介したDreamweaverの正規表現クエリーを公開します
どういう前提での使用例なのか、わかりませんが、 タグを明示的
studio-8ch on 1.2.3で整えるPHP開発環境【STEP.1】 XAMPPをインストール
いつも記事を大変興味深く、拝見いたしております。 是非、A
sakai on [使える CSS テクニック] CSSで実現するプルダウンメニュー
>とらのすけさん コメントありがとうございます。 CSS