Benutzerhandbuch Abbrechen

Interaktivität mit Codefragmenten in Animate hinzufügen

  1. Adobe Animate-Benutzerhandbuch
  2. Einführung in Animate
    1. Neue Funktionen in Animate
    2. Visuelles Glossar
    3. Systemanforderungen für Animate
    4. Tastaturbefehle für Animate
    5. Arbeiten mit verschiedenen Dateitypen in Animate
  3. Animation
    1. Grundlagen von Animationen in Animate
    2. So verwenden Sie Bilder und Schlüsselbilder in Animate
    3. Einzelbildanimation in Animate
    4. Arbeiten mit klassischen Tween-Animationen in Animate
    5. Pinselwerkzeug
    6. Bewegungsführung
    7. Bewegungs-Tweens und ActionScript 3.0
    8. Bewegungs-Tween-Animationen
    9. Bewegungs-Tween-Animationen
    10. Erstellen von Bewegungs-Tween-Animationen
    11. Verwenden von Eigenschaftenschlüsselbildern
    12. Animieren der Position mithilfe eines Tweens
    13. So bearbeiten Sie Bewegungs-Tweens mit dem Bewegungs-Editor
    14. Bearbeiten des Bewegungspfades einer Tween-Animation
    15. Manipulieren von Bewegungs-Tweens
    16. Hinzufügen von benutzerdefinierten Beschleunigungen
    17. Erstellen und Anwenden von Bewegungsvoreinstellungen
    18. Einrichten von Animations-Tween-Bereichen
    19. Arbeiten mit als XML-Dateien gespeicherten Bewegungs-Tweens
    20. Vergleich von Bewegungs-Tweens und klassischen Tweens
    21. Form-Tweening
    22. Verwenden von Animation mit dem Bone-Werkzeug in Animate
    23. Arbeiten mit Figuren-Rigging in Animate
    24. So verwenden Sie Maskenebenen in Adobe Animate
    25. So arbeiten Sie in Animate mit Szenen
  4. Interaktivität
    1. So erstellen Sie in Animate Schaltflächen
    2. Konvertieren von Animate-Projekten in andere Dokumenttypen
    3. HTML5 Canvas-Dokumente in Animate erstellen und veröffentlichen
    4. Interaktivität mit Codefragmenten in Animate hinzufügen
    5. Erstellen benutzerdefinierter HTML5-Komponenten
    6. Verwenden von Komponenten in HTML5 Canvas
    7. Erstellen von benutzerdefinierten Komponenten: Beispiele
    8. Codefragmente für benutzerdefinierte Komponenten
    9. Empfohlene Verfahren – Anzeigen mit Animate
    10. Authoring und Veröffentlichen für VR
  5. Arbeitsbereich und Arbeitsablauf
    1. Erstellen und Verwalten von Pinseln
    2. Verwenden von Google Fonts in HTML5 Canvas-Dokumenten
    3. Verwenden von Creative Cloud Libraries in Adobe Animate
    4. Bühne und Bedienfeld „Werkzeuge“ in Animate verwenden
    5. Arbeitsablauf und Arbeitsbereich in Animate
    6. Verwenden von Webschriftarten in HTML5 Canvas-Dokumenten
    7. Zeitleisten und ActionScript
    8. Arbeiten mit mehreren Zeitleisten
    9. Festlegen von Voreinstellungen
    10. Verwenden der Animate-Authoring-Bedienfelder
    11. Zeitleisten-Ebenen in Animate erstellen
    12. Exportieren von Animationen für Apps und Game-Engines
    13. Verschieben und Kopieren von Objekten
    14. Vorlagen
    15. Suchen und Ersetzen in Animate
    16. Rückgängigmachen, Wiederholen und das Bedienfeld „Protokoll“
    17. Tastaturbefehle
    18. So verwenden Sie die Zeitleiste in Animate
    19. Erstellen von HTML-Erweiterungen
    20. Optimierungsoptionen für Bilder und animierte GIF-Dateien
    21. Exporteinstellungen für Bilder und GIF-Dateien
    22. Bedienfeld „Elemente“ in Animate
  6. Multimedia und Video
    1. Transformieren und Kombinieren von Grafikobjekten in Animate
    2. Erstellen von und Arbeiten mit Symbolinstanzen in Animate
    3. Bildnachzeichner
    4. So verwenden Sie Sound in Adobe Animate
    5. Exportieren von SVG-Dateien
    6. Erstellen von Videodateien zur Verwendung in Animate
    7. So fügen Sie in Animate ein Video hinzu
    8. Objekte in Animate zeichnen und erstellen
    9. Umformen von Linien und Formen
    10. Striche, Füllungen und Farbverläufe in Animate CC
    11. Adobe Premiere Pro und After Effects
    12. Farb-Bedienfelder in Animate CC
    13. Öffnen von Flash CS6-Dateien mit Animate
    14. In Animate mit klassischem Text arbeiten
    15. Platzieren von Bildern in Animate
    16. Importierte Bitmaps in Animate
    17. 3D-Grafiken
    18. Arbeiten mit Symbolen in Animate
    19. Zeichnen von Linien und Formen mit Adobe Animate
    20. Mit Bibliotheken in Animate arbeiten
    21. Exportieren von Sounds
    22. Auswählen von Objekten in Animate CC
    23. Arbeiten mit Adobe Illustrator AI-Dateien in Animate
    24. Anwenden von Mischmodi
    25. Anordnen von Objekten
    26. Automatisieren von Aufgaben mit dem Menü „Befehle“
    27. Mehrsprachiger Text
    28. Verwenden der Kamera in Animate
    29. Grafikfilter
    30. Sounds und ActionScript
    31. Zeichnungsvoreinstellungen
    32. Zeichnen mit dem Stiftwerkzeug
  7. Plattformen
    1. Konvertieren von Animate-Projekten in andere Dokumenttypen
    2. Unterstützung benutzerdefinierter Plattformen
    3. HTML5 Canvas-Dokumente in Animate erstellen und veröffentlichen
    4. Erstellen und Veröffentlichen eines WebGL-Dokuments
    5. So packen Sie Apps für AIR for iOS:
    6. Veröffentlichen von Apps für AIR for Android
    7. Veröffentlichen für Adobe AIR für den Desktop
    8. ActionScript-Veröffentlichungseinstellungen
    9. Empfohlene Verfahren – Organisieren von ActionScript in einer Anwendung
    10. So verwenden Sie ActionScript mit Animate
    11. Eingabehilfen für den Animate-Arbeitsbereich
    12. Schreiben und Verwalten von Skripts
    13. Aktivieren der Unterstützung für benutzerdefinierte Plattformen
    14. Unterstützung benutzerdefinierter Plattformen – Übersicht
    15. Arbeiten mit Plug-ins zur Unterstützung benutzerdefinierter Plattformen
    16. Debuggen von ActionScript 3.0
    17. Aktivieren der Unterstützung für benutzerdefinierte Plattformen
  8. Exportieren und Veröffentlichen
    1. So exportieren Sie Dateien aus Animate CC
    2. OAM-Veröffentlichung
    3. Exportieren von SVG-Dateien
    4. Exportieren von Grafiken und Videos mit Animate
    5. Veröffentlichen von AS3-Dokumenten
    6. Exportieren von Animationen für Apps und Game-Engines
    7. Exportieren von Sounds
    8. Empfohlene Verfahren – Tipps zum Erstellen von Inhalten für mobile Geräte
    9. Empfohlene Verfahren – Videokonventionen
    10. Empfohlene Verfahren – Authoring-Richtlinien für SWF-Anwendungen
    11. Empfohlene Verfahren – Strukturierung von FLA-Dateien
    12. Empfohlene Verfahren für die Optimierung von FLA-Dateien für Animate
    13. ActionScript-Veröffentlichungseinstellungen
    14. Veröffentlichungseinstellungen für Animate festlegen
    15. Exportieren von Projektor-Dateien
    16. Exportieren von Bildern und animierten GIF-Dateien
    17. HTML-Veröffentlichungsvorlagen
    18. Adobe Premiere Pro und After Effects
    19. Schnelles Teilen und Veröffentlichen Ihrer Animationen
  9. Fehlerbehebung
    1. Behobene Probleme
    2. Bekannte Probleme

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?