このチュートリアルをフォローするために必ずしも必要ではありませんが、Flash Communication Server を利用すれば、プログレッシブビデオダウンロードの代わりにストリーミングビデオを利用できます。詳細については、このチュートリアルの「ストリーミングビデオの使用」セクションを参照してください。

サンプルファイル (テンプレート)

テンプレート「ナビゲーターのビデオと各種グラフィックを同期したプレゼンテーション」をダウンロード (ZIP, 3.55 MB)

この記事で紹介する「ナビゲーターのビデオと各種グラフィックを同期したプレゼンテーション」テンプレートを利用すれば、ビデオを活用した魅力的なプレゼンテーションを容易に制作できます。音声、ビデオ、アニメーションを組み合わせたプレゼンテーションは、従来の単なるスライドプレゼンテーションより効果性にも優れています。ここで紹介するテンプレートには、ビデオと、ビデオの再生タイミングに応じて表示されるテキストやグラフィックを含むスライド、そして画面下部のナビゲーション用ボタンの３つの要素が配置してあります。ビデオの再生が始まるとあらかじめ指定しておいたスライドが次々と表示され、再生中のコンテンツに応じてナビゲーションボタンが強調表示されます。また、ユーザーがナビゲーションボタンをクリックすると、所定の位置のビデオとスライドが自動的に再生されます。

ここで紹介するテンプレートは、次のような事柄をカスタマイズすることで、ユーザーのニーズに合わせることができます。

独自のビデオを追加して、任意の位置に配置 / リサイズ
企業ロゴや独自の色彩計画をプレゼンテーションの一部または背景として追加
ナビゲーションバーをカスタマイズして、テキストやボタンなどを追加
ナビゲーションバーを画面上部に移動
ビデオの再生状況に応じた独自のテキストやグラフィックの追加

この記事では、まずテンプレートの構造を紹介し、その後テンプレートのカスタマイズ方法を手順を追って紹介します。

テンプレートに関する基礎知識

このセクションでは、テンプレートを使用する上での注意点やテンプレートを使用し始める際の手順などを紹介します。テンプレートに関する一般的な知識がある場合は、このセクションを飛ばして次のセクションに進んでください。テンプレートやダウンロードファイルの構成内容などに疑問がある方は、このセクションをお読みください。

この記事では、次の用語を頻繁に使用します:

FLV: Flash MX Professional 2004 や Flash Communication Server で使用する、Flash Video フォーマットの略
メディアコンポーネント: FLV ビデオや MP3 音声を表示 / 再生するための Flash MX Professional 2004 搭載コンポーネント
ビヘイビア: ビヘイビアとはオブジェクトに特定の機能性を追加し、これらの機能性の設定を編集するためのインターフェイスを提供する、Flash MX 2004 搭載機能のことです。ここで紹介するテンプレートの機能性の大半は、ビヘイビアを利用することによって実現できています。

作業を始める前に

この記事で紹介するテンプレートの使用にあたっては、ビデオを複数のセクションに区切るということが重要になります。これは、ビデオに対して複数のキューポイント (ビデオの再生開始位置) を設定することを意味します。ここで紹介する Flash テンプレートでは、次の場面でキューポイントが重要になります:

ビデオのキューポイントとナビゲーションボタンを同期させる必要がある
ビデオのキューポイントと各セクションのテキストやアニメーションコンテンツを同期させる必要がある
コンテンツ内のナビゲーションを制御するために、メディアコンポーネントにキューポイントを定義する必要がある

作業をスムーズに進めるには、最初にビデオコンテンツをどのようにセクション分けするかを検討する必要があります。この際、視聴者がビデオ内のどの部分に移動できると便利かを、論理的に整理すると良いでしょう。セクション分けが決まったら、つぎにどのようなテキストや画像、アニメーションコンテンツなどを各セクションに配置すれば良いかを検討します。この際、どうすればビデオの内容を効果的に強調できるかといったことを考慮すると良いでしょう。

ダウンロードした FLA ファイルについて

ダウンロードファイルのなかにある SynchronizedVideoPres.fla は、今すぐサンプルとしてプレビューすることが可能なテンプレートです。FLA ファイルには、この記事の最初に紹介したプレビューと同じコンテンツが含まれています。では、FLA ファイルの内容を確認していくことにしましょう。

SynchronizedVideoPres.fla ファイルをまだダウンロードしていない場合は、この記事の最初のページに戻ってファイルをダウンロードしてください。ダウンロードが完了したら、ファイルを Flash MX Professional 2004 で開きます。

ステージの左側にスクリーンの一覧が表示されていることに注目してください。Flash MX Professional 2004 から搭載された「スクリーン」は、コンテンツを階層構造にまとめるための便利な手法です。またスクリーンは、メディアコンポーネントやメディアビヘイビアが、ビデオや各種コンテンツを同期するためのコンテンツ置き場としても利用できます。

テンプレートには、大きく分けて 3 つのセクションのスクリーンがあります (図 1 参照) :

background: プレゼンテーションの背景色や、プレゼンテーションを通して表示するグラフィック / テキストを配置しておくための背景スクリーン。
controls: プレゼンテーションを通して表示するナビゲーションボタンやビデオを配置しておくためのスクリーン。
welcome、studiomx、products 等: ビデオ再生中に表示するテキストやグラフィックをセクションごとに配置した 12 のスクリーン。

図 1. テンプレートのスクリーン構成

プレゼンテーション再生中は、"background"スクリーンと "controls" スクリーンの両方のコンテンツが常に表示されます。"background" スクリーンにはユーザーインターフェイスのグラフィック要素が配置され、"controls" スクリーンには、ナビゲーション用のボタンやメディアコンポーネントなどが配置されています。"controls" スクリーンに配置されているメディアコンポーネントが、ＦＬＶファイルの読み込みや表示といった機能性を提供し、プレゼンテーションの中核をコントロールしています。

"controls" スクリーンの下に表示されている 12 のスクリーンは、ビデオ再生中に 1 つずつ表示されます。なお、これら 12 のスクリーンからなるスクリーン構成は、ニーズに合わせて自由にカスタマイズスして、新たなビデオキューポイントと関連付けることができます。スクリーンをキューポイントに関連付けるには、スクリーンに名前を付けて、その名前を "controls" スクリーンに配置されているメディアコンポーネントのキューポイントパラメータとして定義するだけです。

この部分の 12 のスクリーンは、ビデオの再生に合わせて 1 つずつ表示されます。これは、ビデオの特定の位置にキューポイントが設定されているからであり、どのスクリーンが表示されるかはキューポイントとの関連付けによって決まります。単に現状のプレゼンテーションを再生した場合、これら 12 のスクリーンはそれぞれ順番に表示されていきます。

なお、プレゼンテーションの各セクションに表示される内容は、Microsoft PowerPoint プレゼンテーションのスライド編集同様にカスタマイズできます。

テンプレートを使用するための第一歩

テンプレートを初めて使用する場合や使用方法が不確かな場合は、このセクションの手順に従ってください。

ハードディスク上に、これから作成するプレゼンテーションの FLA ファイルとビデオを配置するためのフォルダを作成します。
このフォルダ内に、ダウンロードしておいた SynchronizedVideoPres.fla ファイルの複製を作成し、新しいファイル名を付けておきます。ファイルの複製を作成しておくと、後でサンプルファイルの機能性などを確認する際に便利です。ダウンロードしたファイルをそのまま上書き保存していかないように注意してください。
独自のビデオコンテンツを作成し、FLV フォーマットに変換しておきます。(この手順の詳細については、『Flash Video 入門』内の「Flash Video のキャプチャとエンコード」セクションを参照してください。) FLV ファイルが完成したら、このファイルを FLA ファイルとの整合性が取れた位置に配置します (通常、FLA ファイルと同じディレクトリ、または FLA ファイルと同じディレクトリにあるサブフォルダ)。FLV のファイル名と、FLA ファイルから見た FLV ファイルの相対パスをメモしておきます。これらの情報は、後にメディアコンポーネントのパラメータを設定する際に使用します。
FLA ファイルを Flash MX Professional 2004 で開き、編集作業を開始します。この際、ダウンロードしておいた FLA ファイルには、すでにできあがったサンプルコンテンツが入っていることに注意してください。この記事では、これらのコンテンツを編集することで、プレゼンテーションをカスタマイズしていきます。次のセクションでは、実際に FLA ファイルを編集する方法を紹介します。

ビデオの編集

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

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

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

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

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

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

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

作業エリアの左側に表示されている "controls" スクリーンを選択します。
"controls" スクリーンの中央左寄りに配置されている、ビデオ表示エリアをクリックします。ビデオ表示エリアの周囲に青色のボックスが表示されれば、このエリアが選択されていることが確認できます。
[ウィンドウ] - [開発パネル] - [コンポーネントインスペクタ] メニューオプションを選択して、[コンポーネントインスペクタ] パネルを開きます。なおこの際、[コンポーネントインスペクタ] が開いてから、ステージ上のビデオ表示エリアを再度選択しなければならないことがあります。
[コンポーネントインスペクタ] パネル内にある [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] コンポーネントのパラメータに、キューポイントと、そのタイムコードが設定されていることに注目してください。ビデオとスクリーンの同期や、ビデオ再生位置を示すボタンの強調といった事柄は、このキューポイントの設定を利用して制御します。キューポイントの追加 / 削除方法については、後ほど「スクリーンの追加 / 削除」セクションで紹介します。

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

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

"controls" スクリーンにあるビデオ表示エリアをクリックします。
ビデオ表示エリアの大きさは、選択したビデオのサイズに応じて自動的に調整されます。ビデオファイルをデフォルトサイズ以外で再生したい場合は、[コンポーネントインスペクタ] パネルにある [Use Preferred Media Size] ボックス (図 3 参照) のチェックを外します。
画面下部にある [プロパティインスペクタ] の [W] と [H] のボックスに、ビデオを表示する幅と高さ (ピクセル値) を入力します。また、ビデオ表示エリアを右クリック (Windows) あるいは Control + クリック (Macintosh) して、コンテキストメニューから [自由変形] を選択すれば、ビデオ表示エリア周囲に表示されるハンドルを利用してサイズを調整することもできます。
ビデオの位置を調整するには、単に "controls" スクリーン上のビデオをドラッグして移動します。

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

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

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

    

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

ボタンの編集

ムービーの下部にあるボタンも自由にカスタマイズできます (図 4 参照)。これらのボタンには独自のグラフィック、テキスト、アニメーションを使用することも可能です。

図 4. テンプレートのナビゲーションボタン

スクリーンの下側に配置されているボタン群は、Flash の「ムービークリップ」としてグループ化されています。「ムービークリップ」とは、それ独自を単独でアニメーション化 / 編集するためのタイムラインを持つ、コンテンツの集まりのことです。ここで紹介しているテンプレートの場合、単独での編集が可能なムービークリップのなかに、複数のボタンを配置することによって、ナビゲーションバーを構成しています。

ナビゲーションバーに対しては、次のようなカスタマイズが可能です。

ボタンとして使用するグラフィックやボタンの位置の変更
ビデオの再生位置を強調するハイライトボックスの色変更
ナビゲーションボタンの削除
ナビゲーションボタンの追加

デフォルトボタンの変更

ナビゲーションボタン群を画面上の別の場所に移動するには:

"controls" スクリーンを選択します。
ナビゲーションボタンが配置されているムービークリップをドラッグして、スクリーン上の任意の位置に移動します。

グラフィックを変更、あるいはグラフィックをテキストに置き替えるには:

"controls" スクリーンを選択します。
ナビゲーションボタンが配置されているムービークリップをダブルクリックします。そうすると、このムービークリップが開き、編集できる状態になります。
ここでは、"thumbs" レイヤーに配置されているグラフィックの上に、"buttons" レイヤーの各ボタンが配置されていることに注意してください。"buttons" レイヤーの下にあるボタンのグラフィックを編集するには、まず "buttons" レイヤーをロックしておきます。
"thumbs" レイヤーを選択してから、[ファイル] - [読み込み] - [ステージに読み込み] メニューコマンドを選択して、ボタンとして使用する新しいグラフィックを読み込みます。

読み込んだグラフィックのサイズを変更するには、グラフィック上を右クリック (Windows) または Control + クリック (Macintosh) して、ポップアップメニューから [自由変形] を選択します。画像にハンドルが表示されるので、これらを利用すればサイズを調整できます。ただし、グラフィックをムービーに読み込む前にサイズを調整しておくと、効率良く作業を進められます。

読み込んだグラフィックをデフォルトボタンのグラフィックと同じ位置に移動し、ボタンのテキスト部分をダブルクリックしてテキストを書き替えます。テキストの表示属性を変更する場合は、作業エリアの下側にある [プロパティインスペクタ] を使用します。

ビデオの再生位置を強調するハイライトボックスの色変更

再生中のナビゲーションボタンを強調するハイライトボックスもカスタマイズできます (図 5 参照)。たいていの場合、ハイライトボックスはそのままでも問題ありませんが、必要であればボックスの色を変更することや、テキストを追加、ボックスにグラフィックを追加して額縁のようにするといったカスタマイズが可能です。

図 5. ナビゲーションボタンを強調する緑色のボックス

ハイライトボックスには共通のグラフィックを利用しているので、緑色のボックスを一度変更すれば、すべてのボタンに適用されます。この際、ハイライトボックスのサイズがその下のレイヤーにあるグラフィックと同じサイズであることに注意してください。"controls" スクリーンのタイムラインに記述してあるコードは、グラフィックとハイライトボックスのそれぞれの左上角が一致するように、ムービー再生中に処理しています。ハイライトボックスをカスタマイズする際には、これら 2 つの要素が正しく表示されるように注意してください。

本テンプレート内で使用するグラフィックはすべてライブラリの中に収録しています。ハイライトボックスをカスタマイズするには、ライブラリ内のグラフィックを一度変更するだけです:

Ctrl + L を押すか、[ウィンドウ] メニューから [ライブラリ] を選択して、[ライブラリ] パネルを開きます。
ライブラリ内の "Misc" フォルダを開きます (図 6 参照)。

図 6. ハイライトボックスを選択した状態の [ライブラリ] パネル

"Thumb Outline Selected" 項目の横にあるアイコンをダブルクリックします。
緑色のハイライトボックスがステージに表示されるので、この画面上でグラフィックを編集します。
ハイライトボックスの線色を変更するには、ハイライトボックスをダブルクリックしてから、ツールバーの [カラー] パレットで新しい色を選択します:

このエリアにはグラフィックやテキストを追加することもでき、ここで追加した内容はすべてビデオの再生地点を示すナビゲーションボタン上に表示されます。なお、緑色のハイライトボックスは、ボックスが鮮明になるよう 2 色の緑の線から構成されていることに注意してください。ボックスの色を変更する場合、これらのどちらか、または両方の線色を変更する必要があります。

"controls" スクリーンを再度選択して、変更内容を確定します。

メモ: ハイライトボックスのムービークリップを編集しただけでは、ビデオの再生位置を示すハイライトボックスの色が変わるだけで、ボタンにロールオーバーした状態のボックス色には影響しません。

ナビゲーションボタンの削除

ナビゲーションバー全体を削除するには、"controls" スクリーンを選択してからナビゲーションバーをクリックし、Delete キーを押します。

ナビゲーションバー内のボタンを削除する場合は、次の手順に従ってください:

"controls" スクリーンを選択します。
スクリーンの下側にあるナビゲーションボタンが配置されたムービークリップをダブルクリックし、ナビゲーションバーを編集できる状態にします。
削除するボタンを選択して、Delete キーを押します。この際、"buttons" レイヤーと "thumbs" レイヤー両方に配置されているコンテンツを削除しなければならないことに注意してください。ボタンに関するすべてのコンテンツが削除されたことは、ステージ上のボタンが配置されていた場所を囲むようにマウスをクリック & ドラッグすることで確認できます。もし、何らかのコンテンツが青色のボックスで選択されるようなら、これらも忘れずに削除しておきます。

ナビゲーションボタンの追加

新たなボタンを追加するには、まず、既存ボタンのサイズを縮小してスペースを確保するか、スクリーン上の新たな位置にボタンを配置する必要があります。なお、ボタンは必ずしも一列に並んでいる必要はありません。次にナビゲーションボタンを追加する手順を示します:

"controls" スクリーンを選択します。
スクリーンの下側にあるナビゲーションボタンが配置されたムービークリップをダブルクリックし、ナビゲーションバーを編集できる状態にします。
新たなボタンを追加するには、既存のボタンをコピーして利用すると簡単です。"buttons" レイヤーにある任意のボタンをクリックして選択し、このボタンをコピー & ペーストします。(コピーした内容は、画面の中央に表示されます。)
コピーしたボタンの位置を調整します。
"thumbs" レイヤーを選択してから、[ファイル] - [読み込み] - [ステージに読み込み] を選択して、新たなボタンのグラフィックを読み込みます。
新たに追加したボタンをクリックします。ボタンの下にあるグラフィックではなく、ボタンをクリックするように注意してください。ボタンをクリックすると、ボタンを選択したことを示す青色のハイライトボックスが周囲に表示されます (図 7 参照)。
[プロパティインスペクタ] を利用して、ボタンにインスタンス名を付けます。ボタンにインスタンス名を付けると、このボタンとキューポイントを同期できるようになります。なお、このテンプレートに記述されているコードの場合、ボタンインスタンス名は、ボタンと同期するキューポイント名のあとに「_btn」を付けることが義務づけられています。仮にキューポイント名が「studiomx」の場合、これに対応するボタンインスタンス名は「studiomx_btn」にする必要があります (図 7 参照)。また、Media Component のパラメータに定義したキューポイント名は、同期するスクリーン名と一致する必要もあります。

図 7: ボタンを選択して、キューポイント "studiomx" に関連付けるためのインスタンス名を入力した状態

ボタンを選択した状態のまま [アクション] パネルを開き ([ウィンドウ] - [開発パネル] - [アクション] を選択)、次のように記述されているコード部分を見つけます:

m.play(Math.round(74));

括弧内の数値を書き替えて、このボタンをクリックすることで再生するビデオ位置を指定します。この数値には、ビデオの最初から見た再生位置の秒数を入力します。上記のコードの場合、ユーザーがボタンをクリックするとビデオの 74 秒目から再生が始まります。なお、この再生位置は秒数を示す整数でのみ指定でき、小数点以下の数値は四捨五入されます。
"controls" スクリーンをクリックして、ナビゲーションバーの編集状態を解除します。

メモ: ボタンに規定するビデオ再生位置と、Media Display コンポーネントのなかで指定したキューポイントの位置が、必ず同じになるように注意して下さい。これらの位置が異なる場合、ユーザーがボタンをクリックした際に、正しい再生位置に移動できなくなります。なお、ビデオのエンコーディング設定によっては、タイムコードの参照位置が異なるケースがあります。ボタンをクリックしても正しいコンテンツが表示されない場合は、ボタンに規定したタイムコードや Media Display コンポーネント内のキューポイント位置を調整するようにしてください。

独自のテキスト、グラフィック、アニメーションの追加

プレゼンテーションのユーザーインターフェイスやコンテンツは、カスタマイズする内容によって簡単にも複雑にもなります。

各スクリーン上に配置されたコンテンツに対しては、次のようなカスタマイズが可能です。

背景色や背景として使用するグラフィックのカスタマイズ
ビデオ再生時に表示されるテキスト、グラフィック、アニメーションのカスタマイズ
ビデオに設置したキューポイントと同期するスクリーンの追加 / 削除
トランジションビヘイビアを利用して、スクリーン上のコンテンツをアニメーション化

背景色や背景として使用するグラフィックのカスタマイズ

ロゴや背景画像、背景色、プレゼンテーションの額縁など、プレゼンテーションを通して表示される要素を追加することも可能です。これらの要素を追加またはカスタマイズすれば、デフォルトのビデオを入れ替えるのと同じぐらい簡単に、プレゼンテーションの見栄えを素早くカスタマイズできます。

この際、背景のグラフィックとして容量の大きなビットマップ画像を利用すると、プレゼンテーション全体のサイズが大きくなりダウンロード時間が長くなることに注意してください。背景グラフィックは Flash のドローイングツールを利用するか、Macromedia Fireworks などのアプリケーションでベクターグラフィックとして用意すると容量が小さくなります。

背景にグラフィックや背景色を追加するには、次の手順に従ってください。

"background" スクリーンを選択します。このスクリーンには、つぎの 5 つのグラフィック要素が配置されています: スクリーン上部のタイトルテキスト、テキスト周囲の灰色のボックス、このボックスの下に配置されている灰色の線、スクリーン下部にある灰色のボックス、このボックスの上に配置されている灰色の線 (図 8 参照)。
新しいタイトルやボーダー、背景色などは、ツールパレットにある Flash のドローイングツールを利用して作成すると良いでしょう。

図 8. "background" スクリーン上のグラフィック要素

新しい背景グラフィックを追加するには、次の手順に従ってください。

[ファイル] - [読み込み] - [ステージに読み込み] メニューコマンドを選択します。
読み込むファイルをダイアログボックス内で選択して、[読み込み] ボタンをクリックします。
なお、読み込むファイル形式によっては、各種オプションを設定するためのダイアログボックスが表示されることもあります。
読み込んだグラフィックを正しい位置に移動します。

読み込んだグラフィックのサイズを変更するには、グラフィック上を右クリック (Windows) または Control + クリック (Macintosh) して、ポップアップメニューから [自由変形] を選択します。

背景色やボーダーなどを追加する場合は、"background" スクリーンを選択してから、[ツール] パネル内のドローイングツールを利用して、べた塗りの長方形や線などを描きます。なお、"background" スクリーンに配置した要素は、プレゼンテーションを通して常に表示されます。

ビデオ再生時に表示されるテキストやグラフィックのカスタマイズ

ビデオを再生すると、ビデオの再生位置に応じたテキストやグラフィックが表示されます。これらのテキストやグラフィックは、ビデオが既定のキューポイントに達することによって表示されるように同期してあります。テンプレートをカスタマイズする際には、テキストやグラフィックも独自の内容に変更する必要があります。

独自のテキストやグラフィックといったコンテンツをスクリーンに配置し、スクリーンを表示するタイミングをビデオと同期しておけば、ビデオが特定のキューポイントに達すると、そのポイントに対応するコンテンツが表示されます。

独自のテキストやグラフィックを追加するには、テンプレートのスクリーン上にある既存のものを編集すると簡単です。また、各スクリーンの表示タイミングはメディアコンポーネントのキューポイントを調整することによって、ビデオと同期できます。

テンプレートにある既存のスクリーンは、単にそのスクリーンを選択し、スクリーン上のコンテンツを編集することで変更できます。ビデオの進行と同期するスクリーンを編集する際には、 "background" スクリーンや "controls" スクリーン上にある背景グラフィック、タイトルテキスト、ナビゲーションボタンなどが薄い灰色で表示されるので、これらの要素が編集中のスクリーン以外に存在することを容易に把握できます。なお、テキストやグラフィックなどの要素は、選択中のスクリーン上にあるものだけが編集可能であることを忘れないようにしてください。薄い灰色で表示されている要素を編集するには、"background" スクリーンまたは "controls" スクリーンを選択します (図 9 参照)。

図 9. "welcome" スクリーンを選択すると、このスクリーン上に配置されているテキストが前面に表示され、"background" スクリーンと "controls" スクリーン上に配置したテキストやグラフィックが薄い灰色で表示されます。

デフォルトで配置されているテキストやグラフィックの多くは、スクリーンが表示されると同時に、フェードインまたは移動するようにアニメーション化されています (図 10 参照)。これらのエフェクトは、好みに合わせて削除、あるいはそのまま利用できます。なお、フェードインはコンテンツが何もないところから現れるような効果を与えるので、コンテンツが完全に表示されるまでに時間が掛かることに注意してください。各スクリーン上のアニメーションは、タイムライン左上にある再生ヘッドをタイムライン沿いにドラッグすることで確認できます。また、タイムラインの最後のフレームをクリックすれば、アニメーションが完了した段階のコンテンツが確認できます。

図 10. スクリーン上のテキストやグラフィックがアニメーション化されていることを示すタイムライン

既にアニメーション化されているテキストやグラフィックの内容を編集した場合、アニメーション効果自体はそのまま維持されます。したがって、場合によっては、テキストやグラフィックとともにこれらに適用されているアニメーション効果も削除する必要があります。この場合、タイムラインのレイヤーそのものを削除すると、これらの要素を素早く削除できます。

新たなテキストやグラフィックを追加して、これらにアニメーション化する場合は、テキストやグラフィックを選択してから、[挿入] - [タイムラインエフェクト] メニューコマンドを選択し、好みのエフェクトを選択します。

すでにスクリーン上にあるテキストを編集する場合は、そのテキストをダブルクリックして内容を書き替えます。また、ツールパレットのテキストツールを利用すれば、新たなテキストを追加できます。

新たなグラフィックを追加する場合は、[ファイル] - [読み込み] - [ステージに読み込み] を選択して、グラフィックを読み込みます。

なお、スクリーンの名前を変更する場合は、そのスクリーンに対応するメディアコンポーネントのパラメータ (キューポイント名) と、ナビゲーションバーのボタンインスタンス名も合わせて変更しなければならないことに注意してください。これらのことを踏まえてスクリーン名を変更すれば問題はありませんが、スクリーン名はデフォルトのままにしておいた方が簡単かも知れません。

スクリーンの追加 / 削除

上記のセクションではスクリーン上のコンテンツを変更する方法について述べましたが、ここではスクリーンそのものを追加、または削除する方法を紹介します。コンテンツを配置するスクリーンは、ビデオが既定のキューポイントに達すると同時に表示されなければなりません。したがって、スクリーンを追加 / 削除する場合は、メディアコンポーネントのキューポイントと、ナビゲーションバーのボタンインスタンス名も合わせて調整する必要があります。

デフォルトのプレゼンテーションには、12 枚のコンテンツ用スクリーンが設置されていますが、スクリーンは必要に応じて追加することも可能です。

スクリーンを追加するには、つぎの手順に従ってください。

スクリーンを追加する直前のスクリーンを右クリック (Windows) または Control + クリック (Macintosh) し、表示されるメニューから [スクリーンの挿入] を選択します。
スクリーンアイコンの横にあるスクリーン名 (スライド1 の部分) をダブルクリックし、任意のスクリーン名を入力します。この際、スクリーン名には、スペース (空白) を使用できないことに注意してください。
新しく追加したスクリーンにテキストやグラフィックを追加し、必要に応じてアニメーション化します。

スクリーンを追加したら、次はビデオがキューポイントに達するとスクリーンが表示されるように、以下の手順でビデオとスクリーンを同期します。

"controls" スクリーンを選択します。
"controls" スクリーンの中央左寄りに配置されているメディアコンポーネントをクリックします。メディアコンポーネントが配置されている位置をクリックすると、メディアコンポーネントが選択されます。
作業画面左側の [コンポーネントインスペクタ] パネルを開きます。
[コンポーネントインスペクタ] の下側にあるキューポイントを設定するエリアに、新しく追加したスクリーンの名前をキューポイント名として入力し、キューポイントの位置を hh:mm:ss:ff (時 : 分 : 秒 : フレーム数) の書式で入力します。
ナビゲーションバーをダブルクリックして、この部分の編集モードに入り、ビデオ再生時に強調するボタンをキューポイントに関連付けます。
新しいキューポイントに関連付けるボタンインスタンスを選択し、"buttons" レイヤーにあるボタンの輪郭をクリックします。
ナビゲーションボタンを追加する要領にならって、ActionScript を記述します。

新しいボタンを追加する方法については、「ナビゲーションボタンの追加」セクションを参照してください。

スクリーンを削除するのも簡単です。単に作業環境左側にあるスクリーンの一覧から削除するスクリーンを選択して、Delete キーを押すだけです。この際、ビデオに設置しておいたキューポイントも忘れずに削除します:

"controls" スクリーンを選択します。
メディアコンポーネントを選択します。
[コンポーネントインスペクタ] パネルを開きます。
キューポイントを指定するエリアから、削除したスクリーンに対応するキューポイントを削除します。

スクリーントランジションを利用して、スクリーン上のコンテンツをアニメーション化

スクリーン上のコンテンツをアニメーション化するには、スクリーントランジションビヘイビアを利用する方法があります。スクリーントランジションを利用すれば、スクリーン上のコンテンツに対して簡単に動きを与えることができます。スクリーントランジションには、フェード、ズーム、フライ、ワイプといったプリセットのトランジションがあり、これらを利用することで素早くスクリーン上のコンテンツをアニメーション化できます。スクリーントランジションは、当該スクリーンの表示が始まるときと終わるときに対して適用できます。スクリーントランジションは、他の機能性同様に [ビヘイビア] パネルを利用して設定します。スクリーンビヘイビアを追加するには、まずスクリーンの一覧からビヘイビアを適用するスクリーンを選択します。

"controls" スクリーンの下にあるサブスクリーンをクリックして、[ビヘイビア] パネルに表示されるデフォルト設定のビヘイビアを検証してみてください。デフォルトでは、スクリーンにビヘイビアが設置されているものと、されていないものが混在しています。スクリーンに設置されているビヘイビアの詳細を確認するには、[ビヘイビア] パネルの [アクション] 欄に表示されている項目をダブルクリックします。各ビヘイビアに対応するダイアログボックスが表示されます。詳細を確認し終わったら、[キャンセル] ボタンをクリックします。
"welcome" スクリーンを選択して、実際にトランジションビヘイビアを追加してみましょう。
"welcome" スクリーンを選択してから、[ビヘイビア] パネルのプラス記号 (+) をクリックし、メニューから [スクリーン] - [トランジション] を選択します (図 11 参照)。

図 11. [ビヘイビア] パネル内の [スクリーン] メニュー

[トランジション] ダイアログボックスが開いたら、好みのトランジションを選び、パラメータを調整します。図 12 に [ズーム] トランジションと、[イージング] に「弾力」を選択した状態を示します。この際、イージングのパラメータを調整すると、さまざまなアニメーション効果を演出できます。パラメータが調整できたら、[OK] ボタンをクリックします。

図 12. [トランジション] ダイアログボックス

ダイアログボックスが閉じたら、[ビヘイビア] パネルにトランジションが追加されていることが確認できます。この際、[イベント] が自動的に「reveal」になっていることに注目してください。これは、スクリーンが現れるとともにトランジションが実行されることを意味します。このスクリーンが消えるタイミングにトランジションビヘイビアを追加することも可能です。この場合は、トランジションの [イベント] を「hide」に設定します。[イベント] を「hide」にしておくと、つぎのスクリーンに移る直前にトランジションが実行されます。なお、この場合、[トランジション] ダイアログボックス内の [方向] 項目には、「アウト」を指定しておきます。
[制御] メニューから [ムービープレビュー] を選択し (または Ctrl + Enter キーを押して)、ムービーを再生してみます。ここでは、"welcome" スクリーンに追加したトランジションにかぶさるように "studiomx" スクリーンの表示が始まってしまいますが、トランジションが適用されていることが確認できます。トランジションを、[トランジション] ダイアログボックスの [長さ] で指定した秒数以上表示されるスクリーンに適用すれば、このような重なりは発生しません。
タイミングの違いを実験するために、"welcome" スクリーンに設置したトランジションを削除して、代わりに "studiomx" スクリーンに設定してみましょう。"welcome" スクリーンを選択した状態で [ビヘイビア] パネル内のトランジションを選択し、マイナス記号 (-) をクリックしてトランジションを削除します。
スクリーンの一覧から "studiomx" スクリーンを選択し、"welcome" スクリーンの代わりに "studiomx" スクリーンに対して手順 3 と 4 を繰り返します。
[制御] メニューから [ムービープレビュー] を選択し (または Ctrl + Enter キーを押して)、ムービーを再生してみます。

なお、各スクリーンのイベントには複数のビヘイビアを適用することも可能です。したがって、"reveal" イベントや "hide" イベントに対して、トランジションビヘイビアと、それ以外のビヘイビアを適用するといったことも可能です。トランジションと同時にスクリーンのタイムラインを操作するような場合に便利です。

ストリーミングビデオの使用

ここまででご覧いただいたように、この記事で紹介しているテンプレートは、メディアコンポーネントを利用することによってビデオの表示を制御しています。メディアコンポーネントは FLV フォーマットを表示することができ、FLV ファイルのプログレッシブダウンロードと、ストリーミングの両方に対応しています。プログレッシブダウンロードは、Flash Player 7 と FLV フォーマットを利用すれば使用でき、FLV ファイルを Web サーバーからダウンロードするための標準的な手法です。プログレッシブビデオは、ビデオを埋め込むよりパフォーマンスに優れているうえに、他にもさまざまなメリットを提供します。

一方のストリーミングビデオは、Flash コンテンツと Flash Communication Server あるいは Flash Video Streaming Service を利用すれば使用できます。Flash Communication Server は Flash ムービーにコンテンツをストリームするために開発された Macromedia のサーバー製品です。ストリーミング FLV コンテンツには、プログレッシブビデオの長所に加え、バンド幅の監視性や制御性、ネットワークリソースの効率良い使用、リアルタイムで更新することが可能な大規模マルチユーザーアプリケーションの開発などといった長所が加わります。

プログレッシブビデオとストリーミングビデオの詳細については、『Flash ビデオ入門』の「Flash ビデオの配信オプション」セクションを参照してください。

すでに Flash Communication Server トライアル版をインストールし、Flash Communication Server にアクセスすることができる場合は、つぎの手順に従ってストリーミングビデオをプレゼンテーションに利用してみてください。

プレゼンテーション FLA ファイルを Flash MX 2004 で開きます。
スクリーンの一覧から "controls" スクリーンを選択し、スクリーンの中央左寄りに配置されているメディアコンポーネントをクリックします。
ストリーミングビデオを使用できるようにするには、Flash Communication Server が稼働するサーバー上に配置した FLV ファイルの URL をコンポーネントのパラメータに入力します。
仮に Flash Communication Server が稼働するマシンの "c:\program files\macromedia\flash communication server mx\applications\app_name\streams\instance_name\" にビデオを配置した場合、「rtmp://server_name/app_name/instance_name/video_name」と入力します。ビデオがリクエストされると、URL に指定しておいた Flash Communication Server が対応します。

Flash Communication Server の設定方法などについては、Flash Communication Server ドキュメンテーションを参照してください。

なお、ストリーミングビデオを使用するには、Macromedia コンテンツ配信ネットワークパートナーが提供する Flash Video Streaming Service を利用することも可能です。

つぎのステップ

この記事で紹介した内容以外にも、テンプレートをより高度にカスタマイズして、さらにニーズに合ったプレゼンテーションに仕上げることも可能です。つぎにカスタマイズ例を数点紹介します。

ユーザーインターフェイスやグラフィックを変更して、ルック & フィールを完全にカスタマイズ
テキストやグラフィックに対し独自のアニメーション効果を適用し、スクリーン上のコンテンツを総合的に演出
サブスクリーンの contentPath プロパティを利用して、動的にコンテンツを読み込み
ビデオテンプレートを参照して、効果的にメッセージを発信するためのテクニックを研究。
『Flash ビデオ入門』を読んで、Flash Video の基本を習得

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

著者 Dan Carr

Content

更新日

ページ ツール

タグ

必要条件

ユーザーレベル

この記事に必要なもの

Macromedia Flash MX Professional 2004

Macromedia Flash MX 2004 / Flash MX Professional 2004 用 7.2 アップデータ

Macromedia Flash Communication Server MX