Flash Videoテンプレート：マルチビデオショーケース

この記事で紹介するのは、複数のビデオを表示できるビデオショーケースのテンプレートです。このビデオショーケースにはビジュアルナビゲーションやビデオチャプタのキャプション機能が付いています。どのような用途にも使えますが、プライベートなビデオコレクションを公開したいという人に特におすすめです。しかも、このテンプレートは簡単にカスタマイズができるようになっています。

この記事では、ビデオショーケースの概要と、そのカスタマイズ方法について解説します。

ビデオショーケーステンプレートのカスタマイズ方法の解説に入る前に、記事を理解しやすくするために、はじめにこのテンプレートの概要を説明しておきましょう。もし、この手のテンプレートに馴染みのあるという人は、次のカスタマイズ解説ページへスキップしても構いません。

まずは、この記事で登場する用語の確認です。

• FLV: Flash Videoフォーマットの略語。
• FLVPlayback コンポーネント: FLVファイルを表示するためのFlash CS3 Professionalのコンポーネント。
• キューポイント: FLV内に埋め込むマーカー。SWFファイルと同期する際に使用します。
• プログレッシブ配信: ビデオ配信の形式。プログレッシブ配信の場合、WebブラウザのキャッシュにFLVファイルをダウンロードしてから再生されます。
• ストリーミング配信: ビデオ配信の形式。Flash Media Serverが動作しているサーバからFLVファイルのデータを送信し、ダウンロードとともにすぐに再生されます。
• セクション: ビデオの種類のこと。このサンプルには4つのセクションがあり、各セクションごとにビデオクリップ、キャプション、ナビゲーションボタンを用意します。
• チャプタ: 各セクションには、チャプタとしてキューポイントが埋め込まれています。

Tip: このビデオショーケースの目的上、プログレッシブ配信の場合、ナビゲーションキューポイントはエンコーディング時に埋め込まなければなりません。そうすることで、チャプタボタンがクリックされた時、正確なナビゲーションが行えるようになります。

＜ビデオショーケーステンプレートの仕組み＞

このビデオショーケースでは、複数のビデオを表示するためにテンプレート手法を採用しています。異なるセクションのビデオを表示することができますが、たった1つのテンプレートを作るだけでいいのです。ビデオ、画像、テキストのデータをSWFファイルとは別に外部ファイルとして用意し、1つのコンテンツレイアウトに差し替え表示しています（図1）。

これらの外部ファイルは、SWFファイルと同じディレクトリに置いておきます。SWFファイルがWebブラウザで実行されると、ビデオショーケースの設定を定義したXMLファイルを読み込み、その内容に従ってテキスト、画像、ビデオファイルを読み込みます。

このように外部ファイルを使ったアプローチだと、Flashファイルを修正することなく、コンテンツの変更を行うことができます。つまり、Flashを使ったことがない人でもFlashサイトの更新作業を行うことができるのです。もう1つのメリットは、SWFファイルが読み込まれる前に、XMLファイルを差し替えることができることです。たとえば、違う言語のテキストコンテンツを用意して、アクセスしてきたユーザーの地域によって表示言語を変えたり、異なるコンテンツセットを用意して、ターゲットユーザーごとにコンテンツ内容を変えるということができます。

全体的なカスタマイズフローは以下の通りです。

1. セクション数と各セクションのチャプタ（キューポイント）数を決める。
2. アプリケーションのルック＆フィールを作り、ボタンやコントローラーをレイアウトする。
3. ビデオのエンコードを行い、チャプタボタンで使用するサムネイル画像を作成する。
4. XMLファイルを自分のコンテンツに合わせて変更する。

＜FLAファイルの中身＞

FLAファイルの中身は至ってシンプルです。このテンプレートでは、各コンテンツは外部ファイルとして用意しているため、SWFファイル自体のファイルサイズはかなり小さくなっています。見た目やレイアウトを好みのスタイルに変更するには、マインタイムラインのフレーム1に配置しているアセットを編集します（図2）。

＜XMLファイルの中身＞

XMLファイルは、「.xml」拡張子を付けたテキストファイルです。通常、XMLファイルの中身は、プログラムやレイアウトのロジックではなく、単にデータの関係性を示す内容が記述されています。その記述内容をもとに、Webアプリケーションはサーバとローカルコンピュータの間で、テキストや情報を行き来させます。

XML言語では、ユーザーが定義したペアのタグを使います。ちょうどHTMLタグのような感じです。タグ同士の関係性や入れ子記述方法によって、データの構造を示しています。この記事のビデオショーケースでもXMLファイルを使用しています。まずは、以下の例をもとに、ビデオセクションの書き方を覚えてください。

タグは括弧（<>）で囲まれた部分で、開始タグと終了タグのペアとなっています。終了タグと開始タグは同じですが、終了タグには頭にスラッシュ（/）が入ります。このペアタグとその間に囲まれている記述を合わせて「ノード」といいます。

XML ファイルには、必ず「ルートノード」があり、ドキュメント内の他のすべてのノードを含むノードです。上記の例では、がルートノードです。ノードの入れ子構造は、データ間の関係性を示しています。たとえば、上記の例の場合、ビデオセクションのリストが記述されています。2 つのセクションがあり、各セクションはタイトルとFLVファイルへのパスを含んでいます。

Tip: XMLファイルの記述スタイルを覚えるための簡単な方法は、サンプルを元に編集していくことです。

＜カスタマイズを始める前に＞

当たり前のことかもしれませんが、このビデオショーケースの概要を把握したら、すぐにファイルを開いて作業してみるのではなく、まずはカスタマイズの内容をプランニングしましょう。セクションの数は？　各セクションのチャプタ数は？　チャプタボタンのサムネイルはどうやって作る？　どのような見た目にする？……。

カスタマイズのアイデア出しに少し時間をかけてもいいでしょう。アイデアが固まっている方が、カスタマイズ作業もスムーズに行えます。

次にテンプレートのカスタマイズについて解説します。このビデオショーケスでは、たくさんのビデオチャプタを表示することができますが、その背景グラフィックは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フォルダの中から、使用したいビデオコントローラ関連コンポーネントをステージにドラッグします。ビデオコントローラ関連コンポーネントのインスタンスを好きなところに配置したら、プロパティインスペクタを使ってインスタンスに名前を付けます。

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

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

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シンボルも編集します。

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

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やフレームラベルを変更しないように注意してください。

テンプレートをカスタマイズしたところで、ショーケースで表示するFLVや画像の作成に取りかかりましょう。作業はとてもシンプルですが、FLVエンコーディングの経験が多少なりあった方がいい結果に繋がりやすいでしょう。FLVを作成するのが初めてだという人は、「Flash video learning guide」を参考にしてください。

それでは、このビデオショーケースで使用するFLVや画像の作成方法について解説します。

＜FLVの作成とキューポイントの埋め込み＞s

ソースとなるビデオを編集した経験があれば、そのソースファイルをFLV形式にエンコードする作業はとても簡単です。作業自体は豊富な経験が必要というわけではありませんが、適切なエンコード設定を見つけ出すのは簡単ではありません。通常、デフォルトの設定条件でもそれなりの結果が得られますが、FLVエンコードのノウハウを知る知らないでは、ビデオのパフォーマンスの違いは明らかです。

以下の手順でFlash CS3 Video Encoderを使って、FLVにキューポイントを埋め込みます。

1. Flash CS3 Video Encoderは、Flash CS3 Professionalと一緒にインストールされます。Flash CS3 Video Encoderを起動させてください。
2. 「追加」ボタンをクリックして、エンコードするビデオファイルをリストに追加します。
3. リスト内のビデオファイルを選んで、「設定」ボタンをクリックします。「Flash Videoエンコード設定」ダイアログが表示されるので、キューポイントタブをクリックしてナビゲーションキューポイントを追加します（図7）。
4. 時間スライダーをドラッグしてキューポイントを埋め込みたい位置まで移動し、「+」ボタンをクリックしてキューポイント追加します。キューポイントの名前を入力します。
5. 必要なチャプタ数だけ、4の作業を繰り返します。なお、埋め込んだキューポイントの名前は後で必要となるので書き留めておいてください。
6. 他のタブの設定内容も確かめて、「OK」ボタンをクリックしてダイアログを閉じます。
7. 「キューの開始」ボタンをクリックして、エンコードを開始します。

Tip: プログレッシブ形式の場合、再生時にキューポイントを使ったナビゲーションを正確に行うには、エンコード時にキューポイントを埋め込んでおく必要があります。Flash Media Serverを使ったストリーミング形式では、その必要はありません。

＜チャプタボタンのサムネイル画像の作成＞

次は、チャプタボタンのサムネイル画像の作成方法です。ビデオファイルでキューポイントを埋め込んだ時点のスチールフレームをキャプチャしてもいいでしょうし、テキストやグラフィックを交えた画像を作成してもいいでしょう。

以下の手順でチャプタボタンのサムネイル画像を作成します。

1. 手っ取り早くサムネイル画像を作成する方法は、Flash CS3 Video Encoderでキューポイントの埋め込み作業をしている際に、スクリーンショットを撮ることです。
2. 先ほどの述べた「キューポイント埋め込み」手順解説に沿って、キューポイントの作業画面を表示します。
3. キューポイントを埋め込んだ時点の映像を表示して、スクリーンショットのキャプチャを撮ります。
4. スクリーンショット画像を保存して、グラフィックツールで開きます。
5. 画像サイズを56×47ピクセルに変更します。これがチャプタボタンのデフォルトサイズですが、チャプタボタンをカスタマイズする際は好きなサイズの画像を使用してください。
6. メニューから「ファイル／保存」を選んで、サムネイル画像を保存します。元画像を使う場合もあるので、別名保存にしておくといいでしょう。

ノート： サムネイル用の画像を用意する際に、ビデオ編集ツールを使った方がやりやすいという人もいるでしょう。自分にあった方法で作成してください。また、サムネイル画像は静止画である必要はありません。アニメーション画像も使うことができます。

＜必要なファイルを用意する＞

FLVやサムネイル画像の準備ができたところで、これらをflaファイルやXMLファイル（Settings.xml）と一緒にまとめます。サイトに必要なファイルを整理しておくと、サイトの編集やメンテナンスが楽になります。

以下の手順で、ビデオショーケースのファイル群をまとめます。

1. 「img」フォルダを作り、その中にすべてのFLVファイルを置きます。
2. 「img 」フォルダを作り、その中にすべてのサムネイル画像を置きます。
3. XMLファイル（Settings.xml）は、SWFファイルと同じ階層に置きます。すべて揃うと図8のようなファイル構成になります。flaファイル以外のファイルすべてをサーバにアップロードします。

最後に解説するのはXML設定ファイルの記述方法です。このXMLファイルは、すべてを1つにまとめるプロジェクトの定義書のようなものです。 XMLファイルには、テキスト情報やFLV／サムネイル画像へのパス情報が記述されており、それをSWFファイルへと渡します。これらの情報は個別に渡されるため、1つのテンプレートで複数のビデオを表示できるのです。また、このような外部ファイルとXMLファイルを使った方法を採用することで、修正／更新がしやすくなります。たとえば、言語に合わせてローカライズしたコンテンツを提供することができます。仮に、あなたの家族の半分はスペイン語を話し、残り半分が英語を話しているとします。それぞれの言語に合わせたコンテンツを別々に作らずとも、1つのテンプレートで2つの言語に合わせたコンテンツを提供することが可能なのです。

それでは、このビデオショーケースのXML設定ファイルの作成／編集に必要な知識を解説します。

＜XMLファイルの作成＞

サンプルデータの中にあるXMLソースを上書きして編集するのが手っ取り早く簡単な方法でしょうが、FlashのデータソースとしてXMLファイルを作成する方法を学んでおくのもいいでしょう。

以下の手順でXMLファイルを作成します。

1. Dreamweaverのようなテキストエディタを起動させて、新規ファイルを作ります。使用しているテキストエディタでXMLテキストファイル形式を選べる場合は、XMLファイル形式を選んでください。
2. ファイル名を「Settings.xml.」として、SWFファイルと同じ階層に保存します。
3. ファイルに以下のようにルートノードを記述します。

＜XML定義にチャプタ情報を追加＞

ルートノードに続いて、セクションノード（

以下の手順でセクションノードを追記します。

1. ルートノードの中に、セクションノードを追加します。
2. セクションノードの数は、ビデオショーケースで使用するFLVの数と同じにします。以下の例では、4つのセクションとなります。

＜各チャプタのタイトルとビデオパスを追加＞

セクションノードの中には3つの要素が入ります。タイトル（title）、ビデオパス（video）、キューポイントリスト（cuepoints）です。先ほどのXMLソースにタイトルノード、ビデオパスノード、キューポイントリストノードを追記します。

以下の手順で、3つのノードを追記します。なお、ソースを簡潔にするために、1つのセクションだけに追記します。

1. セクションノード内にタイトルノード、ビデオパスノード、キューポイントリストノードを追記します。タイトルノードの情報はセクションボタンのラベルに使われます。ビデオパスノードの情報はFLVPlaybackコンポーネントが使用します。キューポイントリストノードの情報はチャプタボタンが使用します。

2. 他のセクションノードも同じように記述してください。

＜各チャプタにキューポイントの定義を追加＞

最後に、キューポイントリストノードにキューポイントの情報を追加して、XML設定ファイルを完成させましょう。各セクションのチャプタボタンでは、キューポイントを利用してチャプタナビゲーションを実現しています。

以下の手順でキューポイントの情報をキューポイントリストノードに追加します。

1. キューポイントリストノードの中にキューポイントノード（cuepoint）を追加します。ここでは、ソースを簡潔にするために、1つのキューポイントノードのみ記述しています。
2. さらにキューポイントノードの中にキューポイントに関するノード、タイトルノード（title）、タイムノード（time）、イメージノード（image）を追加します。

3. 上記の作業をキューポイントの数だけ繰り返します。

最終的なXML設定ファイルの内容は、サンプルデータで配布している「Settings.xml」を見てください。

さあ、これですべてのカスタマイズ作業が終了しました。あとは、ビデオショーケースを起動させてテストしてみましょう。もし、適切に動作しないときは、XML設定ファイルに問題があることが多いので、まずはそこをチェックしてみてください。

さらに学習したい方へ

Flashでテンプレートを使ったダイナミックコンテンツ制作手法を習得する上で、今回のビデオショーケースはいいエクササイズになると思います。次のステップとしては、複数のXMLファイルを作って、それらをFlashVarsパラメータで使い分けるように発展させてはいかがでしょうか。このテクニックは、言語環境やユーザーに合わせて表示するコンテンツを動的に切り替えたい場合などに有効な手段です。,/p>

さらに勉強したいという方は、Flashデベロッパーセンターの以下の記事を参考にしてください。

• Skinning the ActionScript 3.0 FLVPlayback component
• Controlling Flash video with FLVPlayback programming
• Deconstructing the ActionScript 3.0 Flash video gallery application