Création de boutons 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

Étapes élémentaires de la création de boutons

  1. Choisissez le type de bouton le mieux adapté à vos besoins.

    Symbole de bouton

    La plupart des utilisateurs préfèrent les symboles de bouton, car ils offrent plus de souplesse. Les symboles de bouton contiennent un scénario interne propre à l’état des boutons. Vous pouvez facilement créer des états Relevé, Enfoncé et Survolé visuellement différents. Par ailleurs, les symboles de bouton modifient automatiquement leur état en réponse aux actions de l’utilisateur.

    Bouton de clip

    Vous pouvez utiliser un symbole de clip pour créer des effets de bouton sophistiqués. Les symboles de clip peuvent contenir pratiquement tout type de contenu, notamment une animation. Néanmoins, les symboles de clip ne disposent pas des états RelevéEnfoncé et Survolé intégrés. Vous pouvez créer ces états vous-même à l’aide d’ActionScript. L’un des inconvénients des fichiers de clip est qu’ils sont plus volumineux que les fichiers de bouton. 

    Composant de bouton ActionScript

    Utilisez un composant de bouton si vous nécessitez uniquement un bouton standard ou un bouton bascule, et ne souhaitez pas le personnaliser outre mesure. Les composants de bouton ActionScript 2.0 et 3.0 disposent de code intégré permettant de modifier l’état des boutons. Par conséquent, il n’est pas nécessaire de définir l’aspect et le comportement des états de bouton. Il suffit de déplacer le composant vers la scène.

    • Les composants de bouton ActionScript 3.0 permettent quelques personnalisations. Vous pouvez lier le bouton à d’autres composants, et partager et afficher les données de l’application. Ils disposent de fonctions intégrées, telles que la prise en charge de l’accessibilité. Les composants Button, RadioButton et CheckBox sont disponibles. 

    • Les composants de bouton ActionScript 2.0 ne sont pas personnalisables. Ce composant permet de modifier l’état des boutons. 

  2. Définissez les états de votre bouton.

    Image Relevé

    Aspect du bouton lorsque l’utilisateur n’interagit pas avec.

    Image Survolé

    Apparence du bouton lorsque l’utilisateur est sur le point de le sélectionner.

    Image Enfoncé

    Aspect du bouton lorsque l’utilisateur le sélectionne.

    Image Cliqué

    Zone sensible aux clics de l’utilisateur. La définition de l’image Cliqué est facultative. Si votre bouton est de petite taille ou si sa zone graphique n’est pas contiguë, il peut être utile de définir cette image.

    • Le contenu de l’image Cliqué n’est pas visible sur la scène lors de la lecture.

    • Assurez-vous que le graphique de l’image Cliqué est une zone pleine suffisamment grande pour englober tous les éléments graphiques des images Relevé, Enfoncé et Survolé.

    • Si vous ne spécifiez pas une image Cliqué, l’image de l’état Relevé est utilisée.

      Vous pouvez créer un bouton qui répond lorsque vous cliquez sur une autre zone de la scène ou la survolez (survol discontinu). Placez le graphique de l’image Cliqué à un emplacement différent de celui des graphiques de l’image du bouton.

  3. Associez une action au bouton.

    Pour qu’une réaction se produise lorsque l’utilisateur sélectionne un bouton, ajoutez du code ActionScript au scénario. Placez le code ActionScript dans les mêmes images que les boutons. Le panneau Fragments de code dispose de code ActionScript 3.0 pré-écrit pour de nombreux cas d’utilisation de bouton. Voir Ajout d’interactivité à l’aide de fragments de code.

    Remarque :

    ActionScript 2.0 n’est pas compatible avec ActionScript 3.0. Si votre version d’Animate fait utilise ActionScript 3.0, vous ne pouvez pas coller du code ActionScript 2.0 dans votre bouton (et inversement). Avant de coller du code ActionScript d’une autre source dans vos boutons, vérifiez que la version est compatible.

Création d’un bouton avec un symbole de bouton

Pour rendre un bouton interactif, placez une occurrence du symbole de bouton sur la scène et affectez-lui des actions. Affectez ces actions au scénario racine du fichier FLA. N’ajoutez pas d’actions au scénario du symbole de bouton. Pour ajouter des actions au scénario du bouton, utilisez plutôt un bouton de clip.

  1. Choisissez Modifier > Tout désélectionner ou cliquez sur un emplacement vide de la scène pour vous assurer qu’aucun élément n’est sélectionné.

  2. Choisissez Insertion > Nouveau symbole.

  3. Dans la boîte de dialogue Créer un symbole, entrez un nom. Pour le Type de symbole, sélectionnez Button.

    Animate bascule en mode d’édition de symbole. Le scénario change et affiche quatre images consécutives, Relevé, Survolé, Enfoncéet Cliqué. La première image, Relevé, est une image-clé vide.

  4. Pour créer l’image du bouton dans un état Relevé, sélectionnez l’image Relevé dans le scénario, puis utilisez les outils de dessin, importez un graphique ou placez une occurrence d’un autre symbole sur la scène.

    Vous pouvez insérer des symboles graphiques et de clip dans un bouton mais pas un autre symbole de bouton.

  5. Dans le scénario, cliquez sur l’image Survolé, puis choisissez Insertion > Scénario > Image-clé.

    Animate insère une image-clé qui duplique le contenu de l’image Relevé précédente.

  6. Sans désélectionner l’image Survolé, remplacez ou modifiez l’image du bouton sur la scène pour créer l’apparence requise de l’état Survolé.

  7. Répétez les étapes 5 et 6 pour l’image de l’état Enfoncé et pour l’image facultative Cliqué.

  8. Pour attribuer un son à un état du bouton, sélectionnez l’image correspondant à cet état dans le scénario et choisissez Fenêtre > Propriétés. Sélectionnez ensuite un son dans le menu Son de l’inspecteur des propriétés. Seuls les sons que vous avez importés vous sont proposés.

  9. Lorsque vous avez terminé, choisissez Modifier > Modifier le document. Animate revient au scénario principal de votre fichier FLA. Pour créer une occurrence du bouton que vous avez créée sur la scène, faites glisser son symbole du panneau Bibliothèque vers la scène.

  10. Pour tester la fonctionnalité d’un bouton, choisissez la commande Contrôle > Tester. Vous pouvez également afficher un aperçu des états d’un symbole de bouton sur la scène en choisissant Contrôle > Activer les boutons simples. Vous pouvez ainsi afficher les états Relevé, Survolé et Enfoncé d’un symbole de bouton sans utiliser la commande Contrôle > Tester.

Activation, modification et test des symboles de bouton

Par défaut, Animate désactive les symboles de bouton lorsque vous les créez. Sélectionnez un bouton, puis activez-le pour voir s’il répond aux événements de souris. Il est recommandé de désactiver les boutons lorsque vous travaillez et de les activer pour tester rapidement leur comportement.

  • Pour sélectionner un bouton, utilisez l’outil Sélection et dessinez un rectangle de sélection autour du bouton.

  • Pour activer ou désactiver les boutons sur la scène, choisissez Contrôle > Activer les boutons simples. Cette commande permet de passer d’un état à l’autre.

  • Pour déplacer un bouton, utilisez les touches fléchées.

  • Pour modifier un bouton, utilisez l’inspecteur des propriétés. S’il n’est pas visible, choisissez Fenêtre > Propriétés.

  • Pour tester le bouton dans l’environnement de création, choisissez Contrôle > Activer les boutons simples.

  • Pour tester le bouton dans Flash Player, choisissez Contrôle > Tester l’animation [ou Tester la séquence] > Tester. Cette méthode est l’unique moyen de tester des boutons de clip.

  • Pour tester le bouton dans la fenêtre d’aperçu de la bibliothèque, sélectionnez le bouton dans la bibliothèque et cliquez sur Lire.

Résolution des problèmes liés aux boutons

Utilisez les ressources suivantes pour résoudre les problèmes les plus courants concernant les boutons :

Ressources supplémentaires concernant les boutons

Les notes techniques suivantes contiennent des instructions pour des scénarios de bouton spécifiques :

Logo Adobe

Accéder à votre compte