Benutzerhandbuch Abbrechen

Erstellen von HTML-Erweiterungen

  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

Animate kann mit HTML-Erweiterungen erweitert werden. Adobe Extension Builder 3 bietet Ihnen die Möglichkeit, HTML-Erweiterungen für Animate zu erstellen. Bisher konnten Sie Animate nur mit SWF-Erweiterungen erweitern. Adobe Extension Builder 3 bietet Ihnen jedoch die Möglichkeit, HTML-Erweiterungen für Creative Cloud-Anwendungen zu erstellen. Um zu beginnen, müssen Sie Eclipse und Extension Builder 3.0 herunterladen und installieren.

Erstellen von HTML-Erweiterungen

Um eine HTML-Erweiterung zu erstellen, gehen Sie wie folgt vor.

  1. Starten Sie Eclipse. 
  2. Erstellen Sie im Assistenten „New Project“ (Neues Projekt) ein neues Anwendungserweiterungs-Projekt. Geben Sie einen aussagekräftigen Namen für das Projekt ein und klicken Sei auf „Next“ (Weiter).
  3. Wählen Sie im Bedienfeld „New Adobe Application Extension Project“ (Neues Adobe-Anwendungserweiterungs-Projekt) die Option „Adobe Animate“. Klicken Sie auf „Weiter“.
  4. Konfigurieren Sie Ihre Erweiterung mit den verfügbaren Optionen:
    1. Bundle ID (Paket-ID) fügt Ihrer Erweiterung eine eindeutige ID hinzu.
    2. Menu name (Menüname) ist der Anzeigename der Erweiterung. Der Menüname wird in Animate unter Fenster > Erweiterungen angezeigt.
    3. Window Details (Fensterdetails) enthält Optionen, mit denen Sie Typ und Größe des Erweiterungsfensters anpassen können.

      Klicken Sie auf Next (Weiter).
  5. Sie können die Verweisbibliotheken für die Erweiterung auf den folgenden nächsten Bildschirmen weiter anpassen:
    1. CEP Interface Library (CEP-Oberflächen-Bibliothek) enthält Funktionen für die Interaktion mit der Host-Anwendung. Diese Option ist standardmäßig aktiviert.
    2. Frameworks für gängige Javascript-Bibliotheken wie jQuery.
    3. Services (Dienste) enthält das Adobe IPC Communication Toolkit, das die Kommunikation zwischen Adobe-Anwendungen und -Erweiterungen sowie externen Erweiterungen ermöglicht. Es enthält ein Protokoll für Messaging über den CEP Service Manager, der als Zentrale für die Creative Cloud-Kommunikation dient.

      Klicken Sie auf „Finish“ (Fertig stellen), um ein neues Eclipse-Projekt zu erstellen.

Debuggen der Erweiterung in Animate

Sie können Ihre Erweiterung direkt aus Eclipse ausführen:

  1. Klicken Sie mit der rechten Maustaste auf das Projekt und wählen Sie Ausführen als > Adobe Flash-Erweiterung. Dadurch wird Animate gestartet.
  2. Wählen Sie in Animate das Menüelement Fenster > Erweiterungen aus. Das Bedienfeld „Erweiterung“ wird geöffnet.

Exportieren der Erweiterung

Damit Sie die Erweiterung verteilen können, müssen Sie sie als ZXP-Paket exportieren. Das ZXP-Paket wird dann von Adobe Extension Manager heruntergeladen und in Creative Cloud-Anwendungen ausgeführt:

  1. Wechseln Sie in Eclipse zur Ansicht „Script Explorer“ (Skript-Explorer), klicken Sie mit der rechten Maustaste auf das Projekt und wählen Sie Export (Exportieren) > Adobe Extension Builder 3 > Application Extension (Anwendungserweiterung). Der Export-Assistent wird angezeigt.
  2. Sie benötigen ein Zertifikat, um das Erweiterungspaket signieren zu können. Navigieren Sie zu einem vorhandenen Zertifikat oder klicken Sie auf Create (Erstellen), um ein neues zu erstellen.
  3. Klicken Sie auf „Finish“ (Fertig stellen).
  4. Nach abgeschlossenem Export finden Sie das ZXP-Paket für Ihre Erweiterung im Projektordner. Sie können es nun verteilen.

Hinweis: Für die Installation benötigen Sie Zugriff auf die Datei <Erweiterung>\.staged-extension\CSXS\manifest.xml und müssen im Tag host die Mindestversion von Animate in 13.0 aktualisieren.

Installieren der Erweiterung in Animate

Sie können HTML-Erweiterungen in Animate mit Adobe Extension Manager installieren. Mit HTML-Erweiterungen können Sie die Funktionen und Möglichkeiten von Animate erweitern.

Hinzufügen von Interaktivität zu HTML-Erweiterungen

Sie können eine HTML-Erweiterung erstellen, die mit Animate interagiert, indem Sie Steuerelemente hinzufügen, das Verhalten definieren und Informationen über die Host-Umgebung (einschließlich Animate und Betriebssystem) ermitteln. Hierfür gibt es zwei Möglichkeiten:

  1. Mit der CEP-Schnittstellenbibliothek: Die CEP-Schnittstellenbibliothek enthält APIs zum Ermitteln von Informationen über die Host-Umgebung sowie ein Auswertungsskript, mit dem Sie JSFLs ausführen können. Weitere Informationen über die CEP-Schnittstellenbibliothek finden Sie in Eclipse unter Hilfe > Hilfeinhalte > Adobe Extension Builder > Referenzen.
  2. Mit JSFL: JSFL-Skripts können mit der Auswertungsskript-API der CEP-Schnittstellenbibliothek ausgeführt werden.

    Neben JSFLs enthält die CEP-Infrastruktur in Animate auch die folgenden Ereignisse, die nur in HTML-Bedienfeldern verwendet werden können.
    • com.adobe.events.flash.documentChanged Wird aufgrund einer Änderung im zurzeit aktiven Dokument ausgelöst.
    • com.adobe.events.flash.timelineChanged Wird ausgelöst, wenn Sie eine Änderung an der Zeitleiste des zurzeit aktiven Dokuments vornehmen.
    • com.adobe.events.flash.documentSaved Wird ausgelöst, wenn Sie das aktuelle Dokument speichern.
    • com.adobe.events.flash.documentOpened Wird ausgelöst, wenn Sie ein neues Dokument öffnen.
    • com.adobe.events.flash.documentClosed Wird ausgelöst, wenn Sie das zurzeit aktive Dokument schließen.
    • com.adobe.events.flash.documentNew Wird ausgelöst, wenn Sie ein neues Dokument erstellen.
    • com.adobe.events.flash.layerChanged Wird ausgelöst, wenn Sie eine andere Ebene wählen.
    • com.adobe.events.flash.frameChanged Wird ausgelöst, wenn Sie ein anderes Bild wählen.
    • com.adobe.events.flash.selectionChanged Wird ausgelöst, wenn Sie ein anderes Objekt auf der Bühne wählen.
    • com.adobe.events.flash.mouseMove Wird ausgelöst, wenn Sie die Maus über die Bühne bewegen.

Beispiel

csinterface.addEventListener(&quot;com.adobe.events.flash.selectionChanged&quot;, CallbackFunction)

Im obigen Codefragment gilt Folgendes:

  • csinterface: Objekt der CEP-Schnittstellenbibliothek.
  • com.adobe.events.flash.selectionChanged: Ereignis, das eine Änderung an der Auswahl eines Objekts auslöst. Sie können auch jedes der oben genannten Ereignisse verwenden.
  • CallbackFunction: Methode, die auf das ausgelöste Ereignis wartet.

 Adobe

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?