Lien de l'exemple: https://creator.celestory.io/project/wAsAqEoND

Vous pouvez créer vos menus grùce à de nombreux éléments:



1. Créer son menu

Allez dans Menu principal (bouton bleu portant le titre de votre projet en haut à gauche de l'interface de création), puis cliquez sur Menus.



Si votre projet n'en possÚde pas, il vous sera proposé de créer votre menu.

Cliquez sur "Ajouter votre premier menu"



La fenĂȘtre de crĂ©ation de menus apparaĂźt.

Un menu est un écran fixe dans votre application qui affiche différent éléments que vous pouvez disposer dans l'ordre et la position que vous le souhaitez. A droite vous pouvez voir une prévisualisation en direct du menu et choisir en haut à droite le ratio de prévisualisation.



2. Les types de menus

Il existe 3 types de menus:

Le menu personnalisé

Le plus courant des menus. Il s'active dÚs que l'application se lance, et vous permet de rajouter autant de pages que vous le souhaitez, tout en vous permettant de lancer des modules de parcours personnalisés (qui créeront de la data) sous forme d'arborescence.

L'ATH

L'Affichage TĂȘte Haute permet lors d'un parcours personnalisĂ© d'afficher une interface d'Ă©lĂ©ments en haut de l'Ă©cran, notamment les boutons, icones et variables (comme les scores ou le taux de complĂ©tion) afin de donner constament des feedbacks Ă  l'utilisateur.

Le menu overlay

Le menu overlay sera placé en surimpression d'un parcours personnalisé. ParticuliÚrement utile pour mettre l'expérience en pause, régler des paramÚtres ou encore revenir au menu principal ou afficher une aide par exemple.

Commençons par constituer notre menu d'accueil.

Pour le nom du menu, vous pouvez en changer par défaut qui se nomme menu principal.



Pour le fond du menu, il peut y avoir soit une image de fond (et sans image une coleur unie par défaut).



Il peut y avoir également en fond un Style de bordure (qui correspond à un style que vous pouvez créer en allant dans Menu principal/Styles, utilisable également dans les bulles de dialogues ou des bulles d'alerte).



Pour le son du menu, en cliquant sur Ajouter une ressource, vous pouvez choisir un son en arriÚre plan qui sera joué automatiquement en arrivant sur le menu en question.



Le son (mp3) devra ĂȘtre prĂ©alablement uploadĂ© dans les Fichiers du projet.



Pour mettre en forme votre menu, cliquez sur Ajouter un élément.



3. Les éléments des menus

Les éléments que vous pouvez mettre en page sont:



Texte: dont vous pouvez changer la police, la couleur et l'agencement
Image: affiche une image issue des fichiers du projet
Son: joue un son issue des fichiers du projet, avec possibilité de jouer automatiquement et d'afficher ou non le player
Video: joue une vidéo issue des fichiers du projet, avec possibilité de jouer automatiquement et d'afficher ou non le player
Layout: un sous-menu contenant lui-mĂȘme des Ă©lĂ©ments que vous pouvez ajuster verticalement ou horizontalement (pratique pour crĂ©er des "grilles d'Ă©lĂ©ments")
Espacement: crée un espace pour écarter les éléments de façon harmonieuse et responsive (adaptable à toute résolution).
Page web: intÚgre une webpage (web site, web app...) dans l'app, plus besoin de quitter l'app pour avoir accÚs à de nombreuses fonctionnalités web.
Variable: affiche la valeur d'une variable de façon persistante (fiches de scores...) et peut, pour une condition vrai/faux, n'afficher qu'une image ou pas.
Lien internet: un bouton vous permettant de diriger l'utilisateur vers une adresse web.
Bouton pour ouvrir un menu: un bouton qui dirige l'utilisateur vers un autre menu (pour actionner un changement de variable, il faudra repasser par un graphe)
Réglage musique: une jauge pour régler le volume du fond sonore du menu et du bloc Play music
Réglage son: une jauge pour régler le volume du son des boutons
Jauge simple: une barre animée qui montrera la progression d'une variable numérique. En combiner plusieurs permet de faire des graphiques statistiques.
Bouton commencer: pour lancer le bloc Start d'un module
Bouton continuer: pour lancer le Fil de l'Histoire Ă  partir de la derniĂšre sauvegarde (des variables et de l'emplacement dans le graphe) grĂące au bloc Checkpoint.
Réseaux sociaux: un lien vers différents réseaux sociaux
Bouton ouvrir un menu overlay: ouvre un menu en surimpression du menu ou du player jouant le graphe. Ce bouton se situe souvent sur l'ATH, soit donc en haut du player.
Bouton fermer un menu overlay: ferme le menu en surimpression pour revenir au player jouant le graphe ou le menu sur lequel est l'utilisateur.
Bouton pour changer la langue: change la langue de l'application (s'il s'agit de la langue traduite, autre que celle du graphe, il faudra au préalable importer le texte dans la langue cible par le systÚme de traduction).

4. Les fonctionnalités communes aux éléments

Les Ă©lĂ©ments partagent fonctionnalitĂ©s lorsqu'on ouvre leur fenĂȘtre d'Ă©ditions:

Ouvrez une fenĂȘtre d'Ă©dition en cliquant sur le stylo, symbole d'Ă©dition de l'Ă©lĂ©ment



L'alignement de l'élément n'est utile que si votre élément est présent dans un layout, soit un sous-menu: il représente la capacité à aligner votre élément au départ de votre sens de lecture (à gauche dans la plupart des langues) à la fin de celui-ci (et donc alignement à droite généralement, de façon inversée si votre langue se lit de droite à gauche), à le centrer ou l'étirer.

Plus d'information sur l'alignement CSS pour les curieux via ce lien

L'alignement du texte par exemple se fait directement dans la partie oĂč l'on Ă©crit le texte.



L'apparence de l'élément vous permet de rajouter un fond sur ce dernier, surtout s'il s'agit d'un bouton, duquel vous pouvez personnaliser la bordure (via un style prédéfini ou créé par vous depuis le menu Styles) ou encore le sélectionner via une image dans vos fichiers du projet.



Modifiez trÚs précisément l'apparence de votre élément en activant l'option de CSS personnalisé dans la catégorie Configuration avancée.



5. Les fonctionalités d'éléments spécifiques

Quelques dĂ©tails spĂ©cifiques aux fenĂȘtres d'Ă©dition des diffĂ©rents Ă©lĂ©ments:

Texte:

La fenĂȘtre d'Ă©dition de celui-ci s'ouuvre, vous permettant de changer le contenu du texte...



Son apparence comme sa police (vous pouvez rajouter la vĂŽtre dans le menu Styles), sa couleur ou encore sa taille.



Image



Cliquez sur l'icone d'image...



... pour en choisir parmi les fichiers de votre projet. Puis cliquez sur OK.



L'image est prĂ©visualisĂ©e dans la fenĂȘtre d'Ă©dition de l'Ă©lĂ©ment ainsi que dans la zone de visualisation du menu complet.



Vous pouvez dĂšs lors fermer la fenĂȘtre d'Ă©dition de l'image.



Son: joue un son issue des fichiers du projet, avec possibilité de jouer automatiquement et d'afficher ou non le player



Video: joue une vidéo issue des fichiers du projet, avec possibilité de jouer automatiquement et d'afficher ou non le player



Layout:

En cliquant sur l'icone d'Ă©dition d'un Ă©lĂ©ment Layout, c'est-Ă -dire un sous-menu, la fenĂȘtre d'Ă©dition de l'Ă©lĂ©ment Layout apparaĂźt et vous permet de crĂ©er les Ă©lĂ©ments de ce sous-menu, qui sont les mĂȘmes que ceux d'un menu personnalisĂ©.



Créons 3 éléments de Texte par exemple, chacun contenant un émoji.



Espacement:

La fenĂȘtre d'Ă©dition de l'Ă©lĂ©ment de l'Espacement vous propose une option pour Prendre toute la place disponible.



Les Espacements vous permettent de créer un espace pour répartir au mieux les autres éléments en place. Un Espacement va prendre toute la place disponible dans les limites de l'écran du menu, si cette option est restée cochée.



Ainsi, en rajoutant plusieurs éléments,...



... tous les éléments sont repoussés au maximum.



_Note: Vous pouvez également décocher l'option Prendre toute la place disponible et changer la taille de l'espacement manuellement, avec une échelle de pixels ou encore de pourcentage (apprenez en plus sur les échelles de CSS via ce lien



Page web:

Dans la fenĂȘtre d'Ă©dition de l'Ă©lĂ©ment variable, vous pouvez saisir une URL Ă  intĂ©grer dans votre application.

N'oubliez pas de créer un bouton menant à votre menu précédent, sinon votre utilisateur sera bloqué sur ce menu.



Variable:

Dans la fenĂȘte d'Ă©dition de l'Ă©lĂ©ment variable, vous pouvez sĂ©lectionner une des variables du projet.



Dans la section Apparence, vous pouvez personnaliser le fond de l'élément de la variable.

Choisissez une variable...



...sa valeur affichée changera en temps réelle avec les interactions de l'utilisateur dans le graphe.

Ici la valeur initiale étant de 0 et aucune session n'ayant été lancée, 0 est affiché.



Vous pouvez également utliser l'élément Layout, contenant une variable pour en afficher la valeur, ainsi qu'un texte pour indiquer l'échelle de score à laquelle elle est comparée.

La direction des Ă©lĂ©ments du Layout peut ĂȘtre horizontale ou vericale.



Si vous choisissez une variable booléenne, vous pouvez personnalisé son apparence sous forme d'image ou de texte en fonction de sa valeur, Vrai ou Faux.



Plus d'information sur

les variables boolĂ©ennes (vrai/faux) dans ☑ Mettre en place des conditions
les variables numĂ©riques dans 🧼 Mettre en place des conditions (avancĂ©)
les variables textuelles dans 🔑 Entrer un mot-clĂ© ou un code (avancĂ©)

Lien internet:

La fenĂȘtre d'Ă©dition de l'Ă©lĂ©ment Lien internet vous permet de changer le texte du lien du bouton, ainsi que le lien de l'URL vers lequel vous voulez que celui-ci renvoie.



Bouton pour ouvrir un menu:

Vous pourrez créer un bouton vous permettant de passer d'un menu personnalisé à l'autre.

Veuillez à bien créer votre menu cible d'abord en cliquant sur le bouton Ajouter à droite du menu déroulant de sélection des menus.



Choisissez Menu personnalisé puis faites OK.



Vous ĂȘtes redirigĂ© vers l'Ă©diteur de votre nouveau menu.

N'hésitez pas à le renommer pour le retrouver plus facilement.

Par exemple, nommons-le DĂ©tails de l'app.



En revenant dans le menu principal via le menu de sĂ©lection de menus, et en ouvrant de nouveau la fenĂȘtre d'Ă©dition de l'Ă©lĂ©ment Bouton pour ouvrir un menu, vous pouvez dĂ©finir le Menu Ă  ouvrir en appuyant sur le bouton "Plus d'informations".

SĂ©lectionnons par exemple DĂ©tails de l'app.



RĂ©glage musique:

Vous pouvez ici changer l'icone du volume des sons joués en fond du menu, ou en fond de l'expérience s'il la jauge est actionnée à ce moment là.

Vous pouvez aussi changer le design du curseur, le fond de l'élément et l'apparence du Slider parmi les styles par défaut ou les vÎtres.



RĂ©glage son:

Comme Réglage musique, vous permet de configurer l'icone du volume des sons joués lors de appuie sur un bouton du menu, ou d'un menu lors de l'expérience s'il la jauge est actionnée à ce moment là.

Vous pouvez aussi changer le design du curseur, le fond de l'élément et l'apparence du Slider parmi les styles par défaut ou les vÎtres.



Jauge simple:

La jauge vous permet de visualiser dynamiquement le changement de valeur d'une variable numérique.

Vous pouvez en changer la couleur, définir un minimum et un maximum, ainsi qu'afficher la valeur en cours.



Bouton commencer:

Vous permet de rediriger l'utilisateur vers l'un de vos modules contenant vos graphes.

N'oubliez pas de créer vos modules d'abord en cliquant sur Ajouter en bas à gauche du menu latéral.

Dans la fenĂȘtre d'Ă©dition de l'Ă©lĂ©ment Bouton commencer, vous pouvez ensuite sĂ©lectionner le Module cible, qui renverra d'abord vers son Graphe de dĂ©part (et de lĂ , vous pourrez faire atteindre l'ensemble des sous-graphes du module Ă  votre utilisateur).

L'option de RĂ©initialiser les variables est utile lorsque vous ne voulez pas que l'historique des actions de l'utilisateur soit pris en compte dans ce nouveau passage.



Bouton continuer:

Dans cette fenĂȘtre vous pouvez changer le texte du bouton Continuer ainsi que son apparence. Il renverra vers le dernier Checkpoint par lequel est passĂ© l'utilisateur et ses valeurs de variables seront chargĂ©es.

Plus d'information sur l'article du bloc 🟩 Checkpoint



RĂ©seaux sociaux:

Vous pouvez ici définir les liens de vos réseaux sociaux, leur icones et leur taille qui seront centrées pour rentrer dans un espace horizontal.



Bouton ouvrir un menu overlay:

Avant de crĂ©er un Bouton ouvrir un menu overlay, vous devez crĂ©er un menu ATH (Affichage TĂȘte Haute) en cliquant sur Ajouter Ă  droite de la sĂ©lection dĂ©roulante de menus.



Vous passez automatiquement à l'édition du Menu ATH, qui est un menu en hauteur de l'expérience utilisateur lorsqu'il joue le graphe de l'app.

Ensuite, créons l'élément Bouton ouvrir un menu overlay.

Dans la fenĂȘtre d'Ă©dition de celui-ci, vous pouvez changer le texte du bouton, son apparence (via une bordure ou une image).



Ainsi pendant lorsque le joueur joue le graphe, il voit un Bouton sur lequel il peut appuyer pour avoir accĂšs Ă  un menu overlay.



Note: Vous pouvez aller mĂȘme beaucoup plus loin en crĂ©ant une interface plus poussĂ©e de l'ATH, par exemple ici avec une composition horonzontale d'une variable (connectĂ©e Ă  la variable numĂ©rique Score), d'un Texte ("points"), d'un espacement et d'un Bouton ouvrir menu overlay.





Il faut ensuite créer un Menu overlay en cliquant sur Ajouter à droite de la sélection déroulante de menus.

Vous passez automatiquement Ă  l'Ă©dition du Menu overlay, qui est un menu en surimpression.



Dans cet exemple, nous le nommons Statistiques.

Vous pouvez changer le style de bordure du menu overlay, dont la bordure englobe tous les éléments.

Ici, nous avons créé un élément Layout (un sous-menu) avec 2 éléments: variable (que nous avons connecté à la variable numérique Complétion) ainsi qu'un texte indiquant à l'utilisateur l'échelle de complétion ("/5pages")



Vous pouvez également activer l'option pour Mettre l'histoire en pause, ce qui, si le menu overlay est ouvert pendant que l'utilisateur joue un graphe, mettra l'expérience en pause.

Bouton fermer un menu overlay:

Enfin n'oubliez pas de créer un élément Fermer le menu overlay pour permettre à l'utilisateur de quitter ce menu en surimpression.





ConcrĂštement, lorsque le joueur jouera le graphe et cliquera sur le Bouton ouvrir menu overlay, il verra le menu overlay Statistiques, qu'il pourra refermer Ă  tout instant.



Bouton pour changer la langue:

Vous pouvez créer un Bouton pour changer de langue si vous avez importé préalablement la traduction des textes de votre app dans la langue cible, via un fichier au format po et le menu Traduire (disponible dans le Menu Principal).

Plus d'informations dans la section: 🔡 Traduire son application

Une fois fait, la fenĂȘtre d'Ă©dition de l'Ă©lĂ©ment Bouton pour changer la langue vous permet de choisi la langue vers lequel sera traduit l'app, ainsi que le texte du bouton.



Pour tester le Bouton, vous devez Jouer en Testant l'application.

Lancez si possible le test en Ouvrant le Menu prinicipal via le menu déroulant en haut du projet, sous Jouer le module courant.



Le Test se lance. Cliquez sur English.



L'application passe alors en anglais.



Pour revenir à la langue d'origine, ou choisir une autre langue, n'oubliez pas de créer autant de Boutons pour changer la langue qu'il y a de langue.
Cet article a-t-il répondu à vos questions ?
Annuler
Merci !