Créer une image interactive avec hotspots

L'image interactive est un excellent moyen d'afficher de nombreuses informations tout en ayant un aspect très visuel. Elle est souvent utilisée dans les magazines numériques, les présentations interactives et le digital learning. En cliquant sur les points d'intérêts (boutons hotspots), les utilisateurs affichent du contenu supplémentaire : texte, image, vidéos, liens... Avec PandaSuite, vous pouvez créer une image interactive 100% sur-mesure. 


[TRANSCRIPT EN FRANCAIS]
Tout d'abord, ajoutons l'image de fond. Nous utilisons ici une image mais il peut également s'agir d'une vidéo, d'un GIF... Faites en sorte que l'image soit en plein écran en utilisant les options d'étirement et d'alignement. 
Maintenant, ajoutons un bouton. Vous pouvez importer une image existante ou concevoir votre propre bouton dans PandaSuite Studio. Je choisis la deuxième option et conçois mon bouton en utilisant un cercle noir et des rectangles blancs pour créer l'icône PLUS.
Une fois le bouton terminé et aligné, regroupez tous les éléments. Renommez-le et choisissez un nom clair : Bouton 1. 
Concevons le popover. Il sera d'abord statique.
Il existe plusieurs façons d'afficher du contenu supplémentaire : ouvrir une fenêtre pop up plein écran, ajouter des liens ou utiliser un popover. J'ai choisi le popover car le contenu est court et je veux qu'il soit affiché au-dessus de l'image.
Une fois qu'il est prêt, placez-le à l'endroit où vous voulez qu'il s'affiche. Après avoir positionné tous les éléments, ajoutons le contenu en copiant-collant depuis une source externe.
Créons les autres boutons et popovers en faisant des copies de ces objets. Ajoutons le contenu à l'intérieur. Maintenant, nous avons un bon aperçu de ce à quoi cela ressemblera lorsque tous les popovers seront ouverts en même temps. 
Voyons maintenant comment masquer ou afficher les popovers. Pour chaque popover, utilisons le composant Multi-state et créons 2 états : dans le premier état, le popover est caché et dans le second état, il est affiché. Il y a un multi-state par popover afin que chaque popover puisse être ouvert indépendamment. 
Pour ajouter un composant multi-états, vous pouvez soit aller dans la liste des composants, ajouter un composant multi-états, copier-coller le popover à l'intérieur, ré-aligner... Ou bien vous pouvez convertir automatiquement la sélection en composant multi-state en utilisant le menu Layout.
Renommez ce composant et cliquez sur la liste des objets pour aller à l'intérieur et modifier son contenu.
Dans ce premier état, nous allons cacher le popover. Sélectionnez tous les objets et changez l'Opacité à zéro. Il y a toujours des objets ici mais ils sont cachés. Créez un nouvel état lié et dans cet état, changez à nouveau l'opacité pour tout afficher.
Revenez au niveau de l'écran. Sélectionnez le bouton et ajoutez une action > Simple tap / Click > Interagir avec un composant. Sélectionnez le multi-état et choisissez l'état suivant. 
En activant le mode Boucle, le bouton passera d'un état à l'autre et masquera et affichera le popover indéfiniment.
Maintenant, faites la même chose avec les autres messages. 
Dans cet exemple, les boutons peuvent être ouverts en même temps. Si vous voulez fermer automatiquement le popover lors de l'ouverture du nouveau, vous devez ajouter une condition.
Pour attirer l'attention de l'utilisateur, vous pouvez également animer le bouton. Dans ce cas, il vous suffit de convertir le bouton en un composant multi-états. Changez sa taille dans l'état et passez automatiquement d'un état à l'autre pour créer cet effet de rebond.
C'est maintenant à votre tour de créer une image interactive.
Cela a-t-il répondu à votre question ? Merci pour les commentaires Il y a eu un problème pour soumettre vos commentaires. Veuillez réessayer plus tard.