Aufnahme einer interaktiven Demo im Advanced WYSIWYG Editor

Die interaktive Demo-Funktion ermöglicht es den Nutzern, sich mit einer Produktsimulation oder einem Walkthrough zu beschäftigen, anstatt ein statisches Video anzuschauen oder Textanleitungen zu lesen. Es bietet ein praktisches Erlebnis, bei dem Nutzer in einer geführten Umgebung klicken, tippen, mit der Maus fahren und die Benutzeroberfläche erkunden können.

Document360 bietet integrierte interaktive Demos und Formatierungsoptionen. Sie können Ihren Bildschirm, Mausklicks und die interaktive Demo direkt in Ihren Artikeln erfassen, ohne externe Werkzeuge.

Wenn Sie zum Beispiel einen How-to-Artikel zur Konfiguration von Benutzerrollen schreiben, können Sie eine interaktive Demo aufnehmen, die jeden Schritt in der Praxis zeigt. Das hilft den Lesern, visuell zu folgen und den Prozess zu verstehen, ohne raten oder sich nur auf Textanweisungen verlassen zu müssen.

HINWEIS

Die interaktive Demofunktion ist nur für KB Site 2.0 verfügbar.

Zugriff auf die interaktive Demo

Um auf die interaktive Demo zuzugreifen,

1. Navigieren Sie im Advanced WYSIWYG-Editor zum gewünschten Artikel.

2. Gib den Schrägstrich-Befehl /Interactive demo ein und drücke Enter.

3. Wenn die Demo-Erweiterung Document360 Interactive nicht installiert ist, klicken Sie auf Installieren.

   HINWEIS

   Diese Erweiterung wird derzeit nur im Chrome-Browser unterstützt.

4. Im Chrome Webshop klicken Sie auf Chrome hinzufügen.

5. Nach der Installation kehren Sie zum Knowledge Base-Portal zurück.

Aufnahme des Bildschirms

      Der interaktive Demo-Dialog wird angezeigt.

6. Im Audio-Dropdown-Menü wählen Sie die gewünschte Option aus oder wählen Sie Kein Audio ohne Ton aufzunehmen.

7. Klicken Sie auf Nächsten.

8. Wählen Sie den zu erfassenden Bildschirm aus:

   • Chrome-Tab: Erfasst nur den ausgewählten Chrome-Tab.

   • Fenster: Zeichnet nur das ausgewählte Anwendungsfenster auf.

9. Klicken Sie auf Teilen.

   Der ausgewählte Bildschirm erscheint zusammen mit dem Bildschirmaufnahme-Panel .

10. Wählen Sie die empfohlene Auflösung (16:9 oder 4:3).

11. Klicken Sie auf Start Aufnahme, um mit der Aufnahme zu beginnen.

12. Klicken Sie auf Abwerfen, um abzubrechen und zum vorherigen Bildschirm zurückzukehren.

13. Im Abschnitt "Unschärfe" klicken Sie auf Hinzufügen , um bestimmte Bereiche des Bildschirms beim Aufzeichnen sensibler Informationen auszublenden.

14. Falls nötig, aktiviere den Schalter für die Aufnahme anzeigen auf dem Bildschirm .

    Ein Document360-Logo erscheint unten links auf dem Aufnahmebildschirm. Ein Klicken auf das Logo pausiert die Aufnahme. Dieses Logo wird auch in der aufgezeichneten interaktiven Demo sichtbar sein.

15. Mausklicks und Interaktionen werden erfasst, und Klickindikatoren werden angezeigt, um das Bearbeiten der Anleitung zu erleichtern.

16. Klicken Sie auf Pause , um die Aufnahme zu pausieren, und auf Aufnehmen , um fortzufahren.

17. Um die Aufnahme zu stoppen, klicken Sie im schwebenden Panel auf Teilen stoppen oder im Bildschirmaufnahme-Panel auf Aufnahme stoppen.

    Nach der Aufnahme importiert das System die interaktive Demo in den Artikel. Das kann ein paar Minuten dauern.

Hinzufügen interaktiver Elemente

Nach der Verarbeitung erscheint die aufgezeichnete interaktive Demo im interaktiven Demo-Editor-Panel .

1. Klicken Sie auf das Play ()-Symbol, um die aufgenommene interaktive Demo anzuschauen.

   Der interaktive Demo-Editor bietet Formatierungswerkzeuge, darunter:

Elemente hinzufügen

a. Aufruf zum Handeln: Einen interaktiven Button in der Demo hinzufügen

1. Im rechten Fensterfeld klicken Sie auf Aktionsaufruf.

2. Geben Sie Titel und Beschreibung ein.

   HINWEIS

   Im Feld Beschreibung wählen Sie den Inhalt aus und Sie können die grundlegenden Formatierungswerkzeuge wie Fett (), Kursiv (), Unterstreichen (), Geordnete Liste (), Ungeordnete Liste () und Hyperlink () verwenden.

3. Im Bereich Zweige geben Sie den Button-Namen ein und wählen Sie die gewünschte Aktion aus:

   1. Externe URL: Geben Sie den Ziellink ein.

   2. Nächster Schritt: Zeigt eine Nachricht oder Information für den Nutzer an.

4. Klicken Sie auf Neu hinzufügen , um einen weiteren Button hinzuzufügen.

5. Wählen Sie die gewünschte Tastenposition unter dem Abschnitt Position.

6. Aktivieren Sie den KI-Voiceover-Schalter , um Erzählung hinzuzufügen:

   1. Wählen Sie eine Stimme aus dem Dropdown-Menü.

   2. Hier kommt das Erzählskript ins Spiel.

   3. Klicken Sie auf das Play- ()-Symbol, um eine Vorschau zu erhalten.

7. Klicken Sie auf Anwenden.

b. Hotspots

Hotspots können verwendet werden, um den Mausklick-Effekt in der interaktiven Demo zu präsentieren.

1. Gehe zur genauen Dauer im Video und klicke auf Hotspot , um hinzuzufügen.

   Im Hotspots-Dialog überprüfen Sie die Liste der bestehenden Hotspots (falls vorhanden).

2. Navigiere zum gewünschten Ort im Video und klicke auf Neu hinzufügen , um einen Hotspot zur Timeline hinzuzufügen.

3. Du kannst den Hotspot an die gewünschte Position ziehen.

4. Schalte den Hotspot-Schalter anzeigen , um den Hotspot anzuzeigen.

5. Im Zeitfeld geben Sie die gewünschte Zeit ein. Nutzen Sie die Option Feinabstimmung von Millisekunden () für präzise Anpassungen.

6. Geben Sie einen Titel im Titelfeld ein.

7. Geben Sie die Beschreibung im Feld Beschreibung ein.

   HINWEIS

   Im Feld Beschreibung wählen Sie den Inhalt aus und Sie können die grundlegenden Formatierungswerkzeuge wie Fett (), Kursiv (), Unterstreichen (), Geordnete Liste (), Ungeordnete Liste () und Hyperlink () verwenden.

8. Unter den Blaseneinstellungen passen Sie die Position des Hotspots an, indem Sie den genauen Gitterpunkt aus den angegebenen Optionen auswählen.

9. Im Bereich Effekt aktivieren Sie bei Bedarf den Zoom-Schalter aktivieren .

10. Um die Voice-Erzählung hinzuzufügen, schalte den KI-Voice-Over-Schalter ein.

    1. Wählen Sie die gewünschte Stimme aus und geben Sie den Inhalt im Textfeld ein.

    2. Klicken Sie auf die Schaltfläche Play () neben dem Inhalt, um ihn in der ausgewählten Stimme vorzuschauen.

11. Klicken Sie auf Anwenden , um die Änderungen zu speichern.

    

12. Der Text wird zur Liste hinzugefügt. Fahr mit der Maus über eine beliebige Nachricht, um:

    • Klicken Sie auf das Symbol "Bearbeiten ()", um zu ändern.

    • Klicken Sie auf das Symbol More () und wählen Sie Löschen zum Entfernen aus.

    

c. Verschwimmen:

Um sensible Informationen in der interaktiven Demo zu verstecken:

1. Im rechten Bereich klicken Sie auf Unschärfe.

2. Wenn vorher keine Unschärfen hinzugefügt wurden, klicke auf Hinzufügen , um eine neue Unschärfe hinzuzufügen.

   Wenn bereits viele Unschärfen vorhanden sind, klicken Sie auf Neu hinzufügen, um neue Unschärfen hinzuzufügen.

3. Klicken Sie auf Neu hinzufügen , um einen Unschärfebereich hinzuzufügen.

4. Stelle sicher, dass der Schalter "Unschärfe anzeigen " aktiviert ist.

5. Geben Sie einen Namen für den Blur ein.

6. Wähle die Startzeit und Endzeit für den Verschwimmen. Nutzen Sie die Option Feinabstimmung von Millisekunden () für präzise Anpassungen.

     NOTE

   Du kannst den Schieberegler des Videos verwenden, um die Start- und Endzeit des Videos anzupassen. Und du kannst die Unschärfedimension anpassen, indem du die Kanten im interaktiven Video ziehst.

7. Wähle eine Form: Kreis oder Rechteck.

8. Stellen Sie den Intensitätsregler ein, um die Deckung zu verändern.

9. Klicken Sie auf Anwenden , um Änderungen zu speichern.

   

   Der Blur wird zur Liste hinzugefügt.

10. Fahre mit der Maus über ein beliebiges Unschärfeobjekt, klicke auf das Symbol More () und wähle Löschen zum Entfernen aus.

d. Bild

Die Liste der vorhandenen Bilder erscheint.

1. Wenn vorher keine Bilder hinzugefügt wurden, klicken Sie auf Hinzufügen , um ein neues Bild hinzuzufügen.

   Wenn es bereits viele Bilder gibt, klicken Sie auf Neue hinzufügen , um neue Bilder hinzuzufügen.

2. Im Zeitfeld geben Sie die gewünschte Zeit ein. Nutzen Sie die Option Feinabstimmung von Millisekunden () für präzise Anpassungen.

3. Klicken Sie auf Bild, um vordefinierte Bilder und Emojis nach Namen zu importieren.

   Um dein eigenes Bild anzubringen, klicke auf das Symbol und importiere das gewünschte Bild aus deinem lokalen Dateiexplorer.

4. Nach dem Hochladen wird dieses Bild über dem aufgenommenen Video platziert.

   Du kannst folgende Aktionen auf dem hochgeladenen Bild ausführen:

5. Zeit: Im Zeitfeld aktualisieren Sie die gewünschte Zeit. Verwenden Sie das Symbol "Millisekunden feinjustieren" () für präzise Anpassungen.

6. Bild ersetzen: Klicke auf Bild ersetzen, um das hochgeladene Bild zu ersetzen. Unterstützte Formate sind JPG oder PNG.

7. Größe und Position: Wählen Sie Freeform, um die Bildposition mit Mausziehen anzupassen.

   1. Im Gradfeld geben Sie den gewünschten Wert ein, um das Bild zu drehen.

   2. Verwende die Symbole "Links drehen " oder "Rechts drehen ".

   Oder wähle Fit to Screen , um das Bild an die Bildschirmgröße anzupassen.

8. Im Abschnitt Verhalten können Sie auswählen:

   1. Bleiben Sie für: Behalten Sie das Bild für eine bestimmte Zeit. Geben Sie die Sekundenzahl im Sec-Feld ein.

   2. Nächster Button: Halte das Bild sichtbar, bis der Nächste-Button angeklickt ist.

   3. CTA: Einen Aufruf zum Handeln verlinken.

9. Im Voiceover-Bereich :

   1. Schalte den Voiceover-Schalter ein.

   2. Wählen Sie die gewünschte Stimme im Dropdown-Menü (basierend auf Ihrem bevorzugten Akzent) aus.

   3. Im Feld Inhalt geben Sie den gewünschten Voiceover-Text ein.

   4. Klicken Sie auf das Play- ()-Symbol, um die Inhalte mit der ausgewählten Stimme vorzuschauen.

10. Klicken Sie auf Anwenden , um die Änderungen zu speichern.

    

    Das Bild wird zur Liste hinzugefügt.

11. Fahre mit der Maus über ein beliebiges Bildelement, klicke auf das Symbol More () und wähle Löschen zum Entfernen aus.

    

e. Spotlight: Wichtige Bereiche in der interaktiven Demo hervorheben

1. Im rechten Fensterfeld klicken Sie auf Spotlight.

2. Klicken Sie auf Hinzufügen , um ein Spotlight zu erstellen.

3. Geben Sie einen Namen für das Rampenlicht ein.

4. Wählen Sie die Start- und Endzeit. Nutzen Sie die Option Feinabstimmung von Millisekunden () für präzise Anpassungen.

5. Wähle eine Form: Kreis oder Rechteck.

6. Klicken Sie auf Anwenden , um Änderungen zu speichern.

   

f. Kamera

Während des Schnitts kannst du ein Video von deiner Kamera aufnehmen und es zu deiner interaktiven Demo hinzufügen.

1. Klick auf Kamera.

   Der Aufnahmebereich erscheint mit einer Liste voraufgezeichneter Videos (falls vorhanden).

2. Klicken Sie auf Erstellen.

   • Wenn vorher keine Videos hinzugefügt wurden, klicke auf Erstellen.

   • Wenn es bereits viele Videos gibt, klicke auf Neu hinzufügen , um ein weiteres hinzuzufügen.

3. Im Menü "Neue Aufnahme hinzufügen " wählen Sie eines der folgenden Optionen aus:

   • Neues aufnehmen: Nehmen Sie ein Video direkt mit Ihrer Kamera auf.

   • Video auswählen: Laden Sie ein bereits aufgenommenes Video hoch.

4. Im Zeitfeld geben Sie die gewünschte Zeit ein. Nutzen Sie die Option Feinabstimmung von Millisekunden () für präzise Anpassungen.

5. Wählen Sie die gewünschte Kamera und das Mikrofon aus und klicken Sie auf Aufnahme starten.

6. Nach dem 3-Sekunden-Countdown beginnt die Aufnahme.

   1. Verwenden Sie Pause und Fortsetzen bei Bedarf.

   2. Klicken Sie auf das Symbol für die Wiederholung , um von vorne zu beginnen.

   3. Klicken Sie auf Abwerfen , um die aktuelle Aufnahme zu löschen.

   4. Klicken Sie auf Stopp, um die Aufnahme zu beenden.

7. Nach dem Stoppen klicke auf Speichern und fortfahren. Das System verarbeitet und fügt das Video zur Demo hinzu.

8. Falls erforderlich, klicken Sie erneut auf Aufzeichnen , um eine neue Aufnahme zu erstellen.

9. Das aufgenommene Video wird über der interaktiven Demo gelegt. Vom rechten Panel aus können Sie:

   • Klicken Sie auf Video ersetzen , um das Original zu tauschen.

   • Klicken Sie auf das Play- ()-Symbol, um eine Vorschau zu erhalten.

   • Klicken Sie auf Neu aufnehmen , um ein frisches Video aufzunehmen.

10. Im Bereich Form wählen Sie eine Displayform: Kreis, Quadrat, Breit oder Porträt.

11. Im Bereich Position wähle aus, wo das Video in der Demo erscheinen soll.

12. Schalten Sie den Untertitel-Schalter ein, um Untertitel automatisch zu generieren, falls Sprache erkannt wird.

13. Klicken Sie auf Anwenden , um Änderungen zu speichern.

14. Alle aufgezeichneten Videos sind im Fenster aufgeführt. Um eines zu löschen, fahre mit der Maus darüber, klicke auf das Symbol More () und wähle Löschen.

  NOTE

Man kann nicht zwei aufgenommene Videos gleichzeitig erstellen.

g. Text

Du kannst Textüberlagerungen zu deiner interaktiven Demo hinzufügen.

1. Klicke auf Text.

   • Wenn vorher keine Nachrichten hinzugefügt wurden, klicke auf Hinzufügen.

   • Falls es bereits Texte gibt, klicke auf Neu hinzufügen.

2. Im Zeitfeld stellen Sie ein, wann der Text erscheinen soll. Nutzen Sie die Option Feinabstimmung von Millisekunden () für präzise Anpassungen.

3. Geben Sie den gewünschten Text im Textfeld ein.

4. Wählen Sie die Schriftart und die Schriftgröße.

5. Wählen Sie eine Textfarbe aus der Palette oder geben Sie einen Hex-Code ein.

6. Im Feld Grad geben Sie einen Wert ein, um die Textposition zu drehen.

7. Im Abschnitt Verhalten wählen Sie eines:

   • Bleiben für: Geben Sie die Sekundenzahl ein, in der der Text sichtbar bleibt.

   • Zeigen bis: Geben Sie die Zeit ein, bis zu der der Text sichtbar bleibt.

8. Wenn du Bleiben für ausgewählt hast, kannst du KI-Voiceover aktivieren:

   1. Schalte den KI-Voiceover-Schalter ein.

   2. Wählen Sie eine Stimme aus dem Dropdown-Menü.

   3. Hier kommt der Voiceover-Inhalt ins Spiel.

   4. Klicken Sie auf Abspielen , um die Vorschau zu erhalten.

9. Klicken Sie auf Umwerben , um zu speichern.

Der Text wird zur Liste hinzugefügt. Fahr mit der Maus über eine beliebige Nachricht, um:

• Klicken Sie auf das Symbol "Bearbeiten ()", um zu ändern.

• Klicken Sie auf das Symbol More () und wählen Sie Löschen zum Entfernen aus.

h. Höhepunkt

Du kannst Highlights verwenden, um auf bestimmte Elemente der Demo aufmerksam zu machen.

1. Klicken Sie auf Hervorheben.

   • Wenn keine Highlights vorhanden sind, klicken Sie auf Hinzufügen.

   • Falls es bereits Highlights gibt, klicken Sie auf Neu hinzufügen.

2. Im Namensfeld geben Sie einen Namen ein. Dies wird in der Demo nicht erscheinen.

3. Wählen Sie die Start- und Endzeit für das Highlight aus. Nutzen Sie die Option Feinabstimmung von Millisekunden () für präzise Anpassungen.

4. Im Dropdown-Menü Form wählen Sie Rechteck oder Kreis.

5. Im Bereich Farbe wählen Sie eine Highlight-Farbe aus.

6. Klicken Sie auf Umwerben , um zu speichern.

   

   Das Highlight wird auf die Liste gesetzt. Um ein Highlight zu löschen, fahre mit der Maus darüber, klicke auf das Mehr-Symbol und wähle Löschen.

   

Bearbeitung

i. Ernte

Um einen Teil des Videos zuzuschneiden:

1. Im rechten Fensterfeld klicke auf Zuschneiden.

2. Wählen Sie ein Seitenverhältnis: Original, Benutzerdefiniert, Quadrat, Querformat oder Hochformat.

3. Du kannst die Crop-Ausgabe (Breite und Höhe) basierend auf dem ausgewählten Verhältnis ansehen.

4. Klicken Sie auf das Löschen ()-Symbol, um den angewandten Zuschnitt zu löschen.

5. Klicken Sie auf Anwenden , um Änderungen zu speichern.

   Nach dem Zuschneiden ist nur der beschnittene Teil sichtbar, wenn das Video gespeichert wird.

j. Ausstattung:

Um irgendeinen Teil des Videos zu kürzen:

1. Im rechten Fenster klicken Sie auf Trimmen.

2. Klicken Sie auf Jetzt hinzufügen , um eine neue Ausstattung zur interaktiven Demo hinzuzufügen.

   Wenn bereits Schnitte vorhanden sind, klicke auf Neu hinzufügen , um einen weiteren Schnitt hinzuzufügen.

3. Stellen Sie die Von- und Zurück-Zeiten fest.

   Klicken Sie auf Anwenden und fertig.

k. Musik:

Um Musik zur interaktiven Demo hinzuzufügen

1. Aktivieren Sie den Schalter Hintergrundmusik aktivieren , um Hintergrundmusik zur interaktiven Demo hinzuzufügen.

2. Klicken Sie auf "Aus Galary wählen ", um eine Datei hochzuladen.

   HINWEIS

   Unterstützte Audioformate: .mp3, .aac (maximale Dateigröße: 5 MB).

3. Im Presets-Tab kannst du vorinstallierte Musikoptionen verwenden.

4. Wählen Sie beliebige Musik aus und klicken Sie auf Einfügen.

5. Nach dem Hochladen klicke auf Audio ersetzen , um den ausgewählten Track zu ändern.

6. Stellen Sie den Lautstärkeregler ein, um die Lautstärke zu steuern.

7. Die Option Fade In/Fade Out sorgt dafür, dass die Musik während dieser Interaktionen reibungslos beginnt und endet.

8. Schalte bei Bedarf die Pause der Interaktion ein. Wenn der Nutzer Hintergrundmusik hinzufügt, wird die Option "Interaktion pausieren" die hinzugefügte Musik vorübergehend pausiert, sobald der Nutzer auf Hotspots klickt oder mit dem Video interagiert.

9. Wenn Sie fertig sind, klicken Sie auf Anwenden.

   

Stimme

Sie können wählen, wie die interaktive Demo erzählt wird:

12. Originalstimme: Verwendet die ursprüngliche Hintergrundstimme.

13. KI-Sprache: Ermöglicht KI-generierte Voiceovers in mehreren Sprachen.  

    KI-Voiceover: Um den gewünschten KI-Voiceover aus mehreren Sprachen auszuwählen. Das Videoskript wird im Abschnitt Skript gerendert.

14. Keine Stimme: Es wird kein Voiceover angewendet.

15. Untertitel: Klicken Sie auf Untertitel, um Untertitel zur interaktiven Demo hinzuzufügen. Wenn das Video eine Voiceover hat, erscheinen hier die automatisch generierten Untertitel, und Sie können sie bei Bedarf bearbeiten.

    Alternativ kannst du dein Voiceover-Skript manuell eingeben. Aktivieren Sie das Kontrollkästchen "Untertitel anzeigen ", um Untertitel in der interaktiven Demo anzuzeigen.

16. Hinzugefügte Elemente: Du kannst die in der Interactide-Demo hinzugefügten Elemente ansehen. Klicken Sie von hier aus auf das Symbol "Bearbeiten ()", um das gewünschte Element zu bearbeiten. Klicken Sie auf das Löschen ()-Symbol neben den Elementen, um sie zu löschen.

17. Klicken Sie auf Schließen, um Änderungen zu speichern.

    

Bearbeitung der aufgenommenen interaktiven Demo

Sobald die interaktive Demo einem Artikel hinzugefügt wurde, können Sie folgende Formatierungsoptionen anwenden:

1. Nach links ausrichten: Richtet die interaktive Demo nach links aus.

2. Center: Richtet die interaktive Demo auf das Center aus.

3. Richtige Ausrichtung: Richtet die interaktive Demo rechts aus.

4. Links in der Reihenfolge: Platziert die interaktive Demo links in der Reihenfolge.

5. Inline-Block: Zeigt die interaktive Demo als Inline-Block-Element.

6. Rechts inline: Platziert die interaktive Demo inline rechts.

7. Größe anpassen: Passt die Maße der interaktiven Demo an.

8. Kopieren: Kopiert die interaktive Demo auf das Zwischenbrett, um sie in einem anderen Artikel oder einer Kategorie innerhalb desselben Projekts wiederzuverwenden.  

9. Edit: Erlaubt weitere Modifikationen, darunter:

   • Elemente hinzufügen: Unschärfe und Rampenlicht

   • Nachtrag: Zuschneiden, Trimmen und Musik

   • Stimme: Originalstimme, KI-Stimme und keine Stimme