Erstellen Sie Responsive-Projekte in Adobe Captivate, die nahtlos für alle Geräte und Bildschirmgrößen angepasst werden. Verwenden Sie Responsive-Projekte, um ein umfassendes Lernerlebnis für Ihre Teilnehmer zu erstellen und machen Sie das Lernen interessant und interaktiv. In diesem Dokument erfahren Sie, wie Sie Responsive-Projekte in Adobe Captivate erstellen und anpassen.

Assets und Beispiele

Für die Verfahren in diesem Dokument müssen Sie Assets wie Bilder und Beispieldateien für Adobe Captivate-Projekte verwenden. Sie können Ihre eigenen Assets und Beispiele verwenden. Es wird jedoch empfohlen, dass Sie die folgende ZIP-Datei auf Ihren Computer herunterladen und extrahieren:

Erstellen eines Responsive-Projekts

Beginnen wir mit dem Erstellen eines Responsive-Projekts in Adobe Captivate.

  1. Wählen Sie auf dem Begrüßungsbildschirm von Adobe Captivate auf der Registerkarte Neu die Option Responsive-Projekt und klicken Sie dann auf Erstellen.

    welcome-screen-responsive

    Adobe Captivate erstellt ein Responsive-Projekt mit einer einzigen Folie.

    In einem Responsive-Projekt in Adobe Captivate finden Sie auf der Vorschauleiste über der Folie Optionen, um das Projekt in verschiedenen Bildschirmgrößen und auf unterschiedlichen Endgeräten schnell anzuzeigen.

    responsive-slide
  2. Um das Projekt auf verschiedenen Geräten in der Vorschau anzeigen, wählen Sie die gewünschte Option Vorschau in der Dropdownliste.

  3. Mit dem Vorschau-Schieberegler auf der rechten Seite der Vorschau-Leiste können Sie die Größe der aktuellen Folie ändern und den Inhalt dynamisch in der Vorschau anzeigen.

    Wenn Sie den Schieberegler nach links oder rechts bewegen, wird der Inhalt der Folie an den Bildschirm angepasst.

    responsive-slide-smaller

 

Weitere Informationen zu diesem Thema finden Sie unter Projektdesign mit automatischer Anpassung in Adobe Captivate.

Hinzufügen von Fluid Boxes zu Folien

Sie können auch Responsive-Projekte mit Adobe Captivate mithilfe des Fluid Box-Layouts erstellen.Es ordnet die Objekte auf einer Folie an, sodass sich die Objekte vorhersehbar verhalten, wenn die Folie unterschiedliche Bildschirmgrößen und Geräte enthält. Eine Fluid Box ist ein benutzerfreundliches Layoutmodell für eLearning-Designer. Sie können untergeordnete Objekte in eine beliebige Richtung auslegen und sie flexibel anpassen und dann den Bildbereich anpassen.

Ein Fluid Box-Container erweitert die Objekte, um den verfügbaren freienPlatz zu füllen,oder verkleinert die Objekte, um einen Überlauf zu verhindern. Elemente in einer Fluid Box sind richtungsagnostisch. Die Objekte können sich dem verfügbaren Platz anpassen.

Fügen wir unserem Projekt eine leere Folie hinzu und verwenden wir dann Fluid Boxes, um die Interaktivität der Folie zu verbessern. Die Folie am Ende dieses Vorgangs wird wie folgt angezeigt:

responsive-slide-withboxes

Die obige Folie verwendet zwei horizontale Fluid Boxes.

  1. Navigieren Sie im Ordner „Heruntergeladene Dateien“ zum Unterordner Muster und öffnen Sie:

    create-responsive-projects.cptx

    Hinweis:

    Sie müssen die Projektdatei, die mit diesem Lernprogramm geliefert wird, nicht unbedingt herunterladen. Sie können weiterhin die Schritte in diesem Verfahren ausführen. Stellen Sie jedoch sicher, dass Sie ein Responsive-Projekt in Adobe Captivate erstellen.

  2. Wenn die erste Folie im Filmstreifen ausgewählt ist, klicken Sie in der Symbolleiste auf Folien und wählen Sie Leere Folie.

    Fügen wir der aktuellen Folie zunächst zwei horizontale Fluid Boxes hinzu. 

  3. Klicken Sie in der Symbolleiste auf Fluid Box und wählen Sie Horizontal.

  4. Wählen Sie im Untermenü das zweite Feld, um zwei horizontale Fluid Boxes hinzuzufügen.

    horizontal_fluidboxsubmenu

    Wenn Sie Fluid Boxes auf eine Folie platzieren, werden die Felder gleichmäßig über die Folie verteilt. Der Schieberegler dazwischen ermöglicht es Ihnen, die Größe der Felder zu ändern.

    responsive-slide-fluidbox-horizontal
  5. Bewegen Sie den Schieberegler nach links, um die Größe der horizontalen Felder zu ändern.

    Danach platzieren Sie zwei vertikale Fluid Boxes im rechten horizontalen Feld.

  6. Um das Objekt im rechten horizontalen Feld zu platzieren, wählen Sie das Feld aus.

  7. Klicken Sie in der Symbolleiste auf Fluid Box und wählen Sie Vertikal.

  8. Wählen Sie im Untermenü das zweite Feld, um zwei vertikale Fluid Boxes hinzuzufügen.

    vertical_fluid_boxsubmenu
  9. Bewegen Sie den Schieberegler nach oben, um die Größe der vertikalen Felder zu ändern.

  10. Testen Sie die Interaktivität dieser Folie, indem Sie den Schieberegler in Vorschau nach links und rechts bewegen.

    Alternativ können Sie die verschiedenen Geräte aus der Dropdown-Liste Vorschauauswählen.

Hinzufügen von Objekten zu Fluid Boxes

Im vorherigen Abschnitt haben Sie gelernt, wie Sie die horizontalen und vertikalen Fluid Boxes einer Folie hinzufügen.

Lassen Sie uns Objekte zu Fluid Boxes auf der Folie hinzufügen.

Hinweis:

Sie können keine Rollover-Objekte zu Fluid Boxes hinzufügen, da diese Objekte auf mobilen Geräten nicht funktionieren.

Die Folie am Ende dieses Vorgangs wird wie folgt angezeigt:

lunasphere-studios-team
  1. Navigieren Sie im Ordner „Heruntergeladene Dateien“ zum Unterordner Muster und öffnen Sie:

    create-responsive-projects-with-fluid.cptx

    Hinweis:

    Sie müssen die Projektdatei, die mit diesem Lernprogramm geliefert wird, nicht unbedingt herunterladen. Sie können weiterhin die Schritte in diesem Verfahren ausführen. Es wird jedoch empfohlen, dass Sie eine Folie ähnlich der Folie erstellen, die am Anfang des Abschnitts Hinzufügen vonFluid Boxeszu Folien oben angezeigt wurde.

  2. Wechseln Sie zur Folie mit den horizontalen und vertikalen Fluid Boxes.

  3. Um eine Textbeschriftung im linken horizontalen Feld hinzuzufügen, wählen Sie das Feld auf der Folie aus.

  4. Klicken Sie in der Symbolleiste auf Text und wählen Sie dann Textbeschriftung.

    Geben Sie den folgenden Text in das Textfeld ein:

    LUNARSPHERE STUDIOS

    Sie können Formatänderungen am Text mithilfe des Eigenschafteninspektors vornehmen. Um den Eigenschafteninspektor anzuzeigen, klicken Sie auf Eigenschaften in der rechten Ecke der Symbolleiste.

  5. Um einen Textbeschriftung im unteren rechten vertikalen horizontalen Feld hinzuzufügen, wählen Sie das Feld auf der Folie.

  6. Klicken Sie in der Symbolleisteauf Text. undwählen Sie dann „Textbeschriftung“.

    Geben Sie den folgenden Text ein oder kopieren Sie ihn und fügen Sie ihn in die Textbeschriftung ein:

    Madison und Robert gehören zum Lernteam von Lunarsphere Studios. Genau wie Sie werden sie jeden Tag mit neuen Herausforderungen und Möglichkeiten konfrontiert, um ihre Fähigkeiten und die Grenzen des Machbaren zu testen. Heute gehen Sie als Madison und Robert auf Reisen und verwenden zum ersten Mal Adobe Captivate.

  7. Um ein Bild im oberen rechten Feld hinzuzufügen, wählen Sie das Feld auf der Folie aus.

  8. Klicken Sie in der Symbolleiste auf Medien und wählen Sie dann „Bild“.

    Ein Dialogfeld wird angezeigt, in dem Sie die Bilddatei von Ihrem Computer auswählen können.

  9. Navigieren Sie im Ordner „Heruntergeladene Dateien“ zum Unterordner Assets.

  10. Wählen Sie die Datei lunasphere-studios-team.png und öffnen Sie sie.

    Das Bild wird im oberen rechten vertikalen Feld platziert.

    Beachten Sie, wie das Bild an die Fluid Box angepasst wird, in die es platziert wurde.

  11. Testen Sie die Interaktivität dieser Folie, indem Sie den Schieberegler in Vorschau nach links und rechts bewegen.

    Alternativ können Sie die verschiedenen Geräte aus der Dropdown-Liste Vorschauauswählen.

Jetzt, wo wir eine Folie mit Inhalt haben, schauen wir uns in derVorschauan, wie diese Objekte auf Geräten angezeigt werden.

Klicken Sie in der Symbolleisteauf Vorschau undwählen Sie „Projekt“.

 

Weitere Informationen zu Fluid Boxes finden Sie unter Fluid Boxes in Adobe Captivate.

Hinzufügen von interaktiven Simulationen zu Projekten

Sie können Simulationsschritte in einem Responsive-Projekt in den folgenden Modi erfassen:

  • Demo.
  • Bewertung.
  • Schulung.

Um die Schritte zum Erstellen einer PowerPoint-Präsentation aufzuzeichnen, fügen Sie eine kurze Softwaresimulation im Demo-Modus ein.

  1. Navigieren Sie im Ordner „Heruntergeladene Dateien“ zum Unterordner Muster und öffnen Sie:

    create-responsive-projects.cptx

    Hinweis:

    Sie müssen die Projektdatei, die mit diesem Lernprogramm geliefert wird, nicht unbedingt herunterladen. Sie können weiterhin die Schritte in diesem Verfahren ausführen.  Stellen Sie jedoch sicher, dass Sie ein Responsive-Projekt in Adobe Captivate erstellen.

  2. Klicken Sie in der Symbolleiste auf Folien und wählen Sie „Software-Simulation“.

  3. Wählen Sie im Dialogfeld Zusätzliche Folien aufzeichnen die Folie aus, nach der Sie die Softwaresimulation einfügen wollen, und klicken Sie auf OK.

  4. Das Dialogfeld enthält Optionen zum Aufzeichnen der Demo. Wählen Sie die folgenden Optionen:

    • Wählen Sie in der Dropdown-Liste PowerPoint.
    • In der Dropdown-Liste Modus müssen Sie sicherstellen, dass Demomodus ausgewählt ist.
    software_simulationinsertstartup
  5. Klicken Sie auf Aufzeichnen.

    Wenn der Zähler auf 1 herunter gezählt hat, wird die PowerPoint-Anwendung im Vordergrund angezeigt.

  6. Führen Sie die folgenden Schritte in PowerPoint aus:

    1. Wählen Sie das Menü „Datei“.
    2. Wählen Sie „Neu“.
    3. Wählen Sie ein Design.
    4. Klicken Sie im Dialogfeld auf „Erstellen“.
  7. Beenden der Simulation:

    • Unter Windows drücken Sie die Taste „Ende“ auf der Tastatur.
    • Auf dem Mac klicken Sie auf das Adobe Captivate-Symbol in der oberen Leiste.

    Wenn Sie Ihre Simulation beenden, kommt Adobe Captivate wieder in den Vordergrund.

    Die Demo-Folien werden in Ihr Projekt eingefügt.

  8. Die aufgezeichneten Folien werden dem Captivate-Projekt hinzugefügt. Beachten Sie, dass in jeder Simulationsfolie ein blaues Rechteck vorhandenist. Das blaue Rechteck ist der Fokusbereich der Simulation. Es ist nur im Bearbeitungsbereich sichtbarundverschwindet, wenn Sie das Projekt in der Vorschau anzeigen oder veröffentlichen. Beachten Sie, dass die Größe dieses blauen Rechtecks die unterstützte Mindestgerätegröße für Responsive-Projekte in Captivate ist.

    responsive-simulation-slide

    Jede Folie der Simulation enthält auch eine blaue Begrenzungsbox. Dieser Bereich der Folie wird für das Gerät mit der Mindestgröße angezeigt. Sie können diese Box um die Folie verschieben, wenn Sie einen anderen Bereich, als den, den Adobe Captivate standardmäßig ausgewählt hat, anzeigen wollen.

Weitere Informationen über die Software-Simulationen in Adobe Captivate finden Sie unter Erstellen von Software-Simulationen.

Sehen wir uns eine Vorschau auf die Responsive-Simulation an.

Klicken Sie in der Symbolleisteauf Vorschau undwählen Sie „Projekt“.

Hinzufügen von Responsive-Quiz zu Projekten

Wenn Sie eine Quizfolie einem Responsive-Projekt hinzufügen, fügt Adobe Captivate Fluid Boxes hinzu, um die Interaktivität des Inhaltsinder Folie zu gewährleisten.

Um dieses Verhalten auszuprobieren, erstellen wir ein einfaches Quiz mit einer einzigen Wahr-/Falsch-Frage.

  1. Navigieren Sie im Ordner „Heruntergeladene Dateien“ zum Unterordner Muster und öffnen Sie:

    create-responsive-projects.cptx

    Hinweis:

    Sie müssen die Projektdatei, die mit diesem Lernprogramm geliefert wird, nicht unbedingt herunterladen. Sie können weiterhin die Schritte in diesem Verfahren ausführen. Stellen Sie jedoch sicher, dass Sie ein Responsive-Projekt in Adobe Captivate erstellen.

  2. Klicken Sie in der Symbolleiste auf Folien und wählen Sie Fragenfolie.

  3. Aktivieren Sie im Dialogfeld Fragen einfügen Wahr/Falschund klicken Sie aufOK.

    Eine Fragenfolie wird nach dem Folientitel Zusammenfassung eingefügt.

    Nach der Fragenfolie fügt Adobe Captivate außerdem eine Folie Quizergebnisse ein.

    Wenn Sie einem Responsive-Projekt eine Fragenfolie hinzufügen, stellt Adobe Captivate alle Objekte der Frage in Fluid Boxes bereit, um die Interaktivität zu gewährleisten:

    responsive-question-slide

    Beachten Sie auch die Optionen für „Schieberegler in Vorschau“, mit denen Sie schnell die Interaktivität der Folie überprüfen können.

  4. Geben Sie in der Fragenfolie im Textfeld Folgendes ein (Überschreiben des Platzhaltertextes):

    Sie können keine Responsive-Projekte mit Adobe Captivate erstellen.

  5. Wählen Sie in den Auswahlmöglichkeiten Falsch.

Weitere Informationen zu Quizfragen in Adobe Captivate finden Sie unter Erstellen von Quiz.

Lassen Sie uns die Quizfrage in der Vorschau betrachten und ausprobieren.

Klicken Sie in der Symbolleiste auf Vorschau und wählen Sie dann „Projekt“.

Konvertieren von Nicht-Responsive-Projekten in Responsive-Projekte

Wenn Sie ein Adobe Captivate-Projekt haben, das nicht interaktiv ist, bietet Adobe Captivate eine einfache Methode, um das Projekt in ein Responsive-Projekt zu konvertieren.

Nehmen wir ein Nicht-Responsive-Projekt und konvertieren es in ein Responsive-Projekt.

Bevor wir das Projekt konvertieren, sehen wir uns in der Vorschau an, wie dieses Projekt aussieht.

Öffnen Sie in der Symbolleiste Vorschau und wählen Sie dann „Projekt“.

  1. Navigieren Sie im Ordner „Heruntergeladene Dateien“ zum Unterordner Muster und öffnen Sie:

    non-responsive-project.cptx

    Hinweis:

    Sie müssen die Projektdatei, die mit diesem Lernprogramm geliefert wird, nicht unbedingt herunterladen. Sie können weiterhin die Schritte in diesem Verfahren ausführen. Stellen Sie jedoch sicher, dass Sie ein Responsive-Projekt in Adobe Captivate erstellen.

    Beachten Sie, dass der Schieberegler in Vorschau, der oberhalb der Folien in einem Responsive-Projekt angezeigt wird, nicht auf allen Folien oben in einem Nicht-Responsive-Projekt angezeigt wird. Das ist ein nützlicher visueller Hinweis, um zu überprüfen, ob ein Projekt interaktiv ist oder nicht.

  2. Wählen Sie im Menü Datei Als Responsive speichern.

    Da nicht alle Adobe Captivate-Objekte in Responsive-Projekten unterstützt werden, wird das folgende Dialogfeld angezeigt:

    responsive-project-unsupported-objectes
  3. Klicken Sie auf Nicht unterstützte Elementen anzeigen.

    responsive-project-unsupported-objects-list

    Das Fenster HTML5 Tracker zeigt die Liste der nicht unterstützten Objekte und Folien an.

  4. Klicken Sie auf das nicht unterstützte Objekt im Fenster.

    Sie werden auf die Folie mit dem Objekt geleitet. Außerdem wird das Objekt auf der Folie ausgewählt.

    Wenn beispielsweise ein Benutzer die Ausgabe auf mobilen Geräten anzeigt, darf Ihr Projekt keine Rollover-Objekte enthalten.

  5. Löschen Sie die ausgewählte Rollover-Beschriftung von der Folie.

    Beachten Sie, dass das Objekt jetzt nicht im Bereich HTML5 Tracker angezeigt wird.

  6. Nachdem Sie die nicht unterstützten Objekte entfernt haben, wählen Sie im Menü Datei die Option Als Responsive speichern.

  7. Klicken Sie im Dialogfeld auf Speichern.

  8. Wählen Sie im Dialogfeld Speichern unter einen Speicherort auf Ihrem Computer und den Dateinamen für das neu konvertierte Responsive-Projekt.

    Beachten Sie, dass Schieberegler in Vorschau nun über den Folien im konvertierten Projekt angezeigt wird.

Zeigen Sie nach der Konvertierung des Projekts eine Vorschau des neu konvertierten Responsive-Projekts an.

Klicken Sie in der Symbolleiste auf Vorschau und wählen Sie dann Projekt.

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