Erstellen von HTML-Erweiterungen

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.

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

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.