スキンの新規作成

スキン SWF ファイルを作成する最善の方法は、Flash に付属のスキンファイルをコピーし、それを土台として使用することです。 これらのスキンの FLA ファイルは、"Configuration/FLVPlayback Skins/FLA/ActionScript 3.0/" の Flash アプリケーションフォルダーにあります。 完成したスキン SWF ファイルをスキンの選択ダイアログボックスのオプションとして使用できるようにするには、Configuration\FLVPlayback Skins\ActionScript 3.0 フォルダーにそのファイルを配置します。このフォルダーは、Flash アプリケーションフォルダー、またはユーザーのローカルの Configuration\FLVPlayback Skins\ActionScript 3.0 フォルダーにあります。

スキンの色はスキンの選択とは別個に設定できるので、FLA ファイルを編集して色を変更する必要はありません。 特定の色を持つスキンを作成した場合に、スキンの選択ダイアログボックスで編集できないようにするには、スキンの FLA ファイルの ActionScript コードで this.border_mc.colorMe = false; に設定します。スキンの色の設定方法については、 デザイン済みスキンの選択 を参照してください。

インストールされた Flash スキンの FLA ファイルを見ると、ステージ上の特定のものが不要に思われることもありますが、これらのうち多くのものはガイドレイヤーに配置されています。 Scale-9 を使用したライブプレビューでは、SWF ファイルの実際の表示をすばやく確認できます。

以降の節では、SeekBar、BufferingBar、および VolumeBar の各ムービークリップに対する、より複雑なカスタマイズと変更について説明します。

スキンレイアウトの使用

Flash のスキンの FLA ファイルを開くと、スキンのムービークリップがメインタイムラインにレイアウトされています。これらのクリップと、同じフレームにある ActionScript コードにより、実行時にコントロールがどのようにレイアウトされるかが定義されます。

レイアウトレイヤーの外観は実行時のスキンの外観と似ていますが、このレイヤーのコンテンツは実行時には表示されません。 これは、コントロールを配置する場所を計算するためだけに使用されます。 実行時にはステージ上の他のコントロールが使用されます。

レイアウトレイヤー内には、video_mc という名前の FLVPlayback コンポーネント用のプレースホルダーがあります。 その他のすべてのコントロールは、video_mc を基準にしてレイアウトされます。 Flash FLA ファイルのいずれかを使用して作業を開始し、コントロールのサイズを変更する場合は、これらのプレースホルダークリップを移動するとレイアウトを修正できることがあります。

各プレースホルダークリップには、特定のインスタンス名があります。 プレースホルダークリップの名前は、playpause_mc、play_mc、pause_mc、stop_mc、captionToggle_mc、fullScreenToggle_mc、back_mc、bufferingBar_mc、bufferingBarFill_mc、seekBar_mc、seekBarHandle_mc、seekBarProgress_mc、volumeMute_mc、volumeBar_mc、および volumeBarHandle_mc です。 スキンの色を選択したときに再度色が設定される部分は border_mc といいます。

コントロールに対してどのクリップが使用されるかは重要ではありません。 通常、ボタンには通常状態クリップが使用されます。 他のコントロールに対しては、そのコントロールのクリップが使用されますが、これは便宜上の目的のみです。 重要なのは、プレースホルダーの x（水平）位置、y（垂直）位置、幅および高さです。

標準のコントロール以外にも、いくつでもクリップを追加できます。 これらのクリップで必要なことは、そのライブラリシンボルで、リンケージダイアログボックスの「ActionScript 用に書き出し」チェックボックスがオンになっていることだけです。 レイアウトレイヤーのカスタムクリップは、前述の予約済みインスタンス名以外の任意のインスタンス名を持つことができます。 インスタンス名は、クリップで ActionScript を設定してレイアウトを決定するためにのみ必要です。

border_mc クリップは特別なクリップです。 FlvPlayback.skinAutoHide プロパティを true に設定すると、マウスが border_mc クリップの上にあるときにスキンが表示されます。これは、ビデオプレーヤーの境界の外側に表示されるスキンにとって重要です。 skinAutoHide プロパティについては、 スキンのビヘイビアーの変更 を参照してください。

Flash FLA ファイルでは、クロムと、「早送り」および「戻る」ボタンの周囲の境界に border_mc が使用されます。

border_mc クリップはスキンの一部でもあり、そのアルファ値と色は skinBackgroundAlpha プロパティと skinBackgroundColor プロパティによって変更されます。カスタマイズ可能な色とアルファ値を使用するには、スキンの FLA ファイルの ActionScript に次のものが必要です。 

border_mc.colorMe = true;

ActionScript とスキンレイアウト

次の ActionScript コードは、通常はすべてのコントロールに適用されます。一部のコントロールには、追加のビヘイビアーを定義する特定の ActionScript がありますが、これについては、そのコントロールのセクションで説明します。

最初の ActionScript は、各コンポーネントの各状態のクラス名を示す大きなセクションです。 これらのすべてのクラス名は、SkinOverAll.fla ファイルで確認できます。 例えば、「再生」ボタンおよび「一時停止」ボタンについては、コードは次のようになります。 

this.pauseButtonDisabledState = "fl.video.skin.PauseButtonDisabled"; 
this.pauseButtonDownState = "fl.video.skin.PauseButtonDown"; 
this.pauseButtonNormalState = "fl.video.skin.PauseButtonNormal"; 
this.pauseButtonOverState = "fl.video.skin.PauseButtonOver"; 
this.playButtonDisabledState = "fl.video.skin.PlayButtonDisabled"; 
this.playButtonDownState = "fl.video.skin.PlayButtonDown"; 
this.playButtonNormalState = "fl.video.skin.PlayButtonNormal"; 
this.playButtonOverState = "fl.video.skin.PlayButtonOver";

これらのクラス名は、実際の外部クラスファイルを持ちません。ライブラリのすべてのムービークリップについて、リンケージダイアログボックスで指定されているだけです。

ActionScript 2.0 コンポーネントでは、実行時に実際に使用されるムービークリップがステージ上にありました。 ActionScript 3.0 コンポーネントでも、これらのムービークリップは FLA ファイルに含まれていますが、編集の便宜のためだけに用意されています。 現在では、これらはすべてガイドレイヤーにあり、書き出されません。 ライブラリのすべてのスキンアセットは最初のフレームに書き出されるように設定されており、例えば次のようなコードで動的に作成されます。 

new fl.video.skin.PauseButtonDisabled();

続くセクションの ActionScript コードでは、スキンの最小の幅と高さを定義します。 スキンの選択ダイアログボックスにはこれらの値が表示されます。これらの値は、実行時にスキンが最小サイズ以下に縮小されないようにするために使用されます。 最小サイズを指定しない場合は、undefined のままにしておくか、ゼロ以下にします。 

// minimum width and height of video recommended to use this skin, 
// leave as undefined or <= 0 if there is no minimum 
this.minWidth = 270; 
this.minHeight = 60;

各プレースホルダーには、次のプロパティを適用することができます。

プロパティ

説明

anchorLeft

ブール値。FLVPlayback インスタンスの左側を基準にしてコントロールを配置します。 anchorRight が明示的に true に設定されていない限り、デフォルトは true です。それ以外の場合、デフォルトは false です。

anchorRight

ブール値。FLVPlayback インスタンスの右側を基準にしてコントロールを配置します。 デフォルトは false です。

anchorBottom

ブール値。FLVPlayback インスタンスの下を基準にしてコントロールを配置します。 anchorTop が明示的に true に設定されていない限り、デフォルトは true です。それ以外の場合、デフォルトは false です。

anchorTop

ブール値。FLVPlayback インスタンスの上を基準にしてコントロールを配置します。 デフォルトは false です。

anchorLeft プロパティおよび anchorRight プロパティが true の場合、コントロールは実行時に水平方向に拡大 / 縮小されます。 anchorTop プロパティおよび anchorBottom プロパティが true の場合、コントロールは実行時に垂直方向に拡大 / 縮小されます。

これらのプロパティの効果を表示するには、Flash スキンでの使用方法を確認します。 BufferingBar コントロールおよび SeekBar コントロールのみが拡大 / 縮小するコントロールであり、これらは重ねてレイアウトされます。また、両方のコントロールとも、 anchorLeft プロパティおよび anchorRight プロパティが true に設定されます。BufferingBar および SeekBar の左側にあるすべてのコントロールでは、 anchorLeft が true に設定され、右側にあるすべてのコントロールでは、 anchorRight が true に設定されます。すべてのコントロールで、 anchorBottom が true に設定されます。

レイアウトレイヤーでムービークリップの編集を試みて、コントロールが下ではなく上に位置するようにスキンを設定することができます。 video_mc を基準にしてコントロールを上に移動し、すべてのコントロールについて anchorTop を true にするだけです。

バッファリングバー

バッファリングバーには、bufferingBar_mc および bufferingBarFill_mc の 2 つのムービークリップがあります。 ステージ上におけるこれらのクリップの相対位置は重要です。この相対的な位置関係が維持されるからです。バッファリングバーは 2 つのクリップを別々に使用します。これはコンポーネントによって bufferingBar_mc は拡大 / 縮小されますが、bufferingBarFill_mc は拡大 / 縮小されないためです。

bufferingBar_mc クリップには 9 スライスの拡大 / 縮小が割り当てられているので、拡大 / 縮小しても境界は湾曲しません。bufferingBarFill_mc クリップは非常に幅が広く、常に十分な幅があるので、拡大する必要はありません。 実行時に自動的にマスクされ、伸縮された bufferingBar_mc の上の部分のみが表示されます。 マスクのサイズでは、デフォルトで、bufferingBar_mc および bufferingBarFill_mc の x（水平方向）の位置の差に基づいて、bufferingBar_mc 内の左右の同じマージンが維持されます。ActionScript コードを使用して位置をカスタマイズすることができます。

バッファリングバーを拡大 / 縮小する必要がない場合や、9 スライスの拡大 / 縮小を使用しない場合は、FLV Playback カスタム UI BufferingBar コンポーネントのように設定できます。 詳しくは、 BufferingBar コンポーネント を参照してください。

バッファリングバーには、次の追加のプロパティがあります。

プロパティ

説明

fill_mc:MovieClip

バッファリングバーの塗りのインスタンス名を指定します。 デフォルトは bufferingBarFill_mc です。

シークバーとボリュームバー

シークバーにも、seekBar_mc および seekBarProgess_mc の 2 つのムービークリップがあります。 レイアウトレイヤー上におけるこれらのクリップの相対位置は重要です。この相対的な位置関係が維持されるからです。どちらのクリップも拡大 / 縮小されますが、seekBarProgress_mc は seekBar_mc 内にネストできません。これは seekBar_mc が 9 スライスの拡大 / 縮小を使用するためで、この拡大 / 縮小はネストされたムービークリップで適切に動作しません。

seekBar_mc クリップには 9 スライスの拡大 / 縮小が割り当てられているので、拡大 / 縮小しても境界は湾曲しません。seekBarProgress_mc クリップも拡大 / 縮小されますが、湾曲します。 このクリップに 9 スライスの拡大 / 縮小を使用しない理由は、塗りであり、湾曲しても外観に問題がないためです。

seekBarProgress_mc クリップは fill_mc がなくても機能します。これは、progress_mc クリップが FLV Playback カスタム UI コンポーネントで機能するのと同様です。 つまり、マスクされずに水平方向に拡大 / 縮小されます。 100% での seekBarProgress_mc の正確なサイズは、seekBarProgress_mc クリップの左右のマージンによって定義されます。 このサイズはデフォルトで等しく、seekBar_mc および seekBarProgress_mc の x（水平方向）位置の差に基づきます。次の例のように、シークバームービークリップのサイズは、ActionScript を使用してカスタマイズすることができます。 

this.seekBar_mc.progressLeftMargin = 2; 
this.seekBar_mc.progressRightMargin = 2; 
this.seekBar_mc.progressY = 11; 
this.seekBar_mc.fullnessLeftMargin = 2; 
this.seekBar_mc.fullnessRightMargin = 2; 
this.seekBar_mc.fullnessY = 11;

このコードは、SeekBar ムービークリップのタイムラインか、またはメインタイムラインの他の ActionScript コードのいずれかに配置できます。 レイアウトの変更ではなくコードでカスタマイズした場合、ステージ上に塗りは必要ありません。 ライブラリに含まれていて、正しいクラス名でフレーム 1 の ActionScript に書き出すよう設定されていれば十分です。

FLV Playback カスタム UI SeekBar コンポーネントと同じように、シークバーのロード状況ムービークリップを作成することができます。 シークバーを拡大 / 縮小する必要がない場合や、拡大 / 縮小しても 9 スライスの拡大 / 縮小は使用しない場合は、FLV Playback カスタム UI コンポーネントに使用される任意の方法を使用して progress_mc または fullness_mc を設定することができます。 詳しくは、 再生状況ムービークリップとロード状況ムービークリップ を参照してください。

Flash スキンのボリュームバーは拡大 / 縮小されないので、VolumeBar FLV Playback カスタム UI コンポーネントと同じ方法で作成されます。 詳しくは、 SeekBar コンポーネントおよび VolumeBar コンポーネント を参照してください。例外は、ハンドルの実装が異なることです。

SeekBar ハンドルと VolumeBar ハンドル

SeekBar ハンドルおよび VolumeBar ハンドルは、レイアウトレイヤー上でバーの横に配置されます。 デフォルトでは、ハンドルの左マージン、右マージン、および y 軸の値は、バームービークリップを基準とした相対的な位置で設定されます。左マージンはハンドルの x（水平方向）位置とバーの x（水平方向）位置の差によって設定され、右マージンは左マージンと等しくなります。これらの値は、SeekBar ムービークリップまたは VolumeBar ムービークリップで ActionScript を使用してカスタマイズできます。 次の例は、FLV Playback カスタム UI コンポーネントと共に使用される同じ ActionScript コードです。 

this.seekBar_mc.handleLeftMargin = 2; 
this.seekBar_mc.handleRightMargin = 2; 
this.seekBar_mc.handleY = 11;

このコードは、SeekBar ムービークリップのタイムラインか、またはメインタイムラインの他の ActionScript コードのいずれかに配置できます。 レイアウトの変更ではなくコードでカスタマイズした場合、ステージ上にハンドルは必要ありません。ライブラリに含まれていて、正しいクラス名でフレーム 1 の ActionScript に書き出すよう設定されていれば十分です。

これらのプロパティ以外については、ハンドルは単純なムービークリップであり、FLV Playback カスタム UI コンポーネントと同じ方法で設定されます。 どちらにも、 alpha プロパティが 0 に設定された矩形の背景があります。これらの背景はヒット領域を大きくするためのものであり、必須ではありません。

背景クリップと前景クリップ

ムービークリップ chrome_mc および forwardBackBorder_mc は背景クリップとして実装されます。

ステージ上の ForwardBackBorder、ForwardBorder および BackBorder の各ムービークリップ、およびプレースホルダーの「早送り」ボタンと「戻る」ボタンのうち、ガイドレイヤー上にないものは ForwardBackBorder だけです。これは、実際に「早送り」ボタンおよび「戻る」ボタンを使用するスキン上にあります。

これらのクリップで必要なのは、ライブラリでフレーム 1 の ActionScript に書き出されることだけです。