Marqueurs
Ajoutez des actions ciblées et spécifiques au contexte pour vos utilisateurs grâce aux marqueurs.
Les marqueurs dans PandaSuite sont une puissante façon de déclencher des actions ou d’indiquer des positions spécifiques dans vos projets. Ils peuvent être statiques ou dynamiques, offrant une flexibilité incroyable pour vos créations interactives.
Qu’est-ce qu’un marqueur ?
Un marqueur est un point de repère que vous placez dans un composant pour déclencher des actions lorsque l’utilisateur atteint ce point. Par exemple, en faisant défiler une page ou en atteignant un moment précis dans une vidéo.
Si un marqueur est créé dans une vidéo, il est possible, lorsque la vidéo atteint ce marqueur, de déclencher une animation ou l’affichage d’un contenu textuel.
Créer un marqueur
Pour créer un marqueur, suivez ces étapes:
-
Sélectionnez un composant dans la liste des objets
-
Cliquez sur la flèche pour entrer en mode édition
-
Positionnez votre composant à l’emplacement souhaité à l’aide de votre souris ou du lecteur
-
À gauche, cliquez sur le bouton +.
Le marqueur nouvellement créé sera affiché dans la liste, offrant des options pour le modifier ou le supprimer.
Les marqueurs n’affectent pas le comportement “normal” de vos composants. Si aucune action spécifique n’a été attribuée aux marqueurs, les utilisateurs peuvent toujours interagir avec les fonctionnalités classiques du composant, comme zoomer sur une image interactive ou faire défiler un texte.
Définir un marqueur par défaut
Lorsque vous avez créé des marqueurs, il est possible d’en sélectionner un qui sera toujours activé par défaut lorsque le composant est chargé.
Pour définir un marqueur par défaut, choisissez le dans les propriétés du composant ou utilisez l’icône d’épingle dans la liste des marqueurs du composant.
Déclencher une action à partir d’un marqueur
Lorsqu’un marqueur est créé sur un composant, celui-ci peut servir de déclencheur, en complément des déclencheurs standard.
Pour choisir un marqueur comme déclencheur :
- Sélectionnez le composant et rendez-vous dans le panneau Actions
- Ajoutez une nouvelle action : vous trouverez votre marqueur affiché en haut de la liste
- Sélectionnez le marqueur et associez une action définissant ce qui doit se produire lorsque le marqueur est déclenché.
Ajouter une action liée à un marqueur
Le marqueur peut également devenir une action possible sur votre composant.
Par exemple, un marqueur sur une zone de défilement ajoute une action Changer la position, et un marqueur sur une Flexbox ajoute une action Défiler jusqu’au marqueur qui aligne l’élément cible sur la position définie.
Pour ajouter une action liée à un marqueur :
- Choisissez un déclencheur
- Choisissez l’action Interagir avec un composant.
- Sélectionnez le composant
- Vous verrez de nouvelles options apparaître !
Créer des marqueurs dynamiques
Il est également possible de créer des marqueurs dynamiquement depuis une source de données.
Cette vidéo vous explique comment créer des marqueurs dynamiques sur une carte interactive :
Utiliser des marqueurs dynamiques sur des composants numériques
Utilisez cette approche lorsque la position de vos marqueurs vient de données structurées et que vous souhaitez la mettre à jour facilement.
- Minuteur, Audio et Lecteur vidéo utilisent une valeur Temps numérique exprimée en secondes.
- Séquence d’images utilise une valeur Frame numérique.
Pour le mettre en place :
- Dans l’éditeur du composant, créez un marqueur avec le bouton +.
- Sélectionnez le marqueur, choisissez Activer source, puis renseignez le champ Source avec votre collection ou votre autre source de données.
- Ajoutez un data binding sur Temps (Minuteur, Audio, Lecteur vidéo) ou Frame (Séquence d’images) et mappez-le au champ numérique correspondant dans votre source.
- Configurez le marqueur avec les mêmes déclencheurs ou actions qu’un marqueur statique. Les marqueurs générés suivent ensuite les valeurs provenant de vos données.
Si deux lignes résolvent le même temps ou la même frame, PandaSuite les traite comme un seul marqueur logique.