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

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

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

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

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

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

  1. メインメニューで、インタラクション/ボタンをクリックします。スライドにボタンが挿入されます。

    Button
  2. ボタンがスライドに挿入されると、プロパティインスペクターパネルでボタンのプロパティを変更できます。

    Button properties

    ボタンのスタイル(透明または画像)やボタンのフォントを変更できます。

  3. ボタンにアクションまたはインタラクションを追加するには、次のようにボタンを選択して「アクション」タブをクリックします。

    Button actions
  4. 必要に応じて、「成功時のキャプション」、「失敗時のキャプション」、「ヒントのキャプション」を表示します。

    Button sfh
    • 成功:ユーザーがボタンをクリックしたときに表示されるキャプションを含める場合は、このチェックボックスを選択します。
    • 失敗:ユーザーがボタンの外側をクリックしたときに表示されるキャプションを含める場合は、このチェックボックスを選択します
    • ヒント:ユーザーに表示するヒントを指定する場合は、このチェックボックスを選択します。ヒントは、ユーザーがボタンの上にマウスを移動したときに表示されます。

    ボタンを選択して Delete キーを押すと、いつでもボタンを削除できます。ボタンを削除した場合、それに関連付けられたすべてのオブジェクト(成功および失敗キャプションなど)も同時に削除されます。

  5. プロジェクトをプレビューまたはパブリッシュします。

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

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

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

デモ - インタラクティブボタン

 

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

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

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

  1. ボタンを追加するスライドを開きます。

  2. メインメニューで「シェイプ」をクリックし、任意のスマートシェイプを選択します。

  3. ボタンを選択し、プロパティインスペクターパネルでボタンのプロパティを変更します。

    Button Smart Shape properties
  4. ボタンとして使用チェックボックスを選択し、ボタンがクリックされた場合のアクションを定義します。

    Button Smart Shape Use as Button
  5. プロジェクトをプレビューまたはパブリッシュします。

次のデモでは、スマートシェイプを挿入し、これをボタンに変換して、ボタンにプロパティを割り当てます。

次に、ボタンが正常にトリガーされたときに実行される高度なアクションを作成します。高度なアクションでは、作成した変数が「John」という名前と等しいかどうかを確認します。条件に基づいてアクションに入力が適用され、2 つ目のスライドに名前が出力されます。

デモ - ボタンとしてのスマートシェイプ

 

ボタンのプロパティ参照

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

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

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

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

プロパティ ラベルの説明

1. スマートシェイプを変更します。

2. スマートシェイプの背景色と不透明度を変更します。

3. ボタンの線のプロパティを変更します。

4. ボタンラベルのフォントのプロパティを変更します。

1. 記号、ユーザー定義変数、またはハイパーリンクを挿入します。

2. ボタンラベルの色のプロパティを変更します。

3. ボタンの余白を変更します。

4. ボタンシャドウのプロパティを変更します。

  1. ボタンをクリックしたときに実行するアクションを選択します。
  2. ボタンにショートカットキーを割り当てます。
  3. ボタンをクリックした際に成功 / 失敗 / ヒントのキャプションを表示します。
  4. カーソルの種類を選択し、クリック音を有効または無効にします。
  1. ボタンをクリックしたときに再生されるオーディオファイルまたはクリップを選択します。
  2. ボタンのサイズと位置を修正します。
  3. ボタンの配置角度を変更します。ボタンのサイズを変更するときに、高さと幅の比率を維持します。

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

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

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

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

    ドラッグ&ドロップインタラクションの作成について詳しくは、 Adobe Captivate のドラッグ&ドロップインタラクションを参照してください。

    Drag and Drop design
  2. 適切な成功時のキャプションと失敗時のキャプションを追加します。

  3. プロジェクトに「元に戻す」および「リセット」ボタンを追加するには、ドラッグ&ドロップパネルに移動して、「元に戻す」および「リセット」オプションを有効にします。

    DnD Undo Reset 1
  4. ボタンにステートを追加するには、ボタンを選択し、「プロパティインスペクター」をクリックします。次に、「ロールオーバー」および「押下」ステートのボタンのプロパティを追加します。

    DnD button states
  5. プロジェクトをプレビューまたはパブリッシュします。

デモ - ドラッグ&ドロッププロジェクトのインタラクティブボタン

 

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

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

  1. 次のように、ボタンが付いたクイズプロジェクトを作成します。

    Quiz buttons
  2. 次のボタンにステートを追加します。

    • 送信
    • 戻る
    • スキップ
    • レビューを進める
    • レビューを戻る
    • クリア
  3. プロジェクトをプレビューまたはパブリッシュします。

デモ - クイズプロジェクトのボタンのステートの変更

 

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

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

  1. レスポンシブプロジェクトを作成し(Ctrl + H)、プロジェクトにマスタースライドを挿入します(挿入/コンテンツマスタースライド)。

  2. タイトル、サブタイトル、コンテンツプレースホルダーを追加します。3 つのスマートシェイプをプロジェクトに追加してボタンに変換します。

    マスタースライドのレスポンシブレイアウト
    マスタースライドのレスポンシブレイアウト

  3. ボタンにステートを追加します。ボタンを選択し、プロパティインスペクターパネルで「ロールオーバー」および「押下」ステートのボタンのプロパティを追加します。

    ボタンのステート
    ボタンのステート

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

    プロジェクトをプレビューまたはパブリッシュします。

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

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

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

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

ボタンサイズの自動変更

ボタン上のテキストの長さに合わせてボタンまたはキャプションのサイズを自動的に変更するように、Adobe Captivate を設定できます。テキストを編集した場合、新しいテキストの長さに合わせてボタンのサイズが変更されます。

  1. 開いているプロジェクトで、編集/環境設定(Windows)または Adobe Captivate/環境設定(Mac OS)を選択します。

  2. 環境設定ダイアログボックスで、グローバルメニューの「デフォルト」を選択します。

  3. 右側の一般パネルで「ボタンの自動サイズ調整」を選択します。

注意:

プロジェクトのサイズを変更する前にボタンのサイズを変更することをお勧めします。プロジェクトのサイズを変更しても、ボタンのサイズは自動的に変更されません。

質問スライドのボタンの変更

質問スライド上のボタンのプロパティの一部を変更することができます。標準ボタンは、「クリア」、「戻る」、「送信」および「スキップ」です。

  1. 変更する質問ボタンを選択します。

  2. クイズのプロパティパネルで、各種オプションの値を設定します。

注意:

プロジェクトのサイズを変更する前に、すべてのボタンのサイズを変更します。プロジェクトのサイズを変更しても、ボタンのサイズは自動的に変更されません。

サンプルプロジェクトのダウンロード

Captivate で魅力的な学習コンテンツを作成する方法の詳細については、次のプロジェクトをダウンロードします。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー