この文書の手順では、画像や Adobe Captivate プロジェクトファイルのサンプルなどのアセットを使用する必要があります。 独自のアセットとサンプルを使用することもできます。 ただし、次の zip ファイルをコンピューターにダウンロードして展開することをお勧めします。
最終更新日 :
2022年1月5日
オブジェクトエフェクトを使用すると、スライド上の特定の領域またはオブジェクトにすばやくユーザーの注意を引くことができます。このセクションでは、プロジェクトのオブジェクトにエフェクトを適用します。
アセットとサンプル
オブジェクトへのエフェクトの適用
Captivate のエフェクトは、下に示す緑の三角形から始まり、赤い四角で終わります。 エフェクトはオブジェクトの中央で終了します。
このチュートリアルに付属するサンプルプロジェクトで、次のスライドを使用して左右の矢印にエフェクトを適用します。
- 右矢印はスライドの右側から来なければなりません。
- 左矢印はスライドの左側から来なければなりません。
-
ダウンロードした zip フォルダーで、サンプルサブフォルダーに移動し、以下のファイルを開きます。
apply-effects.cptx
注意：このチュートリアルで提供されているプロジェクトファイルのダウンロードは必須ではありません。 ダウンロードしなくても、この手順を行うことができます。 ただし、上記スライドと類似したスライドを含む新しいプロジェクトを Captivate で作成する必要があります。
-
フィルムストリップで、概要というタイトルのスライドに移動します。
-
左矢印にエフェクトを適用するには、スライド上の矢印を右クリックし、「エフェクトを適用」を選択します。
-
エフェクトセクションでは、3 番目のドロップダウンリストから「エントランス」カテゴリを選択します。
エントランスで使用できるエフェクトは下のパネルに表示されています。
スライド上のオブジェクトへのエフェクトを表示するには、ポインターをエフェクトの上に移動します。
-
「EaseInRight」エフェクトを選択してください。
-
右矢印のエフェクトを「EaseInLeft」に設定します。
エフェクトを作成するときは、短い間隔で進行状況をプレビューすることをお勧めします。 このようにして、作業を進めながらスライドのエフェクトがどのように見えるかを知ることができます。
-
ツールバーで「プレビュー」をクリックして、「スライドを再生」を選択します。
完了した手順をプレビューしましょう。
ツールバーの「プレビュー」をクリックして、プロジェクトを選択し、プロジェクト全体をプレビューします。
イベントベースエフェクトの適用
ユーザーのアクション（イベント）がトリガーするオブジェクトにエフェクトを適用できます。 オブジェクトに対してアクションを実行したときにのみトリガーされるオブジェクトにエフェクトを適用できます。
サンプルプロジェクトでは、オフィス配置図のサマンサのデスクを強調するエフェクトを適用します。 この手順の最後のスライドは次のようになります。
ユーザーが「サマンサのデスクはどこですか」というキャプションのついたボタンをクリックすると、オフィス配置図のサマンサのデスクに青色で強調表示するエフェクトがトリガーされます。
-
ダウンロードした zip フォルダーで、サンプルサブフォルダーに移動し、以下のファイルを開きます。
apply-effects.cptx
注意：このチュートリアルで提供されているプロジェクトファイルのダウンロードは必須ではありません。 ダウンロードしなくても、この手順を行うことができます。 ただし、上記スライドと類似したスライドを含む新しいプロジェクトを Captivate で作成する必要があります。
-
フィルムストリップで、サマンサというタイトルのスライドに移動します。
このスライドで、まずオフィス配置図のサマンサのデスクの周りに青色の強調表示を配置しましょう。
-
ツールバーで「シェイプ」をクリックし、長方形のシェイプを選択します。
-
オフィス配置図のサマンサのデスクのの上に長方形の図形を描きます。
-
プロパティインスペクターで、長方形に次のプロパティを入力します。
名前：sams_desk（後でこのオブジェクトに効果を適用するときに名前を使用します）
不透明度：0%（このオブジェクトの下にサマンサのデスクの画像が見えるようにします）
プロパティインスペクターが作業エリアの右側に表示されていない場合は、ツールバーの右端の「プロパティ」をクリックします。
-
ツールバーで、「インタラクション」をクリックし、「ボタン」を選択します。
ボタンオブジェクトがスライドに配置されます。
-
プロパティインスペクターで、ボタンに次のプロパティを入力します。
サマンサのデスクはどこですか
-
「アクション」タブに移動します。
-
成功時ドロップダウンリストで「エフェクトを適用」を選択します。
-
オブジェクト名ドロップダウンリストで「sams_desk」を選択し、
をクリックします。 -
エフェクトセクションで、3 番目のドロップダウンリストから「強調」を選択します。
-
エフェクトのリストで、「拡大回転」を選択します。
完了した手順をプレビューしましょう。
ツールバーの「プレビュー」をクリックして、プロジェクトを選択し、プロジェクト全体をプレビューします。
ロールオーバーオブジェクトの使用
Captivate のロールオーバーオブジェクトを使用すると、ユーザーがスライド上のあらかじめ定義されたロールオーバー領域にポインターを合わせたときにコンテンツを条件付きで表示することができます。 ロールオーバーオブジェクトは、ほとんどのデスクトップアプリケーションで使用されているツールチップに似ています。 ただし、テキストのほかに、Captivate のロールオーバーオブジェクトを使用して画像やスライド（スライドレット）まで表示することができます。
ロールオーバーキャプションの追加
注意：
この項で説明する手順の HTML5 出力は、ここ [内部メモ：ホスティング待ち] で提供されています。次の手順の各手順を実行するときに参照として使用できます。
次のスライドで、ユーザーがオフィス配置図画像上にポインターを合わせたときに表示されるロールオーバーキャプションを追加してみましょう。
-
ダウンロードした zip フォルダーで、サンプルサブフォルダーに移動し、以下のファイルを開きます。
apply-effects.cptx
注意：このチュートリアルで提供されているプロジェクトファイルのダウンロードは必須ではありません。 ダウンロードしなくても、この手順を行うことができます。 ただし、上記スライドと類似したスライドを含む新しいプロジェクトを Captivate で作成する必要があります。
-
プロジェクトを開き、フィルムストリップでサマンサというタイトルのスライドに移動します。
-
ツールバーで「オブジェクト」をクリックし、「ロールオーバーキャプション」を選択します。
ロールオーバーキャプションをスライドに追加するときに、オブジェクトには以下の 2 つの部分があります。
ロールオーバーキャプション：条件付き表示されるテキストキャプション（ツールチップのような表示）
ロールオーバー領域：サイズ変更可能な領域で、ユーザーはテキストキャプションを表示するためにポインターを置く必要があります。
-
テキストキャプションで、次のテキストを入力します。
LUNARSPHERE STUDIOS、4階、配置図
-
ハンドルを使用して、ロールオーバー領域がスライドの右側にある配置図の画像を覆うように、ロールオーバー領域の位置とサイズを変更します。
-
この手順の最初に表示されているように、画像の左下にテキストキャプションの位置を変更します。
-
ロールオーバーキャプションがどのように表示されるかをプレビューしましょう。
ツールバーの「プレビュー」をクリックしてプロジェクトを選択し、プロジェクト全体をプレビューします。
完了した手順をプレビューしましょう。
ツールバーの「プレビュー」をクリックして、プロジェクトを選択し、プロジェクト全体をプレビューします。
ロールオーバー画像の追加
注意：
この項で説明する手順の HTML5 出力は、ここ [内部メモ：ホスティング待ち] で提供されています。次の手順の各手順を実行するときに参照として使用できます。
ロールオーバー画像オブジェクトは、ユーザーがスライド上のロールオーバー領域の上にポインターを置くと、画像を表示します。
次のスライドに長方形を追加しましょう。 次に、ユーザーがシェイプ上にポインターを合わせると、サマンサのチームの画像が表示されるように、ロールオーバー画像を追加します。
-
ダウンロードした zip フォルダーで、サンプルサブフォルダーに移動し、以下のファイルを開きます。
apply-effects.cptx
注意：このチュートリアルで提供されているプロジェクトファイルのダウンロードは必須ではありません。 ダウンロードしなくても、この手順を行うことができます。 ただし、上記スライドと類似したスライドを含む新しいプロジェクトを Captivate で作成する必要があります。
-
フィルムストリップで、サマンサというタイトルのスライドに移動します。
-
ツールバーで「シェイプ」をクリックし、長方形のシェイプを選択します。
-
上記のように長方形を描きます。
-
シェイプをダブルクリックして、次のテキストを入力します。
ポインターをここに置いて、サマンサのチームを表示
次に、このシェイプの上にロールオーバー画像を追加します。
-
オブジェクトをクリックして、「ロールオーバー画像」を選択します。
コンピューターから画像ファイルを選択するためのダイアログボックスが表示されます。
-
ダウンロードした zip フォルダーで、アセットサブフォルダーに移動します。
-
ファイル sams_team を選択して「開く」をクリックします。
ロールオーバー画像をスライドに追加するときに、オブジェクトには以下の 2 つの部分があります。
ロールオーバー画像：条件付きで表示される画像。
ロールオーバー領域：サイズ変更可能な領域で、ユーザーは画像を表示するためにポインターを合わせる必要があります。
-
ハンドルを使用して、上記の手順 3 で追加したシェイプを覆うようにロールオーバー領域の位置とサイズを変更します。
-
この手順の始めに示されているように、ロールオーバ画像を再配置します。
完了した手順をプレビューしましょう。
ツールバーの「プレビュー」をクリックして、プロジェクトを選択し、プロジェクト全体をプレビューします。
ロールオーバースライドレットの追加
注意：
この項で説明する手順の HTML5 出力は、ここ [内部メモ：ホスティング待ち] で提供されています。次の手順の各手順を実行するときに参照として使用できます。
ロールオーバースライドレットを使うと、Captivate オブジェクトをロールオーバーオブジェクトに追加することができます。 このようにして、ユーザーがロールオーバー領域上にポインターを合わせると、スライドレットのコンテンツ全体が表示されます。 テキストや画像以外にも、何かを条件付きで表示したい場合に便利な機能です。
次のスライドで、ユーザーが画像にポインターを合わせたときに、サマンサのその他の情報を表示するためのロールオーバースライドレットを追加してみましょう。
-
ダウンロードした zip フォルダーで、サンプルサブフォルダーに移動し、以下のファイルを開きます。
apply-effects.cptx
注意：このチュートリアルで提供されているプロジェクトファイルのダウンロードは必須ではありません。 ダウンロードしなくても、この手順を行うことができます。 ただし、上記スライドと類似したスライドを含む新しいプロジェクトを Captivate で作成する必要があります。
-
プロジェクトを開き、フィルムストリップでサマンサというタイトルのスライドに移動します。
-
ツールバーで「オブジェクト」をクリックし、「ロールオーバースライドレット」を選択します。
ロールオーバースライドレットをスライドに追加するときに、オブジェクトには以下の 2 つの部分があります。
スライドレット：条件付きで表示される Captivate オブジェクトコンテナ。
ロールオーバー領域：サイズ変更可能な領域で、スライドレットコンテンツを表示するには、ユーザーがポインターを合わせる必要があります。
次のスライドに長方形を追加しましょう。
注意：スライドレットに他のオブジェクトを追加することはできますが、わかりやすくするために、長方形だけを追加しています。
-
スライドレットを選択し、「シェイプ」をクリックして、長方形のシェイプを選択します。
-
スライドレット内に長方形を描きます。
-
長方形のシェイプに次のテキストをコピー＆ペーストします。
私について：私は創業当初から Lunarsphere Studios で働いています。 「ノー」と言われるのは好きではありません。問題のみでなく解決策も提示してほしいと考えています。
私の好きな映画：カサブランカ
私の最高の休暇：カイロでのギザピラミッドツアー
死ぬまでにやっておきたいことリスト：ゴードン・ラムゼイの料理レッスンを受ける
-
プロパティインスペクターを使用して、テキストの色を白に、シェイプの色を赤に変更します。
-
ハンドルを使用して、スライドの左側にあるサマンサの写真を覆うようにロールオーバー領域の位置とサイズを変更します。
完了した手順をプレビューしましょう。
ツールバーの「プレビュー」をクリックして、プロジェクトを選択し、プロジェクト全体をプレビューします。
プレビューとパブリッシュ
このセクションでは、Captivate のエフェクトについて多くのことを説明しました。
オブジェクトにエフェクトを適用しました。 イベントベースのエフェクトを作成し、スライドにコンテンツを条件付き表示するためにロールオーバーオブジェクトを追加しました。
進捗状況をプレビューしてみましょう。
ツールバーの「プレビュー」をクリックしてプロジェクトを選択し、プロジェクト全体をプレビューします。
不足しているものがある場合は、この記事の適切なセクションを確認して、プロジェクトに必要な更新を行います。
すべてがうまくいっているようなら、プロジェクトをパブリッシュしましょう。
-
ツールバーで「パブリッシュ」をクリックし 、 「コンピューターにパブリッシュ」を選択します。
マイコンピューターにパブリッシュダイアログボックスが表示されます。
-
別名でパブリッシュドロップダウンリストで、「HTML5/SWF」を選択します。
-
「出力フォーマット」オプションで、「HTML5」を選択します。
-
「パブリッシュ」をクリックします。
エフェクト使用について詳しくは、オブジェクトエフェクトを参照してください。
