📑 Create menu & pages
Example link: https://creator.celestory.io/project/jLTspI-hq
You can build your menus with a lot of elements:
Go to Main Menu (blue button with the title of your project at the top left of the creation interface), then click on Menus.
If your project does not have one, you will be offered to create your menu.
Click on "Add your first menu".
The menu creation window appears.
A menu is a fixed screen in your application that displays different items that you can arrange in any order and position you want. On the right you can see a live preview of the menu and choose the preview ratio in the top right corner.
There are 3 types of menus:
The personalized menu
The most common menu. It is activated as soon as the application is launched, and allows you to add as many pages as you want, while allowing you to launch custom path modules (which will create data) in the form of a tree structure.
The HUD
The Head Up Display allows you to display an interface of elements at the top of the screen, including buttons, icons and variables (such as scores or completion rate) to give constant feedback to the user.
The overlay menu
The overlay menu will be placed on top of a personalized course. This is particularly useful for pausing the experience, adjusting parameters or returning to the main menu or displaying help for example.
Let's start by building our home menu.
For the name of the menu, you can change the default name to main menu.
For the background of the menu, there can be either a background image (and without image a plain color by default).
There can also be a Border Style in the background (which corresponds to a style you can create by going to Main Menu/Styles, which can also be used in tooltips or speech bubbles).
For the menu sound, by clicking on Add a resource, you can choose a background sound that will be played automatically when you get to the menu in question.
The sound (mp3) must first be uploaded to the Project Files.
To format your menu, click Add element.
The elements you can layout are:
Text: you can change the font, color and layout of the text
Image: display an image from project files
Sound: plays a sound from the project files, with the possibility to play automatically and to display or not the player.
Video: plays a video from the project files, with the possibility to play automatically and to display or not the player.
Layout: a sub-menu containing elements that you can adjust vertically or horizontally (useful for creating "element grids")
Spacing: creates a space to spread the elements in a harmonious and responsive way (adaptable to any resolution).
Web page: embed a webpage (web site, web app...) into the app, no need to leave the app to get access to multiple web features
Variable: displays the value of a variable in a persistent way (scorecards...) and can, for a true/false condition, display only an image or not.
Internet link: a button allowing you to direct the user to a web address.
Button to open a menu: a button that directs the user to another menu (to activate a change of variable, you will have to go through a graph again).
Music setting: a gauge to adjust the volume of the menu background sound and the Play music block
Sound adjustment: a gauge to adjust the volume of the sound of the buttons.
Simple gauge: an animated bar that will show the progression of a numerical variable. Combining several of them allows you to make statistical graphs.
Start button: to launch the Start block of a module
Continue button: to start the History Thread from the last save (of the variables and the location in the graph) using the Checkpoint block.
Social networks: a link to different social networks
Button open menu overlay: opens a menu overlay of the menu or of the player playing the graph. This button is often located on the ATH, i.e. at the top of the player.
Button close an overlay menu: closes the overlay menu to return to the player playing the graph or the menu the user is on.
Button to change the language: changes the language of the application (if it is the translated language, other than the one of the graph, the text must first be imported in the target language by the translation system).
Elements share functionality when you open their edit window:
Open an edit window by clicking on the pen, the element edit symbol
Alignment of the element is only useful if your element is present in a layout, which is a sub-menu: it represents the ability to align your element from your reading direction (left in most languages) to the end of the layout (and therefore right-aligned generally, inversely if your language reads from right to left), center it, or stretch it.
More information on CSS alignment for the curious via this link
The alignment of the text for example is done directly in the part where you write the text.
Appearance of the element allows you to add a background to it, especially if it is a button, from which you can customize the border (via a predefined style or created by you from the Styles menu) or select it via an image in your project files.
Change very precisely the appearance of your element by activating the custom CSS option in the Advanced Configuration category.
Some details specific to the editing windows of the different elements:
Text:
The editing window opens, allowing you to change the content of the text...
Its appearance like its font (you can add your own in the Styles menu), its color or its size.
Image
Click on the image icon...
... to choose from your project files. Then click OK.
The image is previewed in the editing window of the item as well as in the viewing area of the full menu.
You can then close the image editing window.
Sound: plays a sound from the project files, with the possibility to play automatically and to display or not the player. The Url section let you choose the source of your sound, which can be a Url or a file in your project.
Video: plays a video from the project files, with the possibility to play automatically and to display or not the player.
Layout:
By clicking on the edit icon of a Layout item, i.e. a sub-menu, the Layout item edit window appears and allows you to create the items of this sub-menu, which are the same as those of a custom menu.
Let's create 3 Text elements for example, each containing an emoji.
Spacer:
The Spacer element edit window gives you an option to take up all available space.
Spacers allow you to create a space to best distribute the other elements in place. It will take up all the space available by default in the avaibility limit of the app.
If you change the spacers order, it changes the layout of the items in the menu view, by "pushing" here the Layout item.
_Note: You can also uncheck the option Take all available space and change the spacing size manually, with for exemple a pixel or percentage scale (learn more on the CSS scales here
Web page:
In the edit window of the variable element, you can input an URL to be embeded in your app.
Don't forget to create a button leading to your previous menu otherwise your user will be stuck on that menu.
Variable:
In the edit window of the variable element, you can select one of the project variables.
In the Appearance section, you can customize the background of the variable element.
Choose a variable...
...its displayed value will change in real time with user interactions in the graph.
Here the initial value is 0 and no session has been started, 0 is displayed.
You can also use the Layout element, which contains a variable to display its value and a text to indicate the score scale to which it is compared.
The direction of the Layout elements can be horizontal or verical.
If you choose a boolean variable, you can set up a contextual image or text regarding if the value if True of False.
More information on:
boolean variables (true/false) in ☑️ Set up conditions
numeric variables in 🧮 Set up conditions (advanced)
text variables in 🔑 Enter a key-word or a code (advanced)
Internet link:
The editing window of the Internet Link element allows you to change the text of the button's link, as well as the link of the URL to which you want it to refer.
Open menu button:
You will be able to create a button that allows you to switch from one custom menu to another.
Please create your target menu first by clicking on the Add button to the right of the menu selection drop-down menu.
Select Custom menu and press OK.
You are redirected to the editor of your new menu.
Do not hesitate to rename it to find it more easily.
For example, let's name it App Details.
By returning to the main menu via the menu selection menu, and re-opening the Button item edit window to open a menu, you can define the Menu to be opened by pressing the "More information" button.
Let's select, for example, App. details.
Music slider:
Here you can change the icon of the volume of the played sounds in the background of the menu, or in the background of the experiment if the gauge is activated at that time.
You can also change the design of the slider, the background of the element and the appearance of the Slider among the default styles or your own.
Sound slider:
As Music Setting, allows you to configure the volume icon of the sounds played when a menu button is pressed, or a menu during the experiment if the gauge is pressed at that time.
You can also change the design of the slider, the background of the element and the appearance of the Slider among the default styles or your own.
Simple gauge:
A way to visualize the changing value of a numeric variable. You can change the color, set a minimum and maximum, and display the current value.
Start button:
Allows you to redirect the user to one of your modules containing your graphs.
Don't forget to create your modules first by clicking on Add at the bottom left of the side menu.
In the Start Button item's edit window, you can then select the targeted Module, which will first return to its Start Graph (and from there you can make your user reach all the module's subgraphs).
The Reset Variables option is useful when you don't want the history of the user's actions to be taken into account in this new run.
Continue button:
In this window you can change the text of the Continue button as well as its appearance. It will return to the last checkpoint the user passed through and its variable values will be loaded.
More information on the 🟦 Checkpoint article
Social networks:
Here you can define the links of your social networks, their icons and their size which will be centered to fit in a horizontal space.
Button open an overlay menu:
Before creating an Open Overlay Menu Button, you must create an HUD (Head Up Display) menu by clicking Add to the right of the drop-down menu selection.
You automatically switch to editing the HUD Menu, which is a high level user experience menu when it plays the graph of the app.
Next, let's create the Button open overlay menu item.
In the edit window of this one, you can change the button text, its appearance (via a border or an image).
So while the player is playing the graph, he sees a Button he can press to access an overlay menu.
Note: You can even go much further by creating a more advanced HUD interface, for example here with a horonzontal composition of a variable (connected to the numerical variable Score), a Text ("points"), a spacing and a Button open menu overlay.
Then create a Menu overlay by clicking on Add to the right of the drop-down menu selection.
You automatically switch to editing the Menu overlay, which is an overlay menu.
In this example, we call it Statistics.
You can change the border style of the overlay menu, whose border encompasses all elements.
Here, we have created a Layout element (a sub-menu) with 2 elements: variable (which we have connected to the numeric variable Completion) and a text indicating to the user the scale of completion ("/5pages").
You can also enable the option to Pause the story, which, if the overlay menu is open while the user is playing a graph, will pause the experience.
Button to close an overlay menu:
Finally, don't forget to create a Close overlay menu item to allow the user to exit the overlay menu.
Concretely, when the player plays the graph and clicks on the Open overlay menu Button, he will see the Statistics overlay menu, which he can close at any time.
Change language button:
You can create a Button to change language if you have previously imported the translation of your app's texts in the target language, via a po file and the Translate menu (available in the Main Menu).
More information in the section: 🔡 Translating your application
Once done, the edit window of the Button to change language item allows you to choose the language to which the app will be translated, as well as the text of the button.
To test the Button, you must Testing playing the application.
If possible, start the test by opening the Main Menu via the drop-down menu at the top of the project, under Play Current Module.
The test is running. Click on Français.
The application then switches to French.
To go back to the original language, or choose another language, don't forget to create as many Buttons to change the language as there are languages.
You can build your menus with a lot of elements:
1. Create your menu
Go to Main Menu (blue button with the title of your project at the top left of the creation interface), then click on Menus.
If your project does not have one, you will be offered to create your menu.
Click on "Add your first menu".
The menu creation window appears.
A menu is a fixed screen in your application that displays different items that you can arrange in any order and position you want. On the right you can see a live preview of the menu and choose the preview ratio in the top right corner.
2. Menu types
There are 3 types of menus:
The personalized menu
The most common menu. It is activated as soon as the application is launched, and allows you to add as many pages as you want, while allowing you to launch custom path modules (which will create data) in the form of a tree structure.
The HUD
The Head Up Display allows you to display an interface of elements at the top of the screen, including buttons, icons and variables (such as scores or completion rate) to give constant feedback to the user.
The overlay menu
The overlay menu will be placed on top of a personalized course. This is particularly useful for pausing the experience, adjusting parameters or returning to the main menu or displaying help for example.
Let's start by building our home menu.
For the name of the menu, you can change the default name to main menu.
For the background of the menu, there can be either a background image (and without image a plain color by default).
There can also be a Border Style in the background (which corresponds to a style you can create by going to Main Menu/Styles, which can also be used in tooltips or speech bubbles).
For the menu sound, by clicking on Add a resource, you can choose a background sound that will be played automatically when you get to the menu in question.
The sound (mp3) must first be uploaded to the Project Files.
To format your menu, click Add element.
3. Menu elements
The elements you can layout are:
Text: you can change the font, color and layout of the text
Image: display an image from project files
Sound: plays a sound from the project files, with the possibility to play automatically and to display or not the player.
Video: plays a video from the project files, with the possibility to play automatically and to display or not the player.
Layout: a sub-menu containing elements that you can adjust vertically or horizontally (useful for creating "element grids")
Spacing: creates a space to spread the elements in a harmonious and responsive way (adaptable to any resolution).
Web page: embed a webpage (web site, web app...) into the app, no need to leave the app to get access to multiple web features
Variable: displays the value of a variable in a persistent way (scorecards...) and can, for a true/false condition, display only an image or not.
Internet link: a button allowing you to direct the user to a web address.
Button to open a menu: a button that directs the user to another menu (to activate a change of variable, you will have to go through a graph again).
Music setting: a gauge to adjust the volume of the menu background sound and the Play music block
Sound adjustment: a gauge to adjust the volume of the sound of the buttons.
Simple gauge: an animated bar that will show the progression of a numerical variable. Combining several of them allows you to make statistical graphs.
Start button: to launch the Start block of a module
Continue button: to start the History Thread from the last save (of the variables and the location in the graph) using the Checkpoint block.
Social networks: a link to different social networks
Button open menu overlay: opens a menu overlay of the menu or of the player playing the graph. This button is often located on the ATH, i.e. at the top of the player.
Button close an overlay menu: closes the overlay menu to return to the player playing the graph or the menu the user is on.
Button to change the language: changes the language of the application (if it is the translated language, other than the one of the graph, the text must first be imported in the target language by the translation system).
4. Elements shared features
Elements share functionality when you open their edit window:
Open an edit window by clicking on the pen, the element edit symbol
Alignment of the element is only useful if your element is present in a layout, which is a sub-menu: it represents the ability to align your element from your reading direction (left in most languages) to the end of the layout (and therefore right-aligned generally, inversely if your language reads from right to left), center it, or stretch it.
More information on CSS alignment for the curious via this link
The alignment of the text for example is done directly in the part where you write the text.
Appearance of the element allows you to add a background to it, especially if it is a button, from which you can customize the border (via a predefined style or created by you from the Styles menu) or select it via an image in your project files.
Change very precisely the appearance of your element by activating the custom CSS option in the Advanced Configuration category.
5. Unique elements features
Some details specific to the editing windows of the different elements:
Text:
The editing window opens, allowing you to change the content of the text...
Its appearance like its font (you can add your own in the Styles menu), its color or its size.
Image
Click on the image icon...
... to choose from your project files. Then click OK.
The image is previewed in the editing window of the item as well as in the viewing area of the full menu.
You can then close the image editing window.
Sound: plays a sound from the project files, with the possibility to play automatically and to display or not the player. The Url section let you choose the source of your sound, which can be a Url or a file in your project.
Video: plays a video from the project files, with the possibility to play automatically and to display or not the player.
Layout:
By clicking on the edit icon of a Layout item, i.e. a sub-menu, the Layout item edit window appears and allows you to create the items of this sub-menu, which are the same as those of a custom menu.
Let's create 3 Text elements for example, each containing an emoji.
Spacer:
The Spacer element edit window gives you an option to take up all available space.
Spacers allow you to create a space to best distribute the other elements in place. It will take up all the space available by default in the avaibility limit of the app.
If you change the spacers order, it changes the layout of the items in the menu view, by "pushing" here the Layout item.
_Note: You can also uncheck the option Take all available space and change the spacing size manually, with for exemple a pixel or percentage scale (learn more on the CSS scales here
Web page:
In the edit window of the variable element, you can input an URL to be embeded in your app.
Don't forget to create a button leading to your previous menu otherwise your user will be stuck on that menu.
Variable:
In the edit window of the variable element, you can select one of the project variables.
In the Appearance section, you can customize the background of the variable element.
Choose a variable...
...its displayed value will change in real time with user interactions in the graph.
Here the initial value is 0 and no session has been started, 0 is displayed.
You can also use the Layout element, which contains a variable to display its value and a text to indicate the score scale to which it is compared.
The direction of the Layout elements can be horizontal or verical.
If you choose a boolean variable, you can set up a contextual image or text regarding if the value if True of False.
More information on:
boolean variables (true/false) in ☑️ Set up conditions
numeric variables in 🧮 Set up conditions (advanced)
text variables in 🔑 Enter a key-word or a code (advanced)
Internet link:
The editing window of the Internet Link element allows you to change the text of the button's link, as well as the link of the URL to which you want it to refer.
Open menu button:
You will be able to create a button that allows you to switch from one custom menu to another.
Please create your target menu first by clicking on the Add button to the right of the menu selection drop-down menu.
Select Custom menu and press OK.
You are redirected to the editor of your new menu.
Do not hesitate to rename it to find it more easily.
For example, let's name it App Details.
By returning to the main menu via the menu selection menu, and re-opening the Button item edit window to open a menu, you can define the Menu to be opened by pressing the "More information" button.
Let's select, for example, App. details.
Music slider:
Here you can change the icon of the volume of the played sounds in the background of the menu, or in the background of the experiment if the gauge is activated at that time.
You can also change the design of the slider, the background of the element and the appearance of the Slider among the default styles or your own.
Sound slider:
As Music Setting, allows you to configure the volume icon of the sounds played when a menu button is pressed, or a menu during the experiment if the gauge is pressed at that time.
You can also change the design of the slider, the background of the element and the appearance of the Slider among the default styles or your own.
Simple gauge:
A way to visualize the changing value of a numeric variable. You can change the color, set a minimum and maximum, and display the current value.
Start button:
Allows you to redirect the user to one of your modules containing your graphs.
Don't forget to create your modules first by clicking on Add at the bottom left of the side menu.
In the Start Button item's edit window, you can then select the targeted Module, which will first return to its Start Graph (and from there you can make your user reach all the module's subgraphs).
The Reset Variables option is useful when you don't want the history of the user's actions to be taken into account in this new run.
Continue button:
In this window you can change the text of the Continue button as well as its appearance. It will return to the last checkpoint the user passed through and its variable values will be loaded.
More information on the 🟦 Checkpoint article
Social networks:
Here you can define the links of your social networks, their icons and their size which will be centered to fit in a horizontal space.
Button open an overlay menu:
Before creating an Open Overlay Menu Button, you must create an HUD (Head Up Display) menu by clicking Add to the right of the drop-down menu selection.
You automatically switch to editing the HUD Menu, which is a high level user experience menu when it plays the graph of the app.
Next, let's create the Button open overlay menu item.
In the edit window of this one, you can change the button text, its appearance (via a border or an image).
So while the player is playing the graph, he sees a Button he can press to access an overlay menu.
Note: You can even go much further by creating a more advanced HUD interface, for example here with a horonzontal composition of a variable (connected to the numerical variable Score), a Text ("points"), a spacing and a Button open menu overlay.
Then create a Menu overlay by clicking on Add to the right of the drop-down menu selection.
You automatically switch to editing the Menu overlay, which is an overlay menu.
In this example, we call it Statistics.
You can change the border style of the overlay menu, whose border encompasses all elements.
Here, we have created a Layout element (a sub-menu) with 2 elements: variable (which we have connected to the numeric variable Completion) and a text indicating to the user the scale of completion ("/5pages").
You can also enable the option to Pause the story, which, if the overlay menu is open while the user is playing a graph, will pause the experience.
Button to close an overlay menu:
Finally, don't forget to create a Close overlay menu item to allow the user to exit the overlay menu.
Concretely, when the player plays the graph and clicks on the Open overlay menu Button, he will see the Statistics overlay menu, which he can close at any time.
Change language button:
You can create a Button to change language if you have previously imported the translation of your app's texts in the target language, via a po file and the Translate menu (available in the Main Menu).
More information in the section: 🔡 Translating your application
Once done, the edit window of the Button to change language item allows you to choose the language to which the app will be translated, as well as the text of the button.
To test the Button, you must Testing playing the application.
If possible, start the test by opening the Main Menu via the drop-down menu at the top of the project, under Play Current Module.
The test is running. Click on Français.
The application then switches to French.
To go back to the original language, or choose another language, don't forget to create as many Buttons to change the language as there are languages.
Updated on: 28/05/2021
Thank you!