FLV Playback カスタム UI コンポーネントへの個々のスキンの適用

FLV Playback カスタム UI コンポーネントを使用すると、FLA ファイル内で FLVPlayback コントロールの外観をカスタマイズし、Web ページをプレビューしたときに結果を表示することができます。 ただし、これらのコンポーネントは、拡大 / 縮小するように設計されていません。 ムービークリップとそのコンテンツは特定のサイズとなるように編集する必要があります。 このため、通常は FLVPlayback コンポーネントを目的のサイズでステージに配置し、 scaleMode exactFit に設定することをお勧めします。

最初に、コンポーネントパネルから FLV Playback カスタム UI コンポーネントをドラッグし、ステージ上の目的の場所に配置して、インスタンス名を付けます。

これらのコンポーネントは ActionScript なしでも機能します。 これらを FLVPlayback コンポーネントと同じタイムラインおよびフレームに配置し、FLVPlayback コンポーネントにスキンが設定されていない場合、FLVPlayback コンポーネントはこれらのコンポーネントに自動的に接続します。 ステージ上に複数の FLVPlayback コンポーネントがある場合、またはカスタムコントロールと FLVPlayback インスタンスが同じタイムラインにない場合には、ActionScript が必要です。

ステージにコンポーネントを配置したら、他のシンボルと同じように編集します。 コンポーネントを開くと、各コンポーネントの設定は他のコンポーネントと少し異なることがわかります。

ボタンコンポーネント

ボタンコンポーネントは同じような構造を持っています。 ボタンには、BackButton、ForwardButton、MuteButton、PauseButton、PlayButton、PlayPauseButton、および StopButton があります。 ほとんどのボタンには、placeholder_mc というインスタンス名を持つフレーム 1 に 1 つのムービークリップがあります。 通常、これはボタンの通常状態のインスタンスですが、必ずしもそうであるとは限りません。 フレーム 2 では、各表示状態 (通常、オーバー、ダウン、無効) に対して、ステージ上に 4 つのムービークリップがあります。 実行時には、コンポーネントが実際にフレーム 2 に移動することはありません。ムービークリップがここに配置されるのは、編集を簡単にし、シンボルプロパティダイアログボックスの「最初のフレームに書き出し」チェックボックスをオンにすることなく SWF ファイルにロードするためです。 ただし、「最初のフレームに書き出し」チェックボックスはオンにする必要があります。

ボタンにスキンを適用するには、各ムービークリップを編集します。 そのサイズと外観を変更することができます。

通常、一部の ActionScript はフレーム 1 に表示されます。このスクリプトを編集する必要はありません。 フレーム 1 で再生ヘッドが停止され、どのムービークリップをどの状態で使用するのかが指定されます。

PlayPauseButton ボタン、MuteButton ボタン、FullScreenButton ボタン、および CaptionButton ボタン

PlayPauseButton ボタン、MuteButton ボタン、FullScreenButton ボタン、および CaptionButton ボタンは、他のボタンとは設定が異なり、これらのボタンには、2 つのレイヤーがありスクリプトのない 1 つのフレームのみが含まれます。 このフレームには 2 つのボタンがあり、上下に重ねて配置されています。PlayPauseButton の場合は「再生」ボタンと「一時停止」ボタン、MuteButton の場合は「ミュートオン]」ボタンと「ミュートオフ」ボタン、FullScreenButton の場合は「フルスクリーンオン」ボタンと「フルスクリーンオフ」ボタン、CaptionButton の場合は「キャプションオン」ボタンと「キャプションオフ」ボタンです。これらのボタンにスキンを適用するには、 FLV Playback カスタム UI コンポーネントへの個々のスキンの適用 の説明に従って、これら 2 つの内部ボタンそれぞれにスキンを適用します。それ以外の操作は不要です。

CaptionButton は FLVPlaybackCaptioning コンポーネント用であり、このコンポーネントに接続する必要があります。FLVPlayback コンポーネントに接続しないでください。

BackButton ボタンおよび ForwardButton ボタン

BackButton ボタンおよび ForwardButton ボタンも、他のボタンとは設定が異なります。 フレーム 2 には、1 つまたは両方のボタンの周囲のフレームとして使用できる追加のムービークリップがあります。 このムービークリップは必須ではなく、特別な機能はありません。便宜上、用意されています。 このムービークリップを使用するには、ライブラリパネルからステージにドラッグし、目的の場所に配置します。 このムービークリップが不要な場合は、使用しないか、ライブラリパネルから削除します。

用意されているほとんどのボタンは、共通のムービークリップセットに基づいているので、すべてのボタンの外観を一度に変更することができます。 この機能を使用するか、共通クリップを置き換えて、すべてのボタンの外観を変更できます。

BufferingBar コンポーネント

バッファリングバーコンポーネントは単純です。このコンポーネントは、コンポーネントがバッファリング状態に移行したときに表示されるアニメーションで構成されており、設定するのに特別な ActionScript は必要ありません。 デフォルトは、矩形のマスクを持ち左から右に移動するストライプのバーで、"理髪店の看板柱" のようなエフェクトですが、この設定について特に説明の必要なことはありません。

スキン SWF ファイルのバッファリングバーでは、実行時に拡大 / 縮小する必要があるので 9 スライスの拡大 / 縮小が使用されますが、BufferingBar FLV カスタム UI コンポーネントにはネストされたムービークリップが含まれるので、9 スライスの拡大 / 縮小を使用することはできません。BufferingBar の幅や高さを大きくする場合は、拡大するのではなくコンテンツを変更してください。

SeekBar コンポーネントおよび VolumeBar コンポーネント

SeekBar コンポーネントと VolumeBar コンポーネントは似ていますが、機能は異なります。 各コンポーネントはハンドルを備え、同じハンドル追跡メカニズムを使用し、内部にネストされたクリップの再生状況とロード状況を追跡する機能をサポートしています。

FLVPlayback コンポーネントの ActionScript コードでは、SeekBar コンポーネントまたは VolumeBar コンポーネントの基準点(原点またはゼロ点)はコンテンツの左上隅にあると見なされる場合が多いので、この規則を守ることが重要です。守らない場合、ハンドル、再生状況ムービークリップ、およびロード状況ムービークリップに関して問題が発生する可能性があります。

スキン SWF ファイルのシークバーでは、実行時に拡大 / 縮小する必要があるので 9 スライスの拡大 / 縮小が使用されますが、SeekBar FLV カスタム UI コンポーネントにはネストされたムービークリップが含まれるので、9 スライスの拡大 / 縮小を使用することはできません。SeekBar の幅や高さを大きくする場合は、拡大するのではなくコンテンツを変更してください。

ハンドル

ハンドルムービークリップのインスタンスはフレーム 2 にあります。BackButton コンポーネントおよび ForwardButton コンポーネントと同様に、コンポーネントが実際にフレーム 2 に移動することはありません。ムービークリップがここに配置されるのは、編集を簡単にし、シンボルプロパティダイアログボックスの「最初のフレームに書き出し」チェックボックスをオンにすることなく SWF ファイルにロードするためです。 ただし、「最初のフレームに書き出し」チェックボックスはオンにする必要があります。

ハンドルムービークリップの背景に、アルファが 0 に設定された矩形がある場合があります。この矩形によって、ハンドルのヒット領域が大きくなるので、ボタンのヒット状態のように、その外観を変えずにハンドルがつかみやすくなります。ハンドルは実行時に動的に作成されるので、ボタンではなくムービークリップである必要があります。 アルファが 0 に設定されたこの矩形を必要とする他の理由はなく、通常、ハンドルの内部は任意のイメージで置き換えることができます。 ただし、ハンドルムービークリップの中央で基準点を水平方向の中央に維持することをお勧めします。

次の ActionScript コードは SeekBar コンポーネントのフレーム 1 にあり、ハンドルを管理します。

stop(); 
handleLinkageID = "SeekBarHandle"; 
handleLeftMargin = 2; 
handleRightMargin = 2; 
handleY = 11;

stop() 関数の呼び出しは、フレーム 2 のコンテンツのために必要です。

2 行目は、ハンドルとして使用するシンボルを指定します。フレーム 2 のハンドルムービークリップインスタンスのみを編集する場合、この指定を変更する必要はありません。FLVPlayback コンポーネントは実行時に、指定したムービークリップのインスタンスを Bar コンポーネントインスタンスの子としてステージ上に作成します。これにより、同じ親ムービークリップを持つことになります。 そのため、バーがルートレベルにある場合は、ハンドルもルートレベルにある必要があります。

変数 handleLeftMargin はハンドルの元の場所(0%)を指定し、変数 handleRightMargin は最後の場所(100%)を指定します。数値はバーコントロールの左右の端からのオフセットを示し、正の数値はバー内部に限度をマークし、負の数値はバー外部に限度をマークします。 これらのオフセットは、基準点に基づいてハンドルが移動できる場所を示します。 ハンドルの中央に基準点を配置した場合、ハンドルの左右の端はマージンを越えます。シークバームービークリップが正常に機能するには、そのコンテンツの左上隅に基準点がある必要があります。

変数 handleY は、バーインスタンスを基準にしたハンドルの y 位置を指定します。これは、各ムービークリップの基準点に基づいています。 サンプルハンドルの基準点は、表示される部分に相対的に配置されるように三角形の頂点にあります。非表示のヒット状態矩形は無視されます。 また、バームービークリップが正常に機能するには、そのコンテンツの左上隅に基準点を維持する必要があります。

そのため、これらの限度を設定すると、バーコントロールが (100, 100) に設定され、幅が 100 ピクセルである場合、ハンドルは水平方向では 102 ~ 198 の範囲となり、垂直方向では 111 の位置となります。 handleLeftMargin および handleRightMargin を -2 に変更し、 handleY を -11 に変更した場合、ハンドルの水平方向の範囲は 98 ~ 202 となり、垂直方向の位置は 89 となります。

再生状況ムービークリップとロード状況ムービークリップ

SeekBar コンポーネントには再生状況ムービークリップがあり、VolumeBar コンポーネントにはロード状況ムービークリップがあります。ただし、実際の個々の SeekBar コンポーネントや VolumeBar コンポーネントには、いずれか一方または両方のムービークリップがある場合も、どちらもない場合もあります。これらのムービークリップは構造的には同じであり、同じように動作しますが、異なる値を追跡します。 再生状況ムービークリップは FLV ファイルがダウンロードされると塗りつぶされ (FMS からのストリーミングの場合は常に塗りつぶされるので、HTTP ダウンロードのみに有効です)、ロード状況ムービークリップはハンドルが左から右に移動すると塗りつぶされます。

FLVPlayback コンポーネントは特定のインスタンス名でこれらのムービークリップインスタンスを検索するので、再生状況ムービークリップインスタンスは、その親としてバームービークリップを持ち、インスタンス名が progress_mc である必要があります。 ロード状況ムービークリップインスタンスのインスタンス名は fullness_mc である必要があります。

再生状況ムービークリップおよびロード状況ムービークリップは、内側にネストした fill_mc ムービークリップインスタンスを使用して設定することも、使用しないで設定することもできます。 VolumeBar fullness_mc ムービークリップは、fill_mc ムービークリップを使用する方法を示し、SeekBar progress_mc ムービークリップは fill_mc ムービークリップを使用しない方法を示します。

内側にネストした fill_mc ムービークリップを使用する方法は、拡大 / 縮小すると外観が湾曲してしまう塗りを使用する場合に便利です。

VolumeBar fullness_mc ムービークリップでは、ネストされた fill_mc ムービークリップインスタンスがマスクされます。 ムービークリップの作成時にマスクするか、または実行時に動的にマスクが作成されます。 ムービークリップを使用してマスクする場合は、インスタンスに mask_mc という名前を付け、パーセンテージが 100%のときに fill_mc が表示されるように設定します。fill_mc をマスクしない場合、動的に作成されるマスクは矩形になり、fill_mc (100%) と同じサイズとなります。

fill_mc ムービークリップは、fill_mc.slideReveal が true または false のいずれであるかに応じて、2 つの方法のいずれかで表示されます。

fill_mc.slideReveal が true の場合、fill_mc は左から右に移動し、マスクを通じて表示されます。0%では左端に配置されるので、マスクを通じて何も表示されません。 パーセンテージが増えると 100%になるまで右に移動し、ステージ上で作成された場所に戻ります。

fill_mc.slideReveal が false または undefined(デフォルトのビヘイビアー)の場合、左から右に移動すると共にマスクのサイズが変わり、fill_mc のより多くの部分が表示されます。0%の場合、マスクは水平方向に 05 まで拡大され、パーセントが増えるにつれて、100%で fill_mc がすべて表示されるまで、 scaleX は増大します。mask_mc が作成時に拡大 / 縮小されている可能性があるので、これは scaleX = 100 であるとは限りません。

fill_mc を使用しない方法は fill_mc を使用する方法よりも簡単ですが、塗りは水平方向に湾曲します。 この湾曲を望まない場合は、fill_mc を使用する必要があります。 SeekBar progress_mc で、この方法を示します。

再生状況ムービークリップまたはロード状況ムービークリップは、パーセンテージに基づいて水平方向に拡大 / 縮小されます。 0% では、インスタンスの scaleX は 0 に設定され、非表示になります。パーセンテージが大きくなると scaleX は調整され、100%で、クリップのサイズは作成時のステージ上でのサイズと同じになります。クリップインスタンスが作成時に拡大 / 縮小されている可能性があるので、これは scaleX = 100 であるとは限りません。

FLV Playback カスタム UI コンポーネントの接続

カスタム UI コンポーネントを FLVPlayback コンポーネントと同じタイムラインおよびフレームに配置し、 skin プロパティを設定していない場合、FLVPlayback はそれらのコンポーネントに自動的に接続され、ActionScript は必要ありません。

ステージ上に複数の FLVPlayback コンポーネントがある場合、またはカスタムコントロールと FLVPlayback が同じタイムラインにない場合には、ActionScript コードを記述して、カスタム UI コンポーネントを FLVPlayback コンポーネントのインスタンスに接続する必要があります。 最初に、FLVPlayback インスタンスに名前を割り当て、次に ActionScript を使用して FLV Playback カスタム UI コンポーネントインスタンスを対応する FLVPlayback プロパティに割り当てる必要があります。 次の例では、FLVPlayback インスタンスは my_FLVPlybk であり、ピリオド (.) の後に FLVPlayback プロパティ名が続きます。また、FLV Playback カスタム UI コントロールインスタンスは等号 (=) の右側になります。

//FLVPlayback instance = my_FLVPlybk 
my_FLVPlybk.playButton = playbtn; // set playButton prop. to playbtn, etc. 
my_FLVPlybk.pauseButton = pausebtn; 
my_FLVPlybk.playPauseButton = playpausebtn; 
my_FLVPlybk.stopButton = stopbtn;  
my_FLVPlybk.muteButton = mutebtn; 
my_FLVPlybk.backButton = backbtn; 
my_FLVPlybk.forwardButton = forbtn; 
my_FLVPlybk.volumeBar = volbar; 
my_FLVPlybk.seekBar = seekbar; 
my_FLVPlybk.bufferingBar = bufbar; 

次の手順では、StopButton、PlayPauseButton、MuteButton、および SeekBar の各コントロールを作成します。

  1. FLVPlayback コンポーネントをステージにドラッグし、インスタンス名を my_FLVPlybk にします。

  2. コンポーネントインスペクターで source パラメーターを http://www.helpexamples.com/flash/video/cuepoints.flv に設定します。

  3. Skin パラメーターを「None」に設定します。

  4. StopButton、PlayPauseButton、および MuteButton をステージにドラッグし、FLVPlayback インスタンスの上に配置して、左側に垂直に重ねます。 プロパティインスペクターで、各ボタンにインスタンス名を付けます( my_stopbttn my_plypausbttn my_mutebttn など)。

  5. ライブラリパネルで "FLVPlayback Skins" フォルダーを開き、その下位にある "SquareButton" フォルダーを開きます。

  6. SquareBgDown ムービークリップを選択し、ダブルクリックしてステージ上で開きます。

  7. 右クリック (Windows)、または Control キーを押しながらクリック (Macintosh) し、ショートカットメニューから「すべて選択」を選択してシンボルを削除します。

  8. 楕円ツールを選択し、同じ場所に楕円を描画して、塗りを青( #0033FF )に設定します。

  9. プロパティインスペクターで、「W」(幅)を 40 に設定し、「H」(高さ)を 20 に設定します。「X」(x 座標)を 0.0 に設定し、「Y」(y 座標)を 0.0 に設定します。

  10. SquareBgNormal に対して手順 6 ~ 8 を繰り返します。ただし、塗りは黄色( #FFFF00 )に設定します。

  11. SquareBgOver に対して手順 6 ~ 8 を繰り返します。ただし、塗りは緑( #006600 )に設定します。

  12. ボタン内のさまざまなシンボルアイコン (PauseIcon、PlayIcon、MuteOnIcon、MuteOffIcon、および StopIcon) のムービークリップを編集します。 これらのムービークリップは、ライブラリパネルで FLV Playback Skins\<ラベル>Button\Assets の下位にあります。ここで、<ラベル> は再生、一時停止などのボタン名を表します。それぞれについて次の手順を実行します。

    1. 「すべて選択」オプションを選択します。

    2. 色を赤( #FF0000 )に変更します。

    3. 300% に拡大します。

    4. コンテンツの X 位置を 7.0 に変更し、各ボタンの状態のアイコンの水平方向の配置を変更します。

      注意: このように場所を変更することで、各ボタンの状態を開き、アイコンのムービークリップインスタンスを移動せずに済みます。
  13. タイムラインの上にある青の戻る矢印をクリックして、シーン 1、フレーム 1 に戻ります。

  14. SeekBar コンポーネントをステージにドラッグし、FLVPlayback インスタンスの右下隅に配置します。

  15. ライブラリパネルで SeekBar をダブルクリックしてステージ上で開きます。

  16. 400%に拡大します。

  17. アウトラインを選択し、色を赤( #FF0000 )に設定します。

  18. FLVPlayback Skins\Seek Bar フォルダーで SeekBarProgress をダブルクリックして、色を黄色( #FFFF00 )に設定します。

  19. FLVPlayback Skins\Seek Bar フォルダーで SeekBarHandle をダブルクリックして、色を赤( #FF0000 )に設定します。

  20. タイムラインの上にある青の戻る矢印をクリックして、シーン 1、フレーム 1 に戻ります。

  21. ステージ上の SeekBar インスタンスを選択し、インスタンス名を my_seekbar にします。

  22. 次の例に示すように、タイムラインのフレーム 1 のアクションパネルで、ビデオクラスの 読み込み ステートメントを追加し、対応する FLVPlayback プロパティにボタン名とシークバー名を割り当てます。

    import fl.video.*; 
    my_FLVPlybk.stopButton = my_stopbttn; 
    my_FLVPlybk.playPauseButton = my_plypausbttn; 
    my_FLVPlybk.muteButton = my_mutebttn; 
    my_FLVPlybk.seekBar = my_seekbar;
  23. Ctrl + Enter を押してムービーをテストします。