テンプレートのカスタマイズ

次にテンプレートのカスタマイズについて解説します。このビデオショーケスでは、たくさんのビデオチャプタを表示することができますが、その背景グラフィックは1度だけ読み込んであとは使い回しています。そのため、みなさん自由に背景をデザインすることができます。たとえば、オリジナルのロゴやグラフィック、コンテンツ、テキストなどを追加できます。さらに、キャンバスのサイズを変えることもできますし、ボタンの数や位置を変えることもできます。みなさんが思うようにデザインしてみてください。

それでは、テンプレートのルック＆フィールやレイアウトのカスタマイズ方法を解説します。

＜背景グラフィックとテキストの変更＞

一番取りかかりやすいのは背景グラフィックでしょう。すぐにFlashで作業に取りかかるのではなく、まず、どのようなデザインにしたいのか、そのアイデアを固めてからFlashで編集作業をするといいでしょう。グラフィックツールを使って、どのようなインターフェイスデザインにするかを考えてみてください。

デザインアイデアが固まったら、以下の手順で背景グラフィックを編集します。

1. サンプルデータの中にあるVideoShowcase.flaをFlash CS3 Professionalで開きます。
2. Backgroundレイヤーを選びます。他のレイヤーはすべてロックしておきます。
3. 背景グラフィックを編集します。
4. 背景で使っている写真を変える場合は、背景写真を選択して削除し、新しいグラフィックをそこに描くか、メニューから「ファイル／読み込み」を選んで、別な画像を読み込んでください。

必要ならば、新しいレイヤーやグラフィクを追加してください。もし、フレーム数を増やす場合は、コントローラー部分などの他のレイヤーもそれに合わせてフレーム数を増やすことを忘れないでください。

＜FLVPlaybackコントロールの変更＞

このビデオショーケースでは、FLVを再生するのにFLVPlaybackコンポーネントを使用しています。コンポーネントを使えば、 ActionScriptを使った開発が非常に分かりやすくなり、しかもテンプレートを拡張する上での可能性が広がります。FLVPlaybackコンポーネントは、FLVを表示するためのプライマリコントローラで、プログレッシブ形式やストリーミング形成でFLVを表示できます。

以下の手順でビデオコントローラを編集します。

1. サンプルデータの中にあるVideoShowcase.flaをFlash CS3 Professionalで開きます。
2. FLVPlaybackレイヤーを選びます。他のレイヤーはすべてロックしておきます。
3. ビデオコントローラのアレンジを行うには、まずは現在並んでいるコントローラの中で不要なコントローラを削除します。

4. コンポーネントパネルを開き、Videoフォルダの中から、使用したいビデオコントローラ関連コンポーネントをステージにドラッグします。ビデオコントローラ関連コンポーネントのインスタンスを好きなところに配置したら、プロパティインスペクタを使ってインスタンスに名前を付けます。

   

   図3： コンポーネントパネルにあるビデオコントローラ関連のコンポーネント

5. Actions レイヤーを選んでアクションパネルを開き、FLVPlaybackインスタンスにビデオコントローラインスタンスを登録していきます。 FLVPlaybackコンポーネントには、各ビデオコントローラ関連コンポーネントに対応するプロパティが用意されています。これらのプロパティにビデオコントローラ関連コンポーネントのインスタンス名を割り当てることで、そのビデオコントローラを使ってFLVPlaybackで表示されるFLVをコントロールできるようになるのです。たとえば、BufferingBarコンポーネントのインスタンス名に「myBuffer」と付けた場合、 Actionsレイヤーに以下のActionScriptを書きます。そうすることで、BufferingBarコンポーネントがFLVPlayback インスタンスに登録されます。

   flvDisplay.bufferBar = myBuffer;

好きなビデオコントローラ関連コンポーネントを追加してください。なお、いくつかのコンポーネントは、今回のようなマルチ機能テンプレートで使用するとコンフリクトする場合があるので、動作をチェックしながら最適な組み合わせを探してください。

FLVPlaybackコンポーネントの詳しい情報は、 Skinning the ActionScript 3.0 FLVPlayback componentを見てください。

＜セクションやチャプタボタンの変更＞

このビデオショーケースには、2種類のナビゲーションボタンがあります。セクションボタンとチャプタボタンです。セクションボタンは、表示する FLVの種類を切り替えるボタンです。セクションボタンをクリックすると、新しいFLVとそのチャプタ情報がスクリーンに読み込まれます。チャプタボタンは、表示しているFLVに埋め込んだキューポイントのビジュアルメタファです。チャプタボタンをクリックすると、キューポイントを埋め込んだ時間に映像がジャンプします。

このテンプレートのコンテンツは動的コンテンツなので、ボタンの見た目を変更する際は、1 つのインスタンスを編集するだけですべてのインスタンスが変更されます。ボタンの数は、インスタンスを追加・削除して自由に調整してください。また、好きなようにレイアウトを変更しても構いません。

以下の手順でボタンのグラフィック要素を編集します。

1. サンプルデータの中にあるVideoShowcase.flaをFlash CS3 Professionalで開きます。
2. ライブラリパネルのButtonsフォルダ内にあるSection Buttonシンボルをダブルクリックして、編集モードにします（図4）。
3. テキストフィールドや背景やボーダーを自由に編集してください。もしテキストフィールドを編集した場合は、インスタンス名が「label_txt」となっていることを確認してください。

4. 同じようにChapter Buttonシンボルも編集します。

   

   図4： Section Buttonシンボルをダブルクリックして、編集モードにします

   

   図5： Chapter Buttonシンボルをダブルクリックして、編集モードにします

以下の手順でボタンの数やレイアウトを編集します。

1. メインのタイムラインに戻ります。
2. 横長のセクションボタンのインスタンスが画面の左上に並んでいます。好きなように追加・削除したり、配置を変えてください。
3. セクションボタンの各インスタンスには、上から順に「section_[n]」というルールでインスタンス名を付けます。たとえば、3つのセクションボタンがあるとしたら、インスタンス名は上から順にsection_1、section_2、section_3となります。
4. チャプタボタンは画面の左下に並んでいます。好きなように追加・削除したり、配置を変えてください。
5. 各ボタンのインスタンスには、「chapter_[n]」というルールでインスタンス名を付けます。たとえば、3つのチャプタボタンがある場合、インスタンス名はchapter_1、chapter_2、chapter_3となります。

＜キャプションウィンドウの変更＞

このビデオショーケースには、チャプタに関連したキャプションテキストを表示するキャプションウィンドウがあります。このキャプションウィンドウは、キャプションボタンをクリックすると表示されます。

以下の手順でキャプションウィンドウを編集します。

1. サンプルデータの中にあるVideoShowcase.flaをFlash CS3 Professionalで開きます。
2. ライブラリパネルのCaptionフォルダ内にあるCaption Windowシンボルをダブルクリックして、編集モードにします。
3. Maskレイヤーを非表示にして、Sliding panelレイヤーのロックを解除し、テキストフィールドを編集します（図6）。テキストフィールドを編集した場合、インスタンス名が「title_txt」と「caption_txt」になっていることを確認してください。
4. タイムラインを編集しても構いませんが、ActionsレイヤーのActionScriptやフレームラベルを変更しないように注意してください。

図6： Maskレイヤーを非表示にして、Sliding panelレイヤーのロックを解除し、テキストフィールドを編集します

ページ 3 / 5

前のページ

次のページ