Creating HTML extensions

Animate CC can be extended using HTML extensions. Adobe Extension Builder 3 allows you to create HTML extensions for Animate CC. Earlier, you could only extend Animate using SWF extensions. However, Adobe Extension Builder 3 allows you to create HTML extensions for Creative Cloud applications. To get started, you need to download and install Eclipse and Extension Builder 3.0. For more information, visit this link.

To create an HTML extension, do the following.

1. Launch Eclipse. 
2. On the New Project wizard, create a new Application Extension Project. Provide a meaningful name for the project, then click Next.
3. On the New Adobe Application Extension Project panel, choose Adobe Animate. Click Next.
4. Configure your extension using the available options:
   
   1. Bundle ID uniquely identifies your extension.
   2. Menu name is the display name for your extension. The Menu Name appears in Window > Extensions menu within Animate CC.
      
   3. Window Details use these options to customize the extension window type and size.
      
      Click Next.
5. You can further customize the reference libraries for your extension in the next few screens:
   1. CEP Interface Library provides functions for interacting with the host application. The option is selected by default.
   2. Frameworks are for common Javascript libraries such as jQuery.
      
   3. Services include the Adobe IPC Communication Toolkit, which enables communication between Adobe applications, extensions, and external applications. It provides a protocol for messaging through the CEP Service Manager, which acts as a hub for Creative Cloud communications.
      
      Click Finish to create a new Eclipse project.

You can run your extension directly from Eclipse:

1. Right-click the project, and select Run As > Adobe Flash Extension. This launches Animate CC.
2. In Animate CC, select Window > Extensions menu item. This opens the extension panel.

To distribute your extension, you need to export it as a ZXP package. The ZXP package is then downloaded and run by Adobe Extension Manager on Creative Cloud applications:

1. In Eclipse, switch to the Script Explorer view to right-click on your project and select Export > Adobe Extension Builder 3 > Application Extension. This displays the Export Wizard.
2. You must have a certificate to sign the extension package. Browse to an existing certificate or click Create to create a new one.
3. Click Finish.
4. When the export is complete, you will find the ZXP package for your extension in the project folder, ready for distribution.

Note: To install you will need to access the <extension>\.staged-extension\CSXS\manifest.xml file and update the host tag to set the minimum version of Animate to 13.0.

You can install HTML extensions within Animate CC using Adobe Extension Manager. HTML extensions can help you extend functionalities and capabilities of Animate. To install extensions, see this link.

You can build an HTML extension to interact with Animate by adding controls, defining behavior, and obtain information about the host (includes Animate and the operating system) environment. This can be accomplished in two ways:

1. Using the CEP interface library: The CEP interface library provides APIs for obtaining information about the host environment and an eval script that allows you to run JSFLs. To know more about CEP interface library, open Help > Help Contents > Adobe Extension Builder > References within Eclipse.
2. Using JSFL: JSFL scripts can be run using the Eval script API of CEP interface Library. To know more about JSFLs, see this link.
   
   Apart from JSFLs, the CEP infrastructure within Animate also expose the following events that can used within HTML panels only.
   • com.adobe.events.flash.documentChanged is triggered due to a change in the current active document.
   • com.adobe.events.flash.timelineChanged is triggered when you make a change in the timeline of the current active document.
   • com.adobe.events.flash.documentSaved is triggered when you save the current document.
   • com.adobe.events.flash.documentOpened is triggered when you open a new document.
   • com.adobe.events.flash.documentClosed is triggered when you close the current active document.
   • com.adobe.events.flash.documentNew is triggered when you create a new document.
   • com.adobe.events.flash.layerChanged is triggered when you select a different layer.
   • com.adobe.events.flash.frameChanged is triggered when you select a different frame.
   • com.adobe.events.flash.selectionChanged is triggered when you select a different object on stage.
   • com.adobe.events.flash.mouseMove is triggered when you move your Mouse over the Stage.

In the above code snippet:

• csinterface: Object of CEP interface library.
• com.adobe.events.flash.selectionChanged: Event that triggers a change in the selection of an object. You can use any of the above mentioned events too.
• CallbackFunction: Method that listens to triggered event.