{"id":124624,"date":"2018-02-22T14:43:15","date_gmt":"2018-02-22T13:43:15","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/events-and-interactions\/"},"modified":"2025-02-03T20:53:46","modified_gmt":"2025-02-03T19:53:46","slug":"events-and-interactions","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/evenements-et-interactions","title":{"rendered":"\u00c9v\u00e9nements et interactions"},"content":{"rendered":"<p>Transformez vos wireframes en prototypes interactifs hi-fi en ajoutant des \u00e9v\u00e9nements. Dans cet article, vous apprendrez \u00e0 cr\u00e9er et \u00e0 utiliser des interactions avec la palette \u00c9v\u00e9nements. <\/p>\n<div class=\"embed-container\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/781845823\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<h2><a id=\"how-events-work\"><\/a>Fonctionnement des \u00e9v\u00e9nements<\/h2>\n<p>Un \u00e9v\u00e9nement comprend un <strong>d\u00e9clencheur<\/strong> et une <strong>action<\/strong>. Le <strong>d\u00e9clencheur<\/strong> est la mani\u00e8re dont vous interagissez avec votre prototype, par exemple en cliquant, en faisant glisser ou en passant la souris sur un \u00e9l\u00e9ment. L&rsquo;<strong>action<\/strong> est le r\u00e9sultat que vous souhaitez obtenir apr\u00e8s le d\u00e9clencheur, comme la liaison avec un autre \u00e9cran ou la modification de l&rsquo;apparence d&rsquo;un \u00e9l\u00e9ment.  <\/p>\n<p>Avec les \u00e9v\u00e9nements, vous pouvez :<\/p>\n<ul>\n<li>Faites en sorte que presque tous les \u00e9l\u00e9ments de votre prototype soient interactifs, y compris les boutons, les images et le texte.<\/li>\n<li>D\u00e9clencher plusieurs actions sur un m\u00eame \u00e9l\u00e9ment. Par exemple, vous pouvez cliquer sur un rectangle et changer sa couleur, puis d\u00e9placer ce rectangle \u00e0 un autre endroit de l&rsquo;\u00e9cran. <\/li>\n<li>Cr\u00e9ez des interactions sur un \u00e9l\u00e9ment qui affectent un autre \u00e9l\u00e9ment. Par exemple, vous pouvez cliquer sur un bouton, puis changer la couleur d&rsquo;un rectangle \u00e0 l&rsquo;\u00e9cran.<br>Utilisez diff\u00e9rents d\u00e9clencheurs pour un m\u00eame \u00e9l\u00e9ment. Par exemple, vous pouvez cliquer sur un rectangle et modifier sa bordure, et vous pouvez \u00e9galement glisser vers la gauche sur ce rectangle et le d\u00e9placer.  <\/li>\n<\/ul>\n<p>Vous pouvez voir les r\u00e9sultats des \u00e9v\u00e9nements que vous avez cr\u00e9\u00e9s en simulant votre prototype. Regardez et cliquez sur le bouton \u00ab\u00a0Jouer\u00a0\u00bb pour lancer un navigateur de simulation dans lequel vous pouvez interagir avec votre prototype. Fermez ou r\u00e9duisez le navigateur pour revenir \u00e0 l&rsquo;\u00e9diteur.  <\/p>\n<h2><a id=\"create-an-event\"><\/a>Cr\u00e9er un \u00e9v\u00e9nement<\/h2>\n<p>Bien que vous puissiez facilement cr\u00e9er des <strong>liens<\/strong> par glisser-d\u00e9poser (lien vers la section D\u00e9marrage), vous cr\u00e9erez la plupart des \u00e9v\u00e9nements dans la palette \u00c9v\u00e9nements. Si vous ne voyez pas la palette \u00c9v\u00e9nements, assurez-vous qu&rsquo;elle est visible dans le menu Fen\u00eatre. <br><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43603\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/View-Events-palette.png\" alt=\"Vous pouvez cocher la palette d'\u00e9v\u00e9nements \u00e0 afficher dans le menu Fen\u00eatre\" width=\"1091\" height=\"461\"><br>Pour cr\u00e9er un \u00e9v\u00e9nement :<\/p>\n<div class=\"embed-container\" style=\"padding-bottom: 58%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/742193649\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<ol>\n<li>S\u00e9lectionnez un \u00e9l\u00e9ment sur le canevas.<\/li>\n<li>Cliquez sur le bouton \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb ou \u00ab\u00a0+\u00a0\u00bb dans la palette \u00c9v\u00e9nements. Vous pouvez \u00e9galement cliquer avec le bouton droit de la souris sur un \u00e9l\u00e9ment et s\u00e9lectionner \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb. <\/li>\n<li>La bo\u00eete de dialogue \u00c9v\u00e9nements appara\u00eet. Cliquez sur le menu d\u00e9roulant \u00ab\u00a0Choose Trigger\u00a0\u00bb et s\u00e9lectionnez le d\u00e9clencheur que vous souhaitez utiliser. Par exemple, si vous souhaitez que l&rsquo;\u00e9v\u00e9nement d\u00e9marre lorsque vous cliquez sur un \u00e9l\u00e9ment, choisissez <strong>Sur le clic<\/strong>.  <br><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43604\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Choose-trigger.png\" alt=\"Choisissez un d\u00e9clencheur pour l'action dans la liste d\u00e9roulante\" width=\"1087\" height=\"683\">\n<p>&nbsp;<\/p>\n<div><strong>Remarque :<\/strong> sur les prototypes pour mobiles et tablettes, <strong>On Click<\/strong> sera <strong>On Tap.<\/strong><\/div>\n<p><a href=\"https:\/\/www.justinmind.com\/fr\/aide\/interactions-et-animations#event-triggers-for-mobile-prototypes\">Consultez la description de chaque d\u00e9clencheur<\/a>.<\/p>\n<\/li>\n<li>Le menu d\u00e9roulant \u00ab\u00a0Action\u00a0\u00bb appara\u00eet ensuite. Cliquez dessus et choisissez l&rsquo;action qui en d\u00e9coule. Par exemple, vous pouvez choisir <strong>Modifier le style<\/strong>.  <br><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Choose-action.png\" alt=\"Choisissez une action r\u00e9sultante dans la liste d\u00e9roulante des actions\" width=\"1190\" height=\"754\"><br><a href=\"https:\/\/www.justinmind.com\/fr\/aide\/interactions-et-animations#actions-for-web-and-mobile-prototypes\">Consultez la description de chaque action.<\/a><\/li>\n<li>En fonction de l&rsquo;action choisie, vous verrez ensuite diff\u00e9rentes choses. Pour <strong>Modifier le style<\/strong>, vous verrez un aper\u00e7u du canevas de l&rsquo;\u00e9cran. Ici, vous pouvez choisir l&rsquo;\u00e9l\u00e9ment de l&rsquo;\u00e9cran qui changera d&rsquo;apparence apr\u00e8s votre clic.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43606\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Choose-target-of-action.png\" alt=\"Choisissez la cible de l'action dans l'aper\u00e7u du canevas\" width=\"1340\" height=\"842\"><\/li>\n<li>Pour une action <strong>Modifier le style<\/strong>, vous pouvez sp\u00e9cifier certaines propri\u00e9t\u00e9s de l&rsquo;\u00e9l\u00e9ment, comme les couleurs d&rsquo;arri\u00e8re-plan ou de bordure, \u00e0 modifier dans la liste d\u00e9roulante ci-dessous. Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43607\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Change-styles.png\" alt=\"S\u00e9lectionnez les styles \u00e0 modifier dans les menus d\u00e9roulants.\" width=\"1116\" height=\"873\"><\/li>\n<\/ol>\n<p>L&rsquo;\u00e9v\u00e9nement que vous venez de cr\u00e9er appara\u00eet dans la palette \u00c9v\u00e9nements. Vous verrez \u00e9galement une ic\u00f4ne en forme de \u00ab\u00a0boulon\u00a0\u00bb \u00e0 c\u00f4t\u00e9 de l&rsquo;\u00e9l\u00e9ment auquel vous avez ajout\u00e9 un \u00e9v\u00e9nement sur le canevas. <br><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43608\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Event-bolt-icon.png\" alt=\"L'ic\u00f4ne d'un boulon appara\u00eet lorsque vous avez ajout\u00e9 un \u00e9v\u00e9nement.\" width=\"1280\" height=\"755\"><br>Cliquez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre prototype et v\u00e9rifier l&rsquo;interaction que vous avez cr\u00e9\u00e9e.<br><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/preview-first-event.png\" playsinline=\"&gt;&lt;source src=\" https:=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" preview-first-event.mp4=\"\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/preview-first-event.png\" alt=\"Simuler\">Simuler<\/video><\/p>\n<h2><a id=\"details-events-palette\"><\/a>D\u00e9tails de la palette d&rsquo;\u00e9v\u00e9nements<\/h2>\n<p>Outre l&rsquo;affichage des \u00e9v\u00e9nements que vous cr\u00e9ez, vous pouvez \u00e9galement effectuer un certain nombre d&rsquo;actions dans la palette \u00c9v\u00e9nements :<br><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43610\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/events-palette.png\" alt=\"Voir les diff\u00e9rents d\u00e9tails de la palette d'\u00e9v\u00e9nements\" width=\"976\" height=\"494\"><\/p>\n<ol class=\"image-bullet\">\n<li>Cr\u00e9ez une nouvelle interaction.<\/li>\n<li>Le nom de l&rsquo;interaction. Double-cliquez pour le renommer. <\/li>\n<li>Conditions d&rsquo;interaction. D\u00e9finissez quand les actions ci-dessous doivent ou ne doivent pas se produire. En savoir plus sur les conditions (lien vers le tutoriel sur les conditions).  <\/li>\n<li>Visualisez une action. Double-cliquez pour ouvrir la bo\u00eete de dialogue Ev\u00e9nements et la modifier. S\u00e9lectionnez une action et appuyez sur la touche de suppression pour la supprimer. Maintenez la touche Commande (sur Mac) ou Contr\u00f4le (sur Windows) enfonc\u00e9e pour s\u00e9lectionner plusieurs actions.   <\/li>\n<li>L&rsquo;ordre des actions. Par d\u00e9faut, les actions s&rsquo;ex\u00e9cutent l&rsquo;une apr\u00e8s l&rsquo;autre dans l&rsquo;ordre dans lequel vous les avez cr\u00e9\u00e9es. Vous pouvez \u00e9galement les modifier pour qu&rsquo;elles s&rsquo;ex\u00e9cutent en m\u00eame temps ou apr\u00e8s une dur\u00e9e que vous aurez sp\u00e9cifi\u00e9e. Glissez-d\u00e9posez une action pour la placer devant ou derri\u00e8re d&rsquo;autres actions.   <\/li>\n<li>Ajoutez une autre action avec le m\u00eame d\u00e9clencheur.<\/li>\n<\/ol>\n<h2>Comment faire : apprenez \u00e0 concevoir des cas d&rsquo;utilisation courants, \u00e9tape par \u00e9tape.<\/h2>\n<p>Consultez les exemples ci-dessous et apprenez \u00e0 construire des interactions UX\/UI courantes avec des \u00e9v\u00e9nements dans Justinmind.<\/p>\n<p>Vous utiliserez la bo\u00eete de dialogue \u00c9v\u00e9nements pour d\u00e9finir les d\u00e9clencheurs, qui correspondent \u00e0 la mani\u00e8re dont vous interagissez avec un prototype (clic, survol de la souris, etc.) et les actions, qui correspondent \u00e0 ce qui se passe apr\u00e8s le d\u00e9clencheur (changement de couleur, d\u00e9placement, etc.).<\/p>\n<p>Vous pouvez visualiser toutes les interactions que vous cr\u00e9ez en simulant vos prototypes.<br><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43131\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/07\/Simulate-Prototype.png\" alt=\"Cliquez sur le bouton de lecture pour simuler un prototype\" width=\"1193\" height=\"532\"><\/p>\n<h2><a id=\"swipe-screens\"><\/a>Parcourir les \u00e9crans<\/h2>\n<p>Utilisez des d\u00e9clencheurs gestuels et des effets de transition pour cr\u00e9er une navigation fluide et r\u00e9aliste.<br><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/swipe-example-1.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" swipe-example-1.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/swipe-example-1.png\" alt=\"Parcourir les \u00e9crans\">Naviguer dans les \u00e9crans<\/video><\/p>\n<ol>\n<li>Cr\u00e9ez un prototype de t\u00e9l\u00e9phone portable ou de tablette avec deux \u00e9crans.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43682\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Swipe-2-screens.png\" alt=\"Cr\u00e9ez un prototype avec 2 \u00e9crans\" width=\"1310\" height=\"762\"><\/li>\n<li>Allez \u00e0 l&rsquo;\u00e9cran 1 et double-cliquez sur le canevas, ou s\u00e9lectionnez l&rsquo;\u00e9cran dans la palette des calques. Cette op\u00e9ration permet de s\u00e9lectionner le canevas de l&rsquo;\u00e9cran de base. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43683\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Select-screen.png\" alt=\"S\u00e9lectionnez l'\u00e9cran de base en cliquant dessus dans la palette des calques.\" width=\"1309\" height=\"762\"><\/li>\n<li>Consultez la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb, ce qui ouvrira la bo\u00eete de dialogue \u00c9v\u00e9nements. C&rsquo;est ici que vous cr\u00e9erez le lien entre les \u00e9crans. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43684\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Swipe-add-event.png\" alt=\"Cliquez sur ajouter un \u00e9v\u00e9nement dans la palette des \u00e9v\u00e9nements\" width=\"796\" height=\"522\"><\/li>\n<li>Dans le menu d\u00e9roulant \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section <strong>Gestures<\/strong> et choisissez le d\u00e9clencheur <strong>On Swipe Left.<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43685\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Swipe-trigger.png\" alt=\"Choisissez le d\u00e9clencheur \"on swipe left\" dans le menu d\u00e9roulant des d\u00e9clencheurs.\" width=\"1087\" height=\"683\"><\/li>\n<li>Le menu d\u00e9roulant \u00ab\u00a0Choisir une action\u00a0\u00bb appara\u00eet ensuite. Cliquez dessus et choisissez l&rsquo;action <strong>Naviguer vers.<\/strong>  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43686\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Swipe-Nav-action.png\" alt=\"Choisissez une action de navigation dans le menu d\u00e9roulant des actions.\" width=\"1088\" height=\"688\"><\/li>\n<li>Choisissez l&rsquo;\u00e9cran 2 dans la liste des \u00e9crans ci-dessous. S\u00e9lectionnez ensuite l&rsquo;effet de transition \u00ab\u00a0Diapositive gauche\u00a0\u00bb.  Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43687\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Slide-left-transition.png\" alt=\"S\u00e9lectionnez l'\u00e9cran 2 et ajoutez une condition de balayage vers la gauche dans le menu d\u00e9roulant.\" width=\"1086\" height=\"822\"><\/li>\n<li>Allez \u00e0 l&rsquo;\u00e9cran 2 et s\u00e9lectionnez l&rsquo;\u00e9cran de base. Allez dans la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.<\/li>\n<li>Choisissez un d\u00e9clencheur <strong>On Swipe Right<\/strong> et une action <strong>Navigate To<\/strong>, et choisissez l&rsquo;\u00e9cran 1 comme lien. Ajoutez un effet de transition \u00ab\u00a0Glisser vers la droite\u00a0\u00bb et cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43688\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Swipe-right-event.png\" alt=\"Choisissez une action sur l'\u00e9cran 2 et renvoyez \u00e0 l'\u00e9cran 1 avec un effet de glissement vers la droite.\" width=\"1087\" height=\"684\"><\/li>\n<\/ol>\n<p>Vous devriez maintenant avoir deux \u00e9v\u00e9nements au total &#8211; un sur l&rsquo;\u00e9cran 1 qui vous relie \u00e0 l&rsquo;\u00e9cran 2, et un sur l&rsquo;\u00e9cran 2 qui vous relie \u00e0 l&rsquo;\u00e9cran 1.<\/p>\n<p>Cliquez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre prototype et v\u00e9rifier comment vous pouvez passer d&rsquo;un \u00e9cran \u00e0 l&rsquo;autre.<\/p>\n<h2><a id=\"hide-content\"><\/a>Cacher le contenu<\/h2>\n<p>Ensuite, vous apprendrez \u00e0 cr\u00e9er des \u00e9v\u00e9nements pour masquer des \u00e9l\u00e9ments \u00e0 l&rsquo;\u00e9cran.<br><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/hide-event-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" hide-event-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/hide-event-example.png\" alt=\"Masquer un exemple de contenu\">Exemple de<\/video> masquage de<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/hide-event-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" hide-event-example.mp4=\"\" type=\"video\/mp4\" https:=\"\">contenu<\/video><\/p>\n<ol>\n<li>Placez un bouton <kbd>B<\/kbd> et une image <kbd>I<\/kbd> sur le canevas et donnez-leur le style que vous souhaitez. Vous les trouverez dans la barre d&rsquo;outils. Intitulez le bouton \u00ab\u00a0Cacher l&rsquo;image\u00a0\u00bb. <\/li>\n<li>S\u00e9lectionnez le bouton \u00ab\u00a0Masquer l&rsquo;image\u00a0\u00bb, acc\u00e9dez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43690\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Hide-add-event.png\" alt=\"Cliquez sur ajouter un \u00e9v\u00e9nement avec le bouton cacher l'image s\u00e9lectionn\u00e9\" width=\"879\" height=\"506\"><\/li>\n<li>Suivez les \u00e9tapes ci-dessous pour cr\u00e9er l&rsquo;\u00e9v\u00e9nement :<br><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/hide-event.png\" playsinline=\"&gt;&lt;source src=\" https:=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" hide-event.mp4=\"\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/hide-event.png\" alt=\"Cacher l'\u00e9v\u00e9nement\">Cacher l&rsquo;\u00e9v\u00e9nement<\/video>\n<p>&nbsp;<\/p>\n<ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong> Dans le menu d\u00e9roulant D\u00e9clencheur, survolez la section <strong>Tap<\/strong> et choisissez un d\u00e9clencheur <strong>On Tap.<\/strong>  <div><strong>Remarque :<\/strong> si vous utilisez un prototype Web, la mention \u00ab\u00a0On Tap\u00a0\u00bb sera remplac\u00e9e par \u00a0\u00bb <strong>On Click\u00a0\u00bb<\/strong>.<\/div>\n<\/li>\n<li><strong>b.<\/strong> Dans le menu d\u00e9roulant Action, s\u00e9lectionnez l&rsquo;action <strong>Masquer l&rsquo;\u00e9l\u00e9ment<\/strong>. Vous verrez alors appara\u00eetre un aper\u00e7u du canevas. <\/li>\n<li><strong>c.<\/strong>  C&rsquo;est ici que vous pouvez s\u00e9lectionner la cible de l&rsquo;action, c&rsquo;est-\u00e0-dire l&rsquo;\u00e9l\u00e9ment que vous souhaitez masquer lorsque vous cliquez sur le bouton \u00ab\u00a0Masquer l&rsquo;image\u00a0\u00bb. S\u00e9lectionnez l&rsquo;image que vous avez cr\u00e9\u00e9e pr\u00e9c\u00e9demment.  Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Cliquez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre prototype. Appuyez sur le bouton \u00ab\u00a0Cacher l&rsquo;image\u00a0\u00bb et voyez comment l&rsquo;image dispara\u00eet. <\/p>\n<h2><a id=\"mouse-over-effects\"><\/a>Effets de survol de la souris<\/h2>\n<p>Vous apprendrez ici \u00e0 cr\u00e9er un \u00e9v\u00e9nement <strong>On Mouse Over<\/strong> et \u00e0 modifier l&rsquo;apparence d&rsquo;un bouton.<br><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/mouse-over-button-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" mouse-over-button-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/mouse-over-button-example.png\" alt=\"Exemple de passage de la souris sur un bouton\">Exemple de bouton<\/video> Mouse<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/mouse-over-button-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" mouse-over-button-example.mp4=\"\" type=\"video\/mp4\" https:=\"\">Over<\/video><\/p>\n<ol>\n<li>Cr\u00e9ez un nouveau prototype Web. Les prototypes Mobile et Tablette ne fonctionneront pas pour cet exemple car vous ne pouvez pas passer la souris sur un \u00e9cran tactile. <\/li>\n<li>Placez un bouton <kbd>B<\/kbd> sur le canevas et donnez-lui le style que vous souhaitez.<\/li>\n<li>Une fois le bouton s\u00e9lectionn\u00e9 sur le canevas, acc\u00e9dez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.<\/li>\n<li>Suivez les \u00e9tapes suivantes pour cr\u00e9er l&rsquo;\u00e9v\u00e9nement :  <ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong> Dans le menu d\u00e9roulant D\u00e9clencheur, survolez la section <strong>Souris<\/strong> et choisissez le d\u00e9clencheur <strong>Au passage de la souris.<\/strong> <\/li>\n<li><strong>b.<\/strong> Dans le menu d\u00e9roulant Action, s\u00e9lectionnez l&rsquo;action <strong>Modifier le style<\/strong>.<\/li>\n<li><strong>c.<\/strong>  S\u00e9lectionnez le bouton comme cible de l&rsquo;action dans l&rsquo;aper\u00e7u du canevas. Vous verrez appara\u00eetre une liste d\u00e9roulante dans laquelle vous pourrez sp\u00e9cifier les styles de l&rsquo;\u00e9l\u00e9ment que vous souhaitez modifier. <\/li>\n<\/ul>\n<div class=\"embed-container\" style=\"padding-bottom: 61%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/742201294\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>Dans cet exemple, modifiez la couleur d&rsquo;arri\u00e8re-plan.<\/p>\n<\/li>\n<\/ol>\n<p>Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement.<\/p>\n<p>Cliquez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre prototype. Passez la souris sur le bouton et voyez comment il change de couleur. \u00c9loignez votre souris et vous verrez le bouton reprendre sa couleur d&rsquo;origine.  <\/p>\n<h2><a id=\"drag-and-drop\"><\/a>Glisser-d\u00e9poser<\/h2>\n<p>Vous pouvez \u00e9galement cr\u00e9er des interactions pour faire glisser et d\u00e9poser des \u00e9l\u00e9ments sur le canevas. Voici comment proc\u00e9der : <br><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/drag-rectangle-example-1.png\" playsinline=\"&gt;&lt;source src=\" https:=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" drag-rectangle-example-1.mp4=\"\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/drag-rectangle-example-1.png\" alt=\"Glisser-d\u00e9poser\">Glisser-d\u00e9poser<\/video><\/p>\n<ol>\n<li>Placez un Rectangle <kbd>R<\/kbd> sur le canevas et donnez-lui le style que vous souhaitez.<\/li>\n<li>Le rectangle \u00e9tant toujours s\u00e9lectionn\u00e9, acc\u00e9dez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.<\/li>\n<li>Suivez les \u00e9tapes suivantes pour cr\u00e9er l&rsquo;\u00e9v\u00e9nement :  <div class=\"embed-container\" style=\"padding-bottom: 61%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/742269298\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong> Dans le menu d\u00e9roulant D\u00e9clencheur, survolez la section <strong>Souris<\/strong><strong>(On Tap<\/strong> pour Mobile\/Tablette) et choisissez le d\u00e9clencheur <strong>On Drag.<\/strong> <\/li>\n<li><strong>b.<\/strong> Dans le menu d\u00e9roulant de l&rsquo;action, s\u00e9lectionnez l&rsquo;action <strong>D\u00e9placer l&rsquo;\u00e9l\u00e9ment<\/strong>.<\/li>\n<li><strong>c.<\/strong>  Vous verrez appara\u00eetre un aper\u00e7u du canevas, dans lequel vous pourrez choisir le rectangle comme cible de l&rsquo;action.<\/li>\n<li><strong>d.<\/strong>  En bas de la bo\u00eete de dialogue, vous trouverez deux menus d\u00e9roulants qui vous permettront de d\u00e9finir l&rsquo;endroit o\u00f9 vous souhaitez d\u00e9placer le rectangle lorsque vous le faites glisser.Cliquez sur le menu d\u00e9roulant X (mouvement horizontal) et s\u00e9lectionnez l&rsquo;option \u00ab\u00a0Avec le curseur\u00a0\u00bb.Cliquez sur le menu d\u00e9roulant Y (mouvement vertical) et s\u00e9lectionnez \u00e9galement l&rsquo;option \u00ab\u00a0Avec le curseur\u00a0\u00bb.Ces deux options vous permettront de d\u00e9placer le rectangle \u00e0 l&rsquo;aide de votre souris lorsque vous simulez. Appuyez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la construction de l&rsquo;\u00e9v\u00e9nement. <\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Cliquez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre prototype. Commencez \u00e0 faire glisser le rectangle pour le d\u00e9placer sur l&rsquo;\u00e9cran. L\u00e2chez le rectangle pour arr\u00eater son mouvement.  <\/p>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Transformez vos wireframes en prototypes interactifs hi-fi en ajoutant des \u00e9v\u00e9nements. Dans cet article, vous apprendrez \u00e0 cr\u00e9er et \u00e0 utiliser des interactions avec la palette&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8416,8420],"tags":[],"class_list":["post-124624","post","type-post","status-publish","format-standard","hentry","category-formation","category-interactions-web-et-mobiles"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124624"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124624"}],"version-history":[{"count":3,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124624\/revisions"}],"predecessor-version":[{"id":126284,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124624\/revisions\/126284"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}