Création d’extensions HTML

Animate peut être étendu au moyen d’extensions HTML. Adobe Extension Builder 3 permet de créer des extensions HTML pour Animate. Auparavant, vous pouviez uniquement étendre Animate à l’aide des extensions SWF. Toutefois, Adobe Extension Builder 3 permet de créer des extensions HTML pour les applications Creative Cloud. Pour commencer, vous devez télécharger et installer Eclipse et Extension Builder 3.0.

Pour créer une extension HTML, procédez comme suit :

1. Démarrez Eclipse. 
2. Dans l’Assistant New Project (Nouveau projet), créez un projet d’extension d’application. Donnez un nom significatif au projet, puis cliquez sur Suivant.
3. Dans le panneau Nouveau projet d’extension d’application Adobe, sélectionnez Adobe Animate. Cliquez sur Suivant.
4. Configurez l’extension à l’aide des options disponibles :
   
   1. Bundle ID (ID d’offre groupée) identifie l’extension de manière unique.
   2. Le nom de menu est le nom affiché pour votre extension. Le nom de menu s’affiche dans le menu Fenêtre > Extensions dans Animate.
      
   3. Les détails de la fenêtre (Window Details) utilisent ces options pour personnaliser le type et la taille de la fenêtre d’extension.
      
      Cliquez sur Next (Suivant).
5. Vous pouvez personnaliser davantage les bibliothèques de référence pour votre extension dans les écrans suivants :
   1. La bibliothèque CEP Interface Library fournit les fonctions pour interagir avec l’application hôte. Cette option est sélectionnée par défaut.
   2. Les structures (Frameworks) servent aux bibliothèques JavaScript courantes telles que jQuery.
      
   3. Les Services incluent le kit Adobe IPC Communication Toolkit, qui permet la communication entre les applications Adobe, les extensions et les applications externes. Ils fournissent un protocole de messagerie au moyen du gestionnaire de services CEP, qui agit comme un concentrateur pour les communications Creative Cloud.
      
      Cliquez sur Finish (Terminer) pour créer un projet Eclipse.

Débogage de votre extension dans Animate

Vous pouvez exécuter l’extension directement dans Eclipse :

1. Cliquez sur le projet avec le bouton droit de la souris, puis sélectionnez Exécuter en tant que > Extension Adobe Flash. Cette option lance Animate.
2. Dans Animate, sélectionnez l’option de menu Fenêtre > Extensions . Le panneau des extensions s’ouvre.

Exportation de l’extension

Pour distribuer l’extension, vous devez l’exporter en tant que package ZXP. Le package ZXP est ensuite téléchargé et exécuté par Adobe Extension Manager dans les applications Creative Cloud :

1. Dans Eclipse, passez en mode Script Explorer (Explorateur de scripts), puis cliquez avec le bouton droit sur le projet et sélectionnez Export > Adobe Extension Builder 3 > Application Extension (Exporter > Adobe Extension Builder 3 > Extension d’application). L’Assistant d’exportation s’ouvre.
2. Vous devez détenir un certificat pour signer le package d’extension. Sélectionnez un certificat existant ou cliquez sur Create (Créer) pour en créer un.
3. Cliquez sur Finish (Terminer).
4. Le package ZXP exporté pour votre extension est placé dans le dossier du projet, prêt à être distribué.

Remarque : Pour l’installation, vous devez accéder au fichier <extension>\.staged-extension\CSXS\manifest.xml et mettre à jour la balise host pour définir la version minimale d’Animate sur 13.0.

Installation de votre extension dans Animate

Vous pouvez installer les extensions HTML dans Animate à l’aide d’Adobe Extension Manager. Les extensions HTML permettent d’étendre les fonctionnalités et capacités d’Animate.

Ajout d’interactivité aux extensions HTML

Vous pouvez créer une extension HTML pour interagir avec Animate en ajoutant des contrôles, en définissant un comportement et en obtenant des informations au sujet de l’environnement hôte (y compris Animate et le système d’exploitation). Ceci peut être accompli de deux façons :

1. Utilisation de la bibliothèque d’interface CEP : cette bibliothèque fournit des API pour l’obtention d’informations sur l’environnement hôte et un script d’évaluation qui permet d’exécuter des scripts JSFL. Pour en savoir plus sur la bibliothèque d’interfaces CEP, sélectionnez Help > Help Contents > Adobe Extension Builder > References dans Eclipse.
2. Utilisation de scripts JSFL : les scripts JSFL peuvent être exécutés à partir de l’API du script d’évaluation de la bibliothèque d’interface CEP.
   
   Outre les scripts JSFL, l’infrastructure CEP dans Animate expose les événements suivants, qui peuvent être utilisés dans les panneaux HTML uniquement.
   • com.adobe.events.flash.documentChanged est déclenché suite à une modification du document actif.
   • com.adobe.events.flash.timelineChanged est déclenché lorsque vous modifiez le scénario du document actif.
   • com.adobe.events.flash.documentSaved est déclenché lorsque vous enregistrez le document actif.
   • com.adobe.events.flash.documentOpened est déclenché lorsque vous ouvrez un nouveau document.
   • com.adobe.events.flash.documentClosed est déclenché lorsque vous fermez le document actif.
   • com.adobe.events.flash.documentNew est déclenché lorsque vous créez un document.
   • com.adobe.events.flash.layerChanged est déclenché lorsque vous sélectionnez un autre calque.
   • com.adobe.events.flash.frameChanged est déclenché lorsque vous sélectionnez une autre image.
   • com.adobe.events.flash.selectionChanged est déclenché lorsque vous sélectionnez un autre objet sur la scène.
   • com.adobe.events.flash.mouseMove est déclenché lorsque vous déplacez votre souris au-dessus de la scène.

Exemple

Dans le fragment de code ci-dessus :

• csinterface : objet de la bibliothèque d’interface CEP.
• com.adobe.events.flash.selectionChanged : événement qui déclenche la modification de la sélection d’un objet. Vous pouvez également utiliser n’importe lequel des événements mentionnés ci-dessus.
• CallbackFunction : méthode qui écoute l’événement déclenché.