Zones cliquables
Comportement
Une zone correspond à un emplacement sur l’écran, 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. Cependant, elles seront en dessous de l’interface de VTS Player (menus, inventaire, historique de conversation, 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.
Paramètres
Ce bloc a été décliné en trois niveaux de détail selon ses utilisations possibles :
- Normal
- Avancé
- Expert
Ces niveaux ne conditionnent que l’affichage de certaines options. Changer de niveau conservera tous vos réglages.
Vous pouvez changer de niveau de détail à tout moment avec les boutons en haut à droite de cette fenêtre.
Niveau Normal
Ce niveau correspond à un mini-jeu. Le but est d’afficher des zones à l’écran sur lequel l’apprenant pourra cliquer, afin de faire un choix. Le scénario attend une réponse de l’apprenant, et aucune sortie ne sera déclenchée tant qu’une zone n’est pas cliquée. Ce mode est assez similaire à un Quiz, à la différence près que les choix sont sous la forme de zones.
La fenêtre des paramètres de ce bloc est découpée en deux parties. La colonne de gauche qui regroupe toutes les options liées aux zones, et la vue de droite qui montre le décor de votre scène. Cette zone sur la droite est appelée "prévisualisation".
Liste des zones
Pour ajouter une zone, il faut cliquer sur le bouton [+]. La nouvelle zone s’affiche alors dans la liste des zones juste en dessous, et apparaît sur la prévisualisation à droite. Chaque zone peut être renommée, ce nom étant utile pour associer la bonne sortie dans le graphe de scène de VTS Editor.
L'ordre des zones est important, puisqu'elles fonctionnent sur un principe de calque. S’il y a plusieurs éléments, les zones les plus élevées dans la liste s’afficheront par-dessus toutes les suivantes. Vous pouvez réordonner les éléments de la liste par un simple glisser-déposer.
Une zone sélectionnée en cours d’édition sera toujours affichée par-dessus les autres.
Elles peuvent être supprimées via le bouton X.
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 contrôleurs aux coins de la zone permettent de modifier la taille de celle-ci. Vous pouvez glisser-déposer ces contrôleurs pour modifier la taille de votre zone.
Une fenêtre d'information s'affiche au-dessus d'elle dans la prévisualisation. Cette fenêtre donne accès aux options d'affichage de la zone sélectionnée.
![]() |
Editer | Ajoute un média dans la zone. La zone va alors se redimensionner pour épouser la forme du média renseigné. |
![]() |
Supprimer le média | Supprime le média ajouté à cette zone. Ce bouton n'est accessible que si un média a été ajouté. |
Si un média est renseigné, alors la taille de la zone est forcée pour coller à 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.
Le raccourci Ctrl + C copie la zone sélectionnée. Lorsque vous utilisez le raccourci Ctrl + V, les réglages de la zone copiée seront appliqués à la zone sélectionnée.
Pour désélectionner une zone, cliquez en dehors d'une zone dans la prévisualisation ou sur le bas de la liste à gauche.
VTS Player
Dans VTS Player, les zones s’afficheront instantanément à l’écran dans le même ordre que dans la liste des zones de ce bloc. 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.
Niveau Avancé
Le mode avancé permet de sortir de l'aspect de « mini-jeu », notamment en permettant de conserver les zones définies à l’écran et de continuer son scénario, un peu comme le bloc Premier Plan.
Paramètres
Type de sortie
![]() |
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. |
La sortie instantanée permet 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.
Zones précédentes non cliquables
Si coché, les zones toujours visibles seront désactivées à l'arrivée dans ce bloc.
Effacer ces zones au premier clic
Lorsqu’une zone est cliquée, le scénario est interrompu. Le bloc se comporte un peu comme le bloc Téléport. Quand une zone est cliquée par un apprenant, le scenario s'interrompt et reprend depuis ce bloc, en empruntant la sortie associée à la zone choisie.
Si les zones sont toujours visibles après qu'un clic ait été effectué, alors recliquer dessus déclenchera à nouveau la sortie associée. Pour éviter cela, il est donc conseillé de désactiver les zones à chaque sortie, et ce avant tout autre bloc. Cette option permet d'automatiquement masquer et désactiver toutes les zones de ce bloc, dès que l'une d'elle est cliquée. Nous verrons un peu plus bas comment désactiver les zones une à une.
on Efface et désactive toutes les zones définies dans ce bloc quand l'une d'entre elles est cliquée. off Conserve toutes les zones actives à n'importe quelle sortie du bloc.
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.
Liste des zones
![]() |
Certaines zones peuvent être déjà présentes lorsque vous arrivez dans un bloc Zones Cliquables. Il est donc nécessaire de pouvoir garder la main sur des zones précédemment affichées, afin de pouvoir les modifier ou les masquer. Dans ce mode, au lieu d’ajouter une nouvelle zone, le bouton [+] ouvre un panneau qui permet soit de créer une nouvelle zone, soit d'en reprendre une déjà définie dans un autre bloc Zones Cliquables. Vous retrouverez dans la liste des choix possibles les noms des zones que vous avez définies dans les autres blocs. Vous pouvez rechercher une zone par son nom tant que ce panneau est ouvert. Si aucune zone ne répond au filtre, la touche [Entrée] de votre clavier créera une nouvelle zone avec pour nom ce que vous avez saisi dans le filtre. |
Si vous changez le nom d'une zone dans un bloc, le nom sera modifié pour tous les blocs.
Puisque les graphes ne sont pas linéaires, il n'est pas possible d'afficher l'état précédent des zones dans le bloc que vous éditez. Cependant, vous retrouverez son dernier aspect lorsque vous l'ajoutez dans ce bloc.
Afficher / Masquer
![]() |
La zone est visible et sera affichée à l'écran dans VTS Player, comme dans la prévisualisation. |
![]() |
Efface et désactive cette zone. Elle n'est alors plus visible dans la prévisualisation. |
Cliquable / Informative
![]() |
La zone peut être cliquée afin de déclencher une sortie. |
![]() |
L'apprenant ne peut pas interagir avec la zone, et celle-ci n'est liée à aucune sortie. Ce type de zone permet d'afficher un texte ou un média à titre informatif. |
Une zone informative n’appliquera pas le changement de curseur de la souris à son survol
Une zone informative affichée par-dessus une zone cliquable n'empêchera pas le joueur de cliquer sur la zone située en dessous.
Une zone masquée ne peut évidemment pas être cliquable.
Prévisualisation
Quatre nouveaux contrôleurs aux coins de la zone permettent désormais de la faire pivoter. Ils fonctionnent exactement comme ceux qui contrôlent la taille de la zone.
Fenêtre de texte
Il est possible d’afficher un texte par-dessus le média de la zone. Lorsque vous cliquez sur le bouton [T], la fenêtre d’édition de texte s’ouvre.
Il est possible d’y choisir le texte affiché, sa taille, sa couleur et sa position sur la zone. Toute modification sera appliquée directement sur la zone.
Fenêtre de style
Il est possible de conditionner l’affichage de la zone 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". Le bouton [Style] ouvre une fenêtre qui permet d’éditer l’affichage lié à ces états "Défaut" et "Survol". Si la zone n’est pas cliquable, alors l’état "Survol" ne sera jamais atteint. Ce bouton n’est donc pas disponible si cette condition n’est pas respectée.
Pour chaque état, il est possible de modifier la teinte du média et la couleur du texte affiché, s’ils sont définis. La couleur de texte de l’état Normal est la même que celle présente dans la fenêtre d’édition de texte.
L’état "Survol" n’est pas visible sur la zone dans la prévisualisation tant qu'elle est sélectionnée.
VTS Player
Lorsque ce bloc est atteint, il affiche ou masque des zones à l'écran. Si la zone doit être affichée et qu'elle ne l'était pas encore, alors celle-ci s'affichera instantanément. Si elle était déjà présente, sa nouvelle position, rotation, taille et son affichage seront appliqués. Si celle-ci est masquée par le bloc, alors elle disparaîtra de l'écran de l'apprenant.
Niveau Expert
Le niveau expert permet d'animer la création, la modification ou la disparition d’une zone en réalisant des transitions sur ses réglages tels que sa position, sa rotation, sa taille, et les couleurs des différents éléments graphiques.
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 dans le style "Normal".
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.
![]() |
Linéaire | Anime avec une vitesse constante (transition brute au début et à la fin) |
![]() |
Arrondie | Ajoute un effet d'accéleration et de déceleration (transition fine au début et à la fin) |
Paramètres
Type de sortie
![]() |
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. |
Prévisualisation
Quatre nouveaux contrôleurs sur les bords de la zone permettent désormais de l'étirer en hauteur et en largeur. Ils fonctionnent exactement comme ceux qui contrôlent la taille de la zone.
Fenêtre de style
Les états "Normal" et "Survol" peuvent affecter :
- La couleur de fond de la zone - Cette couleur est affichée 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. Cette couleur peut également n’apparaître qu’au survol de la souris si elle est renseignée dans l’état "Survol".
Cliquer sur une zone interrompra votre scénario pour reprendre à partir du point sélectionné par l'apprenant. Il n’est donc pas conseillé de définir des éléments qui seront visibles durant tout le scénario.
- Le média affiché - ceci permet notamment de modifier l’image lorsque le curseur de la souris passe sur la zone. Si le média a une forme différente, il sera affiché complètement dans la zone, laissant des bandes sur les côtés de la couleur de fond définie. Ce bouton pour l’état "Normal" correspond exactement au média défini par le bouton d'édition de la zone sélectionnée.
![]() |
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. |
Fenêtre de paramètres expert
Position absolue
on La position de la zone est relative au centre de l'écran. Si le ratio de l’écran change, comme sur mobile par exemple, alors les éléments sur le bord de l’écran ne seront pas visibles. Ce comportement est activé par défaut. off La position de la zone varie selon le ratio de l’écran pour être systématiquement placé à cet endroit. Ceci peut être utile pour des boutons d’interface ou des informations graphiques placées sur les bords de l’écran.
Clic sur transparence
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.
Mirroir horizontal
on Le media sera inversé horizontalement. off Le média sera affiché normalement.
Valeurs :
Vous pouvez positionner les zones précisément.
Les positions sont relatives à l'écran. Leur valeur doit être entre 0 et 1. Pour l'horizontal, "0" signifie collé à gauche et "1" collé à droite.
La largeur et la hauteur sont relatives à l'écran. Leur valeur doit être entre 0 et 1. Ainsi, "0.5" représente 50% de l'écran.
La rotation est en degrées, donc sa valeur doit être entre 0 et 360.
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 }