マニュアル キャンセル

Adobe Captivate での SVG の操作

Adobe Captivate で SVG をプロジェクトに挿入する方法について説明します。

注意:

Adobe Captivate では、テキスト、画像、ボタンなどのコンポーネントを含むテキストや画像ブロックなどのコンテンツブロックを導入しています。 このビデオを再生して、コンテンツブロックとコンポーネントについてご覧ください。

SVG は、画質を損なうことなく拡大および縮小できるベクター画像形式で、アニメーションに対応しています。 Adobe Captivate では、イラスト、アイコン、図やその他のビジュアル要素をプロジェクトに追加するなどの目的で SVG を使用できます。

SVG コンテンツブロックを追加

左側のツールバーで、メディアブロックを追加/SVG を選択します。

SVG コンテンツブロックのプロパティを変更

SVG コンテンツブロックを選択すると、ブロックレベルのプロパティを使用できるようになります。整列と間隔、SVG の置き換え、デザインオプション、コンポーネント、外観などのセクションで使用できるプロパティを変更できます。

  1. ビジュアルプロパティパネルのコンテンツ幅スライダーと横の余白は、「整列と間隔」セクションにリンクされています。スライダーを左側から動かすと左余白の値が変更され、右から動かすと右余白の値が変更されます。 左右の横の余白の値を変更すると、「コンテンツ幅」スライダーに変更がまったく同じように反映されます。

    選択済みコンテンツブロックの上側または下側に余白を追加する場合は、縦の余白の値を変更することで、上の余白と下の余白の値を入力します。

    「高さを自動調整」チェックボックスをオンにすると、SVG コンテンツブロックの高さがスライドに合わせて調整されます。

  2. 「アイコンの数」スライダーを動かして、SVG の数を増減します。 SVG は 4 つまで追加できます。

  3. フォルダーアイコンをクリックして、SVG アイコンを置き換えます。 任意のフォルダーをクリックし、アセットまたはコンピューターから SVG を選択します。

  4. デザインのオプションを選択します。デザインオプションには、SVG コンテンツブロックに適用できるクリアなデザイン要素を備えた事前設定済みレイアウトが表示されます。

    詳細については、「Adobe Captivate のデザインオプション」を参照してください。

  5. 「コンポーネント」セクションでは、次の項目を変更できます。

    • アイコン:このオプションは無効のままです。

    「拡大縮小」スライダーを動かして、縦横比を変えずに SVG のサイズを変更します。 利用可能な幅に SVG を合わせるために拡大または縮小されます。

    • タイトル:SVG のタイトルを追加または削除します。
    • キャプション:SVG のキャプションを追加または削除します。
    • 本文:SVG の本文のテキストを追加または削除します。
    • カード:カードを SVG の周囲に追加するか、その周囲から削除します。
    注意:

    コンポーネントセクションでコンポーネントを整列できます。 コンポーネントにカーソルを合わせ、オプション(左揃え、中央揃え、右揃え)を選択します。

  6. 「外観」セクションの「背景」タブでは、コンテンツブロックレベルで色の設定を変更できます。背景色と境界線を追加し、境界線にシャドウを適用します。単色または、線状 / 放射状のグラデーションを選択するか、画像を背景として追加します。

  7. 「カード」を有効にしている場合は、カードのプロパティ(余白など)を変更することや、半径の値を変更してカードの角を丸めることが可能です。

    「カード」タブで、背景色、境界線、またはシャドウも追加できます。

SVG カードのプロパティを変更

Adobe Captivate では SVG カードを選択して、テキスト、キャプション、カード、外観などのプロパティを変更できます。

  1. コンテンツブロックの SVG カードを選択します。

  2. 「コンポーネント」セクションでは、次の項目を変更できます。

    • アイコン:SVG アイコンを追加または削除します。 「拡大縮小」スライダーを動かして、縦横比を変えずに SVG アイコンのサイズを変更します。 利用可能な幅に SVG を合わせるために拡大または縮小されます。
    • タイトル:カード上の SVG のタイトルを追加または削除します。
    • キャプション:カードの SVG キャプションを追加または削除します。
    • 本文:カードの SVG 本文のテキストを追加または削除します。
    • カード:カードを SVG の周囲に追加するか、その周囲から削除します。
    注意:

    コンポーネントセクションでコンポーネントを整列できます。 コンポーネントにカーソルを合わせ、オプション(左揃え、中央揃え、右揃え)を選択します。

  3. 「カード」を有効にしている場合は、カードのプロパティ(余白など)を変更することや、半径の値を変更してカードの角を丸めることが可能です。

    「カード」タブで、背景色、境界線、またはシャドウも追加できます。

SVG ブロック内のテキストを変更

SVG ブロック内の任意のテキスト(タイトルやキャプションなど)を選択し、ビジュアルプロパティパネルでそのプロパティを変更します。

詳細については、「Adobe Captivate でのテキストの操作」を参照してください。

デフォルトの SVG アイコンを置換

Adobe Captivate を使用すると、SVG アイコンを置き換えて外観を変更できます。

  1. コンテンツブロックの SVG カードを選択します。

  2. デフォルトの SVG アイコンを置き換えた後、その SVG アイコンを選択します。 次に、「アセット」を選択してから、アセットまたはコンピューターから SVG を選択します。

    SVG を選択
    SVG を選択

  3. 「アイコンを置換」をクリックします。

SVG の外観を変更

  1. SVG を選択します。

  2. 「ステート」セクションで「追加」をクリックして、ステートフライアウトを起動します。SVG のカスタムステートを追加します。

    詳細については、「Adobe Captivate のステート」を参照してください。

  3. 「アイコン」セクションでフォルダーアイコンを選択して、アセットまたはコンピューターから SVG を置き換えます。

  4. 「アイコンを反転」セクションで、SVG を水平方向または垂直方向に反転します。

  5. 「外観」セクションで「不透明度」スライダーを動かして、SVG の透明度を増減します。

  6. SVG パスを選択し、「単色」ピッカーから塗りつぶし色を適用して色を変更します。

  7. 「バウンディングボックスでのクリックを有効化」チェックボックスをオンにして、実行時のバウンディングボックス内の SVG と空白部のクリックを可能にします。

ヘルプをすばやく簡単に入手

新規ユーザーの場合