Benutzerhandbuch Abbrechen

Interaktivität mit Codefragmenten in Animate hinzufügen

Das Bedienfeld „Codefragmente“ soll Benutzern, die keine Programmierer sind, den Einstieg in die Verwendung von einfachem JavaScript und ActionScript 3.0 erleichtern. Sie können damit Code in Ihre FLA-Datei einfügen, um allgemeine Funktionen zu aktivieren. Für die Arbeit mit dem Bedienfeld „Codefragmente“ sind keine Kenntnisse von JavaScript oder ActionScript 3.0 erforderlich.

Im Bedienfeld „Codefragmente“ haben Sie die folgenden Möglichkeiten:

  • Hinzufügen von Code, der das Verhalten eines Objekts auf der Bühne betrifft

  • Hinzufügen von Code, der die Bewegung des Abspielkopfes in der Zeitleiste steuert

  • (Nur in CS5.5.) Hinzufügen von Code, der eine Benutzerinteraktion per Touchscreen erlaubt

  • Hinzufügen von neuen Codefragmenten, die Sie erstellt haben

Die Verwendung der in Animate enthaltenen Codefragmente ist eine gute Möglichkeit, sich mit JavaScript oder ActionScript 3.0 vertraut zu machen. Indem Sie sich den Code in den Fragmenten ansehen und den Anweisungen für die Fragmente folgen, erhalten Sie einen Einblick in die Codestruktur und die verwendeten Begriffe.

Option „Codefragmente“ in Animate
Option „Codefragmente“ in Animate

Bevor Sie beginnen

Wenn Sie mit dem Bedienfeld „Codefragmente“ arbeiten, ist ein Verständnis der folgenden Animate-Grundlagen unerlässlich:

  • Für viele Codefragmente müssen Sie einige Elemente des Codes anpassen. In Animate verwenden Sie dazu das Bedienfeld „Aktionen“. Jedes Codefragment enthält bestimmte Anweisungen für diese Aufgabe.

  • Bei allen enthaltenen Codefragmente handelt es sich entweder um JavaScript oder ActionScript 3.0.

  • Einige Fragmente beeinflussen das Verhalten eines Objektes, sodass darauf geklickt werden kann oder es sich bewegt oder ausgeblendet wird. Sie wenden diese Fragmente auf das Objekt auf der Bühne an.

  • Einige Fragmente veranlassen, dass eine Aktion ausgeführt wird, sobald der Abspielkopf in das Bild eintritt, das dieses Fragment enthält. Sie wenden diese Fragmente auf ein Zeitleistenbild an.

  • Wenn Sie ein Codefragment anwenden, wird der Code dem aktuellen Bild der Ebene „Aktionen“ in der Zeitleiste hinzugefügt. Wenn Sie selbst keine Ebene „Aktionen“ erstellt haben, fügt Animate diese Ebene über allen anderen Ebenen in der Zeitleiste hinzu.

  • Damit ActionScript ein Objekt auf der Bühne steuern kann, muss dem Objekt im Eigenschafteninspektor ein Objektname zugewiesen werden.

  • Sie können auf die Schaltflächen „Beschreibung einblenden“ und „Code einblenden“ klicken. Beide Schaltflächen werden angezeigt, wenn Sie im Bedienfeld ein Codefragment auswählen.

Hinzufügen von Codefragmenten zu einem Objekt oder Zeitleistenbild

So fügen Sie eine Aktion hinzu, die ein Objekt oder den Abspielkopf betrifft:

  1. Wählen Sie ein Objekt auf der Bühne oder ein Bild in der Zeitleiste aus.

    Wenn Sie ein Objekt auswählen, das keine Symbolinstanz ist, konvertiert Animate das Objekt in ein Movieclip-Symbol, wenn Sie das Codefragment anwenden.

    Wenn Sie ein Objekt auswählen, das noch keinen Instanznamen hat, fügt Animate diesen hinzu, wenn Sie das Codefragment anwenden.

  2. Doppelklicken Sie im Bedienfeld „Codefragmente“ (Fenster > Codefragmente) auf das gewünschte Codefragment.

    Falls Sie ein Objekt auf der Bühne ausgewählt haben, fügt Animate das Codefragment in den Bildern, die das ausgewählte Objekt enthalten, dem Bedienfeld „Aktionen“ hinzu.

    Haben Sie dagegen ein Zeitleistenbild ausgewählt, fügt Animate das Codefragment nur diesem Bild hinzu.

  3. Sehen Sie sich den neu hinzugefügten Code im Bedienfeld „Aktionen“ an und ersetzen Sie erforderliche Elemente gemäß den Anweisungen oben im Codefragment.

Codefragment im Bedienfeld „Aktionen“

Hinzufügen neuer Fragmente zum Bedienfeld „Codefragmente“

Sie haben zwei Möglichkeiten, dem Bedienfeld „Codefragmente“ neue Codefragmente hinzuzufügen:

  • Geben Sie ein Codefragment in das Dialogfeld Neues Codefragment erstellen ein.

  • Importieren Sie eine Codefragment-XML-Datei.

So verwenden Sie das Dialogfeld „Neues Codefragment erstellen“:

  1. Wählen Sie im Bedienfeldmenü des Bedienfelds „Codefragmente“ den Befehl „Neues Codefragment erstellen“.

  2. Geben Sie im Dialogfeld den Titel, den QuickInfo-Text sowie den JavaScript oder ActionScript 3.0-Code für das Codefragment ein.

    Sie können Code, der zurzeit im Bedienfeld „Aktionen“ ausgewählt ist, hinzufügen, indem Sie auf die Schaltfläche „Auto-Ausfüllen“ klicken.

  3. Aktivieren Sie das Kontrollkästchen „Beim Anwenden von Codefragmenten instance_name_here automatisch ersetzen“, falls Ihr Code den String „instance_name_here“ enthält und Animate diesen durch den korrekten Instanznamen ersetzen soll, wenn das Codefragment angewendet wird.

    Animate fügt das neue Fragment dem Bedienfeld „Codefragmente“ im Ordner „Benutzerdefiniert“ hinzu.

So importieren Sie ein Codefragment im XML-Format:

  1. Wählen Sie im Bedienfeld-Menü des Bedienfelds „Codefragmente“ die Option „Codefragmente-XML importieren“.

  2. Wählen Sie die gewünschte XML-Datei aus und klicken Sie auf „Öffnen“.

Um das richtige XML-Format für Codefragmente zu sehen, wählen Sie im Bedienfeldmenü die Option „Codefragmente-XML bearbeiten“.

Um ein Codefragment zu löschen, klicken Sie mit der rechten Maustaste auf das Fragment im Bedienfeld und wählen Sie im Kontextmenü den Befehl „Codefragment löschen“.

Interaktive Animationen mit HTML5

Bestimmte Animationen erfordern Code-Snippets, um verschiedene Veröffentlichungsplattformen zu unterstützen. Möchten Sie erfahren, wie Sie Code-Snippets verwenden, um Ihre Animation interaktiv zu gestalten? Sehen Sie sich einfach das Tutorial am Ende dieses Beispiels an und befolgen Sie die Schritte.

  1. Klicken Sie unter Bibliothek auf Veröffentlichungseinstellungen.

  2. Wählen Sie JavScript/HTML aus.

  3. Klicken Sie auf der Registerkarte HTML/JS auf Exportieren und wählen Sie die folgenden Optionen aus:

    • Dateiname: Geben Sie den Namen der Datei ein.
    • Als Typ speichern: Wählen Sie HTML aus.
  4. Klicken Sie auf OK.

So verbessern Sie Ihre interaktiven HTML5-Animationen

Sehen Sie sich das Video an, um zu erfahren, wie Sie die Codes bearbeiten.

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?