Il est possible d’utiliser Adobe Animate CC (anciennement Adobe Flash Professional CC) et Flex® conjointement de diverses façons. Vous pouvez notamment créer des graphiques et des composants personnalisés dans Animate en vue de les utiliser dans Flex®. Les tutoriels suivants illustrent plusieurs manières d’utiliser Animate® et Flex® ensemble.

Remarque : Le flux de travail du mode Création entre Animate et Flash Builder a été abandonné. Le lancement de ce flux de travail depuis Flash Builder 4.6 renvoie une exception dans Animate.

Certains des flux de travail de Flash Builder peuvent ne pas être interopérables avec les dernières versions d’Animate CC (2017 et versions ultérieures). 

Modification et débogage d’ActionScript avec Animate et Flash Builder

Avant de commencer

Avant d’activer ces flux de travail Animate/Flash Builder, vérifiez les points suivants :

  • Flash CS5 et Flash Builder 4 sont installés.

  • Pour ouvrir un fichier FLA à partir de Flash Builder, vous devez affecter à votre projet la nature du projet Animate dans le panneau Explorateur de packages.

    Pour plus d’informations sur l’affectation de natures de projet dans Flash Builder, voir l’Aide de Flash Builder.

  • Pour ouvrir un fichier FLA dans Flash Builder, vous devez assigner à votre projet un fichier FLA qui servira au test et au débogage dans les propriétés Animate CC du projet.

Test, débogage et publication dans Animate depuis Flash Builder

Pour procéder au test et au débogage dans Animate avec un fichier que vous modifiez dans Flash Builder 4, procédez comme suit :

  • Depuis la perspective de développement de Flash Builder, choisissez Exécuter > Tester l’animation ou Exécuter > Déboguer l’animation. Notez qu’en regard de chaque option de menu se trouve une icône Animate. Lorsque vous fermez la fenêtre SWF ou la session de débogage, le focus revient à Flash Builder, à moins qu’il existe des erreurs de compilation dans les scripts d’image contenus dans le fichier FLA associé à l’objet. Les informations concernant toutes les erreurs sont envoyées au panneau Erreurs dans Flash Builder.

Pour publier le fichier FLA associé au projet en cours dans Flash Builder :

  • Depuis la perspective de développement de Flash Builder, choisissez Projet > Publier l’animation. Observez l’icône Animate en regard de la commande de menu.

Modification de fichiers AS dans Flash Builder depuis Animate 

Pour créer une nouvelle classe ou interface d’ActionScript 3.0 et affecter Flash Builder comme éditeur :

  1. Choisissez Fichier > Nouveau.

    Nouveau document
    Nouveau document
  2. Choisissez un mode de votre choix dans les onglets situés en haut de l’écran, tels que Animation des personnages, Social, Jeu, Éducation, Publicités, Web et Avancé. Dans la boîte de dialogue Nouveau document, choisissez Classe d’ActionScript 3.0 ou Interface d’ActionScript 3.0.

  3. Dans la boîte de dialogue Créer la classe d’ActionScript 3.0 ou Créer l’interface d’ActionScript 3.0, sélectionnez Flash Builder comme application pour créer le fichier, puis cliquez sur OK. Flash Builder s’ouvre.

  4. Dans Flash Builder, choisissez un fichier FLA ou un fichier XFL à associer au fichier ActionScript, puis cliquez sur Terminer.

Pour ouvrir et modifier un fichier AS dans Flash Builder depuis Animate :

  1. Dans le panneau Bibliothèque, cliquez avec le bouton droit de la souris sur un symbole associé à la classe ou à l’interface, puis choisissez Propriétés.

  2. Dans la boîte de dialogue Propriétés du symbole, cliquez sur Modifier la définition de classe.

  3. Dans la boîte de dialogue Modifier la classe ActionScript 3.0 ou Modifier l’interface ActionScript 3.0 qui s’ouvre, vérifiez que l’éditeur affecté au fichier AS est Flash Builder, puis cliquez sur OK.

    Si Flash Builder n’est pas l’application sélectionnée pour modifier le fichier, sélectionnez Flash Builder comme application pour modifier le fichier de classe, puis cliquez sur OK.

    Flash Builder s’ouvre pour modifier le fichier.

Création de composants pour Flex

Dans Animate, vous pouvez créer du contenu à utiliser en tant que composants dans les applications Adobe® Flex®. Ce contenu peut se composer d’éléments visuels et de code Adobe® ActionScript® 3.0.

La création de composants dans Animate pour une utilisation dans Flex vous permet de combiner les capacités de conception graphique d’Animate et celles de Flex.

Pour créer des composants Flex dans Animate, vous devez installer le Kit de composants Flex pour Animate. Installez le kit de composants à l’aide d’Adobe Extension Manager. Il se peut que certaines versions du kit de composants ne prennent pas en charge toutes les fonctionnalités d’Adobe Animate. Veillez donc à télécharger la version la plus récente à l’adresse suivante : www.adobe.com/go/flex_ck_fr.

Pour plus d’informations sur l’utilisation combinée de Flex et d’Animate, voir la documentation de Flex disponible sur le site Web d’Adobe à l’adresse suivante : www.adobe.com/go/learn_flexresources.

Pour créer un composant Flex dans Animate :

  1. Assurez-vous qu’Adobe Extension Manager a été installé. Pour télécharger Extension Manager, rendez-vous sur la page de téléchargement de l’application à l’adresse www.adobe.com/go/extension_manager_dl.

    Par défaut, Extension Manager est installé avec les applications Adobe Creative Suite.

  2. Téléchargez et installez le Kit de composants Flex disponible à l’adresse www.adobe.com/go/flex_ck_fr. N’oubliez pas de fermer Animate avant d’installer le kit de composants. Pour plus d’informations sur l’installation d’extensions avec Adobe Extension Manager, voir www.adobe.com/go/learn_extension_manager_fr.

  3. Lancez Animate. Deux nouvelles commandes apparaissent dans le menu Commandes, Convertir un symbole en composant Flex et Convertir un symbole en conteneur Flex.

  4. Dans Animate, créez un symbole de clip contenant l’illustration et le code ActionScript 3.0 que vous souhaitez inclure dans le composant Flex. Le contenu doit être placé dans un symbole de clip avant sa conversion en composant Flex.

  5. Avant de convertir le clip en composant Flex, assurez-vous qu’il respecte les exigences suivantes de compatibilité avec Flex :

    • La cadence du fichier FLA doit être de 24 ips et doit correspondre à celles de tous les projets Flex devant utiliser le composant.

    • Le point d’alignement doit être situé sur le point 0, 0 du clip.

      Remarque : Pour vous assurer que l’ensemble du contenu du clip a un point d’alignement de 0, 0, cliquez sur le bouton Modifier plusieurs images, situé au bas du scénario, sélectionnez toutes les images dans le scénario du clip, sélectionnez ensuite tout votre contenu dans toutes les images et déplacez le sur 0, 0 dans l’inspecteur des propriétés.

  6. Sélectionnez un clip dans le panneau Bibliothèque et choisissez Commandes > Convertir un symbole en composant Flex.

    Animate convertit le clip en composant Flex, remplace son icône par une icône Flex dans la bibliothèque et importe le clip compilé de la classe FlexComponentBase dans la bibliothèque. Animate intègre la classe FlexComponentBase dans le fichier SCW du composant Flex créé à l’étape suivante.

    Notez les messages de progression qui s’affichent dans le panneau Sortie pendant qu’Animate convertit le clip.

  7. Choisissez Fichier > Publier pour créer un fichier SWC contenant le composant Flex compilé. Animate crée également un fichier SWF à partir du fichier FLA principal, mais vous pouvez ignorer ce fichier si vous le souhaitez. Le fichier SWC du composant publié peut maintenant être utilisé dans Flex.

  8. Pour utiliser le fichier SWC dans Flex, effectuez l’une des opérations suivantes :

    • Copiez le fichier SWC dans Animate et collez-le dans le dossier bin de votre projet Flex.

    • Ajoutez le fichier SWC dans le chemin de bibliothèque de votre projet Flex. Pour plus d’informations, voir la documentation de Flex Builder à l’adresse www.adobe.com/go/learn_flexresources.

Utilisation des métadonnées de Flex

Si vous rédigez du code ActionScript 3.0 à utiliser dans Flex, vous pouvez placer des métadonnées dans le code pour intégrer des fichiers externes dans tous les fichiers SWF publiés qui comprennent le code ActionScript. En général, ces déclarations de métadonnées [Embed] sont utilisées pour intégrer des fichiers image, des polices, des symboles individuels ou d’autres fichiers SWF dans le fichier SWF.

N’oubliez pas que ces métadonnées sont des « données sur les données ». Dans le code ActionScript, vous ajoutez les métadonnées dans la ligne précédant immédiatement la ligne de code auquel s’appliquent les métadonnées. Le compilateur tient alors compte des métadonnées lorsqu’il compile la ligne de code suivante.

Par exemple, pour intégrer une image appelée button_up.png stockée dans le répertoire situé un niveau au-dessus du fichier ActionScript, utilisez le code ActionScript suivant :

[Embed(“../button_up.png”)]

private var buttonUpImage:Class;

La balise de métadonnées [Embed] indique au compilateur d’intégrer le fichier nommé button_up.png dans le fichier SWF et que ce fichier doit être associé à la variable nommée buttonUpImage.

Pour plus d’informations sur l’intégration de ressources à des métadonnées dans Flex, voir Intégration de ressources du Guide du développeur Flex 3 à l’adresse www.adobe.com/go/learn_flexresources.

Si vous utilisez une fonctionnalité qui requiert le SDK Flex (des métadonnées [Embed], par exemple) au moment de la compilation, Animate vous invite à ajouter le fichier Flex.SWC dans le chemin de bibliothèque de votre fichier FLA. Le fichier Flex.SWC contient les classes compilées nécessaires pour prendre en charge les métadonnées Flex. Cliquez sur Actualiser le chemin de bibliothèque dans la boîte de dialogue pour ajouter le fichier Flex.SWC au chemin de la bibliothèque. Vous pourrez également ajouter ultérieurement le fichier Flex.SWC dans le chemin de bibliothèque dans les paramètres de publication ActionScript.

Ressources supplémentaires

Les ressources suivantes fournissent des informations et des exemples supplémentaires sur l’intégration d’Animate dans Flash Builder :

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne