Principes de base de l’animation dans Animate

  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
Remarque :

comme la plupart des éléments dans Animate (précédemment Flash Professional CC), les animations n’impliquent pas l’utilisation du langage ActionScript. Vous pouvez néanmoins utiliser ActionScript si tel est votre choix.

Types d’animation

Dans Animate, il existe plusieurs moyens de créer une animation et des effets spéciaux. Chaque méthode offre différentes possibilités pour créer du contenu animé attractif.

Animate prend en charge les types d’animation suivants :

Interpolations de mouvement

Utilisez des interpolations de mouvement pour définir les propriétés d’un objet, telles que la position et la transparence alpha d’une image, et ainsi de suite pour chaque image. Animate interpole alors les valeurs des propriétés des images intermédiaires. Ces interpolations se révèlent très utiles dans le cas d’animations composées de mouvement ou d’une transformation d’objet. Les interpolations de mouvement apparaissent dans le scénario sous forme de plage contiguë d’images, qui peuvent être sélectionnées en tant qu’objet unique par défaut. Les interpolations de mouvement sont puissantes et faciles à créer.

Interpolations classiques

Les interpolations classiques sont comme des interpolations de mouvement, mais leur création est plus complexe. Les interpolations classiques autorisent certains effets spéciaux animés qui sont impossibles dans les interpolations à base de plage.

Poses de cinématique inverse (abandonné dans Animate)

Les poses de cinématique inverse permettent d’étirer et d’incurver des objets forme et de relier des groupes d’occurrences de symbole pour les faire bouger ensemble de manière naturelle. Après avoir ajouté des segments à une forme ou à un groupe de symboles, vous pouvez modifier la position des segments ou des symboles dans plusieurs images-clés. Animate interpole les positions dans les images intermédiaires.

Interpolations de forme

Avec l’interpolation de forme, vous dessinez une forme dans une image spécifique du scénario, puis vous modifiez cette forme ou dessinez une autre forme dans une autre image. Animate interpole ensuite les formes intermédiaires pour les images intermédiaires, créant ainsi l’animation en transformant progressivement une forme en une autre.

Animation image par image

Cette technique d’animation vous permet de spécifier différents effets artistiques pour chaque image du scénario. Utilisez cette technique pour créer un effet similaire aux images d’un film défilant en accéléré. Cette technique est très utile pour les animations complexes dans lesquelles les éléments graphiques de chaque image doivent être différents.

À propos des cadences

La cadence, la vitesse à laquelle l’animation est lue, est exprimée en nombre d’images par seconde (ips). Une cadence trop faible donne l’impression d’une animation qui s’arrête et redémarre, alors qu’une cadence trop rapide risque d’entraîner un affichage flou des détails de l’animation. 24 i/s est la cadence d’image par défaut pour les nouveaux documents Animate et celle qui donne les meilleures résultats sur le Web. La cadence d’image en mouvement standard est également 24 ips.

La complexité de l’animation et la puissance de l’ordinateur sur lequel elle est exécutée affectent la fluidité de la lecture. Pour déterminer les cadences optimales, testez vos animations sur différents ordinateurs.

Étant donné que vous indiquez une cadence pour l’intégralité du document Animate, il est conseillé de la définir avant de commencer la création de l’animation.

Identification d’animations dans le scénario

Animate différencie une animation interpolée d’une animation image par image dans le scénario en affichant différents indicateurs dans chaque image renfermant du contenu.

Les indicateurs de contenu d’image suivants apparaissent dans le scénario :

  • Une plage d’images sur fond bleu indique une interpolation de mouvement. Un point noir dans la première image de la plage indique qu’un objet cible est affecté à la plage d’interpolation. Des losanges noirs indiquent la dernière image et toute autre image-clé de propriété. Les images-clés de propriété sont des images qui contiennent les changements de propriété que vous avez explicitement définis. Vous pouvez choisir quels types d’images-clés de propriété afficher en cliquant avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Commande (Macintosh) tout en cliquant sur la plage d’interpolation de mouvement et en choisissant Afficher les images-clés > type dans le menu contextuel. Animate affiche tous les types d’images-clés de propriété par défaut. Toutes les autres images de la plage contiennent les valeurs des propriétés interpolées de l’objet cible.

     

     

  • Un point vide dans la première image indique que l’objet cible de l’interpolation de mouvement a été supprimé. La plage d’interpolation contient toujours ses images-clés de propriété et un nouvel objet cible peut lui être appliqué.

     

     

  • Une plage d’images sur fond vert indique une cinématique inverse (IK) calque de pose. Les calques de pose contiennent des squelettes IK et des poses. Chaque pose apparaît dans le scénario sous forme de losange noir. Animate interpole les positions du squelette dans les images des poses intermédiaires.

     

     

  • Un point noir au niveau de la première image-clé, avec une flèche noire et un arrière-plan bleu, signale une interpolation classique.

     

     

  • Une ligne pointillée indique que l’interpolation classique est rompue ou incomplète, par exemple parce que l’image-clé finale est absente.

     

     

  • Un point noir au niveau de la première image-clé, avec une flèche noire et un arrière-plan vert clair, indique une interpolation de formes.

     

     

  • Une image-clé unique est signalée par un point noir. Des images gris clair après une seule image-clé contiennent le même contenu sans changement. Ces images comportent une ligne noire verticale avec un rectangle vide au niveau de la dernière image de la plage.

     

     

  • Un petit a indique qu’une action d’image est affectée à l’image avec le panneau Actions.

     

     

  • Un drapeau rouge signale que l’image contient une étiquette.

     

     

  • Une double barre oblique verte indique que l’image contient un commentaire.

     

     

  • Une ancre dorée indique que l’image est une ancre nommée.

     

À propos des calques d’une animation interpolée

Chaque scène d’un document Animate peut être composée d’un nombre quelconque de calques de scénario. Utilisez les claques et les dossiers de calques pour organiser le contenu d’une séquence d’animation et séparer les objets animés. Leur organisation en calques et en dossiers empêche leur effacement, leur connexion ou leur segmentation lorsqu’ils se chevauchent. Pour créer une animation comprenant un mouvement interpolé de plusieurs symboles ou champs de texte en même temps, chaque objet doit être placé sur un calque distinct. Vous pouvez utiliser un calque sous forme de calque d’arrière-plan renfermant un contenu statique, et utiliser d’autres calques contenant un objet animé distinct.

Lorsque vous créez une interpolation de mouvement, Animate convertit le calque contenant l’objet sélectionné pour l’interpoler en calque d’interpolation. Dans le scénario, le calque d’interpolation présente une icône d’interpolation accolée à son nom.

Lorsque d’autres objets sont présents sur le même calque que l’objet interpolé, Animate ajoute le cas échéant de nouveaux calques au-dessus ou en dessous du calque original. Tous les objets situés au-dessous de l’objet interpolé sur le calque original sont déplacés vers un nouveau calque placé sous l’original. Tous les objets situés au-dessus de l’objet interpolé sur le calque original sont déplacés vers un nouveau calque au-dessus de l’original. Animate insère ces nouveaux calques entre les calques préexistants du scénario. Animate préserve ainsi l’ordre d’empilement d’origine de tous les objets graphiques de la scène.

Un calque d’interpolation ne peut contenir que des plages d’interpolation (groupes contigus d’images contenant une interpolation), des images statiques, des images-clés vides ou des images vides. Chaque plage d’interpolation ne peut contenir qu’un seul objet cible et une trajectoire de mouvement facultative pour cet objet. Comme il est impossible de dessiner dans un calque d’interpolation, d’autres interpolations ou images statiques doivent être créées sur d’autres calques, puis glissées vers le calque d’interpolation. Pour placer des scripts d’image sur un calque d’interpolation, créez-les sur un autre calque, puis faites-les glisser sur celui d’interpolation. Un script d’images ne peut résider que dans une image qui est hors de la plage d’interpolation de mouvement elle-même. En général, il est conseillé de conserver tous les scripts d’images sur un calque distinct qui ne contient que du code ActionScript.

Lorsqu’un document comporte plusieurs calques, il peut être difficile d’assurer son suivi et de modifier les objets sur un ou plusieurs de ces calques. Cette tâche est plus facile si vous travaillez avec le contenu d’un seul calque à la fois. Pour masquer ou verrouiller les calques sur lesquels vous ne travaillez pas actuellement, cliquez sur l’icône d’affichage ou de verrou accolée au nom du calque dans le scénario. Les dossiers de calques vous aident à organiser les calques dans des groupes gérables.

Répartition d’objets dans des calques pour les animations interpolées

Animate déplace automatiquement tout objet vers son propre calque d’interpolation lorsque vous lui appliquez une interpolation de mouvement. Toutefois, vous pouvez également distribuer vous-même les objets à leurs propres calques distincts. Par exemple, vous pouvez choisir de distribuer vous-même les objets lorsque vous organisez du contenu. La distribution manuelle s’avère également pratique pour appliquer une animation à des objets tout en maintenant un contrôle précis sur la manière dont ils se déplacent d’un calque à l’autre.

Lorsque vous utilisez la commande Répartir dans les calques (Modifier > Scénario > Répartir dans les calques), Animate distribue chaque objet sélectionné dans un nouveau calque distinct. Les objets que vous ne sélectionnez pas (y compris ceux d’autres images) conservent leurs calques d’origine.

Vous pouvez appliquer la commande Répartir dans les calques à tout élément de la scène, tel que les objets graphiques, les occurrences, les bitmaps, les clips vidéo et les blocs de texte séparés.

À propos des nouveaux calques créés avec la commande Répartir dans les calques

Les calques créés pendant la répartition dans des calques sont baptisés selon le nom de l’élément que chacun contient :

  • Un nouveau calque contenant un élément de bibliothèque (tel que symbole, bitmap ou clip vidéo) prend le nom de cet élément.

  • Un nouveau calque contenant une occurrence nommée prend le nom de cette occurrence.

  • Un nouveau calque contenant un caractère d’un bloc de texte séparé est nommé selon ce caractère.

  • Un nouveau calque contenant un objet graphique (sans nom) est nommé Calque 1 (ou Calque 2 et ainsi de suite), les objets graphiques ne possédant pas de nom.

    Animate insère les nouveaux calques sous les calques éventuellement sélectionnés. Les nouveaux calques sont organisés de haut en bas, selon l’ordre de création initial des éléments sélectionnés. Dans le cas de texte séparé, les calques sont organisés dans l’ordre des caractères, qu’il soit rédigé de gauche à droite, de droite à gauche ou de haut en bas. Par exemple, supposons que vous sépariez en cinq parties le texte FLASH pour le répartir dans plusieurs calques. Les nouveaux calques, nommés F, L, A, S et H, sont disposés de haut en bas, le F étant en haut. Ces calques apparaissent immédiatement sous le calque qui contenait le texte au départ.

Répartition d’objets dans des calques

  1. Sélectionnez les objets à répartir dans des calques distincts. Ces objets peuvent se trouver sur un même calque ou sur plusieurs, même non contigus.
  2. Effectuez l’une des opérations suivantes :
    • Sélectionnez Modification > Scénario > Répartir dans les calques.
    • Cliquez avec le bouton droit de la souris (Windows) ou appuyez sur la touche Contrôle (Macintosh) sur un des objets sélectionnés, puis sélectionnez Répartir dans les calques.

Création d’animations interpolées en répartissant des objets dans des images-clés

Nouveauté d’Animate

Animate permet de répartir des objets dans des images-clés individuelles. Vous pouvez choisir de répartir des objets lorsque vous organisez du contenu sur la scène. Manuellement, cette procédure est fastidieuse et prend beaucoup de temps. La répartition est très utile lors de la création d’animations interpolées en plaçant des objets sur des images-clés individuelles. Vous pouvez affecter différents objets ou états d’objet à des images-clés individuelles. Lorsque la tête de lecture parcourt ces images-clés, l’effet d’une animation est apparent.

Lorsque vous utilisez la commande Répartir dans les images-clés, Animate répartit chaque objet sélectionné dans une nouvelle image-clé distincte. Les objets que vous ne sélectionnez pas (y compris ceux d’autres images) conservent leurs calques d’origine.

Vous pouvez appliquer la commande Répartir dans les images-clés à tout élément de la scène, notamment à des objets graphiques, des occurrences, des bitmaps, des clips vidéo et des blocs de texte.

À propos des nouvelles images-clés créées avec la commande Répartir dans les images-clés

  • Les nouvelles images-clés créées avec la commande Répartir dans les images-clés sont disposées selon l’ordre de sélection des objets.
  • Si certains objet sur le calque n’ont pas été sélectionnés lors de l’exécution de la commande Répartir dans les images-clés, les images originales ne sont pas affectées à ces objets. Les objets sélectionnés pour la répartition se voient attribuer des images-clés à partir de l’image qui suit immédiatement la dernière image du contenu original. Par exemple, si l’Objet 1 et l’Objet 2 se trouvent sur un calque qui possède 50 images et que vous sélectionnez l’Objet 1 pour la répartition, ce dernier est placé sur la 51e image-clé.

Répartition d’objets dans des images-clés

  1. Sélectionnez les objets à répartir dans des calques distincts. Ces objets peuvent se trouver sur un même calque ou sur plusieurs, même non contigus.

  2. Cliquez avec le bouton droit de la souris (Windows) ou appuyez sur la touche Contrôle (Macintosh) sur l’un des objets sélectionnés, puis sélectionnez Répartir dans les images-clés.

Ressources supplémentaires

L’article suivant traite de l’utilisation d’animations dans Animate :

Logo Adobe

Accéder à votre compte