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

Animate CC 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 CC 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.

Hinweis:

Eine Komponentendefinition hat auch lokalisierungsbedingte Ressourcen.

componentsJS
Beispiel einer Ordnerkonfiguration für eine benutzerdefinierte Komponentenkategorie

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

• Windows:

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

 

• MAC:

 

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

Hinweis:

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 CC 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

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 CC konfigurieren, und die konfigurierten Eigenschaften werden während der Instanziierung der Komponente zur Laufzeit bereitgestellt.

 

Jeder Eigenschafteneintrag enthält die folgenden Schlüssel:

  1. name: Der im Eigenschafteninspektor für diese Eigenschaft angezeigte Name. Dies sollte ein benutzerfreundlicher Name sein. Der Name kann lokalisiert werden.
  2. 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.
  3. type: Gibt den Typ der Eigenschaft an. Animate CC unterstützt die folgenden Typen:
    1. Boolean – Kontrollkästchen im Eigenschafteninspektor
    2. Number – Numerisches Feld im Eigenschafteninspektor
    3. String – Textfeld im Eigenschafteninspektor
    4. List – ermöglicht es Benutzern, ein Array von Werten zu konfigurieren.
    5. Collection– ermöglicht es dem Benutzer, eine Liste mit <Schlüssel, Wert>-Paaren zu konfigurieren. (Siehe Kombinationsfeld)
    6. 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.
    7. 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.
    8. Video Content Path – ermöglicht es dem Benutzer, beliebige Quellen mit Videodaten für Webseiten (mp4, ogg, ogv, webm) zu suchen und auszuwählen. Das konfigurierte Element wird in den Ordner „videos im veröffentlichten Ausgabeordner kopiert.
    9. Color – Farbwähler im Eigenschafteninspektor

4.  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 AnWidget fü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.

 

AnWidget
HTML-Vorlage

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.

Hinweis:

Ä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 CC 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

  1. Die Komponenteninstanz wird erstellt, wenn das DOM für den Container konstruiert wird.

  2. 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.

  3. 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.

  4. 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.

localization
.json string

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

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

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

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: 

  1. Um eine MXI-Datei zu aktivieren, geben Sie den Inhalt in der Formabc.mxian. Verwenden Sie dafür ein Textbearbeitungsprogramm und speichern Sie die Datei mit der Erweiterung MXI.

    Download

    Herunterladen

  2. Fügen Sie Ihre MXI-Komponentendatei und andere zugehörige Dateien einem Ordner hinzu.

    Add-MXI-file-to-component
  3. 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.

    Self-signature
    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: 

    Create-ZXP-file
    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.

Hinweis:

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. Erfahren Sie mehr über die private Weitergabe von Produkten.

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 verteilter Komponenten

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie