FLVPlayback コンポーネントのカスタマイズ
作成日
9 November 2005
ページ ツール |
必要条件
この記事に必要な予備知識
この記事の目的は、スキン適用機能を使用した FLVPlayback コンポーネントのカスタマイズについて説明することです。ビデオの再生および制御方法の詳細については、「Flash Video Template: Video Presentation with Navigation」を参照してください。
ユーザーレベル
中級
サンプルファイル
- water.flv (379 KB)
その他の必要条件
Macromedia Flash Professional 8
次のチュートリアルおよびサンプルファイル
この記事を理解するために必須というわけではありませんが、作業中のファイルでスキンのカスタマイズをテストできるように、Flash Video FLV ファイルを手元に用意することをお勧めします。FLV ファイルが手元にない場合は、FLVPlayback コンポーネントの contentPath プロパティで次の URL を使用することもできます。
Flash Professional 8 での機能アップグレードの 1 つは Flash Video 用の新しい FLVPlayback コンポーネントです。Flash Video コンポーネントの外観を自由にカスタマイズしたいと考えていたユーザーには待望のアップグレードです。FLVPlayback コンポーネントでは、拡張された ActionScript API が提供され、グラフィックのカスタマイズ、スキンの適用のための方法も複数用意されています。
この記事では、FLVPlayback コンポーネントへのスキン適用のための、次の 3 つの方法について順に説明します。
- [スキンの選択] ダイアログボックスから作成済みスキンを選択する
- FLVPlayback カスタム UI コンポーネントを使用して、カスタマイズ可能なコントロールを組み合わせて配置し、それらのサイズを調整する
- 独自の作成済みスキンを作成する
作成済みスキン SWF ファイルの使用
新しい FLVPlayback コンポーネントには優れた機能が満載されています。FLVPlayback コンポーネントで作業しているとまず気付くのは、作成済みスキンが各種用意されていることです。スキン SWF ファイルは、再生中のビデオの制御に FLVPlayback コンポーネントで使用できる作成済みコントロールの集まりです。[スキンの選択] ダイアログボックスを使用して、外観とコントロールのさまざまな組み合わせを選択できます (図 1 を参照)。
![[スキンの選択] ダイアログボックスを使用して、作成済みスキンオプションを選択する](/content/dotcom/jp/devnet/flash/articles/custom_flvcomp/_jcr_content/articlecontentAdobe/image.adimg.mw.500.gif/1280828071571.gif "[スキンの選択] ダイアログボックスを使用して、作成済みスキンオプションを選択する")
作成済みスキンの選択はビデオプレーヤーの外観を変更するための最も簡単な方法です。この方法では、ダイアログボックスを開き、プレビューブラウザから目的のスキンを選択するだけです。残りの操作は Flash が自動的に行います。
[ビデオの読み込み] コマンドを使用した [スキンの選択] ダイアログボックスの表示
Flash Professional 8 では、[ビデオの読み込み] コマンドを使用して、ビデオコンポーネントをステージに追加し、そのコンポーネントに外部 FLV ファイルを割り当て、[スキンの選択] ダイアログボックスから目的のスキンを選択できます。この手順は非常に単純なので、Flash に不慣れな場合や、すばやく目的を達成したい場合にお勧めします。ビデオコンポーネントをステージに初めて追加するときに、この手順を使用できます。その後、コンポーネントインスペクタを使用してスキンオプションを変更します。
ここでは、[ビデオの読み込み] コマンドを使用してスキンを割り当てる基本的な手順を示します。
- Flash Professional 8 で、新しい Flash ファイルを作成し、FLV ファイルに関連付けられた場所にそのファイルを保存します。
- メインメニューから [ファイル]-[読み込み]-[ビデオの読み込み] を選択します。[ビデオの読み込み] ダイアログボックスが表示されます。
- [ビデオの選択] 画面で、表示する FLV ファイルのパスを参照して選択します。[次へ] をクリックして、次の画面に進みます。
- Flash Media Server から FLV ファイルをストリーミングしない場合は、[展開] 画面で [Web サーバーからのプログレッシブダウンロード] オプションを選択します。その場合、いずれかのストリーミングオプションを選択します。[次へ] をクリックして、次の画面に進みます。
- [スキンの適用] 画面で、[スキン] ポップアップメニューを使用してスキンをプレビューおよび選択します。この画面は、図 1 に示した [スキンの選択] ダイアログボックスに相当するものです。[次へ] をクリックして、次の画面に進みます。
[ビデオの読み込みの終了] 画面で設定を確認し、[終了] をクリックしてウィザードを終了します。FLVPlayback コンポーネントがステージに追加されたことに注目してください。このコンポーネントは、手順 3 で割り当てた FLV ファイルに合わせてサイズが調整されています。
メモ : FLVPlayback コンポーネントのサイズの調整には、FLV ファイルに埋め込まれているメタデータが使用されます。以前のバージョンの FLV ファイルには、このメタデータが埋め込まれていない場合があります。その場合、コンポーネントのサイズは自動的に調整されません。最良の結果を得るには、Flash 8 Video Encoder を使用してソースファイルを FLV 形式に再度エンコードします。ソースファイルが使用可能でない場合は、FLV メタデータユーティリィティ (FLV MetaData Injector など) を使用して必要なメタデータを埋め込むことによって、この問題に対処できます。
- インスタンスをクリックして選択し、コンポーネントインスペクタを開いて、[ビデオの読み込み] コマンドによって追加したコンポーネントパラメータを確認します。
contentPathプロパティには、ビデオへの URL が設定されています。また、skinプロパティには、手順 5 で選択したスキン SWF ファイルの名前が設定されています。これらの点に注意してください。この時点でのスキンの変更は、コンポーネントインスペクタでスキンパラメータを手動で変更することによって可能です。 - ムービーを書き出して結果を確認します。
コンポーネントインスペクタを使用した [スキンの選択] ダイアログボックスの表示
FLVPlayback コンポーネントをステージに配置した後、コンポーネントインスペクタを使用して、選択したスキン (および他の各種パラメータ) を変更します。必要に応じて異なるスキンに何度でも変更できます。
前の実習の手順に続いて、ここでは、コンポーネントインスペクタによるスキンの割り当てや変更の手順を示します。
- FLVPlayback インスタンスを選択した状態で、コンポーネントインスペクタのパラメータリストで
skinプロパティをクリックして選択し、再度クリックしてダイアログボックスを開きます。[スキンの選択] ダイアログボックスが開きます。 - [スキン] ポップアップメニューをクリックして、スキン SWF ファイルをプレビューおよび選択します。参照と選択が終了したら、[OK] をクリックします。
- 変更によるコンポーネントの更新結果をライブプレビューで確認する必要があります。
スキン SWF 機能をオフにする
FLVPlayback コンポーネントのデフォルトのスキンをオフにしたい場合がよくあります。その場合は、独自のコントロールを追加するか、各種カスタムユーザーインターフェイスコンポーネントを使用するか、ActionScript によってコンポーネントを完全に制御することが可能です (私の記事「Controlling Flash Video with the FLVPlayback Behaviors」を参照)。スキン SWF 機能をオフにするには、次の単純な手順に従います。
- FLVPlayback インスタンスを選択した状態で、コンポーネントインスペクタのパラメータリストで
skinプロパティをダブルクリックします。[スキンの選択] ダイアログボックスが開きます。 - [スキン] ポップアップメニューから [なし] を選択し、[OK] をクリックしてダイアログボックスを終了します。
- コントロールを削除したコンポーネントの更新結果をライブプレビューで確認する必要があります。
ヒント : コンポーネントインスペクタで、FLVPlayback コンポーネントの skinAutoHide プロパティを true に設定して、カーソルがビデオの上に置かれるまでコントロールが非表示になるようにできます。このプロパティが有効になるのは、スキン SWF 機能を使用するときのみです。
作成済みスキン SWF ファイルを直接修正することはできません。この理由から、作成済みスキン SWF ファイルを使用する方法は、FLVPlayback コンポーネントにスキンを適用する 3 つの方法の中で、自由度が最も劣ります。ただし、開発時間がかからず、また Flash の編集スキルも必要ありません。
FLV Playback カスタム UI コンポーネントの使用
作成済みスキンの他に、FLV Playback コンポーネントでは、FLV Playback カスタム UI コンポーネントのサポートが新たに追加されています。[コンポーネント] パネルに 2 つの新しいカテゴリが追加されているのがわかります (図 2 を参照)。
![Flash 8 Professional の [コンポーネント] パネルに追加された 2 つの新しいカテゴリ : [FLV Playback – Player 8] と [FLV Playback Custom UI]](/content/dotcom/jp/devnet/flash/articles/custom_flvcomp/_jcr_content/articlecontentAdobe/image_0.adimg.mw.206.gif/1280828126721.gif "Flash 8 Professional の [コンポーネント] パネルに追加された 2 つの新しいカテゴリ : [FLV Playback – Player 8] と [FLV Playback Custom UI]")
FLV Playback カスタム UI コンポーネントは、FLVPlayback インスタンスに関連付けることができる個々のビデオコントロールの集まりです。これらのカスタム UI コンポーネントは、任意に組み合わせて使用したり、画面の任意の場所に配置したり、標準ムービークリップのシンボルのように編集できます。
Flash 8 には次のコントロールが用意されています。
ボタン :
- BackButton
- ForwardButton
- MuteButton
- PlayPauseButton (または PlayButton と PauseButton)
- StopButton
バー :
- BufferingBar
- SeekBar
- VolumeBar
一般に、カスタム UI コンポーネントを使用するには、インスタンスをステージに追加し、インスタンスを指定して、ビデオコンポーネントのスキン適用のプロパティにインスタンス名を関連付けます。カスタム UI コンポーネントが FLVPlayback インスタンスに関連付けられた後、そのコンポーネントの名前どおりの機能が自動的にそのインスタンスに追加されます。追加のコードを記述する必要はありません。
FLVPlayback インスタンスへのカスタム UI コンポーネントの追加
カスタム UI コンポーネントを FLVPlayback インスタンスに追加するには、次の手順に従います。
- Flash Professional 8 で FLA ファイルを作成し、FLVPlayback コンポーネントのインスタンスを [コンポーネント] パネルからステージにドラッグします。FLVPlayback インスタンスを選択して、プロパティインスペクタでインスタンス名を指定します (たとえば flvPlayback)。
- ファイルを保存し、SWF ファイルを書き出します。
- コンポーネントを選択し、コンポーネントインスペクタで
skinプロパティがNoneに設定されていることを確認します (コンポーネントインスペクタでの skin パラメータについては次のセクションを参照)。必要な場合のみ、スキン SWF ファイルとカスタム UI コンポーネントを割り当てることもできます。 - これで、ステージ上の FLVPlayback インスタンスにカスタム UI コンポーネントを追加する準備が整いました。コンポーネントを自由に配置できます。インスタンス名 (たとえば mySeekBar) を指定します。
- 例として、シークバーを FLVPlayback インスタンスに追加し、その
skinプロパティをNoneに設定するとします。これを行うには、SeekBar コンポーネントを [コンポーネント] パネルからステージまでドラッグします。目的の場所にコンポーネントを配置します。一般に、カスタム UI コンポーネントはステージで拡大 / 縮小されるように設計されていません。コンポーネントインスタンスの拡大 / 縮小はできるだけ避けるようにしてください。代わりに、ライブラリのコンポーネントムービークリップシンボル内部で、グラフィックのサイズを変更してください。ただし、シークバーは水平方向に拡大 / 縮小しても適切に表示されます。自由変形ツールを使用するか、[整列] パネルにある幅を揃えるためのコマンドを使用して、シークバーの幅を FLVPlayback インスタンスの幅に合わせます (図 3 を参照)。
- [ライブラリ] パネルを開きます。SeekBar インスタンスに複数のスキンシンボルが関連付けられていることに注目してください。これらは FLV Playback Skins という名前のフォルダに格納されています。これらの各ムービークリップの編集モードには、ステージ上の各インスタンスから、またはライブラリ内のシンボルから切り替えることができます (図 4 を参照)。
- 最後の手順は SeekBar インスタンスを FLVPlayback インスタンスに関連付けることです。これを行うには、ビデオコンポーネントが含まれているタイムラインに actions という名前の新しいレイヤーを追加します。actions レイヤーを選択し、[アクション] パネルを開きます。次のコードを入力し、
flvPlaybackを実際の FLVPlayback インスタンス名に置き換えます。また、mySeekBarを実際のシークバーのインスタンス名に置き換えます。
// Assign the mySeekBar instance to the flvPlayback instance
flvPlayback.seekBar = mySeekBar;
- SWF を書き出して結果を確認します。
ヒント : 以前のバージョンの FLV ファイルで SeekBar コンポーネントを使用している場合、SeekBar コンポーネントとパーセンテージ機能を動作させるために必要なメタデータが FLV ファイルに埋め込まれていない場合があります。この場合、FLVPlayback パラメータに totalTime 値を手動で入力することによって、この問題を解決できます。
カスタム UI コンポーネントのグラフィックの修正
ムービークリップシンボルを通常編集するように、カスタム UI コンポーネントのグラフィックを編集できます。ムービークリップのタイムラインに切り替え、調整するグラフィックを見つけて、編集します。重要なのは、既存のインスタンス名またはファイル構造を変更しないということです。
前の実習の手順に続いて、ここでは、シークバーのグラフィックを修正する方法について説明します。
- ステージで SeekBar インスタンスをダブルクリックし、編集モードに切り替えます。
- progress レイヤーを除いたすべてのレイヤーをロックし、プログレスバーをダブルクリックしてその編集モードに切り替えます。ステージ上でグラデーションの塗りを選択し、ツールバーの [塗りのカラー] スウォッチを使用して色を変更します。たとえば、青単色またはさまざまな色のグラデーションの塗りに変更できます。
- 編集バーの SeekBar ボタンをクリックして、SeekBar のタイムラインに戻ります (図 5 を参照)。
- 図 5 で、単一のキーフレームがタイムラインのフレーム 2 にあることに注目してください。実際にはタイムラインのフレーム 2 までは再生されませんが、シンボルがファイルに書き出されて ActionScript で使用できるように、グラフィックがフレーム 2 で格納される場合があります。assets レイヤーのロックを解除し、フレーム 2 に移動して、ステージ上でハンドルのグラフィックを編集します。グラフィックをダブルクリックして、編集モードに切り替えます。レイヤー 1 のグラフィックを必要に応じて変更します。ハンドルの "ヒット状態" (アクティブな領域) を作る hitBG レイヤー上に不可視のグラフィックがあることに注意してください。
- 編集バーの SeekBar ボタンをクリックし、SeekBar のタイムラインに戻ります。必要な場合はさらに編集を続行できます。FLVPlayback インスタンスに関連付けられたコントロールの設定を調整するコードが script レイヤーに含まれていることに注目してください。グラフィックのサイズとシェイプを変更しない場合、このコードを調整する必要はありません。
ここでの手順はすべてのカスタム UI コンポーネントに適用できます。より複雑なカスタマイズについては、次に挙げているヘルプマニュアルを参照してください。
カスタム UI コンポーネントの詳細
ムービークリップのコンポーネントのタイプごとに設定内容が多少異なっていることがわかります。各種コンポーネントの詳細については、Flash 8 ヘルプマニュアルの次のセクションを参照してください。
[コンポーネントリファレンスガイド]-[FLVPlayback コンポーネント]-[FLVPlayback コンポーネントのカスタマイズ]-[FLVPlayback カスタム UI コンポーネントへの個々のスキン適用]
スキン適用に使用できるその他の ActionScript プロパティ
次のコード例は、FLVPlayback コンポーネントのスキン適用のプロパティをすべて示しています。この例では、コンポーネントのインスタンス名は flvPlayback であり、代入演算子 (=) の右側の値はステージ上のカスタム UI コンポーネントのインスタンス名です。
flvPlayback.playButton = playbtn;
flvPlayback.pauseButton = pausebtn;
flvPlayback.playPauseButton = playpausebtn;
flvPlayback.stopButton = stopbtn;
flvPlayback.muteButton = mutebtn;
flvPlayback.backButton = backbtn;
flvPlayback.forwardButton = forbtn;
flvPlayback.volumeBar = volbar;
flvPlayback.seekBar = seekbar;
flvPlayback.bufferingBar = bufbar;
PlayPauseButton コンポーネントを使用するか、PlayButton コンポーネントと PauseButton コンポーネントを使用することに注意してください。PlayPauseButton コンポーネントは 2 つの状態を切り替えますが、PlayButton コンポーネントと PauseButton コンポーネントは別個のボタンです。上記のコード例は単に参考用としてスキンのプロパティを示しています。
bufferingBarHidesAndDisablesOthers プロパティを使用して、バッファリングバーに関連付けられたスキンをコンポーネントがどのように扱うかを修正することもできます。
flvPlayback.bufferingBarHidesAndDisablesOthers = true;
バッファサイズが大きく、ビデオのダウンロード中にコントロールを無効にする必要がある場合 たとえば Flash Media Server サーバーからのビデオのストリーミング時 、このプロパティは便利です。このプロパティはデフォルトで false に設定されています。
スキンのプロパティとして autoSkinHide もありますが、このプロパティは FLV Playback カスタム UI コンポーネントのインスタンスに影響を与えないことに注意してください。このプロパティは、「作成済みスキン SWF ファイルの使用」で前述したように、スキン SWF ファイルに対してのみ使用できます。
カスタムスキン SWF ファイルの作成
既に見てきたように、[スキンの選択] ダイアログボックスやスキン SWF 機能は、すばやく簡単に使用できます。ここでは、カスタムスキン SWF ファイルの作成手順を紹介します。
デザイン済みのカスタムコントロール、拡張機能用の ActionScript コード、およびスキンを適用するための [スキンの選択] ダイアログボックスを組み合わせてカスタムスキン SWF を作成すると、作成時間を大幅に節約することができます。また、スキン SWF は、Flash 8 の新しいムービークリップ拡大/縮小機能を使用して、拡大/縮小できるように設計されています。詳細については、Flash のヘルプドキュメント ([Flash ユーザーガイド]-[シンボル、インスタンス、およびライブラリアセットの使用]-[9 スライスの拡大/縮小とムービークリップシンボルについて]) を参照してください。
はじめに
スキン SWF ファイルの最も簡単な作成方法は、既存のファイルをコピーしてそれを修正する方法です。まず、Flash Professional 8 に組み込まれている作成済みスキン SWF ファイルのコピーを作成します。デフォルトのスキンセットの FLA ファイルは、ハードディスク上の "<言語>\Configuration\SkinFLA" フォルダの Flash 8 アプリケーションフォルダ内にあります。
次の手順に従って作業を進めます。
- ここでは Flash Professional 8 がインストールされていると仮定します。Flash 8 のアプリケーションフォルダで、"<言語>\Configuration\SkinFLA" フォルダを開きます。
- フォルダ内には、作成済みの各スキン SWF ファイル用の FLA ファイルが格納されています (図 6 を参照)。目的のスキンに近いファイルを選択し、そのスキン FLA ファイルを Flash で開きます。
- その FLA ファイルに新しい名前を付けて "<言語>\Configuration\SkinFLA" フォルダに保存します。FLA ファイルを必ずこの場所に保存する必要はありません。この FLA ファイルから生成される SWF ファイルは、"Configuration" フォルダに配置されます。FLA ファイル自体は、ハードディスク上の任意の場所に保存することができます。
- FLA ファイルの内容を確認します。ここでは、指定されたインスタンス名とファイル構造をそのまま維持します。
- すべてのコントロールグラフィックがステージ上に並んでいます。さまざまなグラフィックをクリックして、選択したアイテムを表示してみます。各コントロールを構成するグラフィックのコレクションが、1 つのムービークリップにグループ化されています。ムービークリップ内のグラフィックは必要に応じて編集できますが、ムービークリップのネスト構造とインスタンス名はそのまま維持する必要があります。
これで、新しいスキン SWF ファイルをカスタマイズする準備が整いました。
スキン SWF ファイルのグラフィックの修正
上記の手順で、既存のスキン SWF ファイルを基にした新しいスキン SWF ファイルが作成されました。この SWF ファイルを修正する最も簡単な方法は、ステージ上のムービークリップに表示されるグラフィックを編集する方法です。ここで、グラフィックの修正を試してみましょう。
スキン SWF ファイルでは、Scale-9 と呼ばれる Flash 8 の新機能を使用します。この機能は、ライブラリ内のムービークリップの上にガイド用のグリッドを配置します。このグリッドによってグラフィックが 9 つのセクションに分断されるため、ゆがみを生じることなく、インスタンスごとに拡大/縮小することができます。これを確認するため、ライブラリ内の "Chromes" フォルダを開き、そのシンボルをダブルクリックしてタイムラインを表示します。長方形のクロムグラフィックにガイドが重ねて表示されます。これらのガイドは、ライブラリ編集モードでムービークリップやボタンを編集するときに表示されます。SWF ファイルに適用された Scale-9 機能の効果は、実行時にのみ示されます。試しにメインタイムラインでいくつかのインスタンスを拡大/縮小し、ムービーを書き出して ([制御]-[ムービープレビュー]) 結果を確認します。
ボタンやボタンのクロム (または背景) の外観を修正するだけで、ムービークリップのサイズは変更しない場合は、さらに編集を続ける必要はありません。ほとんどの場合、コントロールの場所のみを修正することもできます。
ファイルを編集するには、次の手順に従います。
- 編集するスキン SWF FLA ファイルを Flash Professional 8 で開きます。
ファイルは複数のレイヤーで構成され、ルートタイムラインのフレーム 1 にグラフィックが置かれています。レイヤースタックの一番上にあるレイヤーには、layout_mc インスタンス (作成されたコントロールのコンテナ) と、layout_mc ムービークリップのさまざまなプロパティを初期化する ActionScript コードが置かれています。このコードは編集不要ですが、コメントやデフォルトのプロパティ設定を確認しておくことをお勧めします。
- グラフィックを編集するには、まずグラフィックが含まれているムービークリップの編集領域 (タイムライン) を表示する必要があります。レイヤーや編集可能なイメージが置かれているタイムラインが表示されるまで、ステージ上のグラフィックを繰り返しダブルクリックしてください。
たとえば、画面の下に水平に表示される、クロムの背景を持つグラフィックを編集するには、そのグラフィックを 1 回ダブルクリックして、ムービークリップのタイムラインおよび編集領域を表示します。ムービークリップに含まれている編集可能なグラフィックは、複数のレイヤーに分かれて置かれています (図 7 を参照)。ムービークリップの名前はファイルごとに異なりますが、常にルートタイムラインの一番下のレイヤーに表示され、内部に同じレイヤー構造を保持しています。
- Clear Plate レイヤーのロックを解除し、ステージで塗りを選択します。塗りを選択した状態で、ツールバーの [塗りのカラー] スウォッチで色を変更します。ルートタイムライン上の layout_mc ムービークリップ内の色が自動的に更新されます。塗りのカラー、アウトライン、およびシャドウを変えることもできます。
- 操作が終了したら、編集バーの [シーン 1] ボタン (コントロール E) をクリックして、メインタイムラインに戻ります。
- どのグラフィックを修正する場合でも、手順は同じです。編集領域が表示されるまでグラフィックをダブルクリックします。編集領域を表示するために、複数回ダブルクリックする必要がある場合もあります。これは、ボタンが 2 ～ 3 レベルの深さまでネストされている場合などです。
- 作成したファイルを保存し、SWF ファイルを書き出します。書き出されたスキン SWF ファイルを FLVPlayback コンポーネントにロードする方法については、次のセクションを参照してください。
ヒント : クロムグラフィックや背景グラフィック内の色を修正することによって、多大な労力を費やさずにビデオプレーヤーの外観を変更することができます。
手動でのカスタムスキンのロード
カスタムスキン SWF ファイルを FLVPlayback コンポーネントにロードするには、スキンパラメータと [スキンの選択] ダイアログボックスを使用して SWF ファイルを参照します。SWF ファイルはどの場所からでも参照できますが、ファイルを Flash の "Configuration" フォルダに置くと、デフォルトのスキンリストと一緒に表示されるので便利です。こうすることによって、スキン SWF ファイルと他のデフォルトファイルを一緒にプレビューできます。また、スキン SWF ファイルのコピーが、開発中の FLVPlayback SWF ファイルの隣に自動的に配置されます。
スキン SWF ファイルが [スキンの選択] ダイアログボックスに常に表示されるようにするには、作成したカスタムスキン SWF ファイルを Flash 8 アプリケーションフォルダ内の "<言語>\Configuration\Skins" フォルダに保存します。この場所に保存した SWF ファイルは、[スキンの選択] ダイアログボックスに表示されます。これで、[スキンの選択] ダイアログボックスを開くたびに、作成したカスタムスキンがダイアログボックス内に表示され、使用できるようになります。
スキン SWF を FLVPlayback コンポーネントにロードするには :
- Flash Professional 8 で FLA ファイルを作成し、FLVPlayback コンポーネントのインスタンスを [コンポーネント] パネルからステージにドラッグします。
- ファイルを保存します。
- FLVPlayback のインスタンスを選択し、[ウィンドウ] メニューからコンポーネントインスペクタを開きます ([ファイル]-[ウィンドウ]-[コンポーネントインスペクタ])。
skinパラメータを 1 回クリックして選択し、もう一度クリックして [スキンの選択] ダイアログボックスを開きます。- [スキン] ポップアップメニューのオプションリストを下にスクロールし、作成したスキンの名前を探します。このスキンは、今後はデフォルトのスキンと同様に使用できます。
[スキンの選択] ダイアログボックスにデフォルトでは表示されないスキン SWF ファイルをロードするには、[カスタムスキンの URL] オプションを使用します。会社のサーバーに置かれている SWF ファイルを参照する場合や、便宜的に自分のデスクトップにファイルを保存する場合は、このオプションが便利です。
- FLVPlayback パラメータからもう一度 [スキンの選択] ダイアログボックスを開きます。
- [スキン] ポップアップメニューの最後のオプション [カスタムスキンの URL] までスクロールします (図 8 を参照)。
![カスタム SWF ファイルのパスを指定する [URL] テキストボックスで更新された、[スキンの選択] ダイアログボックス](/content/dotcom/jp/devnet/flash/articles/custom_flvcomp/_jcr_content/articlecontentAdobe/image_6.adimg.mw.456.gif/1280829707078.gif "カスタム SWF ファイルのパスを指定する [URL] テキストボックスで更新された、[スキンの選択] ダイアログボックス")
- [URL] テキストボックスにパスを入力し、[OK] をクリックします。このパスは、拡張子 .swf が付いた、スキン SWF のファイル名になります。
これで、コンポーネントのライブプレビューと、書き出されたときにはムービーに、SWF ファイルが表示されます。
ActionScript を使用したカスタムスキンのロード
コンポーネントインスペクタのパラメータをまったく使用せず、ActionScript を使用してスキン SWF ファイルをコンポーネントに割り当てることもできます。実行時に初期化される動的アプリケーションの場合は、この方法が便利です。
ActionScript を使用してスキン SWF ファイルをコンポーネントに割り当てるには :
- Flash Professional 8 で FLA ファイルを作成し、FLVPlayback コンポーネントのインスタンスを [コンポーネント] パネルからステージにドラッグします。
- ファイルを保存し、SWF ファイルを書き出します。
- 使用するスキン SWF ファイルのコピーを作成し、保存したファイルの隣に置きます。
- ビデオコンポーネントが含まれている FLA ファイルで FLVPlayback のインスタンスを選択し、そのインスタンスに名前を付けます (flvPlayback など)。
- タイムラインに新規レイヤーを追加し、actions という名前を付けます。actions レイヤーを選択し、[アクション] パネルを開いてコードを追加します。
- 次のコードを記述します。ただし、"flvPlayback" を使用するインスタンス名に置き換え、ロードするスキン SWF ファイルの正確な名前を指定したパスを記述します。SWF ファイルのパスは、相対 URL または絶対 URL になります。
// Assign a new skin to my FLVPlayback instance using ActionScript
flvPlayback.skin = "myCustomSkin.swf";
- SWF ファイルを書き出して、更新内容を確認します。ActionScript 設定は、実行時まで SWF ファイルに示されません。
スキン SWF の構造
スキン SWF ファイルを最初から作成する場合は、ファイルのレイアウト構造について学ぶ必要があります。Flash のヘルプドキュメントの次のセクションに、ファイル構造の要点がまとめられています。
[コンポーネントリファレンスガイド]-[FLVPlayback コンポーネント]-[FLVPlayback コンポーネントのカスタマイズ]-[FLVPlayback カスタム UI コンポーネントへの個々のスキン適用]
次の段階
ここで説明した 3 つの方法を使用して、FLVPlayback コンポーネントおよびコントロールの外観をさまざまな方法でカスタマイズできます。少し時間を使って、Flash Professional 8 に組み込まれている作成済みのスキンファイルを操作してみてください。FLVPlayback コンポーネントには、機能拡張された ActionScript API も用意されています。この API を使用すると、ビデオプレーヤーの状態やパフォーマンスを詳細に制御できます。詳細については、Flash のヘルプドキュメントを参照してください ([Flash ヘルプ]-[コンポーネントリファレンスガイド]-[FLVPlayback コンポーネント]-[mx.video.FLVPlayback クラス])。
