Erstellen benutzerdefinierter HTML5-Komponenten

Suchen

Zuletzt aktualisiert am 11. Februar 2022

Animate

App öffnen

Adobe Animate-Benutzerhandbuch

Einführung in Animate

Animation

Interaktivität

Arbeitsbereich und Arbeitsablauf

Multimedia und Video

Plattformen

Exportieren und Veröffentlichen

Fehlerbehebung

In diesem Artikel erfahren Sie, wie Sie benutzerdefinierte Komponenten für HTML5 Canvas erstellen.

Animate wird mit einem Satz Standardkomponenten geliefert. Allerdings sind diese für Ihr Projekt nicht ausreichend. In diesem Abschnitt wird beschrieben, wie Sie benutzerdefinierte HTML5-Komponenten für Animate erstellen.

Eine Komponentendefinition besteht aus drei Hauptteilen:

Metadaten: Stellen Informationen über die Komponente bereit, wie etwa Anzeigename, Version, konfigurierbare Eigenschaften, Symbol und so weiter. Diese werden in einer Datei gespeichert, die components.js genannt wird. Sie können die Komponenten als Kategorie gruppieren und haben mit dieser Datei dann die Möglichkeit, die Metadaten für alle Komponenten in einer Kategorie bereitzustellen.
Quelle: Stellt Informationen über die tatsächliche Komponentenquelle bereit. Dies wird zur Laufzeit eingebettet, wenn Sie mithilfe von Komponenten eine Vorschau eines Films anzeigen oder diesen veröffentlichen.
Elemente: Stellen Informationen über alle Laufzeitabhängigkeiten bereit, darunter JavaScript-Bibliothek, CSS oder Laufzeitelemente und Symbole. Die Elemente können in der Animate-Authoring-Umgebung verwendet werden.

Eine Komponentendefinition hat auch lokalisierungsbedingte Ressourcen.

componentsJS — Beispiel einer Ordnerkonfiguration für eine benutzerdefinierte Komponentenkategorie

Animate überprüft die folgenden Ordner auf eventuelle benutzerdefinierte HTML5-Komponenten und lädt diese beim Start:

• Windows:

<AppData>/Local/Adobe/Adobe Animate 2017/en_US/Configuration/HTML5Components

• MAC:

~/Library/Application Support/Adobe/Animate 2017/en_US/Configuration/HTML5Components/

Der obige Ordnerpfad gilt für die US-amerikanische Version. Wenn Sie Animate in einer anderen Sprache verwenden, suchen Sie nach dem sprachspezifischen Ordnernamen, indem Sie „en_US“ ersetzen.

Für jeden Ordner innerhalb des Speicherorts, der die Datei components.js enthält, erstellt Animate eine Kategorie und lädt dort alle Komponenten hinein.

Metadaten der Komponente

Die Metadaten der Komponente werden in einer Datei mit dem Namen components.js erfasst, die in einen separaten Ordner innerhalb des Verzeichnisses HTML5Components platziert wird.

metadata-code — Beispielmetadaten für eine Videokomponente.

Components.js

ist eine JSON-Datei, die folgende Abschnitte enthält:

category: Name im Komponenten-Bedienfeld für diesen Komponentensatz. Kann lokalisiert werden.
components: Array, in dem jeder Eintrag die Metadaten über eine Komponente enthält. Das oben gezeigte Beispiel hat nur ein Element im Array. Die Metadaten haben die folgenden Abschnitte:

Name	Erforderlich	Beschreibung
ClassName	Ja	Klassenname der Komponente, die in der Quelldatei spezifiziert ist. Der Klassenname unterstützt eine Ebene von Namespaces. Beispiel: Video.
Version	Nein	Versionsnummer der Komponente. Wird für zukünftige Komponenten-Upgrades verwendet. Allerdings wird die Richtung zu diesem Zeitpunkt noch nicht definiert.
Quelle	Ja	Relativer Pfad der Hauptquelldatei der Komponente. Weitere Details zum Inhalt der Quelle folgen im nächsten Abschnitt.
Symbol	Nein	Relativer Pfad für das Symbol für die Komponente. Dieses Symbol wird im Komponenten-Bedienfeld und auf der Bühne verwendet, wenn für die Komponente eine Instanz mit dem Komponentennamen erstellt wird. Wenn nichts angegeben ist, wird ein Standardsymbol verwendet. Sie können den Namen der png-Datei des zu ladenden Symbols angeben (üblicherweise 32x32). Andernfalls können Sie, wenn Sie unterschiedliche Symbole für helle UI und dunkle UI unterstützen möchten, zwei .png-Dateien mit der folgenden Namenskonvention bereitstellen: benutzerdef_symbol_N.png- Symbol für dunkle UI benutzerdef_symbol_D.png- Symbol für helle UI und geben dann einfach den Namen „benutzerdef_symbol“ als Wert für dieses Feld an. Die Suffixe werden automatisch basierend auf der aktuellen Benutzereinstellung angehängt.
Größe	Nein	Standardgröße für die Komponenteninstanzen. Wenn Benutzer eine Komponente aus dem Komponenten-Bedienfeld ziehen und auf der Bühne ablegen, wird eine neue Instanz erstellt. In diesem Feld wird die anfängliche Standardgröße der Komponenteninstanz spezifiziert. Der eingegebene Wert muss ein Array [Breite, Höhe] sein. Wenn kein Wert angegeben wird, verwendet Animate eine Standardgröße. Außerdem begrenzt Animate die Größe auf den Bereich [2, 2] bis [1000, 1000].
Abhängigkeiten	Nein	Abhängigkeiten für die Komponente. Dies ist ein Array, bei dem jeder Eintrag den relativen Pfad für eine lokale Quelle (mit Schlüssel = „src“) und den CDN-Pfad (mit Schlüssel = „cdn“) bereitstellt. Der CDN-Pfad ist nicht zwingend erforderlich. Dieser Pfad wird verwendet, wenn Sie in den Veröffentlichungseinstellungen gehostete Bibliotheken verwenden. Andernfalls wird bei der Vorschau oder Veröffentlichung die lokale Quelle verwendet. Schauen Sie sich den relativen Pfad im Beispiel oben an (Video). Damit werden die Abhängigkeiten von der nächsthöheren Ebene geladen, sodass wir einige Abhängigkeiten für mehrere Komponentensätze freigeben können.
Eigenschaften	Ja	Dies ist ein Array von Eigenschaften. Wenn Sie von dieser Komponente auf der Bühne eine Instanz erstellen, wird der an dieser Stelle konfigurierte Eigenschaftensatz automatisch im Eigenschafteninspektor angezeigt. Benutzer dieser Komponente können diese Eigenschaften in Animate konfigurieren und die konfigurierten Eigenschaften werden während der Instanziierung der Komponente zur Laufzeit bereitgestellt. Jeder Eigenschafteneintrag enthält die folgenden Schlüssel: name: Der im Eigenschafteninspektor für diese Eigenschaft angezeigte Name. Dies sollte ein benutzerfreundlicher Name sein. Der Name kann lokalisiert werden. variable: Der intern für diese Eigenschaft verwendete Name. Die konfigurierten Werte sind mit diesem Variablennamen zur Laufzeit verfügbar. Weitere Informationen hierzu folgen in späteren Abschnitten. type: Gibt den Typ der Eigenschaft an. Animate unterstützt die folgenden Typen: Boolean – Kontrollkästchen im Eigenschafteninspektor Number – Numerisches Feld im Eigenschafteninspektor String - Textfeld im Eigenschafteninspektor List - ermöglicht es Benutzern, ein Array von Werten zu konfigurieren Collection– ermöglicht es dem Benutzer, eine Liste mit <Schlüssel, Wert>-Paaren zu konfigurieren. (Siehe Kombinationsfeld) File Path – ermöglicht es dem Benutzer, eine lokale Datei zu suchen und auszuwählen. Der Stringwert wird zur Laufzeit bereitgestellt. Die Datei wird automatisch in die veröffentlichte Ausgabe im Ordner „assets“ kopiert, und der relative Pfad wird zur Laufzeit bereitgestellt. Image Path– ermöglicht es dem Benutzer, ein Bild zu suchen und auszuwählen. Die Datei wird automatisch in die veröffentlichte Ausgabe im konfigurierten Bildordner kopiert, und der relative Pfad wird zur Laufzeit bereitgestellt. Video Content Path – ermöglicht es dem Benutzer, beliebige Quellen mit Videodaten für Webseiten (mp4, ) zu suchen und auszuwählen. ogg , ogv , webm ). Das konfigurierte Element wird in den Ordner „videos“ im veröffentlichten Ausgabeordner kopiert. Color – Farbwähler im Eigenschafteninspektor Default: Standardwert der Eigenschaft. Der Standardwert sollte vom gleichen Typ wie der Typ der Eigenschaft sein.

Komponentenquelle

Jede Komponente sollte über eine verknüpfte Quelldatei verfügen, die Code enthält, um folgende Aktionen durchführen zu können:

Erstellen einer Komponenteninstanz zur Laufzeit mit einem konfigurierten Satz von Eigenschaftswerten
Hinzufügen zu und Herausnehmen aus dem DOM.
Aktualisierung der Eigenschaften in jedem Bild

Eine Basisklasse und eine Dienstprogrammfunktion in der Datei anwidget.js stehen für die komfortable Entwicklung von benutzerdefinierten Komponenten bereit. Diese Schnittstelle wird in Zukunft erweitert werden, jedoch abwärtskompatibel sein. Derzeit werden nur DOM-basierte Komponenten unterstützt. Die Unterstützung für Canvas-basierende Komponenten wird allerdings ausgebaut werden. Derzeit werden nur Widgets unterstützt. Das Framework wird allerdings erweitert werden, um das Hinzufügen von Verhalten zu unterstützen (Nicht-UI-Komponenten).

Die Datei anwidget.js befindet sich im Ordner „HTML5Components/sdk“ in Ihrem FirstRun-Ordner. Sie stellt eine Basisklasse AnWidgetfür benutzerdefinierte Komponenten und eine Dienstprogrammmethode $.anwidget(<className>, {Objekt-Prototyp}) zum Registrieren einer benutzerdefinierten Komponente bereit. Die aktuelle Implementierung verwendet jQuery, sodass jQuery immer als Abhängigkeit hinzugefügt wird, wenn Sie die Dienste verwenden, die von einem Widget bereitgestellt werden. Wenn Sie jedoch keine implizite Abhängigkeit von jQuery hinzufügen möchten, müssen Sie möglicherweise eine Komponentenklasse ohne jQuery implementieren, die die gleiche Schnittstelle wie ein Widget bereitstellt.

Der HTML-Code enthält standardmäßig diese Abschnitte (mit Ausnahme des Preloader-DIV):

animation_container — Standard-HTML-Abschnitte (mit Ausnahme des Preloader-DIV)

Beachten Sie, dass die vorherige Abbildung die Reihenfolge veranschaulicht, in der die Elemente im DOM hinzugefügt werden. Daher wird das dom_overlay_container-DIV oberhalb der Leinwand dargestellt.

Ändern Sie, anders als in unserer ersten Version, die ID des dom_overlay_container-DIVs nicht. Es gibt einige Funktionen, die von dieser ID abhängen, beispielsweise Codefragmente.

Wie in der obigen Abbildung gezeigt wird das dom_overlay_container-DIV oberhalb der Leinwand als Überlagerung angezeigt. Um sicherzustellen, dass die Mausereignisse auch ordnungsgemäß an die darunter liegende Leinwand gelangen, verwenden wir die CSS-Eigenschaft {pointer-events: none} für dieses DIV, sodass Mausereignisse auf die tiefer liegende Leinwand übertragen werden. Alle Komponenteninstanzen, die in Ihrem Projekt in Animate konfiguriert sind, werden instanziiert und als untergeordnetes Element dieses dom_overlay_container-DIVs angehängt. Die relative Reihenfolge der Komponenteninstanzen wird zur Laufzeit beibehalten. Allerdings werden derzeit alle Komponenteninstanzen immer als Überlagerung angezeigt. Wir setzen alle Komponenteninstanzen zur Laufzeit auf {pointer-events: all}, sodass sie auch die Mausereignisse empfangen.

Lebenszyklus der Komponenten

component_lifecycle — Lebenszyklus der Komponenten

Die Komponenteninstanz wird erstellt, wenn das DOM für den Container konstruiert wird.
Die Instanz wird dann zu dem DOM hinzugefügt, wenn der Abspielkopf das Bild erreicht, in dem die Komponenteninstanz verwendet wird. Dann wird eine Updateprozedur angehängt, die zur Laufzeit bei jedem Tick-Ereignis aufgerufen wird. Die Komponente löst zu diesem Zeitpunkt auch ein „attached“-Ereignis mit den folgenden Ereignisdaten {id: id_der_instanz} auf dem übergeordneten Element aus.
Die Eigenschaften werden bei jedem Update-Callback aktualisiert. Alle Eigenschaften-Aktualisierungen werden während einer Tick-Prozedur zwischengespeichert und einmal angewendet. Derzeit werden Tweens benutzerdefinierter Eigenschaften nicht unterstützt. Es werden nur die grundlegenden Eigenschaften wie Transformation und Sichtbarkeit aktualisiert.
Wenn der Abspielkopf ein Bild erreicht, aus dem die Komponenteninstanz entfernt wird, nehmen wir sie aus dem DOM heraus. Zu diesem Zeitpunkt wird ein detached-Ereignis für das übergeordnete Element ausgelöst.

Die Basisklasse ist „$.AnWidget“ und stellt die folgenden Überschreibungen bereit:

Name	Obligatorisch	Beschreibung
getCreateOptions()	Nein	Übergibt Optionen, die die Komponente während der Komponenteninstanziierung anwenden will. Wird bei einer typischen Überschreibung im Allgemeinen verwendet, um mit der globalen Variable _widgetID jeder Instanz eine eindeutige ID zuzuweisen. Das Beispiel im nächsten Abschnitt verdeutlicht diese Verwendung.
getCreateString()	Ja	Übergibt den String für die Erstellung Ihrer DOM-Instanz. Dieser String wird an jQuery weitergeleitet, um das eigentliche DOM-Element zu erstellen, das später zu dem Basis-DOM hinzugefügt wird. Beispiel: Für eine Bildkomponente sollte „<image>“ übergeben werden. Zur Laufzeit wird das Element erstellt und der Verweis auf den jQuery-Wrapper wie folgt in der Komponenteninstanz gespeichert: this._element = $(this.getCreateElement()) // this._element – jQuery-Wrapper für das darunter liegende DOM-Element erstellt. Wir können auch Composite-Elemente erstellen. Einzelheiten hierzu folgen in einem Abschnitt mit erläuternden Beispielen.
getProperties()	Nein	Übergibt ein Array konfigurierbarer CSS-Eigenschaftennamen. In der Regel enthält es alle Eigenschaften, die Sie in components.json konfiguriert haben. Beispiel: Für die Videokomponente enthält dieses Array die folgenden Einträge: [„left“, „top“, „width“, „height“, „position“, „transfor-origin“, „transform“]
getAttributes()	Nein	Übergibt ein Array konfigurierbarer Attribute. In der Regel enthält es alle Attribute, zu deren Konfiguration in components.json Sie berechtigt sind. Beispiel: Für die Videokomponente enthält dieses Array die folgenden Einträge: [„id“, „src“, „controls“, „autoplay„, „loop“, „class“]
attach(übergeordnetes Element)	Nein	Diese Funktion wird immer aufgerufen, wenn die Komponenteninstanz an das übergeordnete DOM-Element angehängt werden soll. Die Standardimplementierung veranlasst Folgendes (und noch einiges mehr): //Hängt das Element an das übergeordnete DOM an $(übergeordnetes Element).append (this._element); //Speichert den Verweis in this._$this this._$this = $(this._element); //Veranlasst ein erzwungenes Update zur Anwendung aller Eigenschaften this.update(true); this._attached = true; //Löst das attached-Ereignis auf dem übergeordneten Element aus $(übergeordnetes Element).trigger(„attached“, this.getEventData(„attached“)) Ein Überschreiben dieser Funktion ist nicht erforderlich. Für Composite-Elemente ist das Überschreiben allerdings möglicherweise erforderlich. Einzelheiten hierzu folgenden in einem Abschnitt mit erläuternden Beispielen. Hinweis: Mit this._superApply(Argumente) können Sie von einer beliebigen Überschreibungsfunktion aus eine Basisklassenmethode aufrufen.
detach()	Nein	Diese Funktion wird aufgerufen, wenn die Komponenteninstanz aus dem DOM entfernt werden soll. Die Standardimplementierung veranlasst Folgendes: //Entfernt das Element aus dem DOM this._ $ this.remove (); //Löst das detached-Ereignis auf dem übergeordneten Element aus $(übergeordnetes Element).trigger („detached“, this.getEventData („detached“));
setProperty(k, v)	Nein	Diese Funktion wird verwendet, um beliebige Eigenschaften für die Instanz festzulegen. Diese Änderungen werden zwischengespeichert und während des update()-Aufrufs angewendet, um in jedem Bild jede Eigenschaft aktualisieren, die geändert wurde.
update(force)	Nein	Diese Funktion wird für jedes Bild aufgerufen, wenn die Komponente Teil des DOM und sichtbar ist. Die Standardimplementierung wendet alle CSS-Eigenschaften und -Attribute an, die geändert wurden, bzw. wenn der force-Parameter auf „true“ gesetzt ist.
show()	Nein	Zeigt die Elementinstanz an. Ein Überschreiben ist hier in der Regel nicht erforderlich, wohl jedoch möglicherweise für Composite-Elemente.
hide()	Nein	Blendet die Elementinstanz aus. Ein Überschreiben ist hier in der Regel nicht erforderlich, wohl jedoch möglicherweise für Composite-Elemente.
getEventData(e)	Nein	Übergibt alle benutzerdefinierten Daten für das Ereignis mit dem Namen „e“. Die Standardimplementierung übergibt die Daten {id: instanz_id} für hinzugefügte und herausgenommene Ereignisse.
destroy()	Nein	Gibt den Speicher frei, wenn die Komponenteninstanz aus dem DOM herausgenommen wird. Normalerweise ist hier kein Überschreiben erforderlich.
applyProperties(e)	Nein	Helper API für das Anwenden von CSS-Eigenschaften auf den jQuery-Wrapper „e“.
applyAttributes(e)	Nein	Helper API für das Anwenden von Attributen auf den jQuery-Wrapper „e“.

Lokalisierung

Der Kategorienstring, der Komponenten-Anzeigename und der Eigenschaftsname können lokalisiert werden. Erstellen Sie eine Datei namens strings.json in einem Ordner mit der Bezeichnung locale unter dem Komponentenordner. Geben Sie die Schlüssel-Wertepaare für alle zu lokalisierenden Zeichenfolgen ein und verwenden Sie den Schlüssel in components.js. Bei anderen Gebietsschemas müssen Sie die Strings in den entsprechenden Ordnern im Ordner locale bereitstellen.

Verpacken und Verteilen von benutzerdefinierten HTML5-Komponenten

Entwickler und Designer können Animatoren in Animate die Möglichkeit bieten, individuelle Komponenten ohne Codeing zu installieren und sie zu verwenden, indem sie ihnen gebrauchsfertige gepackte Komponenten bereitstellen. Bisher mussten Animatoren mit Dateistrukturen vertraut sein, Programmierungsschritte ausführen und die Dateien manuell in bestimmte Ordner verschieben, um die HTML5-Erweiterungen zu aktivieren.

Voraussetzungen

Jede von einem Entwickler erstellte Komponente. Klicken Sie hier, um Informationen zum Erstellen von Komponenten anzuzeigen.
CC Extensions Signing Toolkit.

Bevor Sie Ihre Komponente verpacken, erstellen Sie eine MXI-Datei mit den Metadaten des Quell- und Zielpfads der Komponenten. Beispiel:

<file source=&quot;jquery-ui-1.12.0&quot; destination=&quot;$FLASH\HTML5Components\jQueryUI\&quot; file-type=&quot;ordinary&quot; />

Diese Quell- und Zieldatei-Informationen sind nötig, um das Erweiterungshilfsprogramm zur präzisen Installation der Komponente zu aktivieren.

Verpacken von Komponenten

Um die benutzerdefinierten HTML5-Komponenten zu verpacken, gehen Sie wie folgt vor:

Um eine MXI-Datei zu aktivieren, geben Sie den Inhalt in der Form abc.mxi an. Verwenden Sie dafür ein Textbearbeitungsprogramm und speichern Sie die Datei mit der Erweiterung MXI.

Herunterladen

Datei abrufen
Laden Sie eine Beispieldatei der Form „abc.mxi“ herunter.
Fügen Sie Ihre MXI-Komponentendatei und andere zugehörige Dateien einem Ordner hinzu.
Erstellen Sie eine Datei mit der Erweiterung ZXP, indem Sie das CC Extensions Signing Tool (ZXPSignCmd.exe) verwenden. Verwenden Sie die folgenden Befehle im Tool ZXP Sign Command, um eine ZXP-Datei zu erstellen:

1. Erstellen Sie ein selbstsigniertes Zertifikat mithilfe der Option -selfSignedCert.

Sie können diesen Schritt überspringen, wenn Sie bereits über ein Zertifikat verfügen.
ZXPSignCmd -selfSignedCert US NY MyCompany MyCommonName password FileName.p12
ZXPSignCmd -selfSignedCert US NY MyCompany MyCommonName password FileName.p12
```
ZXPSignCmd -selfSignedCert US NY MyCompany MyCommonName password FileName.p12
```
Die Datei Dateiname.p12 wird im aktuellen Ordner erstellt.

2. Signieren Sie die Erweiterung mithilfe des folgenden Befehls:
ZXPSignCmd -sign projectName projectName.zxp FileName.p12 password
ZXPSignCmd -sign projectName projectName.zxp FileName.p12 password
```
ZXPSignCmd -sign projectName projectName.zxp FileName.p12 password
```
Projektname ist der Name des Erweiterungsprojekts. Im aktuellen Ordner wird eine Datei mit dem Namen Projektname.zxp erstellt.

Verteilen von Komponenten

Sie können die verpackte Komponentendatei Projektname.zxp an andere Animate-Benutzer verteilen.

Adobe empfiehlt, Ihre Produkte über die Website Adobe Add-ons zu verteilen. Sie können Add-ons öffentlich (gratis oder kostenpflichtig) oder privat (gratis für namentlich genannte Benutzer) verteilen.

Installieren verteilter Komponenten

Designer oder Entwickler können in Animate die verteilte ZXP-Dateikomponente installieren, indem sie das Dienstprogramm Erweiterungen verwalten verwenden.

Mehr

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?