Zones cliquables
Bloc d'interaction Les blocs d'Interaction proposent un choix à l'apprenant. Ces blocs peuvent posséder plusieurs sorties, et permettent au rédacteur de concevoir un scénario différent selon les choix de l'apprenant. Ces blocs ne sont disponibles qu'au niveau du Graphe de Scène.
Tutoriel vidéo
Faites vos premiers pas avec ce bloc grâce au tutoriel vidéo dédié !
Retrouvez tous les tutoriels vidéo de Virtual Training Suite dans votre Espace Client VTS.
youtube.com/watch?v=aRyAHRa8nH0
Fonctionnement

Une zone correspond à un emplacement sur l’écran, elle est définie par une position, une rotation et une taille. Celle-ci sera affichée par-dessus les éléments du décor tels que les éléments de premier plan (tables, bureaux, etc.) ou bien les personnages et en dessous de l’interface de VTS Player (menus, inventaire, historique de conversation, affichage de bloc Message, Choix de phrase, etc.).
Ce bloc permet de gérer l’affichage de zones à l’écran, avec lesquelles l’apprenant pourra interagir afin de déclencher une action particulière. Ce bloc permet également de créer des éléments visuels non interactifs.
Paramètres

En mode Normal, les zones sont affichées instantanément à l’écran et l’apprenant pourra cliquer sur ces zones afin de faire un choix. Le scénario attend une action de l’apprenant, et aucune sortie ne sera déclenchée tant qu’une zone n’est pas cliquée. La sortie liée à cette même zone sera alors déclenchée et les zones disparaitront instantanément. Ce mode est assez similaire à un Quiz, à la différence que les choix sont sous la forme de zones que vous pouvez placer vous même sur l'écran.
Il est conseillé de prévenir l’apprenant au préalable qu’il doit faire un choix avant de passer par ce bloc, car aucune interface ne l'y invite par défaut.
Les paramètres de ce bloc sont rangés ainsi : à droite de la prévisualisation dans laquelle s'affiche vos zones comme elles s'afficheront dans VTS Player, se trouve la vue Propriétés de la zone sélectionnée, et en dessous, la liste des zones définies dans ce bloc.
Liste des zones

Pour ajouter une zone, il faut cliquer sur le bouton [+ Ajouter]. La nouvelle zone s’affiche alors dans la prévisualisation à gauche, et apparaît dans la liste des zones :
- Nom : chaque zone peut être renommée pour associer plus aisément la bonne sortie dans le graphe de scène de VTS Editor. Si vous changez le nom d'une zone dans un bloc, le nom sera modifié pour tous les blocs Zones Cliquables de la scène.
- Visible : activez pour rendre cette zone visible. Si désactivé, la zone sera masquée si elle existait déjà.
- Cliquable : la zone peut être cliquée afin de déclencher une sortie de ce bloc. Sinon, l'apprenant ne peut pas interagir avec la zone, et celle-ci n'est liée à aucune sortie.
L'ordre des zones est important car les zones les plus hautes dans la liste s'afficheront par dessus. Vous pouvez réordonner les zones avec un glisser-déposer.
Une zone sélectionnée en cours d’édition sera toujours affichée par-dessus les autres. Désélectionner une zone la replacera à sa bonne profondeur.
Prévisualisation
Vous pouvez déplacer les zones directement dans la prévisualisation en réalisant simplement un glisser-déposer. Cliquez sur une zone sur la liste ou dans la prévisualisation afin de la sélectionner. Une fois sélectionnée, celle-ci s'affiche en vert.

Quatre poignées aux coins de la zone permettent de modifier la taille de celle-ci. Vous pouvez glisser-déposer ces poignées pour modifier la taille de votre zone.
Lorsque vous déplacez ou redimensionnez une zone, VTS Editor proposera de les aligner avec les autres éléments (bords et centres de l'écran, bords et centres des autres zones). Ce système est appelé "magnétisme" et peut être désactivé/activé en maintenant la touche "Alt".

Pour désélectionner une zone, cliquez en dehors d'une zone dans la prévisualisation ou sur le bas de la liste des zones.
Deux lignes pointillés verticales sont placés sur la vue et indique la taille de l'écran lorsque celui-ci est affiché en 4:3, comme sur iPad par exemple. Si vous comptez déployer votre expérience sur ce format, vous avez deux possibilités :
- Prendre en compte ces lignes et ne rien afficher d'important à l'éxtérieur de ce cadre.
- Forcer l'affichage du jeu en 16:9 avec l'option du même nom dans les options avancées du projet et ignorer ces lignes. Cette option ajoute des bandes noires en haut et en bas de l'écran pour forcer le format en 16:9 et ne pas tronquer les bords de votre expérience.
Barre d'outils
Sur la gauche de la prévisualisation se trouve une barre d'outils dans lesquels se trouvent les outils suivants :
| Vue plein écran | Tout en haut, se trouve un bouton qui permet de passer en vue plein écran. Dans cette vue, le raccourci clavier F permet de recentrer la vue, et le raccourci Echap permet de quitter le mode plein écran. | |
| Ajout d'une zone | Crée un nouvelle zone, comme si vous l'aviez créé depuis la liste de zones. | |
| Dupliquer | Duplique toutes les zones sélectionnées en de nouvelles zones. | |
![]() |
Activer/Désactiver le magnétisme | Active ou non le magnétisme envers les autres éléments lors du déplacement ou du redimensionnement d'une zone. |
![]() |
Alignement à gauche |
Décale une zone sur le bord gauche de l'écran. |
![]() |
Alignement au centre |
Décale une zone sur le centre horizontal de l'écran. |
![]() |
Alignement à droite |
Décale une zone sur le bord droit de l'écran. |
![]() |
Alignement en haut |
Décale une zone sur le bord haut de l'écran. |
![]() |
Alignement au milieu | Décale une zone sur le milieu vertical de l'écran. Si plusieurs zones sont sélectionnées, décale les zones au milieu vertical des zones sélectionnées. |
![]() |
Alignement en bas |
Décale une zone sur le bord bas de l'écran. |
|
|
Inversion du média |
Tout en bas, se trouvent deux boutons qui permettent d'inverser horizontalement ou verticalement les médias des zones sélectionnées. Cette option n'est pas compatible avec les vidéos. |
Type de sortie
A droite du bouton des options du bloc, se trouve le type de sortie du bloc. Selon le type de sortie choisit, le bloc aura un comportement différent :
| Attente de l'utilisateur | Attendre que l'apprenant ait cliqué sur une zone. La première sortie n’est alors pas disponible (hors cas particuliers) | |
| Instantanée | Ajoute une sortie (en haut du bloc) qui est instantanément déclenchée une fois les zones définies. | |
| Attente de l'animation | Similaire à la sortie "Instantanée", mais permet de déclencher la première sortie uniquement après la fin de l’animation. (voir la partie Temps d'animation plus bas) |
Les sorties Instantanée et Attente de l'animation permettent alors au graphe de continuer, et donc à d'autres blocs de s'exécuter alors que les zones sont toujours visibles à l'écran. Ceci implique plusieurs choses importantes à bien prendre en compte lorsque vous utilisez les zones cliquables, qui seront détaillées avec les différentes options de ce bloc.
Lorsqu’une zone est cliquée, le scénario est interrompu. Le bloc se comporte un peu comme le bloc Téléport ou le bloc Compte à rebours. Quand une zone est cliquée par un apprenant, le scenario s'interrompt et reprend depuis ce bloc Zones Cliquables, en empruntant la sortie associée à la zone cliquée.
Temps d'animation
Ce champ permet de paramétrer la durée durant laquelle la transition s’effectuera. Si la zone n’est pas encore affichée, alors l’animation sera une simple apparition en fondu (disparition en fondu pour une zone que l'on masque). Si celle-ci est déjà définie, alors l’animation va modifier progressivement la taille, la position, la rotation, ainsi que toutes les couleurs définies.
Le média affiché, le contenu du texte, sa position et sa taille de police ne sont pas animés et seront remplacés instantanément au début de l'animation.
Sur la gauche, il est possible de modifier le mode d'exécution de l'animation.
| Linéaire | Anime avec une vitesse constante (transition brute au début et à la fin) | |
| Arrondie | Ajoute un effet d'accélération et de décélération (transition fine au début et à la fin) |
Propriétés des zones
Lorsqu'une zone est sélectionnée, vous avez accès en haut à droite à plusieurs groupes de propriétés spécifiques à cette zone.

Propriétés - Position
- X : position horizontale de la zone. La valeur 0 correspond au centre de l'écran.
- Y : position verticale de la zone. La valeur 0 correspond au centre de l'écran.
- L : largeur de la zone. La valeur 1920 correspond à la largeur totale de l'écran.
- H : hauteur de la zone. La valeur 1080 correspond à la hauteur totale de l'écran.
- Rotation : rotation de la zone en degrés.
Variables : il est possible d'assigner des variables dans les champs de position, taille et rotation. Ainsi, ces valeurs seront calculées à partir de l'expression renseignée lorsque ce bloc sera atteint.
Ancrage

Dans certains cas particuliers, le format du module ne sera pas nécessairement en 16:9. C'est le cas par exemple sur iPad. Il peut alors être utile de spécifier la manière dont une zone se comporte par rapport aux bords de l'écran, en s'accrochant à gauche, à droite, au centre, ou en s'étirant.
Propriétés - Texte
Dans cet onglet, vous pouvez définir un texte qui sera affiché dans la zone. D'autres options concernant ce texte sont disponibles : la police du texte (par défaut, la zone prend en compte la police d'écriture définie au niveau du projet), son style (gras, italique, gras et italique, fin), sa couleur, sa taille, son alignement horizontal et vertical, etc.
L'option Taille Auto permet de s'assurer de la visibilité du texte dans la zone. Elle ne fait que réduire sa taille si celui-ci n'est pas totalement affiché.
Propriétés - Média
Dans cet onglet, vous pouvez assigner ou supprimer le média qui sera affiché dans votre zone. Lorsque vous assignez un média à une zone, sa largeur est modifiée pour être en accord avec le média renseigné.
Si un média est renseigné, alors le redimensionnement de la zone va conserver le ratio de ce média. Si vous désirez pouvoir éditer librement la taille de la zone, maintenez la touche MAJ lors du glisser-déposer. Dans ce cas, le média va s’agrandir pour remplir complètement la zone, ce qui peut amener l’image à ne pas être affichée entièrement.
| Teinte | Applique une teinte au média. Choisir la couleur blanc pour que le média s'affiche tel quel. | |
![]() |
Restaurer Ratio | Modifie la largeur de la zone pour que le ratio du média originel soit appliqué. Ce bouton n'est disponique que si un média est assigné. |
![]() |
Restaurer taille originelle | Applique la taille originelle en pixels du média aux champs Largeur et Hauteur. |
Clic sur transparence (disponible uniquement si le média est une image)
on Le joueur peut cliquer sur toute la zone. off Le joueur devra cliquer sur une partie de l’image qui n’est pas transparente pour pouvoir valider son choix.
Lire la vidéo en boucle (disponible uniquement si le média est une vidéo)
on Si le média renseigné est une vidéo, elle est jouée en boucle. off Si le média renseigné est de type vidéo, elle ne se jouera qu'une seule fois.
Disparait à la fin de la vidéo (only if the media is a video)
on Masque la zone une fois que la vidéo est terminée. Celle-ci n'est alors plus cliquable. off La zone n'est pas masquée automatiquement. Cette option est toujours à OFF si l'option Lire la vidéo en boucle est activée.
Propriétés - Style
Cet onglet permet de modifier l’affichage de la zone ainsi que celui lorsque le curseur de la souris passe par-dessus. On parle alors de l’état d’une zone. L’état par défaut d’une zone est défini dans la colonne "Défaut". Lorsque la souris survole cette zone, son état devient "Survol", et lorsque la souris sort de cette zone, l’état redevient "Défaut".
L’état Survol n’est pas visible sur la zone dans la prévisualisation tant qu'elle est sélectionnée.
Si la zone n’est pas cliquable, alors l’état Survol ne sera jamais atteint.
Pour chaque état, il est possible de modifier le média, sa teinte, la teinte du texte et enfin, la couleur du fond de la zone. Le média et la couleur du texte et du média de l’état "Normal" sont les mêmes réglages que ceux présents dans les onglets Texte et Média.
Le champ média permet de modifier le média affiché, notamment au passage à l'état "Survol". Si le média a une forme différente, il sera coupé sur les cotés.
La couleur de la zone correspond à ce qui est affiché en fond si aucun média n’est renseigné ou si le média contient de la transparence. Cela peut être utile pour créer des boutons visibles sur l’interface ou pour indiquer qu’il y a une zone à tel endroit en jouant sur la transparence.
Entre les deux styles, en haut de la barre séparatrice se trouve un bouton permettant de transmettre tous les réglages de l’état "Normal" à l’état "Survol". Ceci a pour but de réinitialiser et d'annuler le changement visuel d’état lorsque le curseur de la souris passe sur la zone.
Lorsque vous modifiez les réglages de l’état "Normal", si ceux du "Survol" sont identiques, les modifications sont automatiquement répercutées sur ce dernier.
Propriétés - Options avancées
Apparition : permet de définir une courte animation d'apparition pour cette zone si elle n'existait pas déjà. Très pratique pour faire des petites animations sans devoir créer de multiples blocs Zones Cliquables.
Remplissage : le champ Remplissage permet de masquer une partie de la zone. Ce champ est constitué de deux parties. Le choix du mode de remplissage, et le taux de remplissage qui doit être entre 0 et 1, 0 signifiant que le média est complètement masqué et 1 qu'il est complètement affiché.
Conditions : deux champs Condition sont ajoutés si vous avez accès aux variables. Ils permettent de définir si la zone soit être visible ou non, et cliquable ou non, selon la valeur de la condition variable renseignée. Si une zone possède au moins une condition dans ces champs, son nom sera écrit en italique, permettant de la repérer facilement dans la liste (et sur le bloc dans le graphe). Il est aussi possible de survoler une zone dans la liste (et sur le bloc) pour lire ses conditions sans aller dans ce panneau de propriétés avancées.
Emplacement de média : si le décor de la scène en cours contient au moins 1 emplacement de média, il est possible de définir l'emplacement dans lequel la zone va s'afficher dans le décor. C'est en particulier utile pour insérer des éléments à cliquer dans un décor 360, qui resteront donc "accrochées" au décor même en tournant la vue, alors que cela n'est pas possible avec de simples zones 2D qui restent fixes par rapport à l'écran.
Ressources : si le scénario contient au moins 1 ressource, il est possible de définir une ressource à afficher au clic sur cette zone sans que cela ne déclenche une sortie dans le graphe (pour ne pas quitter l'endroit en cours). La zone doit être configurée comme cliquable, mais celle-ci n'aura alors plus de sortie associée. Cela permet de donner accès simplement à des ressources via des boutons personnalisés, sans perdre l'avancement dans le scénario.
Point de retour : si le scénario contient au moins 1 bloc Retour, il y a également une option pour enregistrer en tant que point de retour pour le prochain bloc Retour le bloc qui est actuellement arrêté lorsque cette Zone est cliquée. Cela permet notamment de réaliser des séquences temporaires et de facilement revenir au scénario avec un bloc Retour.
Raccourcis clavier
Pour tous ces raccourcis, remplacez la touche CTRL par CMD si vous êtes sur macOS.
- CTRL + Clic sur une zone : ajouter la zone cliquée à la sélection. Une sélection multiple permet en particulier de déplacer plusieurs zones en une seule fois.
- CTRL + C : copier les zones sélectionnées.
- CTRL + V : coller les zones copiées. Si les zones copiées sont encore sélectionnées, elles sont alors dupliquées. Les zones dupliquées sont décalées de 30 unités vers la droite et vers le bas. Pour annuler cet effet, utilisez plutôt CTRL + Maj MAJ + V.
- CTRL + A : sélectionner toutes les zones du bloc.
- CTRL + D : dupliquer les zones sélectionnées. Les zones dupliquées sont décalées de 30 unités vers la droite et vers le bas. Pour annuler cet effet, utilisez plutôt CTRL + MAJ + D.
- Suppr ou Retour Arrière : supprimer les zones sélectionnées.
- ALT : d'activer/désactiver temporairement (tant que la touche ALT est pressée) le mode Alignement lors du déplacement ou du redimensionnement d'une zone.
- MAJ : d'activer/désactiver temporairement (tant que la touche MAJ est pressée) la conservation du ratio de la zone lors de son redimensionnement.
- Double clic sur une zone : ouvrir les propriétés de Texte de la zone.
- CTRL + flèche du haut ou du bas : déplacer les zones sélectionnées d'un cran dans la direction souhaitée dans la liste.
Paramètres avancés

Action sur les zones précédentes
Permet de définir une action à effectuer sur les toutes les zones déjà existantes au début de l'exécution de ce bloc :
- Aucune action : aucun changement sur les zones déjà précédentes.
- Rendre non cliquables : rend les zones précédentes non cliquables, sans les masquer.
- Masquer : masquer les zones précédentes, ce qui les rend aussi non cliquables.
Action sur ces zones après un clic
Permet de définir une action à effectuer sur les toutes les zones de ce bloc lorsque l'une des zones de ce bloc est cliquée :
- Aucune action : aucun changement sur les zones de ce bloc.
- Rendre non cliquables : rend les zones de ce bloc non cliquables, sans les masquer.
- Masquer : masquer les zones de ce bloc, ce qui les rend aussi non cliquables.
Curseur au survol
on Toutes les zones qui sont cliquables modifieront le curseur de la souris de l’apprenant lorsque celui-ci les survole. Ceci pour leur donner une indication que l’objet sur lequel leur souris se trouve est interactif. off Aucune indication visuelle au niveau du curseur de la souris.
Calque
Les calques servent à regrouper les zones cliquables, pour conditionner plus facilement l'ordre d'affichage. Ainsi, toutes les zones modifiées par ce bloc seront ajouté au niveau de calque renseigné, qui s'affichera toujours en dessous des zones présentes dans les calques supérieurs, et au-dessus des calques inférieurs. Cela permet surtout de s'assurer que certaines zones sont toujours affichées au dessus des autres, sans avoir à les renseigner à nouveau dans un bloc pour gérer leur ordre d'affichage.
Délai d'animation entre les zones
Ajoute un délai entre chaque apparition de zone définie dans ce bloc.
Translation
Les valeurs variables renseignées dans les champs translation X et Y appliqueront une translation identique à toutes les zones du bloc. Pratique pour déplacer l'ensemble des zones d'un bloc en fonction d'une variable.
Exemple : si vous renseignez 100 et 200, toutes les zones seront décalées de 100 unités vers la droite et 200 unités vers le haut. Ces valeurs peuvent être le résultat d'une expression variable.
Cas particuliers
Ce bloc fonctionne comme un bloc Relier si aucune zone n’est définie : il ne fait rien et est traversé directement en empruntant sa première sortie.
Le type de sortie "Attente de l'utilisateur" ne fonctionne que si au moins une de ces zones est définie comme cliquable. Si aucune ne l’est, alors la sortie "Instantanée" est utilisée par défaut.
- ${ child.title }









