Exportation d’animations pour les applications mobiles et les moteurs de jeu

  1. Guide de l’utilisateur d’Adobe Animate
  2. Présentation d’Animate
    1. Nouveautés d’Adobe Animate
    2. Glossaire visuel
    3. Configuration requise pour Animate
    4. Raccourcis clavier d’Animate
    5. Utilisation de plusieurs types de fichiers dans Animate
  3. Animation
    1. Principes de base de l’animation dans Animate
    2. Utilisation des images et des images-clés dans Animate
    3. Animation image par image dans Animate
    4. Utilisation d’une animation interpolée classique dans Animate
    5. Outil Pinceau
    6. Guide du mouvement
    7. Interpolation de mouvement et ActionScript 3.0
    8. À propos de l’animation d’une interpolation de mouvement
    9. Animation d’une interpolation de mouvement
    10. Création d’une animation d’interpolation de mouvement
    11. Utilisation des images-clés de propriété
    12. Animation d’une position à l’aide d’une interpolation
    13. Modification des interpolations de mouvement avec l’Éditeur de mouvement
    14. Modification de la trajectoire de mouvement d’une animation d’interpolation
    15. Manipulation d’interpolations de mouvement
    16. Ajout d’accélérations personnalisées
    17. Création et application de présélections de mouvement
    18. Configuration de plages d’interpolation d’une animation
    19. Utilisation d’interpolations de mouvement enregistrées au format XML
    20. Interpolations de mouvement et interpolations classiques : comparatif
    21. Interpolation de forme
    22. Utilisation de l’animation de l’outil de segment dans Animate
    23. Utilisation du squelettage de personnage dans Animate
    24. Utilisation de calques de masque dans Adobe Animate
    25. Utilisation de séquences dans Animate
  4. Interactivité
    1. Création de boutons avec Animate
    2. Conversion de projets Animate en d’autres formats de document
    3. Création et publication de documents HTML5 Canvas dans Animate
    4. Ajout d’interactivité à l’aide de fragments de code dans Animate
    5. Création de composants HTML5 personnalisés
    6. Utilisation de composants dans HTML5 Canvas
    7. Création de composants personnalisés : exemples
    8. Fragments de code des composants personnalisés
    9. Pratiques recommandées – Publicité avec Animate
    10. Création et publication de contenu de réalité virtuelle
  5. Espace de travail et workflow
    1. Création et gestion des pinceaux
    2. Utilisation de polices Google Fonts dans les documents HTML5 Canvas
    3. Utilisation des bibliothèques Creative Cloud et d’Adobe Animate
    4. Utilisation de la scène et du panneau Outils pour Animate
    5. Workflow et espace de travail Animate
    6. Utilisation de polices web dans les documents HTML5 Canvas
    7. Scénarios et ActionScript
    8. Utilisation de plusieurs scénarios
    9. Définition des préférences
    10. Utilisation des panneaux de création Animate
    11. Création de calques de scénario avec Animate
    12. Exportation d’animations pour les applications mobiles et les moteurs de jeu
    13. Déplacement et copie d’objets
    14. Modèles
    15. Recherche et remplacement de contenu dans Animate
    16. Commandes Annuler et Rétablir, et panneau Historique
    17. Raccourcis clavier
    18. Utilisation du scénario dans Animate
    19. Création d’extensions HTML
    20. Options d’optimisation des images et des GIF animés
    21. Paramètres d’exportation des images et des fichiers GIF
    22. Panneau Éléments dans Animate
  6. Multimédia et vidéo
    1. Transformation et combinaison d’objets graphiques dans Animate
    2. Création et utilisation d’instances de symboles dans Animate
    3. Vectorisation de l’image
    4. Utilisation du son dans Adobe Animate
    5. Exportation de fichiers SVG
    6. Création de fichiers vidéo en vue de les utiliser dans Animate
    7. Comment ajouter une vidéo dans Animate
    8. Utilisation des points de repère vidéo
    9. Dessin et création d’objets avec Animate
    10. Remodelage des lignes et des formes
    11. Traits, remplissages et dégradés avec Animate CC
    12. Utilisation d’Adobe Premiere Pro et d’After Effects
    13. Panneaux Couleur dans Animate CC
    14. Ouverture de fichiers Flash CS6 à l’aide d’Animate
    15. Utilisation de texte classique dans Animate
    16. Placement d’illustrations dans Animate
    17. Images bitmap importées dans Animate
    18. Graphiques 3D
    19. Utilisation de symboles dans Animate
    20. Dessin de traits et de formes avec Adobe Animate
    21. Utilisation de bibliothèques dans Animate
    22. Exportation de sons
    23. Sélection d’objets dans Animate CC
    24. Utilisation de fichiers AI d’Illustrator dans Animate
    25. Application de motifs avec l’outil Pinceau pulvérisateur
    26. Application de modes de fusion
    27. Disposition d’objets
    28. Automatisation des tâches à l’aide du menu Commandes
    29. Texte multilingue
    30. Utilisation de la caméra dans Animate
    31. Utilisation d’Animate avec Adobe Scout
    32. Utilisation de fichiers Fireworks
    33. Filtres graphiques
    34. Sons et ActionScript
    35. Préférences de dessin
    36. Dessin avec l’outil Plume
  7. Plateformes
    1. Conversion de projets Animate en d’autres formats de document
    2. Prise en charge des plateformes personnalisées
    3. Création et publication de documents HTML5 Canvas dans Animate
    4. Création et publication d’un document WebGL
    5. Assemblage d’applications AIR pour iOS
    6. Publication d’applications AIR pour Android
    7. Publication pour Adobe AIR for Desktop
    8. Paramètres de publication d’ActionScript
    9. Pratiques recommandées – Organisation du code ActionScript dans une application
    10. Utilisation d’ActionScript avec Animate
    11. Pratiques recommandées – Recommandations sur l’accessibilité
    12. Accessibilité dans l’espace de travail Animate
    13. Écriture et gestion des scripts
    14. Activation de la prise en charge des plateformes personnalisées
    15. Présentation de la prise en charge des plateformes personnalisées
    16. Création de contenu accessible
    17. Utilisation du plug-in de prise en charge des plateformes personnalisées
    18. Débogage du code ActionScript 3.0
    19. Activation de la prise en charge des plateformes personnalisées
  8. Exportation et publication
    1. Exportation de fichiers d’Animate CC
    2. Publication OAM
    3. Exportation de fichiers SVG
    4. Exportation d’images et de vidéos avec Animate
    5. Publication de documents AS3
    6. Exportation d’animations pour les applications mobiles et les moteurs de jeu
    7. Exportation de sons
    8. Exportation de fichiers vidéo QuickTime
    9. Contrôle de la lecture vidéo externe à l’aide d’ActionScript
    10. Pratiques recommandées – Conseils pour la création de contenu pour appareils mobiles
    11. Pratiques recommandées – Conventions des vidéos
    12. Pratiques recommandées – Recommandations sur la création d’applications SWF
    13. Pratiques recommandées – Structuration des fichiers FLA
    14. Pratiques recommandées d’optimisation des fichiers FLA pour Animate
    15. Paramètres de publication d’ActionScript
    16. Spécification des paramètres de publication pour Animate
    17. Exportation de fichiers de projection
    18. Exportation d’images et de GIF animés
    19. Modèles de publication HTML
    20. Utilisation d’Adobe Premiere Pro et d’After Effects
    21. Partage et publication rapides de vos animations

Créez une feuille Sprite ou un atlas de textures et exportez vos animations pour des moteurs de jeu et des applications mobiles. Importez un atlas de textures dans Unity ou l’un de vos moteurs de jeu favoris en utilisant le module externe.

Aperçu

Animate vous permet de créer des animations Atlas de textures ou Feuille Sprite et de les exporter ensuite pour des applications mobiles et des moteurs de jeu. 

Feuille Sprite

Une feuille Sprite est un fichier d’images bitmap qui contient plusieurs graphiques de taille inférieure disposés en forme de grille en mosaïque. La compilation de plusieurs graphiques au sein d’un fichier unique permet à Animate et à d’autres applications d’utiliser les graphiques en ne chargeant qu’un seul fichier. Cette efficacité de chargement peut s’avérer utile, notamment dans le cas de développement de jeux, où les performances sont particulièrement importantes.

Feuille Sprite
Feuille Sprite contenant les sprites dans une animation image par image.

Vous pouvez créer une feuille Sprite à partir d’une sélection d’une combinaison de clips, symboles de boutons, symboles de graphiques ou images bitmap. Vous pouvez sélectionner des éléments soit dans le panneau Bibliothèque, soit sur la scène, mais pas les deux. Chaque bitmap (et chaque image) des symboles sélectionnés apparaît sous la forme d’un graphique distinct dans la feuille Sprite. Si vous exportez des éléments à partir de la scène, toutes les transformations (mise à l’échelle, inclinaison, etc.) que vous avez appliquées à l’occurrence de symbole sont conservées dans l’image de sortie.

Atlas de textures

L’atlas de textures est une collection de textures qui se présente sous la forme d’une seule grande image ou de plusieurs images de la dimension souhaitée. Vous pouvez optimiser votre jeu en créant un atlas de textures et en l’utilisant dans votre application de jeu. 

Dans Animate, vous pouvez créer un atlas de textures à partir de symboles tels que des clips, des graphiques ou des boutons. Vous pouvez sélectionner des éléments soit dans le panneau Bibliothèque, soit sur la scène, mais pas les deux. Chaque vecteur et chaque image-clé des symboles sélectionnés apparaissent sous la forme d’une image distincte dans l’atlas de textures. Si vous exportez un élément depuis la scène, toutes les transformations (mise à l’échelle, inclinaison, etc.) appliquées à l’instance de symbole sont conservées dans l’image générée.

Différence entre une feuille Sprite et un atlas de textures

Vous pouvez utiliser la feuille Sprite ou l’atlas de textures dans vos applications mobiles en fonction de vos besoins. Vous trouverez, dans le tableau ci-dessous, un aperçu des principales différences entre une feuille Sprite et un atlas de textures. 

Fonctionnalité

Feuille Sprite

Atlas de textures

Performances dans les applications mobiles

Faibles

Élevées

Efficacité au niveau du chargement de l’application

Élevée, dans la mesure où aucun calcul n’est effectué

Faible, dans la mesure où le calcul du fichier JSON est effectué 

Taille

Occupe plus d’espace

Occupe moins d’espace

Qualité d’animation

Moyenne

Élevée

Nombre de fichiers générés

Deux fichiers : une image bitmap et un fichier JSON

Variable : d’après la taille de l’image.

Nombre d’images bitmap générées

Le nombre de fichiers bitmap peut augmenter en fonction du nombre d’images bitmap utilisées dans la feuille Sprite, ce qui a pour effet d’accroître la taille de la feuille Sprite

Seules des images bitmap uniques sont générées dans le sprite, ce qui réduit la taille totale.

Création d’une feuille Sprite

Pour créer une feuille Sprite, procédez comme suit : 

  1. Sélectionnez un ou plusieurs symboles dans la bibliothèque ou des occurrences de symboles sur la scène. Votre sélection peut également contenir des bitmaps.

  2. Cliquez sur votre sélection avec le bouton droit de la souris et sélectionnez ensuite Générer la feuille Sprite.

  3. Sélectionnez les options requises dans la boîte de dialogue Générer la feuille Sprite, puis cliquez sur Exporter.

    Option d’exportation

    Description

    Dimensions de l’image

    Taille totale de la feuille Sprite, en pixels. La valeur par défaut, Taille automatique, dimensionne la feuille de façon à inclure tous les sprites que vous ajoutez.

    Format de l’image

    Format d’image de la feuille Sprite exportée. Les formats PNG 8 bits et PNG 32 bits prennent en charge l’utilisation d’un arrière-plan transparent (calque alpha). Les formats PNG 24 bits et JPG ne prennent pas en charge les arrière-plans transparents. En règle générale, la différence visuelle entre le format PNG 8 bits et le format PNG 32 bits est minime. Les fichiers au format PNG 32 bits sont quatre fois plus volumineux que les fichiers au format PNG 8 bits.

    Remplissage des bordures

    Remplissage des bordures de la feuille Sprite, en pixels.

    Remplissage des formes

    Remplissage entre chaque image dans la feuille Sprite, en pixels

    Algorithme

    Technique utilisée pour mettre en package les images dans la feuille Sprite. Deux options sont disponibles :

    • Base (option par défaut)
    • MaxRects

    Format de données

    Format interne utilisé pour les données d’image. Choisissez le format en fonction de l’utilisation prévue de la feuille Sprite après l’exportation.

    Faire pivoter

    Cette option permet de faire pivoter les sprites de 90 degrés. Cette option est disponible uniquement pour certains formats de données.

    Réduire

    Cette option permet d’économiser de l’espace dans la feuille Sprite en supprimant les pixels inutilisés de chaque image de symbole ajoutée à la feuille.

    Empiler les images

    Cette option permet d’éviter que les images dupliquées des symboles sélectionnés soient également dupliquées dans la feuille Sprite générée.

Exportation d'animations vers des applications mobiles ou des moteurs de jeux

Animate vous aide à exporter des animations vers les plateformes de jeux et les applications mobiles. Vous voulez voir l'animation sur votre téléphone mobile ou votre moteur de jeu ? Regardez le didacticiel à la fin de cet exemple et suivez ces étapes.

  1. Dans la Bibliothèque, cliquez avec le bouton droit sur le clip.

  2. Sélectionnez Générer la feuille Sprite.

  3. Dans la boîte de dialogue Feuille Sprite, sélectionnez les options requises.

  4. Cliquez sur Exporter.

Comment exporter des animations pour les applications mobiles ou les moteurs de jeux

Regardez la vidéo pour découvrir les autres options d'exportation des animations.

Création d’un atlas de textures

Les développeurs de jeux peuvent utiliser Animate pour organiser des animations et les exporter au format atlas de textures vers le moteur de jeu Unity ou toute autre plate-forme de jeu de leur choix. 

Le processus de génération d’un atlas de textures dans Animate et de son importation dans Unity est représenté dans le schéma suivant : 

Illustration représentant le worklflow pour générer l’atlas de textures et l’importer dans Unity.

Pour générer l’atlas de textures de votre animation, procédez comme suit :

  1. Dans Animate, vous pouvez générer un atlas de textures pour un symbole sélectionné dans la Bibliothèque ou l’occurrence de symbole sur la scène. 

  2. Cliquez avec le bouton droit de la souris sur le symbole et sélectionnez Générer l’atlas de textures à partir du menu. La fenêtre Générer l’atlas de textures apparaît. 

    Génération de l’atlas de textures

  3. Sélectionnez les options d’exportation appropriées pour l’atlas de textures. 

    Option d’exportation Description
    Dimensions de l’image Taille totale de l’atlas de textures, en pixels. La valeur par défaut, Taille automatique, dimensionne la feuille de façon à inclure toutes les images que vous ajoutez.
    Optimiser les dimensions
    • Lorsque l’option Optimiser les dimensions est activée, les pixels vides sont supprimés des images bitmap et les dimensions ne sont pas une puissance de deux (option par défaut). Ceci s’applique pour tous les bitmaps générés.
    • Lorsque l’option Optimiser les dimensions n’est pas activée, les images bitmap sont générées en fonction des dimensions sélectionnées.
    Format de l’image Format d’image de la feuille Sprite exportée. Les formats PNG 8 bits et PNG 32 bits prennent en charge l’utilisation d’un arrière-plan transparent (calque alpha). En règle générale, la différence visuelle entre le format PNG 8 bits et le format PNG 32 bits est minime. Les fichiers au format PNG 32 bits sont quatre fois plus volumineux que les fichiers au format PNG 8 bits.
    Résolution Sélectionnez n’importe quelle valeur comprise entre 0,3 et 3.
    Remplissage des bordures Remplissage des bordures de l’atlas de textures, en pixels.
    Remplissage des formes Remplissage entre chaque image de l’atlas de textures, en pixels.
    Algorithme

    Technique utilisée pour mettre en package les images dans l’atlas de textures. Deux options sont disponibles :

    • Base 
    • MaxRects (option par défaut)
    Format de données Format interne utilisé pour les données d’image. Le format par défaut est JSON.
    Faire pivoter Fait pivoter les images de 90 degrés°. Cette option est disponible uniquement pour certains formats de données.
    Aplatir les objets inclinés en bitmap Sélectionnez cette option si vous utilisez des transformations inclinées pour vos objets. Animate convertit ces objets en images bitmap, car certains moteurs de jeu n’interprètent pas correctement les transformations d’inclinaison. 
    Optimiser le fichier Animation.json
    • Lorsque l’option Optimiser le fichier Animation.json est activée, elle supprime l’indentation et la matrice décomposée et abrège les noms utilisés (option par défaut).
    • Si l’option Optimiser le fichier Animation.json n’est pas activée, l’indentation et les noms significatifs sont exportés.
  4. Vous pouvez exporter le symbole dans plusieurs bitmaps en fonction de la dimension.

    Génération d’un atlas de textures pour plusieurs bitmaps

    Remarque :

    Un avertissement s’affiche pour les éléments supérieurs aux dimensions de l’image sélectionnée.

  5. Pour afficher l’atlas de textures généré, cliquez sur l’onglet Aperçu.

    Affichage d’un aperçu de l’atlas de textures après l’avoir créé

  6. Cliquez sur Parcourir et sélectionnez le chemin de destination sur votre ordinateur pour le fichier de sortie ou indiquez le chemin dans la zone de texte et cliquez ensuite sur Exporter

Le dossier de sortie généré pour l’atlas de textures contient les fichiers suivants :

Animation.json

Ce fichier contient des informations sur l’animation. Par défaut, les images identiques sont optimisées et consolidées dans le fichier Animation.json.

spritemap.json

Ce fichier contient des informations sur le fichier spritesheet.png.

spritemap.png

Pour le symbole exporté, ce fichier contient la représentation bitmap de toutes les textures uniques minimales nécessaires pour reconstruire l’animation.

Vous pouvez utiliser l’atlas de textures généré dans n’importe quel moteur de jeu, tel que Unity, avec le module externe d’importateur approprié.

Importation de l’atlas de textures dans Unity

Vous pouvez importer les fichiers de l’atlas de textures générés à l’aide d’Animate vers vos plates-formes de jeu favorites. Pour importer les fichiers de l’atlas de textures, vous pouvez créer des modules externes correspondant à vos plates-formes de jeu. Un exemple de module externe d’importation est fourni pour la plate-forme Unity. 

Importez l’atlas de textures dans Unity en procédant comme suit : 

  1. Sur la plate-forme Unity, créez un projet à un emplacement donné. À cet emplacement, un dossier contenant le sous-dossier Actifs est créé. 

  2. Créez deux sous-dossiers sous Actifs en tant que Ressources et Éditeur

  3. Cliquez ici pour télécharger l’exemple de module externe d’importation pour Unity. Sélectionnez le module externe Unity depuis l’onglet Téléchargements et choisissez la version correspondante à télécharger.

    Le fichier unity-plugin.zip se compose des fichiers Plugin.cs, Wrapperplugin.cs, AnimateEditor.cs et Effect.shader.

    Le téléchargement de l’exemple vaut acceptation des Conditions d’utilisation et de la Politique de confidentialité en ligne. 

  4. Déplacez les fichiers de l’atlas de textures, tels que Animation.json, spritemap.json et spritemap.png, ainsi que les fichiers du module externe Unity, tels que Plugin.cs et Effect.shader, vers Actifs > Ressources.

  5. Déplacez les fichiers AnimateEditor.cs et Wrapperplugin.cs vers le dossier Actifs.

  6. Dans Unity, cliquez sur le fichier AnimateEditor.cs et faites-le glisser sur Main Camera (Caméra principale).

  7. Lancez la lecture. La lecture de votre projet divise la carte de sprites en différentes sprites.

  8. Déplacez AnimateEditor.cs vers Éditeur.

  9. Dans Unity, cliquez sur le fichier Wrapperplugin.cs et faites-le glisser sur Main Camera.  Veuillez également désélectionner ou supprimer AnimateEditor.cs de Main Camera.

  10. Lisez ou publiez le résultat selon vos besoins. 

Vous pouvez même personnaliser le module externe en modifiant le fichier Wrapperplugin.cs, afin de l’adapter à vos besoins.

Le module externe Unity prend en charge les effets de couleur pour les fichiers d’atlas de textures générés par Animate. En outre, il prend en charge le masquage par le biais de calques. La fonction de masquage s’applique uniquement à compter de la version Unity 2017. 

Publication de textures

En tant qu’animateur, vous pouvez continuer à créer du contenu au format vectoriel et l’exporter au format vectoriel ou pixellisé pour les plates-formes HTML5. Une option d’exportation des animations comme atlas de textures a été ajoutée aux paramètres de publication en vue d’augmenter les performances des animations.

1. Créez un document de zone de travail. Sélectionnez Fichier > Nouveau pour ouvrir la fenêtre Nouveau document. 

2. Sélectionnez l’onglet Avancé et cliquez sur HTML5 Canvas. Un nouveau document FLA s’ouvre.

3. Cliquez sur Fichier > Paramètres de publication. Si la case Exporter un document comme texture est cochée dans l’onglet Base, l’onglet Paramètres d’image affiche des options Publication de textures. Par défaut, tous les symboles sont inclus dans la publication de textures. Pour choisir sélectivement des symboles pour des textures, cliquez sur l’icône Paramètres à leurs côtés. 

Bien que cette option puisse augmenter la taille des éléments, elle améliore les performances. En outre, vous pouvez augmenter la résolution des images en doublant (2x) ou triplant (3x) la résolution originale des images pour cibler les affichages HiDPI. Pour changer les paramètres de résolution, cliquez sur l’icône de clé en regard de l’option Exporter un document comme texture illustrée dans la copie d’écran ci-dessous. Faites glisser les nombres à côté de la résolution afin d’obtenir des multiples de 2x et 3x.

Par défaut, la publication de texture est définie sur 2x la résolution. En outre, la plage de résolution peut être changée de 0,3 à 3x.

Remarque :

La publication de textures s’applique uniquement aux documents de type HTML5 Canvas.

Exporter le document comme texture activé
Exporter le document comme texture activé

Exporter le document comme texture activé

Choisir entre un fichier raster ou vectoriel revient à choisir entre la taille de fichier et les performances. Les plates-formes HTML5 sont optimisées pour le contenu raster. Dès lors, pour certaines formes complexes, il est préférable de procéder à une conversion préalable des images vectorielles au format raster. Pour une partie du contenu de base, vous pouvez toutefois utiliser le contenu vectoriel. Animate vous propose cette option au moyen d’une boîte de dialogue de sélection partielle des symboles. Cette sélection partielle des symboles vous permet de choisir les symboles à convertir au format raster, tout en conservant les autres en tant que vecteurs.

Pour accéder à la sélection partielle des symboles, cliquez sur Modifier dans la boîte de dialogue Paramètres de publication et sélectionnez ensuite un symbole dans la liste. Par défaut, tous les symboles sont sélectionnés.

Modification de la sélection partielle des symboles
Modification de la sélection partielle des symboles

Sélectionnez les symboles de votre choix dans la liste. 

Sélection partielle des symboles
Sélection partielle des symboles

Améliorer les performances graphiques grâce à Bitmap Textures

Dans Animate, les textures bitmap améliorent les performances des animations sur différentes plateformes. Vous voulez réduire la complexité des vecteurs avec des textures bitmap ? Regardez le didacticiel à la fin de cet exemple et suivez ces étapes.

  1. Dans le panneau Inspecteur des propriétés, cliquez sur Paramètres de publication.

  2. Dans l'onglet Base, sélectionnez l'icône de clé en regard de Exporter un document comme texture.

  3. Dans l'onglet Paramètres d'image, cliquez sur Changer puis sélectionnez les symboles de votre choix.

  4. Cliquez sur OK.

Comment publier vos actifs sous forme de textures bitmap pour améliorer les performances

Regardez la vidéo pour savoir comment fonctionnent les animations avec textures bitmap.
Logo Adobe

Accéder à votre compte