Sie können den Kompositionen mit JavaScript Interaktivität hinzufügen. Sie können mit einem integrierten Codeeditor und einer Codefragmentbibliothek Aktionen für jedes Element definieren. Aktionen sind Funktionen, die hinzugefügt werden können, um ein einzelnes Ereignis zu behandeln.

Hinzufügen von Interaktivität

Hinzufügen von Interaktivität
Paul Trani

Definieren von Aktionen

  1. Klicken auf der Zeitleiste links von einem Element- oder Symbolnamen auf die Schaltfläche „Aktionen öffnen“.

    Schaltfläche „Aktionen öffnen“

    Sie können auch im Bedienfeld „Elemente“ links neben einem Element- oder Symbolnamen auf die Schaltfläche „Aktionen öffnen“ klicken.

  2. Wählen Sie das Ereignis aus, das die Aktion auslösen soll.

    Der Aktionseditor wird mit einem Codeeditor und einer Liste von Codefragmenten auf der rechten Seite angezeigt.

  3. Schreiben Sie den Code für das Ereignis.

    Sie können eigenen Code schreiben oder die Codefragmente verwenden, um häufig verwendete Funktionen hinzuzufügen. Referenzinformationen finden Sie im Handbuch zur Edge Animate-API.

Verwenden des Codeeditors

Der Codeeditor bietet eine vollständige Ansicht des JavaScript-Codes im Projekt. Sie können in ihm auch den Rohcode für die Aktionsdatei anzeigen.

  1. Wählen Sie „Fenster“ > „Code“.

    Sie können auch Strg+E (Windows) bzw. Befehlstaste+E (Macintosh) drücken.

  2. Wählen Sie ein Ereignis oder ein Element aus, indem Sie links von der Bühne auf der linken Seitenleiste auf das Pluszeichen (+) klicken.

  3. Um die gesamte JavaScript-Datei zu bearbeiten, klicken Sie in der rechten oberen Ecke des Bedienfelds auf die Schaltfläche „Vollständiger Code“.

    Schaltfläche „Vollständiger Code“

Hinzufügen von Beschriftungen zur Zeitleiste

Sie können auf der Zeitleiste Beschriftungen einfügen und sie dann in Funktionsparametern als Zeitreferenzen verwenden. Sie können einen Beschriftungsnamen als Parameter für jede Wiedergabefunktion verwenden, die einen Zeitcodewert erwartet. Mit Beschriftungen können Sie Aktionen erstellen, z. B. das Abspielen oder Suchen bis zu einem Punkt auf der Zeitleiste.

So fügen Sie eine Beschriftung hinzu:

  1. Verschieben Sie den Abspielkopf auf die gewünschte Position.

  2. Klicken Sie in der oberen rechten Ecke der Zeitleiste auf die Schaltfläche „Beschriftung einfügen“.

    Schaltfläche „Beschriftung einfügen“

    Hinweis:

    Sie können auch Strg+L (Windows) bzw. Befehlstaste+L (Macintosh) drücken.

  3. Geben Sie einen Namen für die Beschriftung an.

  4. Wenn Sie im Codeeditor eine Aktion für ein Element definieren, verwenden Sie den Beschriftungsnamen als Parameter für Wiedergabefunktionen, die einen Zeitcodewert erwarten.

    Sie können beispielsweise sym.play('meineBeschriftung') anstelle von sym.play(1000) verwenden.

Hinzufügen von Auslösern zur Zeitleiste

Sie können auf der Zeitleiste Auslöser einfügen, um JavaScript-Code zu einem bestimmten Zeitpunkt auszuführen.

So fügen Sie einen Auslöser hinzu:

  1. Verschieben Sie den Abspielkopf auf die gewünschte Position.

  2. Klicken Sie in der oberen rechten Ecke der Zeitleiste auf die Schaltfläche „Auslöser einfügen“.

    Schaltfläche „Auslöser einfügen“

    Hinweis:

    Sie können auch Strg+T (Windows) bzw. Befehlstaste+T (Macintosh) drücken.

    Das Bedienfeld „Code“ wird angezeigt.

  3. Definieren Sie die Aktion, die vom Auslöser ausgelöst werden soll. Referenzinformationen finden Sie im Handbuch zur Edge Animate-API.

Sie können den Code für den Auslöser jederzeit ändern, indem Sie auf der Zeitleiste auf das Auslösersymbol doppelklicken.

Auslösersymbol

Weitere Informationen

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