Creating HTML extensions

Animate can be extended using HTML extensions. Adobe Extension Builder 3 allows you to create HTML extensions for Animate. 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.

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

Debugging your extension in Animate 

You can run your extension directly from Eclipse:

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

Exporting your extension

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.

Installing your extension in Animate 

You can install HTML extensions within Animate using Adobe Extension Manager. HTML extensions can help you extend functionalities and capabilities of Animate.

Adding interactivity to HTML extensions

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

Example

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.