Entwerfen von Responsive-Projekten

Mit dem Entwurf eines Responsive-Projekts mit Adobe Captivate haben Siegroße Vorteilegegenüber Ihren Konkurrenten. Nehmen Sie die Bearbeitungnur einmal vor und der Quellinhalt wird sich für die richtige Darstellung auf Tablets und Smartphones selbst ausrichten. Beginnen Sie mit einer leeren Arbeitsfläche, nehmen Sie auf einem iOS-Gerät auf oder importieren Sie sogar ein Storyboard mit Adobe Captivate Draft. Entwickeln Sie speicherortspezifische, gerätebezogene Lernerlebnisse für mehrere Bildschirme, ohne programmieren zu müssen.

Erstellen Sie ein umfassendes Lernerlebnis für Ihre Teilnehmer und machen Sie das Lernen interessant und interaktiv.

Fluid Boxes in Adobe Captivate

Was ist eine Fluid Box

In der 2017-Version von Adobe Captivate ist eine Fluid Box ein Layoutmodus, der die Anordnung von Objekten auf einer Folie enthält, 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 dann können Sie den Bildbereich anpassen.

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

Verwenden der Fluid Box in Captivate

In Captivate können Sie entweder ein Fluid Box-Layout horizontal oder vertikal in ein Responsive-Projekt einfügen. Je nach Bildschirmgröße, werden die Objekte in einem Fluid Box-Container vergrößert oder verkleinert, ohne dass die Bildschirmbreite beeinträchtigt wird.

In der 2017-Version von Adobe Captivate gibt es zwei neue Elemente in der Objektmenüleiste.

  1. Horizontales Fluid Box-Layout
  2. Vertikales Fluid Box-Layout

Horizontales Fluid Box-Layout

In diesem Beispiel erstellen Sie ein Layout mit einer einzigen Fluid Box mit vier Spielbällen. Die Ansicht ändert sich entsprechend, wenn Sie das Projekt auf einem anderen Gerät in der Vorschau anzeigen.

  1. Erstellen Sie ein einzelnes horizontales Layout. Dieses Layout wird zu einer übergeordneten Fluid Box.

  2. Platzieren Sie die Spielbälle nacheinander aus der Bibliothek in die Fluid Box.

  3. Im Bedienfeld „Eigenschafteninspektor“ werden die folgenden Fluid Box-Eigenschaften aktiviert:

    1. Statisch: Wenn Sie diesesKontrollkästchenaktivieren, überlappen die Objekte innerhalb der Fluid Box und können an eine beliebige Stelle innerhalb der Fluid Box Feld verschoben werden.

      Optional: Wenn Sie diesesKontrollkästchenaktivieren, wird ein Objekt ausgeblendet, wenn seine Breite erreicht wurde. „Optional“ funktioniert nur mit einer Art Umbruch In Zeile komprimieren oder In Spalte komprimieren.

    2. Fluss: Gibt die Richtung an, in der die Objekte in einer Fluid Box angeordnet werden. In einem horizontalen Textfluss werden die Objekte horizontal angeordnet. In einem vertikalen Fluss werden die Objekte vertikal angeordnet.

      1. Horizontal: Wählen Sie die horizontalen Ausrichtungsoptionen für Objekte entlang der Hauptachse. Die folgenden Optionen stehen zur Verfügung:

      2. Links ausrichten: Objekte werden an der linken Seite ausgerichtet. Das erste Objekt befindet sich am Anfang der Achse.

      3. Zentriert ausrichten: Objekte werden an der Mittelachse ausgerichtet

      4. Rechts ausrichten: Objekte werden an der rechten Seite ausgerichtet. Das letzte Objekt befindet sich am Ende der Achse.

      5. Zwischenraum: Objekte werden entlang der Achse gleichmäßig verteilt. Das erste Objekt ist am Anfang der Achse und die letzte Objekt ist am Ende der Achse.

      6. Bereich im Umfeld: Objekte werden gleichmäßig entlang der Achse mit gleichem Abstand um sie bereitgestellt.

    3. Auffüllung: Auffüllung fügt Raum um das Objekt herum hinzu. Um Auffüllung horizontal zu den Objekten hinzuzufügen, geben Sie den Auffüllungswert in Pixeln ein. Negative Werte sind nicht zulässig.

      Gleichmäßiges Verteilen von Objekten: Klicken Sie auf die Schaltfläche, um sicherzustellen, dass alle Objekte in einer Fluid Box mit gleichen Abständen angeordnet sind und gleich groß sind. Beispiel:

      Objekte vor der Verteilung
      Objekte vor der Verteilung
      Objekte nach der Verteilung
      Objekte nach der Verteilung

    4. Umbruchspunkt: Ein Umbruchspunkt ist ein Punkt, der, wenn er erreicht wird, die Objekte umschließt oder die Objekte neu anordnet, wenn sich die Gerätebreite ändert. Wenn beispielsweise der Umbruchspunkt bei 80 % liegt, bei 80 % der Gerätebreite, wird ein Objekt gemäß den Eigenschaften, die in den Umbruchsoptionen definiert sind, in der Fluid Box neu angeordnet.

      Beispiel: Wenn der Vorschaubereich 1024 Pixel breit ist und der Umbruchspunkt auf 50 % festgelegt wird und wenn die Gerätebreitereite von 512 Pixeln breit festgelegt wird, ordnen sich die Objekte selbst neu an.

    5. Umbruch: Definiert, wann und wie die Objekte in einer Fluid Box umgebrochen oder neu angeordnet werden, wenn ein vordefinierter Schwellenwert erreicht wird. Die folgenden Optionen stehen zur Verfügung:

      1. In nächste Zeile umbrechen: Wenn der Umbruchspunkt den Schwellenwert erreicht, wird ein Objekt nach unten in die nächste Zeile verschoben.

        pic1
      2. In Zeile komprimieren: Wenn der Umbruchspunkt den Schwellenwert erreicht, ändern die Objekte ihre Position nicht. Die Objekte passen ihre Größe entsprechend der Größe des Geräts an.

        pic2
      3. In Zeile/Spalte: Wenn der Umbruchspunkt den Schwellenwert erreicht, richten sich die Objekte selbst in einer Spalte aus.

        pic3
      4. Symmetrisch: Wenn der Umbruchspunkt den Schwellenwert erreicht, ordnen sich die Objekte entsprechend der Anzahl der Objekte in der Fluid Box selbst neu an.

        pic4

Vertikales Fluid Box-Layout

In diesem Beispiel erstellen Sie ein Layout mit einer einzigen Fluid Box mit vier Spielbällen. Die Ansicht ändert sich entsprechend, wenn Sie das Projekt auf einem anderen Gerät in der Vorschau anzeigen.

pic5

Wählen Sie im Eigenschafteninspektor den Fluss der Objekte und den Typ des Objektumbruchs aus.

Fluss- und Umbruchoptionen
Fluss- und Umbruchoptionen

Wählen Sie die horizontale Ausrichtung der Objekte „Zentriert“, „Links“ oder „Rechts“.

Optionen für horizontale Ausrichtung
Optionen für horizontale Ausrichtung

Wählen Sie die vertikale Ausrichtung von Objekten.

Optionen für vertikale Ausrichtung
Optionen für vertikale Ausrichtung

Oben ausrichten

pic9

Zentriert ausrichten

pic10

Unten ausrichten

pic11

Zwischenraum

pic12

Abstand drumherum

pic13

Erstellen eines Fluid Box-Projekts mit mehreren Behältern

  1. Erstellen Sie ein Responsive-Projekt Datei > Neues Projekt > Responsive-Projekt oder drücken Sie Strg+H).

  2. Fügen Sie auf einer leeren Folie ein Fluid Box-Layout ein, wie unten gezeigt:

    Fluid Box-Layout
    Fluid Box-Layout
  3. Nachdem Sie das vertikale Layout eingefügt haben, klicken Sie auf einen beliebigen Teil des Layouts. FB_5 ist das übergeordnete Element, das den gesamten Foliencontainer darstellt. Im Bedienfeld „Eigenschafteninspektor“ können Sie die gesamte Hierarchie der einzelnen Fluid Box-Container anzeigen.

    Übergeordnete Fluid Box
    Übergeordnete Fluid Box

    Um die Objekte zu ändern, wählen Sie den entsprechenden Container.

  4. Ziehen Sie die blauen Ziehpunkte im Fluid Box-Container, um die Größe der untergeordneten Container anzupassen.

    pic16

    Wenn Sie auf eine andere Stelle klicken, werden die blaue Ziehpunkte entfernt. Um sie wieder anzuzeigen, führen Sie einen der folgenden Schritte durch:

    • Klicken Sie auf eine beliebige Stelle außerhalb der Bühne und ziehen Sie dann den Mauszeiger auf die Bühne.
    • Klicken Sie auf eine beliebige Stelle im Bühnenbereich und wählen Sie die Fluid Box im Bereich Fluid Box-Auswahl. Sie können sehen, dass die Ziehpunkte wieder angezeigt werden.
  5. Einfügen von Objekten in Container, wie unten dargestellt:

    pic17

    Das Bild oben stellt ein Layout für die Desktops dar (1024x627). Um zu überprüfen, wie sich das Layout auf anderen Geräten verhält, verschieben Sie den Regler oben, um die Änderungen im Layout zu sehen.

    Wenn Sie das Projekt auf verschiedenen Geräten in der Vorschau anzeigen, können Sie sehen, dass die Fluid Box-Container sich entsprechend intelligent gemäß der Gerätebreite ausrichten.

    pic18

    Im Falle eines Gerätes mit kleinerer Breite:

    pic19

    Wenn der Text, der in einem Textfeld angegeben wird, über den Rand des Felds hinausgeht, um sich der Änderung der Gerätegröße anzupassen, wird eine Schaltfläche am unteren Rand des Textcontainers angezeigt. Klicken Sie auf diese Schaltfläche, um den gesamten Text zu sehen. Beispiel: In diesem Fall wird der Text wie folgt angezeigt:

    pic20

Hinweis:

Sie können eine Folie nicht kopieren, die Objekte in einer Fluid Box hat undsiein ein leeres oder Responsive-Projekt einfügen. Als Umgehungslösung können Sie mit der rechten Maustaste auf die Fluid Box klicken, dann Alle wählen auswählen und die Objekte in eine leere oder Responsive-Folie einfügen.

Hinweis:

Wenn nur ein einzelnes Objekt in einer Fluid Box vorhanden ist, können Sie die Größe des Objekts nicht anpassen. Sie können die roten Ziehpunkte um das Objekt herum sehen, was bedeutet, dass die Größe des Objekts nicht angepasst werden kann.

Breite einer Fluid Box ändern

Sie können die Breite einer Fluid Box ändern, indem Sie die Werte im Bereich „Position“ im Eigenschafteninspektor ändern.

Angenommen, die Breite einer untergeordneten Fluid Box beträgt 33,3 % der übergeordneten Fluid Box oder 341 Pixel, dann können Sie die Werte eingeben, die Sie verwenden möchten, und die Änderungen werden anschließend auf der Bühne angezeigt.

Vor dem Ändern der Breite
Vor dem Ändern der Breite
Nach dem Ändern der Breite
Nach dem Ändern der Breite

Hinweis:

Wenn Sie im Fenster „Position“ einen Wert eingeben, der über dem maximal zulässigen Wert liegt, wird der Wert auf den ursprünglichen Wert zurückgesetzt.

Automatic Device Preview

Hit the play button to see your content automatically change shape and form factor across the full spectrum of device sizes. See how responsive your content is on every screen size.

Click the Layout Preview button to see your content automatically wrap, scale and align across device sizes.

Live device preview
Live device preview

You can also use the same option in the Wrap properties. Change the wrap property for the Fluid Box and click the Layout Preview button to check out the new wrapping behavior.

Aktivieren des Umbruchspunkts für fluid Boxes

Wie im vorherigen Abschnitt erwähnt, ist ein Umbruchspunkt ein Punkt, der, wenn er erreicht wird, die Objekte umschließt oder die Objekte neu anordnet, wenn sich die Gerätebreite ändert.

Wenn beispielsweise der Umbruchspunkt bei 80 % liegt, bei 80 % der Gerätebreite, wird ein Objekt gemäß den Eigenschaften, die in den Umbruchsoptionen definiert sind, in der Fluid Box neu angeordnet.

In den eLearning-Projekten möchten Sie häufig, dass Objekte in mehr als einer Fluid Box umgebrochen werden. Sie können einfach einen Umbruchspunkt in einer einzigen Fluid Box festlegen, aber die Möglichkeit, Umbruchspunkte in mehreren Fluid Boxes festzulegen, gibt Ihnen mehr Flexibilität beim Entwerfen von eLearning-Projekten.

Um einen Umbruchspunkt in den Fluid Boxes festzulegen, klicken Sie auf Bearbeiten > Voreinstellungenoder drücken Sie die Umschalttaste+F8, um das Dialogfeld „Voreinstellungen“ zu starten.

Textumbruchpunkt aktivieren
Textumbruchpunkt aktivieren

Wählen Sie Textumbruchpunkt aktivierenKontrollkästchenund klicken Sie auf OK. Starten Sie Adobe Captivate neu.

Wenn Sie im Projekt mehrere Fluid Boxes und Objekte in jeder Fluid Box hinzufügen, können Sie sehen, dass Sie Textumbruchpunkte in jeder Fluid Box aktiveren können.

Wenn Sie die Regler verschieben, wird ein Umbruch der Objekte am exakten Punkt, an dem Sie den Umbruchsschwellenwert definiert haben, durchgeführt.

Der Umbruch von Objekte erfolgt in jeder Fluid Box
Der Umbruch von Objekte erfolgt in jeder Fluid Box

Erfassung mit automatischer Anpassung

Wiedergabeleiste mit automatischer Anpassung

Steuerelemente derWiedergabeleisteresponsive machen. Sie können unter „Fenster“ > „Skin-Editor“ eine benutzerdefinierte Skin erstellen, indem Sie die Steuerelemente derWiedergabeleisteändern und die Änderung dann als ein Design speichern. Jetzt können Sie die Steuerelemente derWiedergabeleisteanders in den Ansichten „Primär“, „Tablet“ und „Mobil“ anzeigen.

Um verschiedene Steuerelemente derWiedergabeleistein den Ansichten „Primär“, „Tablet“ und „Mobil“ anzuzeigen, passen Sie die cpMobilePlaybar-Variable an.

 

  1. Zum Wiedergabe-Speicherort

    C:\Programme\Adobe\Adobe Captivate 8 x64\de_DE\Gallery\Playbars\HTML\cpPlaybarMobileStep text

    Hinweis:

    Der Speicherort ist je nach Installationsordner auf Ihrem Computer unterschiedlich. 

  2. Erstellen Sie einen Backup für die zu ändernde Wiedergabeleiste.

  3. Öffnen Sie die Datei playbarScript.js

    cp.responsiveButtons = 
    {
    	//"ButtonName"	: 	[Primary,Tablet,Mobile],
    	"Rewind"		: 	[true,true,false],
    	"Backward"		: 	[true,true,true],
    	"Play"			: 	[true,true,true],
    	"Slider"		: 	[true,true,false],
    	"Forward"		: 	[true,true,true],
    	"CC"			: 	[true,true,true],
    	"AudioOn"		: 	[true,false,false],
    	"Exit"			: 	[true,true,true],
    	"FastForward"	: 	[true,true,false],
    	"TOC"		: 	[true,true,false]
    };
  4. Wenn Sie alle Steuerelemente der Wiedergabeleiste in den Ansichten „Primär“, „Tablet“ und „Mobil“ anzeigen möchten, ändern Sie den oben genannten Code für alle Schaltflächen in [true,true,true]. Speichern und schließen Sie die Datei. 

    Wenn der Schieberegler beispielsweise nur in den Ansichten „Tablet“ und „Mobil“ angezeigt werden soll, ändern Sie den Code wie folgt: 

    „Schieberegler“ : [falsch, wahr, wahr] 

    Hinweis:

    Wenn eine andere Wiedergabeleiste automatisch anpassbar sein soll, können Sie denselben Vorgang durchführen (wie oben beschrieben), aber Sie müssen zuerst die anpassbare Funktion in den JS-Ordner kopieren.

    Die ersten Voreinstellungen sind unter dem Skin-Editor aktiviert. Wenn diese nicht ausgewählt sind, wird die Schaltfläche nicht in der Wiedergabeleiste angezeigt, egal, ob der Wert „true“ oder „false“ lautet.

  5. Starten Sie Captivate erneut und die Wiedergabeleiste wird aktualisiert. 

Erfassung mit automatischer Anpassung (Simulation mit automatischer Anpassung)

Erstellen Sie einen Einzelscreenshot, der auf mehreren Bildschirmen und Geräten verwendet werden kann. Mit Adobe Captivate können Sie den Teil des Bildschirms auswählen, den Sie auf kleineren Bildschirmen anzeigen möchten.

  1. Öffnen Sie ein Captivate-Projekt mit automatischer Anpassung

  2. Klick Sie auf „Folien“ > „Softwaresimulation“

    Das Fenster „Zusätzliche Folien aufzeichnen“ wird angezeigt. 

    record-additional-slides
  3. Wählen Sie die Folie, nach der die aufgezeichnete Folie eingefügt werden soll und klicken Sie auf „OK“. 

    Das Fenster zur Bildschirmerfassung wird angezeigt 

  4. Wählen Sie einen Aufzeichnungstyp als „Automatisch“ oder „Videodemo“ oder „Manuell“ und klicken Sie auf „Aufnehmen“, um die Bildschirme zu erfassen. 

    Hinweis:

    Sie verwenden die manuelle Aufzeichnung, wenn Sie während der Aufzeichnung einzelne Screenshots auswählen und aufzeichnen möchten. 

    Beim Aufzeichnen mit der automatischen Aufzeichnung erfasst Adobe Captivate Screenshots automatisch und platziert sie in separaten Folien.  Die automatische Aufzeichnung ist die am häufigsten in Adobe Captivate verwendete Aufzeichnungsmethode.

  5. Klicken Sie im Projekt mit automatischer Anpassung auf die Mobilansicht.

    Der Screenshot richtet sich selbst aus und wird wie im Folgenden gezeigt: 

    responsive_mobile
  6. Sie können beobachten, dass der Hintergrund verzerrt ist.

    Sie können einen Teil des Hintergrundbildes in der Ansicht „Mobil“ verwenden. 

  7. Klicken Sie im Eigenschafteninspektor auf „Teil des Hintergrundbilds verwenden“. Sie können die Folienerfassung auf den gewünschten Hintergrundteil verschieben. 

    Jetzt können Sie den Unterschied mit der vorherigen Ansicht vergleichen.

    background_skew_fix

Konvertieren eines leeren Projekts in ein Responsive-Projekt

  1. Erstellen Sie ein leeres Projekt mit einigen Objekten, wie unten dargestellt.

    Neues leeres Projekt
    Neues leeres Projekt

  2. Wenn Sie das Projekt in ein Responsive-Projekt konvertieren wollen, klicken Sie auf Datei > Als Responsive speichern. Möglicherweise wird eine Warnung zu Objekten angezeigt, die nicht in einem Responsive-Projekt unterstützt werden. Weitere Informationen finden Sie unter:Nicht unterstützte Objekte in HTML5.

    Klicken Sie auf Speichern und speichern Sie Ihr Projekt als Responsive-Projekt. Sie haben ein neues Responsive-Projekt, wie nachfolgend gezeigt:

    Neues Responsive-Projekt
    Neues Responsive-Projekt

    Ziehen Sie den Regler, um das Projekt in verschiedenen Ansichten anzuzeigen.

  3. Wenn der Text, der in einem Textfeld angegeben wird, über den Rand des Felds hinausgeht, um sich der Änderung der Gerätegröße anzupassen, wird eine Schaltfläche „Erweitern“ am unteren Rand des Textcontainers angezeigt. Klicken Sie auf diese Schaltfläche, um den gesamten Text zu sehen.

    Schaltfläche „Erweitern“
    Schaltfläche „Erweitern“

  4. Sie können auf der Responsive Folie entweder Ihr eigenes FluidBox-Layout einfügen (FluidBox > Vertikal oder horizontal) oder Sie können auf FluidBoxes vorschlagen klicken, um die Objekte intelligent in interaktive Container zu platzieren. Wenn Sie auf „FluidBox vorschlagen“ klicken, können Sie sehen, dass sich das Projekt-Layout-verändert, wird nachfolgend gezeigt:

    FluidBox-Layout
    FluidBox-Layout

  5. Verschieben Sie die Objekte, platzieren Sie diese nach Wunsch und zeigen Sie diese dann in der Vorschau an oder veröffentlichen Sie Ihr Responsive-Projekt.

Erstellen einer benutzerdefinierten Vorschau

In einem Responsive-Projekt können Sie in Captivate Ihr Projekt auf verschiedenen Geräten wie auf dem Desktop, auf dem iPhone, iPad usw. in der Vorschau anzeigen.

Sie können benutzerdefinierte Vorschauen für Ihr Gerät erstellen, zusätzlich zu den bereits standardmäßig vorhandenen.

Erstellen einer benutzerdefinierten Vorschau:

  1. Starten Sie zunächst Captivate als Administrator.

    Geben Sie dann die erforderlichen Abmessungen ein, wie nachfolgend gezeigt:

    Abmessungen der benutzerdefinierten Vorschau
    Abmessungen der benutzerdefinierten Vorschau

  2. Um die Vorschau in der Liste der Vorschaumodi hinzuzufügen, klicken Sie auf + neben den Abmessungsfeldern. Sie können das folgende Dialogfeld sehen:

    Erstellen einer benutzerdefinierten Vorschau auf Ihrem Gerät
    Erstellen einer benutzerdefinierten Vorschau auf Ihrem Gerät

    Geben Sie einen Namen ein, z. B. Galaxy S8, und die benutzerdefinierte Vorschau ist jetzt Teil der Liste der Vorschaumodi.

    Um eine benutzerdefinierte Vorschau zu löschen, wählen Sie die Vorschau aus und klicken Sie auf- neben den Abmessungsfeldern.

  3. <?xml version="1.0" encoding="UTF-8"?>
    <devicelist>
       <device name="Desktop" width="1024" height="627" candelete="0"/>
       <device name="iPhone6" width="375" height="667" candelete="0"/>
       <device name="iPad" width="768" height="1024" candelete="0"/>
       <device name="Galaxy S7" width="360" height="640" candelete="0"/>
       <device name="Nexus 5x" width="412" height="732" candelete="0"/>
       <device name="Galaxy S8" width="1000" height="1000" candelete="1"/>
    </devicelist>
    
  4. Fügen Sie eine benutzerdefinierte Vorschau mithilfe der Namens-, Breiten- und Höhenattribute hinzu oder löschen Sie diese.

  5. Starten Sie Captivate neu und Sie können die Änderungen in der Vorschau in derDropdown-Liste.

    Vorschau Dropdown-Liste
    Vorschau Dropdown-Liste

Haltepunkte in Responsive Projekten

Erstellen Sie Inhalte mit fünf Haltepunkten: 

  • Desktop mit einem Ansichtsport von 1024x627,
  • Tablet-Querformat mit einem Ansichtsport von 896x627
  • Tablet-Hochformat mit einem Ansichtsport von 768x627
  • Mobiles Querformat mit einem Ansichtsport von 667x410 und 
  • Mobiles Hochformat mit einem Ansichtsport von 360x460

Zeigen Sie die Ausgabe in der Vorschau mithilfe von „Folie abspielen“ im ensprechenden Geräte-Layout an. Veröffentlichen Sie den Inhalt als HTML5

Mit Adobe Captivate können Sie über eine Drag & Drop-Funktion Objekte mühelos auf alle drei Bildschirmformate in Projekte mit automatischer Anpassung ziehen. 

Weitere Informationen zu bestimmte Eigenschaften für Ansichten des Responsive-Projekts finden Sie unter Bestimmte Eigenschaften für Ansichten.

Sie können das Bedienfeld „Ausrichten“ ansehen, indem Sie auf „Fenster“ > „Ausrichten“ klicken.

Erstellen von Responsive-Projekten

  1. Nachdem Sie Adobe Captivate gestartet haben, klicken Sie auf das erste Miniaturbild auf dem Startbildschirm, Responsive-Projekt und dann auf „Erstellen“.

    Alternativ dazu können Sie „Datei“ > „Neues Projekt“ > „Responsive-Projekt“ wählen.

  2. Um durch die verschiedenen Haltepunkte zu navigieren, klicken Sie auf die Symbole für Desktop, Tablet und Mobile im Responsive-Projekt-Layout.

    Sie können den Responsive-Projektbereich anzeigen, der wie im nachfolgenden Bildschirm angezeigt, in sechs eindeutige Haltepunkte unterteilt wird. Jeder Bildschirmformatbereich ist ein eindeutiger Raum für das Authoring.

    responsive_layout
    Verfügbare Haltepunkte

Adaptives Design (Intelligente Positionierung)

Sie können die verfügbaren Schieberegler am Anfang und am Ende jedes Bildschirmformats anzeigen.

Standardmäßig sind fünf Bildschirmformate zum Erstellen von Inhalt verfügbar.

Wenn Sie Inhalt auf einem Gerät, das größer als der Ansichtsport des Mobil-Layouts ist, können Sie durch das Ziehen des Schiebereglers das Layout vergrößern.

Hinweis:

Alle Größen, die größer als der Standardansichtsport sind, verwenden das nächsthöhere Ansichtsport-Layout.
Wenn Sie beispielsweise statt den Standardwerten einen Mobilansichtsport mit den Werten 450 x 450 verwenden wollen. Da das Layout größer als die eines Mobilgeräts ist, aber kleiner als die eines Tablets, wird die Größe des Tablets verwendet.

Intelligente Positionierung ist zwischen Schnittpunkten zulässig. Mit Adobe Captivate können Sie die Projekte mühelos in den Bildschirmformaten in der Vorschau anzeigen. Es gibt also keine Zeitverzögerung der Ausgabe in der Vorschau während des Wechsels von einer Ansicht zur anderen zwischen den Bildschirmformaten.

Anpassen von Designfarben

Sie können die Vorgabedesignfarben verwenden oder Sie können die Designfarben nach Ihrem Geschmack anpassen.

  1. Klicken Sie auf der Symbolleiste auf Designs“ > „Designfarben“

  2. Wählen Sie eine der vorgegebenen Designfarben aus der Dropdownliste „Designfarbe auswählen“ und klicken Sie auf „Anpassen“. Das Fenster „Anpassen von Designfarben“ wird, wie unten gezeigt, angezeigt:

    theme-colors
  3. Wählen Sie die Komponente, deren Farbe Sie ändern möchten.
    Sie können die Farben aller Folienkomponenten, z. B. Titel, Skin, Untertitel, Folienhintergrund, ändern.

  4. Sie können die Farbe mithilfe der Tools Schattierungen, Farbfelder, Farbauswahl oder Pipette ändern.

  5. Klicken Sie auf den Titel des Vorgabedesigns und verwenden Sie Ihren eigenen Titel.

  6. Klicken Sie auf „Speichern“.
    Jetzt werden die geänderten Designfarben in der Dropdown-Liste angezeigt.

    Sie können unter dem Symbol „Einstellungen“ die Designfarben verwalten, löschen und umbenennen.

Gerätehöhe

Legen Sie verschiedene Hintergründe in verschiedenen Ansichten durch das Ein- bzw. Ausschließen von Objekten fest.

Sie können außerdem die Gerätehöhe für jedes Layout festlegen, indem Sie im Eigenschafteninspektor das Kontrollkästchen „Gerätehöhe“ wählen. Wenn die Gerätehöhe ausgewählt ist, können Sie den gelben Rahmen für jedes Layout sehen (siehe Screenshot für Mobil-Layout unten).

device_height
Festlegen der Gerätehöhe

device_height_view

Sie können „Folienhöhe“ mit Gerätehöhe“ verknüpfen, indem Sie im Fenster „Eigenschaften“ auf das Symbol neben „Folienhöhe“ klicken (siehe Screenshot unten). Ändern der Folienhöhe für bestimmte oder alle Ansichten. 

slide-height-link

Folienhöhe

Mit Adobe Captivate können Sie auch die Höhe des Ansichtsports entsprechend der Gerätehöhe anpassen.

Die Ansichtsport-Höhe ist die Seiten-Layout-Höhe für Primär (Desktop), Tablet und Mobil. Sie können diese Höhe für jedes Gerät mithilfe der Option „Folienhöhe“ (unter Eigenschaften) anpassen.

Hinweis:

Heben Sie die Verknüpfung der Folienhöhe von der Gerätehöhe auf, um sie zu verändern.

Anpassen der Folienhöhe

Gehen wir einmal davon aus, dass die Ansichtsport-Höhe und Gerätehöhe für Mobil-Layouts 415 beträgt. ,Angenommendiedie Höhe des Geräts beträgt 500, dann können Sie die Höhe des Ansichtsports anpassen, indem Sie den Schieberegler für die vertikale Gerätehöhe verschieben, bis Sie 500 erreicht haben. Standardmäßig ist die Gerätehöhe mit der Folienhöhe verknüpft. Sie können die Verknüpfung aufheben, wenn Sie auf das Symbol für die Verknüpfung neben dem Wert für die Folienhöhe im Eigenschafteninspektor klicken. 

In diesem Fall wird der gesamte Inhalt innerhalb der Ansichtsport-Höheauf dem Mobilgerätstandardmäßig angezeigt. Mithilfe dieser Funktion können Sie also Inhalt im Layout, entsprechend der Gerätehöhe, genau erstellen.

Wenn die Höhe des Ansichtsports größer ist als die Gerätehöhe, kann der Inhalt, der über die Gerätehöhe hinausgeht, mithilfe einer Bildlaufleiste angezeigt werden.

Jetzt können Sie beliebige Objektein der Mitteder Folie in allen Bildschirmformaten von Responsive-Projekten ausrichten. Horizontale und vertikale mittige Ausrichtungsoptionen werden in Captivate 9 eingeführt.

  1. Fügen Sie Smart-Formen in die Folie für das primäre Bildschirmformat ein. 
  2. Klicken Sie auf die Smart-Form und zeigen Sie die Registerkarte „Ansicht“im Eigenschafteninspektor an.
  3. Klicken Sie auf „Erweitert“. Sie können die horizontalen und vertikalen mittigen Ausrichtungsoptionen anzeigen (wie in der Abbildung gezeigt). 

Objekte ausrichten

Jetzt können Sie beliebige Objekte in der Mitte der Folie in allen Bildschirmformaten von Projekten mit automatischer Anpassung ausrichten. Verwenden Sie dazu die horizontalen und vertikalen mittigen Ausrichtungsoptionen.

  1. Fügen Sie alle Formen oder Objekte in die Folie für das primäre Bildschirmformat ein.

  2. Wählen Sie das Element aus und zeigen Sie das Bedienfeld „Position“ im Eigenschafteninspektor an. Klicken Sie auf „Erweitert“.

  3. Klicken Sie auf Erweitert. 

    alignment
    Vertikale und horizontale Bildausrichtungsoptionen

    Sie können die horizontalen und vertikalen mittigen Ausrichtungsoptionen anzeigen (wie in der Abbildung gezeigt). 

    vertical_horizontal
    Ausrichtungsoptionen

  4. Sie können die horizontalen und vertikalen mittigen Ausrichtungsoptionen auswählen, indem Sie mit der rechten Maustaste auf dem Objekt klicken und wie hier gezeigt Ausrichten auswählen.

    right-click-centeralign
  5. Alternativ dazu können Sie auf die Symbole im Bedienfeld „Fenster“ > „Ausrichten“ klicken (wie hier gezeigt).

    Hinweis:

    Sie können das Bedienfeld „Ausrichten“ anzeigen, indem Sie auf „Fenster“ > „Ausrichten“ klicken.

    align-panel

    Horizontale mittige Ausrichtung: Wenn Sie diese Ausrichtung anwenden, können Sie das Objekt nur invertikalerRichtung auf der Folie verschieben. Die Verschiebung in horizontaler Richtung ist eingeschränkt. 

    Vertikale mittige Ausrichtung: Wenn Sie diese Ausrichtung anwenden, können Sie die Form nur inhorizontalerRichtung auf der Folie verschieben. Die Verschiebung in vertikaler Richtung ist eingeschränkt. 

    Horizontale und vertikale mittige Ausrichtung: Wenn Sie beide Ausrichtungen anwenden,ist die Verschiebungin beide Richtungen beschränkt. 

    Farbkodierung der mittigen und vertikalen Ausrichtungsoptionen wird unterstützt. Die Rahmenfarbe von zwei Kontrollkästchenoptionen erreicht das Farbschema des,Haltepunktsfür das die Ausrichtungsoptionen ausgewählt wurden. 

Hinweis:

Wenn Sie mehrere Formen haben, können Sie ein einzelnes Objekt in der Mitte der Folie ausrichten und den Rest der Objekte am zentrierten Objekt verknüpfen, um folienzentrierte Flussdiagramme an allen Haltepunkten zu erzielen.

Wenn Sie die Ausrichtung für die horizontale oder vertikale mittige Option aufheben, bewegt sich das Objekt nicht zurück in seine ursprüngliche Position. 

Farbe für Standardbeschriftung einstellen

Sie können verschiedene standardmäßige Farben für die Textbeschriftung für die Bildformate festlegen.

  1. Wählen Sie „Bearbeiten“ > „Objektstil-Manager“

  2. Wählen Sie den Standardbeschriftungsstil

  3. Klicken Sie in „Textformat“ auf das Dropdown-Feld neben Bildformate und wählen Sie Desktop, Tablet oder Mobil.

  4. Wählen Sie die Farbe für jeden Haltepunkt aus.

Erfassungsunterstützung für Interaktionen

Sie können die Interaktionen in allen Ansichten erfassen und Autofokus für einen bestimmten Interaktionsbereich in den Ansichten festlegen. Legen Sie eine Smartform als Hintergrundbild im Responsive-Projekt fest und dann können Sie den Zuschneidebereich für das Hintergrundbild in verschiedenen Ansichten einstellen.

Legen Sie eine Smartform als Hintergrundbild im Responsive-Projekt mit fest und dann können Sie den Zuschneidebereich für das Hintergrundbild in verschiedenen Ansichten einstellen.

Responsive-Eigenschaften und Designs sind auf Fragenfolien anwendbar.

Überschriebene Stile werden im Eigenschafteninspektor im Bereich Beispieltext durch einen Stern gekennzeichnet.

Drag-and-Drop-Interaktion

Adobe Captivate unterstützt Drag-and-Drop-Interaktionen für Projekte mit automatischer Anpassung.

Drag-and-Drop-Interaktionen bieten eine interessante Möglichkeit zum Bewerten des Benutzerwissens. Durch diese Interaktion können Benutzer Fragen beantworten, indem sie Objekte in bestimmte Bereiche oder Objekte 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.

In Projekten mit automatischer Anpassung können Sie einen Assistenten für Drag-and-Drop-Interaktionen aufrufen. Wählen Sie dazu „Einfügen“ > „Assistenten der Drag-and-Drop-Interaktion“. Sie können auch „Interaktionen“ > „Drag & Drop“ auswählen, wie unten dargestellt: 

drag-n-drop

Alle Funktionen der Drag-and-Drop-Interaktion in Projekten mit automatischer Anpassung ähneln leeren Projekten. Informationen dazu, wie Sie eine Drag-and-Drop-Interaktion erstellen, verschiedene Funktionen der Interaktion und bewährte Verfahren finden sie unter Drag-and-Drop-Interaktionen. 

Laden Sie Beispielprojekte herunter

Um mehr über Captivate zu erfahren und wie Sie ansprechende Lerninhalte erstellen können, laden Sie folgende Projekte herunter:

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