Dessin et création d’objets avec 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

À propos du dessin

Les outils de dessin d’Adobe Animate permettent de créer et de modifier des lignes et des formes pour les illustrations de vos documents. Toutes les lignes et formes que vous créez dans Animate sont des images vectorielles légères, qui se traduisent par des fichiers FLA de petite taille.

Avant de dessiner et de peindre dans Animate, il est important de comprendre comment Animate crée des illustrations et comment le dessin, la peinture et la modification des formes peuvent affecter d’autres formes placées sur le même calque.

Graphiques vectoriels et bitmap

Les ordinateurs affichent des graphiques au format vectoriel ou bitmap. Il est important de bien comprendre la différence entre ces deux formats pour les utiliser de manière plus efficace. Animate vous permet de créer et d’animer des graphiques vectoriels compacts. Animate permet également d’importer et de manipuler des graphiques vectoriels et bitmap créés dans d’autres applications.

Graphiques vectoriels

Les graphiques vectoriels décrivent les images à l’aide de lignes et de courbes, appelées vecteurs qui comprennent également les propriétés de couleur et de position. Par exemple, l’image d’une feuille est formée par des points reliés entre eux, formant ainsi le contour de la feuille. La couleur de la feuille est définie par la couleur du contour et la couleur de la région qu’il définit.

Lignes dans les graphiques vectoriels.

Lorsque vous manipulez un graphique vectoriel, vous modifiez les propriétés des lignes et des courbes qui en décrivent la forme. Vous pouvez déplacer, redimensionner, remodeler et changer la couleur d’un graphique vectoriel sans affecter la qualité de son apparence. Les graphiques vectoriels ne dépendent pas de la résolution ; ils peuvent donc être affichés sur des périphériques de résolution différente sans perdre leur qualité.

Graphiques bitmap

Les graphiques bitmap décrivent des images à l’aide de points de couleur, appelés pixels, organisés sur une grille. Par exemple, l’image d’une feuille est décrite par l’emplacement et la valeur de couleur spécifiques de chaque pixel de la grille, créant une image assez semblable à une mosaïque.

Les pixels dans les graphiques bitmap.

Lorsque vous modifiez un graphique bitmap, la modification porte sur les pixels et non sur les lignes et les courbes. Les graphiques bitmap dépendent de la résolution, les données décrivant l’image étant définies pour une grille de dimension particulière. La manipulation d’un graphique bitmap peut affecter la qualité de son apparence. En particulier, le redimensionnement d’un graphique bitmap peut donner un effet d’escalier aux bords de l’image lorsque les pixels sont redistribués dans la grille. L’affichage d’un graphique bitmap sur un périphérique de sortie de résolution inférieure à celle de l’image entraîne également une altération de la qualité.

Tracés

Lorsque vous dessinez une ligne ou une forme dans Animate, vous créez en fait une ligne appelée tracé. Un tracé est composé d’un ou de plusieurs segments droits ou incurvés. Le début et la fin de chaque segment sont indiqués par des points d’ancrage qui fonctionnent à la manière d’épingles maintenant un fil en place. Un tracé peut être fermé (un cercle, par exemple) ou ouvert, s’il comporte des extrémités distinctes (une ligne onduleuse, par exemple).

Pour modifier la forme d’un tracé, vous pouvez faire glisser ses points d’ancrage, les points directeurs à l’extrémité des lignes directrices qui apparaissent aux points d’ancrage ou le segment du tracé lui-même.

Composants d’un élément

A. Extrémité de tracé sélectionnée (pleine) B. Point d’ancrage sélectionné C. Point d’ancrage non sélectionné D. Segment de tracé incurvé E. Point directeur F. Ligne directrice. 

Les tracés peuvent avoir deux types de points d’ancrage : des points d’angle et des points d’inflexion. À un point d’angle, un tracé change brusquement de direction. À un point d’inflexion, les segments du tracé sont raccordés en une courbe continue. Lorsque vous dessinez un tracé, vous pouvez mélanger à votre guise les sommets et les points d’inflexion. Vous pouvez toujours transformer un sommet en point d’inflexion, et inversement.

Points d’un tracé

A. Quatre sommets B. Quatre points d’inflexion C. Combinaison de sommets et de points d’inflexion. 

Un sommet peut relier deux segments rectilignes ou courbes, tandis qu’un point d’inflexion raccorde toujours deux segments courbes.

Un sommet peut relier des segments rectilignes et des segments courbes.

Remarque :

vous ne devez pas confondre les points d’angle et d’inflexion avec les segments rectilignes et incurvés.

Le contour d’un tracé est appelé trait. Une couleur ou un dégradé appliqué à la zone interne d’un tracé ouvert ou fermé s’appelle remplissage. Un trait peut être doté d’une épaisseur, d’une couleur et d’un motif en pointillé. Une fois que vous avez créé un tracé ou une forme, vous pouvez modifier ses caractéristiques de contour et de fond.

Lignes directrices et points directeurs

Lorsque vous sélectionnez un point d’ancrage qui raccorde des segments incurvés (ou sélectionnez le segment lui-même), les points d’ancrage des segments raccordés affichent des poignées directrices qui sont composées de lignes directrices dont les extrémités sont des points directeurs. L’angle et la taille des lignes directrices déterminent la forme et la taille des segments incurvés. Le déplacement des points directeurs modifie la forme de la courbe. Les lignes directrices n’apparaissent pas dans le produit final.

Un point d’inflexion présente toujours deux lignes directrices solidaires. Lorsque vous déplacez une ligne directrice sur un point d’inflexion, les segments incurvés de part et d’autre du point sont ajustés simultanément de sorte que vous avez en permanence une courbe continue à ce point d’ancrage.

Un sommet peut quant à lui avoir une, deux ou aucune lignes directrices, selon qu’il relie respectivement un, deux ou aucun segments courbes. Les lignes directrices d’un sommet conservent le sommet en utilisant différents angles. Par contre, lorsque vous placez une ligne directrice sur un point d’angle, seule la courbe située du même côté du point que la ligne directrice est ajustée.

Une fois que vous avez sélectionné un point d’ancrage (à gauche), les lignes directrices apparaissent sur toutes les courbes reliées par ce point d’ancrage (à droite).

Réglage des lignes directrices d’un point d’inflexion (à gauche) et d’un sommet (à droite).

Les lignes directrices sont toujours tangentes (perpendiculaires au rayon) à la courbe au niveau des points d’ancrage. L’inclinaison de chaque ligne directrice détermine celle de la courbe. De même, la longueur de chaque ligne directrice détermine la hauteur ou l’incurvation de la courbe.

Le déplacement et le redimensionnement des lignes directrices modifient l’inclinaison des courbes.

Modes de tracé et objets graphiques

Dans Animate, vous pouvez créer différents types d’objets graphiques à l’aide d’autres modes et outils de dessin. Chacun d’eux a ses propres avantages et inconvénients. Vous pouvez choisir les types d’objets graphiques à adopter pour votre travail dès le moment où vous comprenez les fonctionnalités de chacun d’eux.

Remarque :

dans Animate, les objets graphiques sont des éléments présents sur la scène. Animate vous permet de déplacer, copier, supprimer, transformer, empiler, aligner et grouper des objets graphiques. Dans Animate, les « objets graphiques » sont différents des « objets ActionScript », qui font partie du langage de programmation ActionScript®. Veillez à ne pas confondre les deux sens du terme « objets ». Pour plus d’informations sur les objets du langage de programmation, voir Présentation des types de données dans Formation à ActionScript 2.0 dans Adobe Animate ou Types de données dans le Guide du développeur d’ActionScript 3.0.

Mode de fusion de dessins

Ce mode de dessin par défaut fusionne automatiquement les formes que vous dessinez lorsqu’elles se chevauchent. Lorsque vous dessinez des formes qui se chevauchent dans le même calque, la forme au haut de la pile enlève la partie de la forme qu’elle recouvre au-dessous d’elle. Ainsi, le dessin de formes est un mode de dessin destructif. Par exemple, si vous tracez un cercle, puis un cercle plus petit par dessus, et si vous sélectionnez et déplacez ensuite ce dernier, la partie du second cercle qui était chevauchée par le premier est supprimée.

Lorsqu’une forme contient un trait et un remplissage, ceux-ci sont considérés comme des éléments graphiques distincts qui peuvent être sélectionnés et déplacés indépendamment l’un de l’autre.

Les formes créées par le modèle de fusion de dessins fusionnent quand elles se chevauchent. Si vous sélectionnez une forme et que vous la déplacez, la forme chevauchée est modifiée.

Activation du mode de fusion de dessins

  1. Sélectionnez l’option Fusion de dessins dans le panneau Outils.

  2. Sélectionnez un outil de dessin dans le panneau Outils, puis dessinez sur la scène.

Remarque :

par défaut, Animate utilise le mode de fusion de dessins.

Mode Dessin d’objet

Crée des formes référencées sous forme d’objets de dessin. Les objets de dessin sont des objets graphiques distincts qui ne fusionnent pas automatiquement lorsqu’ils se chevauchent. Vous pouvez ainsi faire se chevaucher des formes sans modifier leur apparence si vous déplacez ou modifiez l’une d’entre elles. Animate crée chaque forme comme un objet distinct que vous pouvez modifier séparément.

Lorsqu’un outil de dessin est en mode de dessin d’objet, les formes qu’il vous permet de créer sont indépendantes. Le trait et le remplissage d’une forme ne sont pas des éléments distincts et les formes qui se chevauchent ne se modifient pas mutuellement. Si vous sélectionnez une forme créée avec le mode de dessin d’objet, Animate entoure cette forme d’un cadre de sélection rectangulaire pour l’identifier.

Remarque :

lorsque vous sélectionnez des formes créées avec le mode de dessin d’objet, vous pouvez définir les préférences de sensibilité au contact.

Les formes créées avec le mode de dessin d’objet restent des objets distincts que vous pouvez manipuler individuellement.

Activation du mode de dessin d’objet

Pour dessiner des formes avec le mode de dessin d’objet, vous devez l’activez explicitement.

  1. Sélectionnez un outil de dessin qui prend en charge le mode de dessin d’objet (les outils Crayon, Ligne, Plume, Pinceau, Ovale, Rectangle et Polygone).

  2. Sélectionnez le bouton Dessin d’objet  dans la catégorie Options du panneau Outils ou appuyez sur la touche J pour basculer entre les modes Fusion et Objet. Ce même bouton permet d’activer tour à tour les modes Fusion et Objet. Lorsque vous sélectionnez des formes créées avec le mode Objet, vous pouvez définir les préférences de sensibilité au contact.

  3. Dessinez sur la scène.

Conversion d’une forme créée à l’aide du mode fusion en mode objet

  1. Sélectionnez une forme sur la scène.

  2. Pour convertir la forme en une forme du mode objet dessin, sélectionnez Modification > Combiner les objets > Union. Après la conversion, la forme est traitée comme un objet de dessin à base vectorielle qui ne se déforme pas dans une interaction avec d’autres formes.

Remarque :

vous pouvez également utiliser la commande Union pour réunir deux formes ou plus afin de constituer une forme unique à base d’objets.

Objets primitifs

Les objets primitifs sont des formes qui vous permettent d’ajuster leurs caractéristiques dans l’inspecteur des propriétés. Ceci vous permet de contrôler avec précision la taille, le rayon de l’angle, ainsi que d’autres propriétés de la forme, à tout moment après sa création, sans avoir à repartir de zéro.

Deux types de primitives sont disponibles : des rectangles et des ovales.

  1. Sélectionnez l’outil Rectangle primitif  ou l’outil Ovale primitif  dans le panneau Outils.

  2. Dessinez sur la scène.

Chevauchement de formes

Lorsque vous tracez une ligne en travers d’une autre ligne ou d’une forme peinte en mode de fusion de dessins, les lignes qui se chevauchent sont divisées en segments au niveau des points d’intersection. Vous pouvez utiliser l’outil de sélection pour sélectionner, déplacer et remodeler chaque segment individuellement.

Un remplissage, le remplissage traversé par une ligne et les trois segments de ligne créés par la segmentation.

Lorsque vous peignez par-dessus des formes et des lignes, la partie qui se trouve en dessous est remplacée par ce qui se trouve au-dessus. Les peintures de même couleur se mélangent. Les peintures de couleurs différentes restent distinctes. Vous pouvez utiliser ces fonctions pour créer des masques, des découpes ou autres images en négatif. Par exemple, la découpe illustrée ci-dessous a été réalisée en déplaçant l’image non groupée du cerf-volant sur la forme verte, en désélectionnant le cerf-volant, puis en éloignant les parties remplies du cerf-volant de la forme verte.

Réalisation d’une découpe avec l’image du cerf-volant.

Pour éviter toute modification accidentelle des formes et des lignes en les chevauchant, vous pouvez grouper les formes ou utiliser des calques pour les séparer.

Logo Adobe

Accéder à votre compte