Benutzerhandbuch Abbrechen

Erstellen von benutzerdefinierten Komponenten: Beispiele

  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. Mit verschiedenen Dateitypen in Animate arbeiten
  3. Animation
    1. Grundlagen von Animationen in Animate
    2. So verwenden Sie Bilder und Schlüsselbilder in Animate
    3. Einzelbildanimation in Animate
    4. So arbeiten Sie in Animate mit klassischen Tween-Animationen
    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. Arbeiten mit Video-Cue-Points
    9. Objekte in Animate zeichnen und erstellen
    10. Umformen von Linien und Formen
    11. Striche, Füllungen und Farbverläufe in Animate CC
    12. Adobe Premiere Pro und After Effects
    13. Farb-Bedienfelder in Animate CC
    14. Öffnen von Flash CS6-Dateien mit Animate
    15. In Animate mit klassischem Text arbeiten
    16. Platzieren von Bildern in Animate
    17. Importierte Bitmaps in Animate
    18. 3D-Grafiken
    19. Arbeiten mit Symbolen in Animate
    20. Zeichnen von Linien und Formen mit Adobe Animate
    21. Mit Bibliotheken in Animate arbeiten
    22. Exportieren von Sounds
    23. Auswählen von Objekten in Animate CC
    24. Arbeiten mit Adobe Illustrator AI-Dateien in Animate
    25. Anwenden von Mustern mit dem Sprühen-Werkzeug
    26. Anwenden von Mischmodi
    27. Anordnen von Objekten
    28. Automatisieren von Aufgaben mit dem Menü „Befehle“
    29. Mehrsprachiger Text
    30. Verwenden der Kamera in Animate
    31. Verwenden von Animate mit Adobe Scout
    32. Arbeiten mit Fireworks-Dateien
    33. Grafikfilter
    34. Sounds und ActionScript
    35. Zeichnungsvoreinstellungen
    36. 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. Empfohlene Verfahren – Richtlinien für Eingabehilfen
    12. Eingabehilfen für den Animate-Arbeitsbereich
    13. Schreiben und Verwalten von Skripts
    14. Aktivieren der Unterstützung für benutzerdefinierte Plattformen
    15. Unterstützung benutzerdefinierter Plattformen – Übersicht
    16. Erstellen barrierefreier Inhalte
    17. Arbeiten mit Plug-ins zur Unterstützung benutzerdefinierter Plattformen
    18. Debuggen von ActionScript 3.0
    19. 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. Exportieren von QuickTime-Videodateien
    9. Steuern der Wiedergabe von externen Videos mithilfe von ActionScript
    10. Empfohlene Verfahren – Tipps zum Erstellen von Inhalten für mobile Geräte
    11. Empfohlene Verfahren – Videokonventionen
    12. Empfohlene Verfahren – Authoring-Richtlinien für SWF-Anwendungen
    13. Empfohlene Verfahren – Strukturierung von FLA-Dateien
    14. Empfohlene Verfahren für die Optimierung von FLA-Dateien für Animate
    15. ActionScript-Veröffentlichungseinstellungen
    16. Veröffentlichungseinstellungen für Animate festlegen
    17. Exportieren von Projektor-Dateien
    18. Exportieren von Bildern und animierten GIF-Dateien
    19. HTML-Veröffentlichungsvorlagen
    20. Adobe Premiere Pro und After Effects
    21. Schnelles Teilen und Veröffentlichen Ihrer Animationen

Lesen Sie diesen Artikel, um ein Beispiel einer benutzerdefinierten HTML5-Komponente zu verstehen.

In diesem Artikel wird beschrieben, wie Sie benutzerdefinierte Komponenten erstellen. Das erste Beispiel beschreibt die Bildkomponente (die auch im Lieferumfang von Animate CC enthalten ist) und erläutert das Framework sowie den Entwicklungsprozess. Im zweiten Beispiel wird beschrieben, wie Sie eine vorhandene UI-Komponente (z. B. jQueryUI) verpacken und in Animate CC importieren.

  1. Erstellen einer DOM-Bildkomponente

    Erstellen Sie eine Kategorie mit der Bezeichnung Meine Komponenten.

    a. Erstellen Sie unter dem Ordner <HTML5Components> einen Ordner namens meinekomponenten

    b. Laden Sie die angehängte Datei myimage.zip herunter und extrahieren Sie den Inhalt im Ordner

    meinekomponenten.

    Herunterladen

    c. Starten Sie Animate.

Ordnerstruktur innerhalb des Ordners „meinekomponenten“
Ordnerstruktur innerhalb des Ordners „meinekomponenten“

In dem Komponentenordner können Sie nun eine neue Kategorie mit dem Namen „Meine Komponenten“ sowie darunter eine neue Komponente mit dem Namen „Mein Bild“ sehen. Sie können die Drag-and-Drop-Funktion zur Anpassung der Anzeige verwenden, die Bildquelleneigenschaft festlegen sowie den Film veröffentlichen, um die benutzerdefinierte Komponente anzeigen zu lassen. 

Komponente Metadaten - components.js

Components.js-Code
Components.js

Bitte beachten Sie, dass die Kategorie KATEGORIE_MEINE_KOMPONENTEN eingestellt ist. Für die Namen jeder dieser Eigenschaften werden ähnliche Schlüssel verwendet. Das ist der Schlüssel für den lokalisierten String für den Kategorienamen. Wenn Sie „strings.json“ im lokalen Ordner öffnen, werden Sie die folgenden Einträge sehen.

Hinweis:

Der am häufigsten auftretende Fehler während der Bearbeitung dieser Datei ist ein überflüssiges Komma für das letzte Element im Array.

Kategoriedetails
Kategoriedetails

Der Wert im Symbolfeld ist auf Symbol Sp_Image_Sm festgelegt. Wenn Sie den Elemente-Ordner öffnen, sehen Sie die zwei PNG-Dateien mit dem Präfix Sp_Image_Sm.

Wert des Symbolfeldes
Wert des Symbolfeldes

Dies sind die Symbole für dunkle und helle Benutzeroberflächen (UI).

Der Wert des Feldes „Quelle“ im components.json wird auf den Wert „src/myimage.js“ festgelegt. 

(function($) {    

// Register a component with the className: my.Image,
 // and prototype with the following overrides 
 // getCreateOptions
 // getCreateString
 // getProperties
 // getAttributes
    $.anwidget("my.Image", {
         options: {
   'visible': true,
   'position': 'absolute'
         },
  _props: ["left", "top", "width", "height", "position", "transform-origin", "transform"],
  
_attrs: ["id", "src", "alt", "class", "border"],
  
// Return a unique ID with the prefix image
  // _widgetID is a global declared in anwidget
  // This id is used only if the user has not set any instance ID for the component in Animate CC
  // Otherwise the user configured name is used
  getCreateOptions: function() {
   return $.extend(this.options, { 'id': "image" + _widgetID++ });
  },
  
// Return the string for creating the DOM element
  // For image we just need to create the <img> tag
  getCreateString: function() {
   return "<img>";
  },
  
// Set of configurable properties
  getProperties: function() {
   return this._props;
  },
  
// Set of configurable attributes
  getAttributes: function() {
   return this._attrs;
  }    
 });   
})(jQuery);

Zum besseren Verständnis können Sie die Kommentaren im Code befolgen. 

Bitte schauen Sie sich auch Quelle für die anderen Komponenten an, die in Animate bereitgestellt werden. In den meisten Fällen können Sie eine dieser Komponenten als Ausgangspunkt verwenden und sie dann Ihren eigenen Anforderungen entsprechend konfigurieren.

Eine jQuery-UI Komponente verpacken

In diesem Abschnitt erfahren Sie, wie Sie ein jQuery-UI-Widget verpacken und dieses in Animate CC verwenden können. Dieselbe Vorgehensweise kann zum Verpacken jeder anderen vorhandenen Komponente eines beliebigen UI-Frameworks verwendet werden.

Nachfolgend erfahren Sie mehr über die verpackte DatePicker-Komponente in Animate CC, bei der es sich um ein jQuery-Widget handelt. Laden Sie das folgende Archiv herunter und extrahieren Sie den Inhalt, um ihn als Referenz zu verwenden.

Herunterladen

Struktur des extrahierten Inhalts
Struktur des extrahierten Inhalts

Der Ordner mit der Bezeichnung „jquery-ui -1.12.0“ ist die Quelle für das jQuery-UI-Framework, die das ursprüngliche DatePicker-Widget sowie die zugehörigen Ressourcen (z. B. Bilder und CSS) beinhaltet, die wir wie jede andere HTML5-Komponente in Animate CC verpacken und verwenden können. Dies ist nur für die lokale Vorschau erforderlich. Wenn Sie in den Veröffentlichungseinstellungen „Gehostete Bibliotheken“ verwenden, haben Sie die Möglichkeit, das CDN (Content Delivery Network) zu nutzen, um die abhängigen Quellen herunterzuladen. 

Components.js-Code
Components.js

Es gibt zwei Standard-Abhängigkeiten, jQuery und anwidget.js. Da sich anwidget.js nicht auf dem CDN befindet, haben keinen Eintrag für das CDN.

Die nachfolgenden Einträge sind für die anderen Ressourcen, die zum Laden des DatePicker-Widgets von jQuery-UI erforderlich sind. Wenn Sie ein Widget aus einer anderen Bibliothek verpacken, können Sie dafür eine Gruppe von Abhängigkeiten festlegen. Diese Abhängigkeiten werden heruntergeladen, bevor die Komponente initialisiert wird.

Im Abschnitt Eigenschaften haben wir nur eine Eigenschaft namens „Label“ bereitgestellt, die an die „Label“-Eigenschaft der DatePicker-Komponente gebunden ist. Auf gleiche Weise können wir auch die anderen Eigenschaften festlegen, die der Benutzer in der Authoring-Umgebung von Animate konfigurieren kann. Zur Laufzeit wird jede dieser Komponenten für als Schlüssel-Wert-Paar im Array- Optionsdatenfeld verfügbar sein. Wir können den konfigurierten Wert extrahieren und während der Laufzeit ausführen.

Hauptquelldatei: src/datepicker.js.
Hauptquelldatei: src/datepicker.js.

Abschnitte, die sich vom Beispiel unterscheiden

  1. GetCreateString:

    Das DatePicker-Widget vom jQuery-UI verwendet ein solches Eingabetextelement und konvertiert es in ein DatePicker-Element. Daher werden wir das DOM entsprechend initialisieren.

  2. anhängen:

    Wir müssen diese Funktion für dieses Widget überschreiben. Diese API wird aufgerufen, sobald das Element dem DOM angehängt wird. Aufgrund der Funktionsweise der zugrunde liegenden Laufzeit (in diesem Fall createjs), kann diese API während eines Bildbereichs mehrmals aufgerufen werden.

    Wir müssen uns den angehängten Status des zugrunde liegenden Elements erinnern und anschließend die angehängte API der Basisklasse aufrufen (unter Verwendung von_superApply(arguments)). Wenn dies das erste Mal ist, dass das Element an das übergeordnete DOM angehängt wird, dann wird die zugrundeliegende jQuery-UI-Widget Funktion verwendet, um das DOM der Komponente in eine Datumsauswahl zu konvertieren. Weitere Informationen finden Sie unter https://jqueryui.com/datepicker/

    Die meisten Javascript-Widgets funktionieren auf ähnliche Weise. Sie können dieselbe Vorgehensweise verwenden, um eine beliebige Komponente Ihrer Wahl zu verpacken und in Animate CC zu laden.

  3. Aktualisierung: Wir überschreiben und aktualisieren die CSS-Eigenschaften und wenden sie auf den Div-Container und die Attribute auf dem realen DOM-Element an.

    Hinweis:

    Wenn Sie z. B. APIs überschreiben wie z. B. anhängen, entfernen, oder aktualisieren, sollten Sie die Standardimplementierung der Basisklasse überprüfen und die Basisimplementierung zum angemessenen Zeitpunkt aufgerufen. Andernfalls kann die Komponenteninitialisierung möglicherweise fehlschlagen.

Adobe-Logo

Bei Ihrem Konto anmelden