ビデオショーケーステンプレートの概要

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

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

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

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

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

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

図1： 各データの流れ

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

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

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

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

＜FLAファイルの中身＞

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

図2： サンプル提供しているテンプレートの初期状態の外観

＜XMLファイルの中身＞

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

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

<showcase>
   <section>
      <title>ATV Riding</title>
      <video>video/ATV.flv</video>
   </section>
   <section>
      <title>Jetskiing</title>
      <video>video/JetSki.flv</video>
   </section>
</showcase>

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

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

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

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

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

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

ページ 2 / 5

前のページ

次のページ