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

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

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

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

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

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

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

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

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

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

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

1. [ファイル] - [読み込み] - [ステージに読み込み] メニューコマンドを選択します。

2. 読み込むファイルをダイアログボックス内で選択して、[読み込み] ボタンをクリックします。

   なお、読み込むファイル形式によっては、各種オプションを設定するためのダイアログボックスが表示されることもあります。

3. 読み込んだグラフィックを正しい位置に移動します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

スクリーンの追加 / 削除

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

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

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

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

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

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

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

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

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

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

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

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

3. "welcome" スクリーンを選択してから、[ビヘイビア] パネルのプラス記号 (+) をクリックし、メニューから [スクリーン] - [トランジション] を選択します (図 11 参照)。

   

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

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

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

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

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

ページ 5 / 6

前のページ

次のページ