Fügen Sie Captivate-Projekten interaktive Schaltflächen hinzu und fügen Sie den Schaltflächen Status hinzu.

Über Schaltflächen kann man am einfachsten ein Standardobjekt zu den Captivate-Folien hinzufügen.

Sie können die Interaktivität Ihrer Adobe Captivate-Projekte erhöhen, indem Sie Schaltflächen hinzufügen. Um eine Schaltfläche hinzuzufügen, verwenden Sie die Standardschaltfläche (ein weißes Rechteck). Sie können außerdem benutzerdefinierte Schaltflächenbilder importieren. Größe und Position der Schaltflächen in einer Folie können nach Belieben verändert werden. Sie können bestimmen, was passiert, wenn der Benutzer auf die Schaltfläche klickt.

Hinzufügen einer interaktiven Schaltfläche

In Captivate können Sie einer Schaltfläche mehr Interaktionen hinzufügen und eine beliebige Aktion ausführen, wenn Sie auf die Schaltfläche klicken.

Hinzufügen einer interaktiven Schaltfläche:

  1. Klicken Sie im Hauptmenü auf Interaktionen > Schaltfläche. Auf der Folie sehen Sie, dass die Schaltfläche eingefügt wurde.

    Button
  2. Wenn Sie die Schaltfläche in die Folie eingefügt haben, können Sie die Eigenschaften der Schaltfläche im Bedienfeld des Eigenschafteninspektors ändern.

    Button properties

    Sie können den Stil der Schaltfläche (transparent oder Bild) und die Schaltflächenschriftart ändern.

  3. Um der Schaltfläche eine Aktion oder eine Interaktion hinzuzufügen, wählen Sie die Schaltfläche aus und klicken Sie auf die Registerkarte „Aktion“, wie unten dargestellt:

    Button actions
  4. Zeigen Sie Erfolgs-, Fehler- und Tipp- Beschriftungen an, falls erforderlich.

    Button sfh
    • Erfolg: Wählen Sie diesesKontrollkästchenum eine Beschriftung anzugeben, die angezeigt wird, wenn der Benutzer auf die Schaltfläche klickt.
    • Fehler: Wählen Sie diesesKontrollkästchenum eine Beschriftung anzugeben, die angezeigt wird, wenn der Benutzeraußerhalbder Schaltfläche klickt.
    • Tipp: Wählen Sie diesesKontrollkästchenum einen Tipp anzugeben, der Benutzern angezeigt werden soll. Der Tipp wird angezeigt, wenn der Benutzer die Maus über die Schaltfläche bewegt.

    Sie können eine Schaltfläche jederzeit löschen, indem Sie sie wählen und die Taste „Entf“ drücken. Wenn Sie eine Schaltfläche löschen, werden alle verknüpften Objekte (z. B. Erfolgs- und Fehlermeldungen) ebenfalls gelöscht.

  5. Projekt in der Vorschau anzeigen oder veröffentlichen.

AlsBeispielerstellen Sie ein Projekt mit einer interaktiven Schaltfläche, die, wenn darauf geklickt wird, ein Objekt ausblendet. Wenn Sie erneut auf die Schaltfläche klicken, können Sie das Objekt sehen.

Erstellen Sie eine Variable myVar und setzen Sie den Wert auf null. Bei Erfolg wählen Sie im Bedienend „Erweiterte Aktionen“ eine bedingte Aktion mit der if-Anweisung.

Wenn der Wert von myVar null ist, blendet die Aktion das Objekt aus und erhöht den Wert von myVar auf eins.

Hinzufügen einer Smartform als Schaltfläche

Smartformen umfassen zahlreiche Kategorien, in denen Formen wie Pfeile, Schaltflächen und einfache Formen sofort zur Hand sind. Sie können diese Formen schnell und einfach in Ihre Adobe Captivate-Projekte einfügen und dort ändern.

Sie können eine Form in eine Schaltfläche konvertieren und Interaktivität hinzufügen.

  1. Öffnen Sie die Folie, der Sie eine Schaltfläche hinzufügen möchten.

  2. Klicken Sie im Hauptmenü auf Formen >, wählen Sie eine beliebige Smartform.

  3. Wählen Sie die Schaltfläche aus und ändern Sie die Eigenschaften der Schaltflächen im Bedienfeld des Eigenschafteninspektors.

    Button Smart Shape properties
  4. Wählen Sie das Als Schaltfläche verwenden-Kontrollkästchenund definieren Sie die Aktion, die ausgeführt wird, wenn auf die Schaltfläche geklickt wird.

    Button Smart Shape Use as Button
  5. Projekt in der Vorschau anzeigen oder veröffentlichen.

Hinzufügen eines Bilds als Schaltfläche

In eLearning-Projekten gibt es Situationen, in denen Sie als eLearning-Entwickler ein Bild importieren und als Schaltfläche verwenden wollten. In früheren Versionen von Captivate waren dafür mehrere Schritte erforderlich. Sie mussten ein Bild importieren, eine Smartform darüber hinzufügen, die Deckkraft ändern und dann die Smartform als Schaltfläche verwenden. Es war eher eine Problemumgehung als ein Workflow.

In Captivate (2019 release) Update 2 können Sie ein Bild als Schaltfläche hinzufügen und diese interaktiv machen. Sie können das Objekt als Schaltfläche verwenden, um eine Aktion auszulösen und Status zuzuweisen.

Dieser Workflow verbessert nicht nur Ihre Produktivität, sondern bietet auch eine einfachere Möglichkeit zum Erstellen von Schaltflächen.

Sie können sowohl JPG/BMP- als auch Vektorbilder als Schaltfläche verwenden. Die folgenden Dateiformate werden für Bilddateien unterstützt:

·       JPEG, JPG

·       GIF

·       PNG

·       BMP

·       ICO

·       EMF

·       WMF

·       POT, POTX, PICT

Um ein Bild zu konvertieren und als Schaltfläche zu verwenden, gehen Sie wie folgt vor:

 
Bild als Schaltfläche
  1. Öffnen Sie ein Projekt in Captivate.

  2. Um ein Bild einzufügen, klicken Sie auf Medien > Bild und wählen Sie ein Bild aus.

  3. Wählen Sie auf der Bühne das Bild aus.

  4. Wählen Sie im Eigenschafteninspektor die Option Als Schaltfläche verwenden.

  5. Definieren Sie auf der Registerkarte Aktionen die Aktion, nachdem Sie auf die Schaltfläche geklickt haben, wenn Sie eine Vorschau des Projekts anzeigen oder das Projekt veröffentlicht haben.

Assets

Die Assets für das Beispielprojekt werden in der folgenden ZIP-Datei bereitgestellt. Entpacken Sie die Datei und kopieren Sie die  Inhalte auf Ihren Computer.

Herunterladen

Einrichten der Bühne

  1. Erstellen eines Responsive-Projekts.

     
  2. Klicken Sie im Projekt in der Symbolleiste auf „Fluid Box“ und zwei horizontale Fluid Boxes werden hinzugefügt.

     
    Fluid Boxes
    Fluid Boxes
  3. Fügen Sie auf der rechten Fluid Box das Bild conclusion_img_bottom.png hinzu.

     
    Bild einfügen
    Bild einfügen
  4. Fügen Sie Dave und Angie in der linken Fluid Box hinzu.

     
    Dave und Angie
    Dave und Angie
  5. Fügen Sie in der rechten Fluid Box eine Smartform mit dem Titel Image as button demo (Demo für Bild als Schaltfläche) hinzu.

     
    Smartform einfügen
    Smartform einfügen
  6. Fügen Sie Sprechblasen für Dave und Angie ein. Entsperren Sie auch beide Objekte aus der Fluid Box.

     
    Sprechblasen einfügen
    Sprechblasen einfügen

Objekten Aktionen zuweisen

Sobald die Bühne eingerichtet ist, erstellen Sie als Nächstes eine Variable mit erweiterten Aktionen und weisen Sie den erweiterten Aktionen die Schaltflächenaktionen zu.

 
  1. Erstellen Sie die Variable _toggle. Der Anfangsstatus dieser Variablen ist 0. Wenn Sie auf eine Schaltfläche klicken, wird der Status der Variablen 1. Weitere Informationen finden Sie unter Variablen in Captivate.

     
    Variable erstellen
    Variable erstellen
  2. Erstellen Sie die erweiterten Aktionen.

     
    1. Die erste erweiterte Aktion blendet beide Sprechblasen aus, wenn Sie das Projekt starten. Nennen Sie die Aktion hide_bubbles.

       
      Aktion „hide_bubbles“
      Aktion „hide_bubbles“

      Wählen Sie im Eigenschafteninspektor unter der Registerkarte „Aktionen“ die Aktionhide_bubbles.

       
      Aktion auswählen
      Aktion auswählen
    2. Die zweite erweiterte Aktion toggle_Dave zeigt bei ihrem Aufruf Daves Sprechblase an, wenn Sie auf Dave klicken. Die Variable _toggle ändert ihren Wert zu 1, wenn Sie auf Dave klicken. Wenn die Sprechblase nicht mehr angezeigt wird, wird der Wert von _toggle zu 0.

       
      Umschalten
      Umschalten

    3. Die zweite erweiterte Aktion toggle_Angie zeigt bei ihrem Aufruf Angies Sprechblase an, wenn Sie auf Angie klicken. Die Variable _toggle ändert ihren Wert zu 1, wenn Sie auf Angie klicken. Wenn die Sprechblase nicht mehr angezeigt wird, wird der Wert von _toggle zu 0.

       
      Angie umschalten
      Angie umschalten
  3. Konvertieren Sie Dave und Angie in Schaltflächen. Wählen Sie das Bild und im Eigenschafteninspektor das Kontrollkästchen Als Schaltfläche verwenden.

     
    Als Schaltfläche verwenden
    Als Schaltfläche verwenden
  4. Weisen Sie Dave und Angie ihrer jeweiligen erweiterten Aktion zu.

     
  5. Nachdem Sie Ihr Projekt erstellt haben, müssen Sie es für Ihre Benutzer verfügbar machen. Dafür müssen Sie Ihr Projekt veröffentlichen. Mit Adobe Captivate können Sie Ihr Projekt an mehreren Ausgabeorten veröffentlichen:

    ·       Ihrem Computer

    ·       iOS/Android

    ·       Adobe Connect

     
SVG als Schaltfläche

SVG als Schaltfläche verwenden

 

In diesem Update können Sie auch eine skalierbare Vektorgrafik (SVG) in eine Schaltfläche konvertieren. Der Vorgang ähnelt dem Erstellen anderer Schaltflächentypen als Bild.

 
  1. Klicken Sie in der Symbolleiste auf „Medien“ > „SVG“ und wählen Sie eine SVG aus.

     
  2. Aktivieren Sie im Eigenschafteninspektor die Option Als Schaltfläche verwenden.

     
  3. Weisen Sie auf der Registerkarte Aktionen eine Aktion aus der Dropdown-Liste Bei Erfolg der Schaltfläche zu.

     

SVG-Füllung

Sie können dem Bild eine Füllfarbe zuweisen. Gehen Sie dazu wie folgt vor:

 
  1. Wählen Sie die SVG auf der Bühne aus.

     
  2. Doppelklicken Sie auf der Bühne auf die SVG-Datei.

     
  3. Wählen Sie für die SVG einen beliebigen Pfad aus und wenden Sie eine Farbe aus der Farbpalette an. In der SVG können Sie mithilfe eines Pfads Linien, Kurven, Bögen und mehr erstellen. Ein Pfad ist auch eine Kombination aus mehreren Formen, z. B. geraden oder gekrümmten Linien. Ein Pfad kann so komplex sein wie eine Reihe von Polygonzügen. Daher ist es wichtig, den richtigen Pfad zu kennen, auf den eine Farbe angewendet werden kann. Die folgenden Screenshots zeigen beispielsweise einen Pfad, der mit Farbe ausgefüllt wurde. Im ersten Bild ist der Pfad rot ausgefüllt. Im zweiten Bild ist der Pfad grün ausgefüllt.

    Die blaue Grenze in der SVG-Datei zeigt den in der SVG-Datei ausgewählten Pfad an. Wenn Sie die Farbe ändern, ändert sie sich nur für diesen Pfad.

     
    Rot
    Grün

Hinzufügen von Status zu den Schaltflächen

Um den Schaltflächen Status hinzuzufügen,

  1. Konvertieren Sie ein Bild in eine Schaltfläche.

  2. Klicken Sie im Eigenschafteninspektor auf Statusansicht.

  3. Ändern Sie die Eigenschaften der Status „RollOver“ und „Down“.

  4. Verlassen Sie die Statusansicht und zeigen Sie das Projekt in der Vorschau an.

Die Schaltflächen sollten den Status ändern, wenn sie verwendet werden. Sie können dem Bild auch einen besuchten Status und einen benutzerdefinierten Status als Schaltfläche hinzufügen.

Referenz auf Schaltflächeneigenschaft

Um die Eigenschaften einer Schaltfläche anzuzeigen, wählen Sie die Schaltfläche auf der Folie. Der Eigenschafteninspektor zeigt die Eigenschaften der Schaltfläche an. Wenn Sie die Eigenschaften ändern, werden die Eigenschaften sofort auf die ausgewählte Instanz der Schaltfläche angewendet.

Interaktive Schaltflächeneigenschaften

Interactive button properties
ID Beschreibung
1 Wählen Sie Text, Transparent oder Bild.
2 Schaltflächenbeschriftung.
3 Ändern Sie die Eigenschaften der Schrift der Schaltflächenbeschriftung.
4 Ändern Sie die Effekte der Schaltflächenbeschriftung.
5 Ändern Sie Schatten- und Spiegelungs-Eigenschaften der Schaltfläche.
6 Wählen Sie diese Option aus, um die Eigenschaften auf alle Objekte desselben Typs anzuwenden.

Smartformen als Schaltflächeneigenschaften

Eigenschaft Beschriftungsbeschreibung

1. Ändern Sie die Smartform.

2. Ändern Sie die Hintergrundfarbe und Deckkraft der Smartform.

3. Ändern Sie die Kontureigenschaften der Schaltfläche.

4. Ändern Sie die Eigenschaften der Schrift der Schaltflächenbeschriftung.

1. Fügen Sie Symbol, eine benutzerdefinierte Variable oder einen Hyperlink ein.

2. Ändern Sie die Eigenschaften der Schaltflächenbeschriftungsfarbe.

3. Ändern Sie Schaltflächenänder.

4. Ändern Sie die Eigenschaften der Schaltflächenschatten.

  1. Wählen Sie die durchzuführende Aktion, wenn Sie auf die Schaltfläche klicken.
  2. Weisen Sie der Schaltfläche ein Tastaturkürzel zu.
  3. Nach Klicken auf die Schaltfläche Beschriftung „Erfolg/Fehlschlagen/Hinweis“ anzeigen.
  4. Wählen Sie den Typ des Cursors und aktivieren/deaktivieren Sie „Klickgeräusch“.
  1. Wählen Sie eine Audiodatei/einen Clip, die/der abgespielt wird, wenn Sie auf die Schaltfläche klicken.
  2. Ändern Sie die Größe und Position der Schaltfläche.
  3. Ändern Sie die Winkelposition der Schaltfläche. Das Seitenverhältnis der Schaltfläche wird beibehalten, wenn Sie die Größe anpassen.

Die Verwendung interaktiver Schaltflächen in einem Drag & Drop-Vorgang Interaktionsprojekt

Drag-and-Drop-Interaktionen bieten eine interessante Möglichkeit zum Bewerten des Benutzerwissens. Durch diese Interaktion können Benutzer Fragen beantworten, indem sie Objekte zu bestimmten Bereichen oder Objekten ziehen.

Eine Drag-and-Drop-Interaktion besteht aus einer Ziehen-Quelle und einem Ablegen-Ziel. Die Benutzer ziehen die Ziehen-Quellen und legen sie an Ablegen-Zielen ab.

  1. Erstellen Sie eine Drag & Drop-Interaktionsprojekt, das die Ziehen-Quellen und Ablegen-Ziele und die Zuordnungen, wie unten dargestellt, festlegt.

    Weitere Informationen über das Erstellen von Drag & Drop-Interaktion finden Sie unter Drag-and-Drop-Interaktionen in Adobe Captivate.

    Drag and Drop design
  2. Fügen Sie entsprechende Erfolgs- und Fehlerbeschriftungen hinzu.

  3. Um Rückgängig- und Zurücksetzen-Schaltflächen zum Projekt hinzuzufügen, navigieren Sie zum Drag & Drop-Bedienfeld und aktivieren Sie die Optionen „Rückgängig“ und „Zurücksetzen“.

    DnD Undo Reset 1
  4. Um den Schaltflächen Status hinzuzufügen, wählen Sie eine Schaltfläche aus, klicken Sie auf den Eigenschafteninspektor und fügen Sie Schaltflächeneigenschaften für den Rollover- und Down-Status hinzu.

    DnD button states
  5. Projekt in der Vorschau anzeigen oder veröffentlichen.

Die Verwendung interaktiver Schaltflächen in einem Quiz-Projekt

In Captivate können Sie Status zu Quizschaltflächen hinzufügen. Sie können einen Rollover-Status und/oder einen Down-Status zu Schaltflächen hinzufügen.

  1. Erstellen Sie ein Quizprojekt mit den Schaltflächen, wie im unten dargestellt:

    Quiz buttons
  2. Fügen Sie den Schaltflächen Status hinzu:

    • Senden
    • Zurück
    • Überspringen
    • VorwärtsReview
    • Rückwärts-Review
    • Löschen
  3. Projekt in der Vorschau anzeigen oder veröffentlichen.

Verwendung interaktiver Schaltflächen in einem Folienmaster in einem Responsive-Modus

Sie können den Schaltflächen Status in einem Folienmaster im Responsive-Modus hinzufügen und den Folienmaster in Ihrem Projekt verwenden.

  1. Erstellen Sie ein Responsive-Projekt (Strg+H) und fügen Sie einen Folienmaster (Einfügen > Inhaltsfolienmaster) in das Projekt ein.

  2. Fügen Sie den Titel, den Untertitel und die Platzhalter für den Inhalt hinzu. Fügen Sie dem Projekt drei Smartformen hinzu und konvertieren Sie diese in Schaltflächen.

    Responsive-Layout des Folienmasters
    Responsive-Layout des Folienmasters

  3. Hinzufügen von Status zu den Schaltflächen. Wählen Sie Schaltflächen und fügen Sie im Eigenschafteninspektor die Schaltflächeneigenschaften für den Rollover- und Down-Status hinzu.

    Schaltflächenstatus
    Schaltflächenstatus

  4. Schließen Sie die Folienmasteransicht. Fügen Sie eine leere Inhaltsfolie ein und wählen Sie aus der Liste den Folienmaster, den Sie erstellt haben, aus der Liste der Folienmaster. Fügen Sie einen Namen, einen Untertitel und den Inhalt in die Folie ein.

    Zeigen Sie das Projekt in der Vorschau an oder veröffentlichen Sie es.

  5. Um Fluid Boxes in das Projekt einzufügen, klicken Sie im Eigenschafteninspektor auf Fluid Boxes vorschlagen. Die Fluid Box erstellt automatisch Container entsprechend dem Layout der Objekte.

    Richten Sie die Objekte vertikal oder horizontal aus.

    Weitere Informationen finden Sie unter Fluid Boxes in Adobe Captivate.

    Folienmaster Fluid Box - Layout
    Folienmaster Fluid Box - Layout

Automatisches Anpassen der Größe von Schaltflächen

Adobe Captivate kann die Größe einer Schaltfläche oder Beschriftung automatisch an den Text in der Schaltfläche anpassen. Wenn Sie den Text bearbeiten, passt sich die Größe der Schaltfläche automatisch dem Umfang des neuen Textes an.

  1. Wählen Sie in einem geöffneten Projekt „Bearbeiten“ > „Voreinstellungen“ (Windows) oder „Adobe Captivate“ > „Voreinstellungen“ (Mac OS).

  2. Wählen Sie im Dialogfeld „Voreinstellungen“ im Menü „Global“ die Option „Standardwerte“.

  3. Wählen Sie im Bereich „Allgemein“ rechts die Option „Schaltflächengröße automatisch anpassen“.

Hinweis:

Es empfiehlt sich, die Größe von Schaltflächen zu ändern, bevor Sie die Größe des Projekts ändern. Durch die Änderung der Größe eines Projekts wird die Größe der Schaltflächen nicht automatisch geändert.

Ändern von Schaltflächen auf Fragenfolien

Sie können einige Eigenschaften der Schaltflächen auf Fragenfolien ändern. Bei den Standardschaltflächen handelt es sich um die Schaltflächen „Löschen“, „Zurück“, „Senden“ und „Überspringen“.

  1. Wählen Sie die Frageschaltfläche, die Sie ändern möchten.

  2. Legen Sie im Fenster „Quizeigenschaften“ die Werte für die verschiedenen Optionen fest.

Hinweis:

Ändern Sie die Größe von Schaltflächen, bevor Sie die Größe des Projekts ändern. Durch die Änderung der Größe eines Projekts wird die Größe der Schaltflächen nicht automatisch geändert.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie