Anwenden von Effekten für eine bessere Benutzererfahrung

Suchen
Captivate

Captivate

App öffnen

Mithilfe von Objekteffekten können Sie die Aufmerksamkeit der Benutzer rasch auf die gewünschten Bereiche oder Objekte einer Folie lenken. In diesem Abschnitt werden wir Effekte auf Objekte in unserem Projekt anwenden.

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:

apply-effects.zip

Anwenden von Effekten auf Objekte

Effekte in Captivate beginnen an dem grünen Dreieck (siehe unten) und enden an dem roten Quadrat. Der Effekt endet in der Mitte des Objekts.

Im Beispielprojekt, das in dieser Schulung inbegriffen ist, verwenden wir die nächste Folie, um Effekte auf die linken und rechten Pfeile anzuwenden:

  • Der rechte Pfeil muss von der rechten Seite der Folie kommen.
  • Der linke Pfeil muss von der linken Seite der Folie kommen.

  1. Navigieren Sie im heruntergeladenen Zip-Ordner zum Unterordner Muster und öffnen Sie:

    apply-effects.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. Sie müssen jedoch in Captivate ein neues Projekt mit einer Folie erstellen, ähnlich der oben gezeigten Folie.

  2. Navigieren Sie im Filmstreifen zur Folie mit dem Titel Zusammenfassung.

  3. Um Effekte auf den linken Pfeil anzuwenden, klicken Sie auf den Pfeil auf der Folie mit der rechten Maustaste und wählen Sie Effekt anwenden.

  4. Im Abschnitt Effekte, wählen Sie die Kategorie Eingang aus der dritten Dropdown-Liste.

    Die verfügbaren Effekte für den Eingang werden im folgenden Fenster angezeigt.

    Um den Effekt eines Objekts auf einer Folie zu sehen, bewegen Sie den Mauszeiger über den Effekt.

  5. Wählen Sie den Effekt EaseInRight.

  6. Legen Sie den Effekt für den rechten Pfeil EaseInLeft fest.

    Wenn Sie an Effekten arbeiten, empfiehlt es sich, in kurzen Abständen eine Vorschau zu sehen. Auf diese Weise erhalten Sie während der Arbeit eine gute Vorstellung davon, wie die Effekte auf der Folie aussehen werden.

  7. Klicken Sie in der Symbolleiste auf Vorschau und wählen Sie dann Folie abspielen.

Lassen Sie uns eine Vorschau des abgeschlossenen Verfahrens anzeigen.

Klicken Sie in der Symbolleiste auf Vorschau und wählen Sie dann „Projekt“, um eine Vorschau des gesamten Projekts anzuzeigen.

Anwenden ereignisbasierter Effekte

Sie können Effekte auf Objekte anwenden, die die Benutzeraktionen (Ereignisse) auslösen. Sie können einen Effekt auf ein Objekt anwenden, der nur ausgelöst wird, wenn Sie eine Aktion für das Objekt ausführen.

In unserem Beispielprojekt werden wir einen Effekt anwenden, um Samanthas Schreibtisch im Grundriss hervorzuheben. Die Folie sieht am Ende dieses Vorgangs dann wie folgt aus:

Wenn der Benutzer auf die Schaltfläche mit der Beschriftung Wo ist Sams Schreibtisch klickt, wird ein Effekt auf der blauen Markierung über Sams Schreibtisch im Grundriss ausgelöst.

  1. Navigieren Sie im heruntergeladenen Zip-Ordner zum Unterordner Muster und öffnen Sie:

    apply-effects.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. Sie müssen jedoch in Captivate ein neues Projekt mit einer Folie erstellen, ähnlich der oben gezeigten Folie.

  2. Navigieren Sie im Filmstreifen zur Folie Samantha.

    Legen Sie auf dieser Folie zuerst eine blaue Markierung um Sams Schreibtisch im Grundriss.

  3. Klicken Sie in der Symbolleiste auf Formen und wählen Sie die rechteckige Form.

  4. Zeichnen Sie die rechteckige Form über Sams Schreibtisch im Grundriss.

  5. Geben Sie im Eigenschafteninspektor die folgenden Eigenschaften für das Rechteck ein:

    Name: sams_desk (wir verwenden den Namen zu einem späteren Zeitpunkt, wenn wir einen Effekt auf dieses Objekt anwenden)

    Deckkraft : 0% (macht das Bild von Sams Schreibtisch unter diesem Objekt sichtbar)

    Wenn der Eigenschafteninspektor nicht rechts neben Ihrem Arbeitsbereich angezeigt wird, klicken Sie in der rechten Ecke der Symbolleiste auf Eigenschaften.

  6. Klicken Sie in der Symbolleiste auf Interaktionen und wählen Sie Schaltfläche.

    Das Schaltflächen-Objekt wird auf der Folie platziert.

  7. Geben Sie im Eigenschafteninspektor die folgenden Eigenschaften ein für die Schaltfläche:

    Wo ist Sams Schreibtisch

  8. Navigieren Sie zur Registerkarte Aktionen.

  9. Wählen Sie in der Dropdown-Liste Bei Erfolg die Option Effekt anwenden.

  10. Wählen Sie in der Dropdown-Liste „Objektname“sams_desk und klicken Sie dann auf  .

  11. Im Abschnitt Effekte, wählen Sie die Kategorie Emphase aus der dritten Dropdown-Liste.

  12. Wählen Sie in der Liste der Effekte Wachsen und Bewegen.

Lassen Sie uns eine Vorschau des abgeschlossenen Verfahrens anzeigen.

Klicken Sie in der Symbolleiste auf Vorschau und wählen Sie dann Projekt, um eine Vorschau des gesamten Projekts anzuzeigen.

Verwenden von Rollover-Objekten

Mit Rollover-Objekten in Captivate können Sie Inhalte anzeigen, wenn ein Benutzer den Mauszeiger über einen vordefinierten Rollover-Bereich auf einer Folie bewegt. Rollover-Objekte ähneln QuickInfos in den meisten Desktop-Anwendungen. Allerdings können Sie außer Text auch Bilder und sogar Folien (so genannte Minifolien) mithilfe der Rollover-Objekte in Captivate anzeigen.

Hinzufügen von Rollover-Beschriftungen

Hinweis:

Die HTML5-Ausgabe für das in diesem Abschnitt beschriebene Verfahren ist hier verfügbar [INTERNAL NOTE: Pending hosting]. Sie können es als Referenz verwenden, während Sie die Schritte im folgenden Verfahren ausführen:

Fügen wir eine Rollover-Beschriftung hinzu, die angezeigt wird, wenn ein Benutzer den Mauszeiger über das Grundrissbild auf der folgenden Folie bewegt:

  1. Navigieren Sie im heruntergeladenen Zip-Ordner zum Unterordner Muster und öffnen Sie:

    apply-effects.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. Sie müssen jedoch in Captivate ein neues Projekt mit einer Folie erstellen, ähnlich der oben gezeigten Folie.

  2. Öffnen Sie das Projekt und wechseln Sie im Filmstreifen zur Folie Samantha.

  3. Klicken Sie in der Symbolleiste auf Objekte und wählen Sie Rollover-Beschriftung.

    Wenn Sie eine Rollover-Beschriftung einer Folie hinzufügen, verfügt das Objekt über zwei Teile:

    Rollover-Beschriftung: Textbeschriftung, die bedingt angezeigt wird (wie eine QuickInfo)

    Rollover-Bereich: Skalierbarer Bereich, auf den der Benutzer mit dem Mauszeiger zeigen muss, um die Textbeschriftung anzuzeigen.

  4. In der Textbeschriftung geben Sie folgenden Text ein:

    LUNARSPHERE STUDIOS, Ebene 4, Grundriss

  5. Verwenden Sie die Ziehpunkte, um den Rollover-Bereich neu zu positionieren und seine Größe zu ändern, sodass er das Bild des Grundrisses auf der rechten Seite der Folie abdeckt.

  6. Positionieren Sie die Textbeschriftung wie unten gezeigt am unteren Rand des Bildes.

  7. Lassen Sie uns eine Vorschau der Rollover-Beschriftung anzeigen.

    Klicken Sie in der Symbolleiste auf Vorschau und wählen Sie dann „Projekt“, um eine Vorschau des gesamten Projekts anzuzeigen.

Lassen Sie uns eine Vorschau des abgeschlossenen Verfahrens anzeigen.

Klicken Sie in der Symbolleiste auf Vorschau und wählen Sie dann „Projekt“, um eine Vorschau des gesamten Projekts anzuzeigen.

Hinzufügen von Rollover-Bildern

Hinweis:

Die HTML5-Ausgabe für das in diesem Abschnitt beschriebene Verfahren ist hier verfügbar [INTERNAL NOTE: Pending hosting]. Sie können es als Referenz verwenden, während Sie die Schritte im folgenden Verfahren ausführen:

Das Rollover-Bildobjekt zeigt ein Bild an, wenn der Benutzer den Mauszeiger über den Rollover-Bereich auf einer Folie bewegt.

Fügen wir der folgenden Folie eine rechteckige Form hinzu. Dann fügen wir ein Rollover-Bild hinzu, sodass, wenn ein Benutzer den Mauszeiger über der Form bewegt, ein Bild von Samathas Team angezeigt wird:

  1. Navigieren Sie im heruntergeladenen Zip-Ordner zum Unterordner Muster und öffnen Sie:

    apply-effects.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. Sie müssen jedoch in Captivate ein neues Projekt mit einer Folie erstellen, ähnlich der oben gezeigten Folie.

  2. Navigieren Sie im Filmstreifen zur Folie Samantha.

  3. Klicken Sie in der Symbolleiste auf Formen und wählen Sie die rechteckige Form.

  4. Zeichnen Sie die rechteckige Form wie oben gezeigt.

  5. Doppelklicken Sie auf die Form und geben Sie folgenden Text ein:

    Bewegen Sie den Mauszeiger hier, um Samanthas Team zu sehen

    Als Nächstes fügen wir ein Rollover-Bild über diese Form hinzu.

  6. Klicken Sie auf Objekte und wählen Sie Rollover-Bild.

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

  7. Navigieren Sie im heruntergeladenen Zip-Ordner zum Unterordner Assets.

  8. Wählen Sie die Datei sams_team und klicken Sie auf „Öffnen“.

    Wenn Sie ein Rollover-Bild einer Folie hinzufügen, verfügt das Objekt über zwei Teile:

    Rollover-Bild: Bild, das bedingt angezeigt wird.

    Rollover-Bereich: Skalierbarer Bereich, auf den der Benutzer mit dem Mauszeiger zeigen muss, um das Bild anzuzeigen.

  9. Verwenden Sie die Ziehpunkte, um den Rollover-Bereich neu zu positionieren und seine Größe zu ändern, um die in Schritt 3 oben hinzugefügte Form abzudecken.

  10. Positionieren Sie das Rollover-Bild, wie zu Beginn dieses Verfahrens gezeigt, neu.

Lassen Sie uns eine Vorschau des abgeschlossenen Verfahrens anzeigen.

Klicken Sie in der Symbolleiste auf Vorschau und wählen Sie dann „Projekt“, um eine Vorschau des gesamten Projekts anzuzeigen.

Hinzufügen von Rollover-Minifolien

Hinweis:

Die HTML5-Ausgabe für das in diesem Abschnitt beschriebene Verfahren ist hier verfügbar [INTERNAL NOTE: Pending hosting]. Sie können es als Referenz verwenden, während Sie die Schritte im folgenden Verfahren ausführen:

Rollover-Minifolien ermöglichen das Hinzufügen von Captivate-Objekten zu einem Rollover-Objekt. Wenn ein Benutzer den Mauszeiger über den Rollover-Bereich bewegt, wird auf diese Weise der gesamte Inhalt der Minifolie angezeigt. Diese Funktion ist nützlich, wenn Sie mehr als nur Text oder Bilder anzeigen möchten.

Fügen wir ein Rollover-Minifolie hinzu, um weitere Details zu Samantha anzuzeigen, wenn Benutzer mit dem Mauszeiger auf ihr Bild auf der nächsten Folie zeigen:

  1. Navigieren Sie im heruntergeladenen Zip-Ordner zum Unterordner Muster und öffnen Sie:

    apply-effects.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. Sie müssen jedoch in Captivate ein neues Projekt mit einer Folie erstellen, ähnlich der oben gezeigten Folie.

  2. Öffnen Sie das Projekt und wechseln Sie im Filmstreifen zur Folie Samantha.

  3. Klicken Sie in der Symbolleiste auf Objekte und wählen Sie Rollover-Minifolie.

    Wenn Sie eine Rollover-Minifolien einer Folie hinzufügen, verfügt das Objekt über zwei Teile:

    Minifolie: Captivate-Objekt-Container, der bedingt angezeigt wird.

    Rollover-Bereich: Skalierbarer Bereich, auf den der Benutzer mit dem Mauszeiger zeigen muss, um die Minifolie anzuzeigen.

    Fügen wir der Minifolie eine rechteckige Form hinzu.

    Hinweis:

    Sie können einer Folie auch andere Objekte hinzufügen, wir fügen der Einfachheit halber aber nur eine rechteckige Form hinzu.

  4. Wählen Sie die Minifolie, klicken Sie auf Formen und wählen Sie die rechteckige Form.

  5. Zeichnen Sie die rechteckige Form innerhalb der Minifolie.

  6. Kopieren Sie den folgenden Text und fügen Sie ihn in die rechteckige Form ein:

    Über mich: Ich bin seit der Gründung bei Lunarsphere Studios. Ich höre nicht gern ein „Nein“ und ich möchte Lösungen sehen, nicht nur Probleme. 

    Mein Lieblingsfilm: Casablanca

    Mein bester Urlaub: Kairo, um die Pyramiden von Gizeh zu sehen

    Ein Punkt auf meiner Wunschliste: Eine Kochstunde mit Gordon Ramsay

  7. Verwenden Sie den Eigenschafteninspektor, um die Textfarbe in Weiß und die Farbe der Form zu ändern.

  8. Verwenden Sie die Ziehpunkte, um den Rollover-Bereich neu zu positionieren und seine Größe zu ändern, um das Bild von Samatha auf der linken Seite der Folie abzudecken.

Lassen Sie uns eine Vorschau des abgeschlossenen Verfahrens anzeigen.

Klicken Sie in der Symbolleiste auf Vorschau und wählen Sie dann „Projekt“, um eine Vorschau des gesamten Projekts anzuzeigen.

Vorschau und Veröffentlichen

In diesem Abschnitt wurde viel über Effekte in Captivate berichtet.

Wir haben Effekte auf Objekteangewendet. Wir haben ereignisbasierte Effekte erstellt und Rollover-Objekte hinzugefügt, um den Inhalt einer Folie bedingt anzuzeigen.

Lassen Sie uns eine Vorschau unseres Fortschritts ansehen.

Klicken Sie in der Symbolleiste auf Vorschau und wählen Sie dann „Projekt“, um eine Vorschau des gesamten Projekts anzuzeigen.

Wenn etwas fehlt, können Sie den entsprechenden Abschnitt in diesem Artikel aufrufen und die erforderlichen Aktualisierungen für Ihr Projekt vornehmen.

Wenn alles gut aussieht, veröffentlichen wir das Projekt.

  1. Klicken Sie in der Symbolleiste auf Veröffentlichen und wählen Sie dann Auf Computer veröffentlichen.

    Das Dialogfeld Auf Computer veröffentlichen wird angezeigt.

  2. Stellen Sie in der Dropdownliste Veröffentlichen als sicher, dass HTML5/SWF ausgewählt ist.

  3. Stellen Sie in der Option Ausgabeformat sicher, dass HTML5 ausgewählt ist.

  4. Klicken Sie auf Veröffentlichen.

Weitere Informationen zum Verwenden von Effekten finden Sie unter Objekteffekte.

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?

Hilfreiche Links

Alle Abos anzeigen Abos verwalten
Hilfreiche Links einblenden
Hilfreiche Links ausblenden

Rechtliche Hinweise    |    Online-Datenschutzrichtlinien