Benutzerhandbuch Abbrechen

Verwenden von Komponenten in HTML5 Canvas

Suchen
Animate

Animate

App öffnen
  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

In diesem Artikel erfahren Sie mehr über die Verwendung von anpassbaren Komponenten.

Die Komponente stellt eine Funktion oder eine Gruppe zusammengehöriger wiederverwendbarer benutzerdefinierter Komponenten bereit, die die Produktivität von Gestaltern aus der Werbebranche verbessern. In Animate wurden bisher Flash-Komponenten unterstützt, die mit Flash-basierten Zielen verwendet wurden. Ab dieser Version unterstützt Animate HTML5 Canvas. 

  1. Wählen Sie Datei > Neu.

    Wählen Sie Erweitert aus den Registerkarten oben im Dialogfeld Neues Dokument und wählen Sie dann die Option HTML5 Canvas.

    Neues Dokument
    HTML5 Canvas

  2. Wählen Sie Fenster > Komponenten aus.

    Standardkomponenten

  3. Wählen Sie Komponenten > Video aus. Ziehen Sie die zugehörigen Komponenten per Drag-and-Drop auf die Leinwand. 

  4. Wählen Sie die Videokomponenteninstanz auf der Bühne aus; Sie können Parameter im Eigenschafteninspektor anzeigen und ändern. Mit dem Parameter Quelle kann eine Videodatei in einem lokalen Speicherort ausgewählt oder eine beliebige URL angegeben werden, um das Video abzuspielen (Formate mp4, ogg, ogv oder webm). 

    Ziehen der Komponenten per Drag-and-Drop

  5. Wählen Sie „An Quelldimensionen anpassen“ aus, um den Videoplayer an die Größe des Eingabevideos anzupassen. Diese Funktion funktioniert nur bei mp4-Videos. Bei anderen Videotypen ändern Sie die Größe der Videoinstanz auf der Bühne manuell, damit das Seitenverhältnis gleich bleibt.

  6. Drücken Sie Strg + Eingabetaste (Befehl + Zeilenschalter bei Mac), um eine Vorschau des Films anzuzeigen. Das Video wird in Ihrem Standardbrowser wiedergegeben. Da die Steuerelemente standardmäßig sichtbar sind, können Sie sie anzeigen, wenn Sie die Maus über dem Video in einem Browser bewegen.

    Sie können auf dieselbe Weise vorgehen, um andere Komponenten zu verwenden.

    Vorschau der Komponentenausgabe

 Komponenten werden HTML-Dokumenten als DOM-Elementen hinzugefügt. Entsprechend haben Sie unter den Komponenten-Codefragmenten (Codefragmente > HTML5 Canvas > Komponenten) die Möglichkeit, Komponenten Interaktivität hinzuzufügen.

Hinzufügen von Interaktivität zu Komponenten mithilfe von Codefragmenten

  1. Wählen Sie Fenster > Komponenten aus.

  2. Um Interaktivität zu den Komponenten hinzuzufügen, wählen Sie „Fenster“ > Bedienfeld „Codefragmente“ aus. Sie können die Zuordnung der verschiedenen verfügbaren Komponentenverhaltensweisen anzeigen.

  3. Wählen Sie im Bildschirm „Codefragmente“ die Befehlsfolge „HTML5 Canvas“ > „Komponenten“ aus.

    Standard-Codefragmente

  4. Doppelklicken Sie je nach ausgewählter Komponente auf das entsprechende Codefragment, um das Fragment im Bedienfeld „Aktionen“ anzuzeigen. Weitere Informationen zum Hinzufügen von Interaktivität zu Codefragmenten finden Sie unter Interaktivität mit Codefragmenten in Animate hinzufügen. 

Beispiel

Lernen Sie anhand des folgenden Beispiels, wie Codefragmente verwendet werden, in denen die Wiedergabe des Videos durch Code gesteuert wird.

  1. Wählen Sie die Videoinstanz auf der Bühne aus und deaktivieren Sie die Einstellung „Automatisch abspielen“ im Eigenschafteninspektor. 

  2. Doppelklicken Sie im Bedienfeld „Komponenten“ zweimal auf die Komponente „Schaltfläche“, um zwei Instanzen auf der Bühne zu erstellen und die Schaltflächen zu platzieren. Sie können sie auch per Drag & Drop direkt aus dem Bedienfeld „Komponenten“ auf der Bühne platzieren.

    Schaltflächen platzieren

  3. Wählen Sie die erste Schaltflächeninstanz aus und ändern Sie die Beschriftung in „Im PI abspielen“ und die Beschriftung der zweiten Schaltfläche in „Pause“. 

  4. Öffnen Sie das Bedienfeld „Codefragmente“, indem Sie auf „Fenster“ > „Codefragmente“ klicken. Navigieren Sie zu „HTML5 Canvas“ > „Komponenten“ und erweitern Sie den Abschnitt „User Interface“. 

  5. Wählen Sie die Schaltfläche „Abspielen“ auf der Bühne aus, doppelklicken Sie im Bedienfeld „Codefragmente“ auf das Klickereignis für Schaltfläche und klicken Sie auf „OK“. Animate weist der ausgewählten Schaltfläche einen Instanznamen zu. Sie können den neu hinzugefügten Code im Bedienfeld „Aktionen“ anzeigen.

    Codefragmente hinzufügen

  6. Wählen Sie das Video auf der Bühne aus und erweitern Sie den Videoabschnitt in den Codefragmenten. Doppelklicken Sie auf „Video abspielen“. Der für das Abspielen des Videos erforderliche Code wird dem Bedienfeld „Aktionen“ hinzugefügt.

    Code, der dem Bedienfeld „Aktionen“ hinzugefügt wurde

  7. Um das Video bei Anklicken der Schaltfläche abzuspielen, verschieben Sie den Code in den Abschnitt zwischen <Beginn des benutzerdefinierten Codes> und <Ende des benutzerdefinierten Codes>. 

    Den Code innerhalb der Tags verschieben

  8. Um einen Code zum Pausieren des Videos hinzuzufügen, wählen Sie die Schaltfläche „Pause“, weisen Sie die neue Klick-Prozedur zu und fügen Sie den Videocode für die Pause hinzu.

  9. Zeigen Sie eine Vorschau des Films an. Klicken Sie auf „Abspielen“, um das Video abzuspielen, und klicken Sie auf „Pause“, um das Video anzuhalten. 

 Sie können das className-Attribut für jede Komponente im Eigenschafteninspektor anzeigen. Verwenden Sie diese Klassennamen, um den Komponenten unter Verwendung eines CSS eine Skin zuzuweisen. Verwenden Sie die CSS-Komponente, um Ihr benutzerdefiniertes CSS zu laden. Die CSS-Komponente ermöglicht es Ihnen, eine beliebige lokale CSS-Datei auszuwählen, die im Film enthalten ist.

Interessante HTML5-Komponenten

Das Hinzufügen von Interaktivität zu Ihren Inhalten ist interessant und enthält viele Funktionen mit HTML5-Komponenten. Möchten Sie erfahren, wie Sie diese HTML5-Komponenten in Animate verwenden können? Sehen Sie sich einfach das Tutorial am Ende dieses Beispiels an und befolgen Sie die Schritte.

  1. Klicken Sie auf Fenster und wählen Sie Komponenten aus.

  2. Erweitern Sie den Ordner Videos, klicken Sie auf das Videosymbol und ziehen Sie es auf die Bühne.

  3. Erweitern Sie in den Eigenschaften die Registerkarte Positionen und Größe und legen Sie die erforderlichen Werte fest.

So verbessern Sie Ihre Animate-Kompositionen mit HTML5-Komponenten

Sehen Sie sich das Video an, um zu erfahren, wie Sie mehr Komponenten in Ihre Komposition integrieren können.

Installieren verteilter Komponenten

Designer oder Entwickler können in Animate die verteilte ZXP-Dateikomponente installieren, indem sie das Dienstprogramm Erweiterungen verwalten verwenden. Weitere Informationen finden Sie unter Installieren von Erweiterungen.

Voraussetzung

Installieren von Komponenten

Um verteilte Komponenten zu installieren, gehen Sie wie folgt vor: 

  1. Doppelklicken Sie auf die Datei ManageExtensions.exe. Das Dialogfeld Erweiterungen verwalten wird angezeigt.

  2. Klicken Sie auf Installieren von Erweiterungen und wählen Sie die Erweiterung (.zxp-Datei), die Sie installieren möchten. Weitere Informationen finden Sie unter Installieren von Erweiterungen.

  3. Um die installierte Komponente in Animate anzuzeigen, klicken Sie auf Fenster > Komponente. Das Popup-Dialogfeld „Komponenten“ wird angezeigt.

  4. Klicken Sie auf das Hamburger-Symbol in der rechten oberen Ecke und anschließend auf Komponenten neu laden.

Mehr

 Adobe

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?

Hilfreiche Links

Alle Abos anzeigen Abos verwalten
Hilfreiche Links einblenden
Hilfreiche Links ausblenden

Rechtliche Hinweise |  Online-Datenschutzrichtlinie