Flash Video テンプレート : ナビゲーターのビデオと各種グラフィックを同期したプレゼンテーション

ビデオの編集

SynchronizedVideoPres.fla ファイルを開くと、"controls" スクリーンにビデオと画面下のナビゲーションボタンが配置されています。このスクリーンに配置されている要素は、すべてプレゼンテーションを通して表示されます。"controls" スクリーンは、常に表示されるという点で "background" スクリーンと同じような機能を果たしますが、プレゼンテーション内のナビゲーション制御とビデオといった機能性を配置するためのものとして確保されています。

このスクリーン上にあるビデオには、次のようなカスタマイズが可能です。

• 再生するビデオファイルの変更
• ビデオサイズの変更
• ビデオ配置位置の変更
• ビデオ再生用コントローラーの追加

ビデオをカスタマイズする際の Flash インターフェイスを図 2 に示します。

図 2. テンプレート編集時の Flash インターフェイス

再生するビデオファイルの変更

デフォルトのビデオではなく他のビデオファイルを再生するには、次の手順に従います。

1. 作業エリアの左側に表示されている "controls" スクリーンを選択します。
2. "controls" スクリーンの中央左寄りに配置されている、ビデオ表示エリアをクリックします。ビデオ表示エリアの周囲に青色のボックスが表示されれば、このエリアが選択されていることが確認できます。
3. [ウィンドウ] - [開発パネル] - [コンポーネントインスペクタ] メニューオプションを選択して、[コンポーネントインスペクタ] パネルを開きます。なおこの際、[コンポーネントインスペクタ] が開いてから、ステージ上のビデオ表示エリアを再度選択しなければならないことがあります。

4. [コンポーネントインスペクタ] パネル内にある [URL] フィールドに、新しい Flash Video (FLV) ファイルのパスを入力します (図 3 参照)。ここでは、FLV ファイルをサーバー上に配置することを考慮して、相対的にパスを指定します。なお、Flash Communication Server を利用してビデオをストリーミングする場合は、サーバーを呼び出すために絶対パスを指定する必要があります。

   • [Video Length] ボックスにビデオの長さを入力します。(注 1)
   • [FPS] ドロップダウンメニューから適切なフレームレートを選択します。(注 2)

   • その他の設定項目をデフォルトのままにしておきます。なお、これらの設定項目は基本を習得した後で、各自調整してみてください。

(注 1) バージョン 1.1 以降の Flash Video Exporter を利用して FLV ビデオファイルに変換した場合や、Flash Communication Server を利用してビデオを配信する場合は、[Video Length] ボックスにビデオの長さを入力する必要はありません。(この数値は、ファイルが読み込まれる際に自動的に設定されます。) その他の方法で FLV ファイルを作成した場合は、ビデオの長さを hh:mm:ss:ff (時 : 分 : 秒 : フレーム数) のフォーマットで入力し、コントロールバーが正しく機能するようにしておきます。なお、無料ユーティリティの FLV MetaData Injector (www.buraks.com/flvmdi*) を利用して、FLV ファイルに必要なメタデータを追加することも可能です。このユーティリティを使用すれば、FLV ファイルの長さを算出するために必要なメタデータを追加できるだけでなく、その他の情報も追加できます。

(注 2) 一秒以下の正確さを求めるために [Video Length] の "ff" フィールドに数値を入力しない限り、[FPS] ドロップダウンメニューから厳密なフレームレートを選択する必要はありません。なお、[Video Length] の "ff" フィールドに数値を入力する場合は、毎秒あたりのフレーム数を分母としたフレームの値を使用します。(例: "ff" フィールドに「5」と入力した場合、これは一秒の 5/30 や 5/24 を意味します。)

図 3. [コンポーネントインスペクタ] パネルのビデオ設定

メモ: ムービーの動作を確認するには、一度 Flash ファイルをディレクトリに保存する必要があります。この際、Flash ファイルを保存するディレクトリとビデオファイルが配置されたディレクトリの関係に注意してください。図 3 の [URL] ボックスにある FLV ファイルへのパスは、Flash ムービー内で再生する FLV ファイルが SWF ファイルと同じディレクトリにある場合の設定例です。

[Media Display] コンポーネントのパラメータに、キューポイントと、そのタイムコードが設定されていることに注目してください。ビデオとスクリーンの同期や、ビデオ再生位置を示すボタンの強調といった事柄は、このキューポイントの設定を利用して制御します。キューポイントの追加 / 削除方法については、後ほど「スクリーンの追加 / 削除」セクションで紹介します。

ビデオのサイズと配置位置の変更

テンプレートに配置されているビデオと異なるサイズのビデオを使用する場合や、ビデオをデフォルトより大きく表示したい場合は、ビデオの表示サイズを調整します。また、ビデオはデフォルトでステージの中央左寄りに配置されていますが、ステージ上の任意の位置に移動することもできます。ただし、ビデオの位置を変更する場合は、他のスクリーン上に配置したコンテンツと重なり合わないように注意する必要があります。

1. "controls" スクリーンにあるビデオ表示エリアをクリックします。

   ビデオ表示エリアの大きさは、選択したビデオのサイズに応じて自動的に調整されます。ビデオファイルをデフォルトサイズ以外で再生したい場合は、[コンポーネントインスペクタ] パネルにある [Use Preferred Media Size] ボックス (図 3 参照) のチェックを外します。

2. 画面下部にある [プロパティインスペクタ] の [W] と [H] のボックスに、ビデオを表示する幅と高さ (ピクセル値) を入力します。また、ビデオ表示エリアを右クリック (Windows) あるいは Control + クリック (Macintosh) して、コンテキストメニューから [自由変形] を選択すれば、ビデオ表示エリア周囲に表示されるハンドルを利用してサイズを調整することもできます。
3. ビデオの位置を調整するには、単に "controls" スクリーン上のビデオをドラッグして移動します。

再生コントローラーの追加

ビデオの再生コントローラーも簡単に追加できます。再生コントローラーを追加するには、単に [コンポーネント] パネルからメディアコンポーネントをドラッグして追加するだけです。デフォルト状態のテンプレートには、MediaDisplay コンポーネントだけが配置されていますが、MediaController コンポーネントを追加すれば、ビデオに再生コントローラーを関連付けることができます。再生コントローラーを追加するには、次の手順に従ってください:

1. テンプレート FLA ファイルを Flash MX Professional 2004 で開きます。
2. "controls" スクリーンを選択します。
3. ビデオ表示エリアの高さを縮めて、再生コントローラーを配置するスペースを確保します。レイアウトを調整して、他の場所に再生コントローラーを配置しても問題ありません。
4. "mediaDisplay" レイヤーを選択してから、[コンポーネント] パネルを開き、[MediaController] コンポーネントをステージにドラッグします。
5. [プロパティインスペクタ] パネルを利用して、このコンポーネントのインスタンス名を「controller」にし、[コンポーネントインスペクタ] パネルを利用して各種パラメータを設定します。パラメータの設定次第では、ビデオの再生状況を示すバーだけを表示するようにできます。

6. MediaDisplay コンポーネントを選択して、[アクション] パネルを開きます ([ウィンドウ] - [開発パネル] - [アクション] メニューコマンドを選択)。load イベントハンドラの波括弧のなかに、つぎのコードを追加します:

   // Associate Media Controller with the display
   this.associateController( this._parent.controller ); 
   

   完成したコードは、つぎのようになります:

   on (load) {
   // Start Slide Cue Point Behavior
   mx.controls.streamingmedia.behaviors.SlideCuePointListener.initializeListener(this, this._parent);
   // End Slide Cue Point Behavior
   // Associate Media Controller with the display
   this.associateController( this._parent.controller ); 
   }
   

7. [制御] メニューから [ムービープレビュー] を選択 (または、Ctrl + Enter) し、ムービーを再生してみます。

ページ 3 / 6

前のページ

次のページ