Création de boutons avec Adobe Animate

Rechercher

Dernière mise à jour le 2 mai 2021

Dans Animate (anciennement Flash Professional), les boutons sont des symboles contenant quatre images. Chaque image d'un symbole de bouton représente un autre état du bouton : Relevé, Survolé, Enfoncé et Cliqué. Ces états déterminent la façon dont un bouton se comporte visuellement lorsque le curseur le survole ou que l'utilisateur clique dessus. Ce document explique comment créer des boutons de base et avancés.

Création d’un bouton de base

Sélectionnez Insertion > Nouveau Symbole ou appuyez sur Control+F8 (Windows) ou Command+F8 (Mac OS).
Remarque : Dans Flash 3 et les versions antérieures, désélectionnez tout sur la scène et sélectionnez Insérer > Créer un symbole.
Dans la boîte de dialogue Propriétés du symbole, indiquez un nom pour le nouveau symbole de bouton, puis sélectionnez Bouton comme option de comportement. Cliquez sur OK.

Flash passe au mode de modification de symbole. L’en-tête de scénario change et affiche quatre images consécutives : Relevé, Survolé, Enfoncé et Cliqué. La première image, Relevé, est une image clé vide.
Pour créer l'image du bouton dans l'état Relevé, utilisez les outils de dessin, importez un graphique ou placez une instance d'un autre symbole sur la scène. Vous pouvez utiliser aussi bien un clip qu'un symbole graphique dans un bouton. En revanche, vous ne pouvez pas utiliser un autre bouton dans un bouton. Utilisez des symboles de clip pour créer un bouton animé.
Sélectionnez la deuxième image, Survolé, et sélectionnez Insérer > Image clé. L'image du bouton de la première image apparaît sur la scène.
Modifiez l'image du bouton pour l'état Survolé. Répétez les étapes 4 et 5 pour les images des états Enfoncé et Cliqué.

Remarque :
L'image Cliqué n'est pas visible sur la scène lors de la lecture, mais elle définit la zone du bouton qui répond lorsque vous cliquez dessus. 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é. Elle peut aussi être plus large que le bouton visible. Si vous ne spécifiez pas d’image pour l’état Cliqué, les objets de l’état Relevé servent alors d’image pour l’état Cliqué.
Après avoir défini les images des quatre états de bouton, sélectionnez Modifier > Edition d’animation pour quitter le mode d'édition de symbole.
Ouvrez la fenêtre de la bibliothèque en sélectionnant Fenêtre > Bibliothèque. Recherchez le bouton dans la fenêtre de la bibliothèque, puis faites glisser le symbole de bouton de la bibliothèque sur la scène. Cette étape permet de créer une instance du bouton dans la séquence.

Pour plus d'informations sur l'affectation des actions à une instance de bouton, consultez la documentation correspondant à la version d'Animate que vous utilisez. La procédure est la suivante :

Affecter une seule action à un bouton (Flash 5)

En mode Edition d’animation, cliquez sur l'instance de bouton créée à l'étape 7 ci-dessus.
Choisissez la commande Fenêtre > Actions pour ouvrir le panneau Actions.
Dans la Boîte à outils située sur le côté gauche du panneau, cliquez sur la catégorie Actions de base pour en afficher le contenu.
Pour affecter une action, procédez de l’une des manières suivantes :
- Double-cliquez sur une action dans la catégorie Actions de base.
- Faites glisser une action depuis la catégorie Actions de base à gauche vers la liste des Actions sur le côté droit du panneau.
- Cliquez sur le bouton Ajouter (+) et sélectionnez une action dans le menu contextuel.
- Utilisez le raccourci clavier.
Si des paramètres sont associés à l'action sélectionnée, ceux-ci s'affichent dans le volet Paramètres situé au bas du panneau Actions. (Si le volet Paramètres n'est pas visible, cliquez sur le petit triangle dans le coin inférieur droit du panneau.) Sélectionnez ou saisissez les paramètres appropriés pour cette action. Par exemple, l'action gotoAndPlay présentée ci-dessous contient trois paramètres : Scène, Type, Image, ainsi qu'une option pour Accéder et Lire.

Affectez une seule action à un bouton (Flash 4 et versions antérieures)

En mode Edition d’animation, cliquez sur l'instance de bouton créée à l'étape 7 ci-dessus.
Assurez-vous que l'option Activer les boutons du menu Contrôle est désélectionnée.
Double-cliquez sur le bouton pour ouvrir la boîte de dialogue Propriétés de l'instance.
Remarque : Dans Flash 2, cette boîte de dialogue correspondait à la boîte de dialogue Propriétés de liaison : Bouton.
Affectez l'action en sélectionnant l'onglet Action dans la boîte de dialogue Propriétés de l'instance. Cliquez ensuite sur le bouton (+) et cliquez deux fois sur l'action appropriée.

Remarque :
Dans Flash 2, affectez l'action à l'aide du menu contextuel Action dans la boîte de dialogue Propriétés de liaison : Bouton. Une seule action peut être associée au bouton.
Assurez-vous que l'option Activer les boutons soit réactivée (une coche apparaît en regard) dans le menu Contrôle.
Si des paramètres sont associés à l'action sélectionnée, ceux-ci s'affichent dans le volet Paramètres situé à droite du panneau Actions. Sélectionnez ou saisissez les paramètres appropriés pour cette action.

Création de boutons avancés

Une fois que vous aurez maîtrisé la création d'un bouton simple, essayez des boutons Animate plus complexes. Vous pouvez créer des boutons invisibles, des boutons avec des états animés et des boutons avec des effets de survol.

Il est important de comprendre les états Cliqué lors de la conception d'un bouton complexe. La forme et la zone du bouton représentent la zone active du bouton.Pour faire des essais avec l'état Cliqué, procédez comme suit :

Placez un bouton sélectionné à partir des Bibliothèques communes sur la scène. Modifiez le bouton.
Sélectionnez l'image dans l'état Cliqué du bouton, puis insérez une image clé. Testez ce comportement dans une séquence.
Redimensionnez considérablement l'objet dans l'état Cliqué et testez-le.
Supprimez l'image clé dans l'état Cliqué et testez le bouton.
Notez l'effet sur le curseur de votre bouton, et les états Relevé, Survolé et Enfoncé qui apparaissent lorsque le bouton est activé.

Boutons invisibles

Vous pouvez laisser vides les états Relevé, Survolé et Enfoncé. Si ces états sont vides, il est nécessaire de définir l'état Cliqué de sorte qu'il contienne du contenu.

Lorsque l'état Relevé du bouton est vide ou invisible, le bouton est représenté sur la scène par une forme bleue. La forme est l'équivalent du contenu dans l'image clé suivante dans le bouton. Cette forme bleue ne sera pas visible dans votre film final.

Boutons avec des états animés

Pour créer des boutons animés dans Animate, placez un clip dans l'état de bouton que vous animez.

Créez un clip pour chaque état du bouton que vous souhaitez animer.
Créez le bouton.
Définissez les clips dans les états des boutons à animer.
Placez le bouton sur la scène.
Remarque : L'éditeur d'Animate ne permet pas de tester les clips. Sélectionnez Contrôle > Tester l'animation ou exportez-la en tant que fichier SWF afin de le tester.

Un survol dans une zone de la séquence affecte une autre zone de la séquence

Pour créer cet effet, déplacez les éléments d'état Enfoncé vers une autre zone de la scène que les éléments dans l'état Survolé du bouton. Cette méthode fonctionne pour les effets de survol simple. La zone active du bouton se trouve dans une zone différente sur scène que l'effet de survol.

Informations supplémentaires

Un bon moyen d'en savoir plus sur les boutons et leur syntaxe est d'étudier les boutons présentés en exemples dans Animate. Dans la version 5, vous pouvez accéder à ces boutons exemples en sélectionnant Fenêtres > Bibliothèques communes > Boutons. Si vous utilisez la version 4, vous pouvez y accéder en sélectionnant Bibliothèques > Boutons. Avec la version 2, les bibliothèques de boutons exemples sont accessibles à partir du menu Xtras.

Une procédure pas à pas pour créer un bouton est également disponible dans les leçons fournies avec la version 5. Sélectionnez Aide > Leçons > 06 Boutons dans Flash pour accéder à cette leçon.