Adobe Captivate プロジェクトへのインタラクティブボタンの追加

最終更新日 : 2021年4月28日

Adobe Captivate プロジェクトにインタラクティブボタンを追加し、ボタンにステートを追加します。

Mac OS Catalina に対応した Adobe Captivate (2019 release) 用のアップデートが公開されました。今すぐアップデートを入手しましょう。
Adobe Captivate（2019 release）にアセットパネルが読み込まれない場合は、詳細から解決策を確認してください。

ボタンは Captivate のスライドに標準オブジェクトを追加する際に最も使用されるものの 1 つです。

ボタンを追加することにより、Adobe Captivate プロジェクトのインタラクティビティを向上させることができます。ボタンを追加するには、デフォルトのボタンスタイル（白無地の長方形）を使用します。カスタムボタン画像を読み込むこともできます。ボタンのサイズ変更およびスライド上での位置変更をすることができます。ユーザーがボタンをクリックした場合に起こる動作を定義できます。

インタラクティブボタンの追加

Captivate ではボタンにインタラクションを追加し、ボタンがクリックされると任意のアクションが実行されるようにできます。

インタラクティブボタンを追加するには：

メインメニューで、インタラクション／ボタンをクリックします。スライドにボタンが挿入されます。
ボタンがスライドに挿入されると、プロパティインスペクターパネルでボタンのプロパティを変更できます。

ボタンのスタイル（透明または画像）やボタンのフォントを変更できます。
ボタンにアクションまたはインタラクションを追加するには、次のようにボタンを選択して「アクション」タブをクリックします。
必要に応じて、「成功時のキャプション」、「失敗時のキャプション」、「ヒントのキャプション」を表示します。
- 成功：ユーザーがボタンをクリックしたときに表示されるキャプションを含める場合は、このチェックボックスを選択します。
- 失敗：ユーザーがボタンの外側をクリックしたときに表示されるキャプションを含める場合は、このチェックボックスを選択します。
- ヒント：ユーザーに表示するヒントを指定する場合は、このチェックボックスを選択します。ヒントは、ユーザーがボタンの上にマウスを移動したときに表示されます。
ボタンを選択して Delete キーを押すと、いつでもボタンを削除できます。ボタンを削除した場合、それに関連付けられたすべてのオブジェクト（成功および失敗キャプションなど）も同時に削除されます。
プロジェクトをプレビューまたはパブリッシュします。

As 例に示すように、インタラクティブボタンが付いているプロジェクトを作成します。このボタンをクリックすると、オブジェクトが非表示になります。ボタンを再びクリックすると、オブジェクトが表示されます。

myVar 変数を作成し、この値をゼロに設定します。高度なアクションパネルで、ボタンが正常にクリックされた場合に実行される、if ステートメントが使用された条件付きアクションを選択します。

このアクションでは myVar の値がゼロであることを確認すると、オブジェクトを非表示にして、myVar の値を 1 に増やします。

スマートシェイプのボタンとしての追加

スマートシェイプには、矢印、ボタン、基本図形など、多くのカテゴリのすぐに使用できるシェイプが含まれます。 Adobe Captivate プロジェクト内で、このようなシェイプをすばやく簡単に挿入および変更することができます。

スマートシェイプをボタンに変換し、このボタンにインタラクティビティを追加できます。

ボタンを追加するスライドを開きます。
メインメニューで「シェイプ」をクリックし、任意のスマートシェイプを選択します。
ボタンを選択し、プロパティインスペクターパネルでボタンのプロパティを変更します。
「ボタンとして使用」チェックボックスを選択し、ボタンがクリックされた場合のアクションを定義します。
プロジェクトをプレビューまたはパブリッシュします。

画像をボタンとして追加する

ボタンとしての画像

eラーニングの開発者は eラーニングのプロジェクトに画像を読み込んでボタンとして使用する場合があります。前のバージョンの Captivate では、画像をボタンとして追加する場合に複数の手順を実行する必要がありました。画像を読み込んでその画像上にスマートシェイプを追加し、不透明度を変更した後、スマートシェイプをボタンとして使用する必要がありました。これはワークフローというより回避策に近い方法でした。

Captivate (2019 release) アップデート 2 では、画像をボタンとして追加し、そのボタンにインタラクティブ機能を追加できます。面倒な作業は Captivate が実行します。オブジェクトをボタンとして使用し、任意のアクションをトリガーして、ステートを割り当てることができます。

このワークフローは生産性を向上するだけでなく、ボタンの作成を容易にします。

jpg／bmp 画像およびベクター画像の両方をボタンとして使用できます。サポートされている画像ファイルのファイル形式は次のとおりです。

· Jpeg、jpg

· Gif

· Png

· Bmp

· Ico

· Emf

· Wmf

· Pot、potx、pict

画像を変換し、その画像をボタンとして使用するには、以下の操作を実行します。

Captivate でプロジェクトを開きます。
画像を挿入するには、メディア／画像をクリックして、任意の画像を選択します。
ステージ上で、画像を選択します。
プロパティインスペクターで、「ボタンとして使用」オプションを選択します。
「アクション」タブで、プロジェクトのプレビュー時またはプロジェクトのパブリッシュ時にボタンをクリックした後のアクションを定義します。

ステージの設定

レスポンシブプロジェクトを作成します。
プロジェクトのツールバーで Fluid Box をクリックし、2 つの水平方向の Fluid Box をクリックします。

Fluid Box
右側の Fluid Box に conclusion_img_bottom.png 画像を追加します。

画像を挿入する
左側の Fluid Box に Dave と Angie を追加します。

Dave と Angie
右側の Fluid Box に Image as button demo というタイトルのスマートシェイプを追加します。

スマートシェイプを挿入する
Dave と Angie の両方の吹き出しを挿入します。また、Fluid Box で両方のオブジェクトのロックを解除します。

吹き出しを挿入する

オブジェクトへのアクションの割り当て

ステージを設定した後、変数と高度なアクションを作成し、高度なアクションにボタンアクションを割り当てます。

変数 _toggle を作成します。この変数の初期ステートは 0 です。ボタンをクリックすると、この変数のステートが 1 になります。詳しくは、Captivate の変数を参照してください。

変数を作成する
高度なアクションを作成します。
1. 1 つ目の高度なアクションは、プロジェクトの起動時に両方の吹き出しを非表示にします。このアクションの名前を hide_bubbles にします。
  
  吹き出しを非表示にするアクション
  
  プロパティインスペクターの「アクション」タブで、アクション hide_bubbles を選択します。
  
  アクションを選択する
2. 2 つ目の高度なアクション toggle_ Dave は、Dave がクリックされて呼び出されると、Dave の吹き出しを表示します。Dave をクリックすると、変数 _toggle の値が 1 に変わります。吹き出しが非表示になると、_toggle の値が 0 になります。
3. 3 つ目の高度なアクション toggle_Angie は、Angie がクリックされて呼び出されると、Angie の吹き出しを表示します。Angie をクリックすると、変数 _toggle の値が 1 に変わります。吹き出しが非表示になると、_toggle の値が 0 になります。
  
  Angie の切り替え
Dave および Angie の両方をボタンに変換します。画像を選択し、プロパティインスペクターで「ボタンとして使用」チェックボックスを選択します。

ボタンとして使用する
Dave と Angie の両方に高度なアクションを割り当てます。
プロジェクトを作成した後、ユーザーがプロジェクトを使用できるようにする必要があります。そのためには、プロジェクトをパブリッシュする必要があります。 Adobe Captivate では、複数の出力場所にプロジェクトをパブリッシュできます。

·       お使いのコンピューター

·       iOS または Android

·       Adobe Connect

SVG をボタンに変換する

このアップデートでは Scalable Vector Graphics（SVG）のボタンを作成することもできます。プロセスは他のタイプのボタンを画像に変換する方法と同様です。

ツールバーでメディア／SVG をクリックし、任意の SVG を選択します。
プロパティインスペクターで、「ボタンとして使用」オプションを有効にします。
「アクション」タブの「成功時」ドロップダウンリストで、任意のアクションをボタンに割り当てます。

SVG を塗りつぶし

画像に塗りつぶし色を適用できます。画像に塗りつぶし色を適用するには、以下の操作を実行します。

ステージで SVG を選択します。
ステージで SVG をダブルクリックします。
SVG で任意のパスを選択し、カラーパレットの色を適用します。SVG ではパスを使用して線、曲線、円弧などを作成できます。パスは複数のシェイプ（直線、曲線など）の組み合わせでもあります。パスは複雑になることがあるため（一連の折れ線など）、色の適用対象として適切なパスについて理解しておく必要があります。例えば、以下のスクリーンショットは色で塗りつぶされたパスを示しています。1 つ目の画像ではパスが赤で塗りつぶされています。2 つ目の画像ではパスが緑で塗りつぶされています。

SVG 上の青の境界線は SVG で選択されたパスを示します。このパスの色のみが指定した色で変更されます。

ボタンにステートを追加する

ボタンにステートを追加するには、次の手順に従います。

画像をボタンに変換します。
プロパティインスペクターで、「ステートビュー」をクリックします。
「ロールオーバー」および「押下」ステートのプロパティを変更します。
ステートビューを終了して、プロジェクトをプレビューまたはパブリッシュします。

アクションが実行されると、ボタンのステートが変わります。表示したステートおよびカスタムステートをボタンとして画像に追加することもできます。

ボタンのプロパティ参照

ボタンのプロパティを表示するには、スライドでそのボタンを選択します。プロパティインスペクターでボタンのプロパティが表示されます。プロパティを変更すると、選択したボタンのインスタンスに変更が瞬時に適用されます。

インタラクティブボタンのプロパティ

Id	説明
1	テキスト、透明、画像から選択します。
2	ボタンラベル。
3	ボタンラベルのフォントのプロパティを変更します。
4	ボタンラベルのエフェクトを変更します。
5	ボタンのシャドウプロパティとリフレクションプロパティを変更します。
6	同じタイプのすべてのオブジェクトにプロパティを適用する場合に選択します。

ボタンのプロパティとしてのスマートシェイプ

プロパティ	ラベルの説明
	1. スマートシェイプを変更します。 2. スマートシェイプの背景色と不透明度を変更します。 3. ボタンの線のプロパティを変更します。 4. ボタンラベルのフォントのプロパティを変更します。
	1. 記号、ユーザー定義変数、またはハイパーリンクを挿入します。 2. ボタンラベルの色のプロパティを変更します。 3. ボタンの余白を変更します。 4. ボタンシャドウのプロパティを変更します。
	ボタンをクリックしたときに実行するアクションを選択します。ボタンにショートカットキーを割り当てます。ボタンをクリックした際に成功 / 失敗 / ヒントのキャプションを表示します。カーソルの種類を選択し、クリック音を有効または無効にします。
	ボタンをクリックしたときに再生されるオーディオファイルまたはクリップを選択します。ボタンのサイズと位置を修正します。ボタンの配置角度を変更します。ボタンのサイズを変更するときに、高さと幅の比率を維持します。

ドラッグ＆ドロップインタラクションプロジェクトでのインタラクティブボタンの使用

ドラッグ＆ドロップのインタラクションは、楽しみながらユーザーの知識にアクセスする方法を提供しています。このインタラクションにより、ユーザーは指定されたエリアやオブジェクトにオブジェクトをドラッグ＆ドロップすることで質問に回答できます。

ドラッグ＆ドロップインタラクションではドラッグソースとドロップターゲットを使用することになります。ユーザーはドラッグソースをドラッグし、ドロップターゲットにそれらをドロップします。

次のように、ドラッグソース、ドロップターゲット、マッピングを指定して、ドラッグ＆ドロップインタラクションプロジェクトを作成します。

ドラッグ＆ドロップインタラクションの作成について詳しくは、 Adobe Captivate のドラッグ＆ドロップインタラクションを参照してください。
適切な成功時のキャプションと失敗時のキャプションを追加します。
プロジェクトに「元に戻す」および「リセット」ボタンを追加するには、ドラッグ＆ドロップパネルに移動して、「元に戻す」および「リセット」オプションを有効にします。
ボタンにステートを追加するには、ボタンを選択し、「プロパティインスペクター」をクリックします。次に、「ロールオーバー」および「押下」ステートのボタンのプロパティを追加します。
プロジェクトをプレビューまたはパブリッシュします。

クイズプロジェクトのインタラクティブボタンの使用

Captivate ではクイズボタンにステートを追加できます。ボタンには「ロールオーバー」ステートまたは「押下」ステートを追加できます。

次のように、ボタンが付いたクイズプロジェクトを作成します。
次のボタンにステートを追加します。
- 送信
- 戻る
- スキップ
- レビューを進める
- レビューを戻る
- クリア
プロジェクトをプレビューまたはパブリッシュします。

マスタースライドのインタラクティブボタンのレスポンシブモードでの使用

マスタースライドのボタンにレスポンシブモードでステートを追加し、そのマスタースライドをプロジェクトで使用できます。

レスポンシブプロジェクトを作成し（Ctrl + H）、プロジェクトにマスタースライドを挿入します（挿入／コンテンツマスタースライド）。
タイトル、サブタイトル、コンテンツプレースホルダーを追加します。3 つのスマートシェイプをプロジェクトに追加してボタンに変換します。

マスタースライドのレスポンシブレイアウト
ボタンにステートを追加します。ボタンを選択し、プロパティインスペクターパネルで「ロールオーバー」および「押下」ステートのボタンのプロパティを追加します。

ボタンのステート
マスタースライドビューを終了します。コンテンツスライドを挿入し、作成したマスタースライドをマスタースライドのリストから選択します。タイトル、サブタイトル、コンテンツをスライドに挿入します。

プロジェクトをプレビューまたはパブリッシュします。
Fluid Box をプロジェクトに挿入するには、プロパティインスペクターで「Fluid Box を推奨」をクリックします。オブジェクトのレイアウトに従って Fluid Box でコンテナが自動的に作成されます。

オブジェクトを垂直方向または水平方向に揃えます。

Fluid Box について詳しくは、Captivate の Fluid Box を参照してください。

マスタースライドの Fluid Box のレイアウト