Atelier Pratique : Boutons Interactifs avec Animate

Organisation du projet et présentation d'un bouton simple (4 états)
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Ateliers créatifs Adobe Animate CC
Revoir le teaser Je m'abonne
Transcription

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont de :

  • Comprendre les différents états d’un bouton dans Adobe Animate.
  • Apprendre à personnaliser la zone interactive des boutons.
  • Acquérir des compétences pratiques pour améliorer l’interactivité dans les projets.

Dans cette leçon, nous explorons la création et la gestion des boutons interactifs dans Adobe Animate, en examinant les états et les zones cliquables des symboles boutons.

Cette leçon est dédiée à la manipulation de boutons interactifs dans Adobe Animate. Vous apprendrez à gérer les quatre états des boutons : inactif, survolé, abaissé et la zone interactive. Nous explorerons comment personnaliser ces états pour différentes interactions utilisateur. Les notions de pelure d'oignon et de zone cliquable seront expliquées, illustrant ainsi la flexibilité de la définition des zones interactives autour des boutons. En utilisant des exemples concrets, la leçon fournit des exercices pour tester et ajuster les zones interactives afin d’améliorer l'expérience utilisateur.

Voir plus
Questions réponses
Quels sont les quatre états d'un bouton dans Adobe Animate?
Les quatre états d'un bouton dans Adobe Animate sont : inactif, survolé, abaissé et la zone interactive.
À quoi sert l'outil pelure d'oignon dans la création des boutons?
L'outil pelure d'oignon permet de voir les frames précédentes et suivantes pour faciliter l'alignement et la création des différentes images clés.
Comment s'assurer que la zone cliquable soit plus large que le contenu graphique du bouton?
Pour élargir la zone cliquable, il faut ajouter une image clé dans l'état de la zone interactive et y dessiner une forme plus grande, souvent un rectangle, pour définir la nouvelle zone active.
Nous démarrons ici une série de quelques ateliers pratiques. Alors je précise que pour chacun des ateliers, au niveau des fichiers sources, des fichiers supports que vous pouvez télécharger pour la formation, il y a une organisation qui se retrouve pour chacun des ateliers avec un dossier médias qui contient les assets, donc les fichiers graphiques que je peux être amené à utiliser dans l'exercice, et un dossier résultats qui contient le fichier fini auquel vous pouvez vous référer dans votre travail. Je vais démarrer donc sur une série de petits ateliers consacrés à l'interactivité à partir de boutons dans Animate, et je démarre sur le bouton le plus simple que nous pouvons rencontrer qui est tout simplement le symbole bouton qui sont des types de symboles proposés par Animate qui ont un comportement particulier. Donc ce symbole posé sur la scène a bien un comportement bouton au niveau de la propriété du panneau propriété, et si je rentre pour accéder au scénario interne de ce bouton, je vois qu'il est constitué de quatre images. Alors déjà il a un affichage qui est un peu particulier, j'ai un petit peu plus zoomé qu'un scénario normal, et il a quatre états qui vont me permettre de gérer en fait les différents états de mon bouton. Alors le premier état c'est tout simplement l'état inactif quand rien ne se passe, quand la souris ne survole pas le bouton. Le deuxième état c'est l'état dessus, donc c'est le survol du bouton. Et le troisième état c'est quand j'appuie, quand je clique sur le bouton, c'est l'état abaissé. Donc ça va me permettre de gérer les trois principaux états que l'on peut avoir pour un bouton généralement sur le web ou dans une animation. Et nous avons un quatrième état qui pour l'instant ne contient rien du tout, qui en fait sert à gérer la zone interactive. Alors ce qu'il faut savoir c'est que par défaut si ce bouton est absent, ce qui est le cas ici par défaut, la zone interactive du bouton en fait c'est le contenu du bouton. Donc là en l'occurrence nous avons un bouton qui est constitué de formes remplissage, donc ce qui sera actif c'est tout ce qui est à l'intérieur du remplissage. Du coup on va avoir un fonctionnement tout à fait viable de notre bouton sans avoir à lui insérer une zone cliquée. Donc notre bouton va très bien fonctionner. Par contre si je souhaite, alors là je vais faire un petit test juste pour vous montrer. Donc ça fonctionne bien, je passe sur mon bouton, il n'y a pas de problème. Par contre moi si je veux que mon bouton il soit un petit peu plus franc et je veux que il soit interactif un peu sur son contour, c'est à dire que en gros la zone survolée, enfin l'état survolé de mon bouton s'affiche quand je ne suis pas complètement arrivé sur le bouton, donc à partir d'ici par exemple. Donc sur le pourtour de mon bouton de manière à ce qu'il soit un petit peu plus franc au niveau du survol. C'est là que je vais utiliser la zone cliquée, je vais rajouter une image clé, je vais utiliser la pelure d'oignon. La pelure d'oignon je vous rappelle ça permet de voir ce qui est positionné sur les autres images clés de mon scénario et je vais par exemple pouvoir mettre un gros carré. Alors là je mets n'importe quoi, il faut juste que ce soit du remplissage. Je vais mettre un gros carré à cet endroit là et du coup la zone interactive de mon bouton elle va être dans les limites de ce carré que je viens de placer. Donc mon bouton va être interactif à partir du moment où je vais rentrer dans les limites de ce carré. Je teste et je vois que vous voyez ça fonctionne bien. Donc ça me permet d'avoir une zone interactive qui est différente, qui va au-delà du contenu graphique de mon bouton. Alors quand je parlais de carré c'est bien sûr un rectangle, je vous vois la différence entre un carré et un rectangle. Donc cette propriété de l'image clé cliquée va me permettre également, ça peut être utile, d'avoir une zone cliquable, une zone interactive plutôt, qui est à un endroit complètement différent de ma scène. Donc là si je déplace mon rectangle à cet endroit là par exemple, je vais avoir un bouton, c'est pas très utile mais bon, imaginons que vous ayez besoin de le faire dans un jeu ou quoi que ce soit, je vais avoir un bouton qui ne fonctionne pas du tout. Par contre si je me déplace ici, j'ai mon bouton qui est affiché au niveau de ses différents états. Voilà c'était juste pour vous montrer un petit peu l'utilité. Alors à l'inverse, je peux avoir une zone interactive qui est plus petite que mon bouton. Voilà si je réduis ma zone interactive, mon bouton sera actif sur le centre, mais pas sur la globalité de sa zone.

Programme détaillé de la formation

Nos dernières formations Animate CC