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

ボタンの編集

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

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

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

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

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

デフォルトボタンの変更

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

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

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

1. "controls" スクリーンを選択します。

2. ナビゲーションボタンが配置されているムービークリップをダブルクリックします。そうすると、このムービークリップが開き、編集できる状態になります。

   ここでは、"thumbs" レイヤーに配置されているグラフィックの上に、"buttons" レイヤーの各ボタンが配置されていることに注意してください。"buttons" レイヤーの下にあるボタンのグラフィックを編集するには、まず "buttons" レイヤーをロックしておきます。

3. "thumbs" レイヤーを選択してから、[ファイル] - [読み込み] - [ステージに読み込み] メニューコマンドを選択して、ボタンとして使用する新しいグラフィックを読み込みます。

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

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

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

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

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

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

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

1. Ctrl + L を押すか、[ウィンドウ] メニューから [ライブラリ] を選択して、[ライブラリ] パネルを開きます。

2. ライブラリ内の "Misc" フォルダを開きます (図 6 参照)。

   

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

3. "Thumb Outline Selected" 項目の横にあるアイコンをダブルクリックします。

   緑色のハイライトボックスがステージに表示されるので、この画面上でグラフィックを編集します。

4. ハイライトボックスの線色を変更するには、ハイライトボックスをダブルクリックしてから、ツールバーの [カラー] パレットで新しい色を選択します:

   

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

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

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

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

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

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

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

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

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

1. "controls" スクリーンを選択します。
2. スクリーンの下側にあるナビゲーションボタンが配置されたムービークリップをダブルクリックし、ナビゲーションバーを編集できる状態にします。
3. 新たなボタンを追加するには、既存のボタンをコピーして利用すると簡単です。"buttons" レイヤーにある任意のボタンをクリックして選択し、このボタンをコピー & ペーストします。(コピーした内容は、画面の中央に表示されます。)
4. コピーしたボタンの位置を調整します。
5. "thumbs" レイヤーを選択してから、[ファイル] - [読み込み] - [ステージに読み込み] を選択して、新たなボタンのグラフィックを読み込みます。

6. 新たに追加したボタンをクリックします。ボタンの下にあるグラフィックではなく、ボタンをクリックするように注意してください。ボタンをクリックすると、ボタンを選択したことを示す青色のハイライトボックスが周囲に表示されます (図 7 参照)。

   [プロパティインスペクタ] を利用して、ボタンにインスタンス名を付けます。ボタンにインスタンス名を付けると、このボタンとキューポイントを同期できるようになります。なお、このテンプレートに記述されているコードの場合、ボタンインスタンス名は、ボタンと同期するキューポイント名のあとに「_btn」を付けることが義務づけられています。仮にキューポイント名が「studiomx」の場合、これに対応するボタンインスタンス名は「studiomx_btn」にする必要があります (図 7 参照)。また、Media Component のパラメータに定義したキューポイント名は、同期するスクリーン名と一致する必要もあります。

   

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

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

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

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

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

ページ 4 / 6

前のページ

次のページ