In this tutorial, you will learn how to change the aspect of an element by clicking on it. To better understand, let’s use an example:
- In the scene, there is an elevator and a button
- This button can be either grey (stop) or green (functioning)
- When user clicks, the button goes from grey to green
To create this example, you will need two images. By clicking on this link, you will find more information on which formats are compatible with Speedernet Sphere.
Here are the steps to follow:
- Enrich the panorama by adding an image element
- Define the properties of the image element (aspects and states)
- Create interactions (with conditionals)
Step 1 – Enrich the panorama
Add the image element into the scene
- Click on the “add element list”
- Click on the image element and drop it onto the scene
- Rename it in the Elements column (“button”). It will make it easier to identify it in the list.
Step 2 – Define the properties of the element
In this step, you will define the properties of the element, its aspects and states. Click on “Go to the properties of the element or group” .
Define the aspects of the element
The aspect of an image element is its visual representation. In this example, the “Flag” element has two possible aspects: blue and green.
- Rename the initial aspect “flag1”
- Associate an image (the button is blue) to this aspect by clicking on the “add an image” button
- Create a second aspect by clicking on the “+” symbol
- Rename this aspect “flag2”
- Add an image (the button is green) to this aspect
Configurate the state of the element
For an image element, a state is defined by two characteristics:
- Its visibility
- Its interactivity
Depending on your scenario, you can have several states for an element. For example, an image element can be “invisible” at the start of the experience and can later become visible and interactive (clickable). In this example, the element has only one state throughout the experience: “visible” and “interactive” (clickable). Remember to give an appropriate name to the state so it’s easier to identify it when necessary. Then, close the properties window.
Step 3 – Create interactions with conditionals
Conditionals enable the user to interact with the elements in an experience by defining conditions and consequences. For example: if the user clicks on the blue button, then the button becomes green.
Change the initial aspect of the element
In this example, when the user clicks on the image element, the latter changes from aspect “flag1” (blue) to aspect “flag2” (green).
- Open the conditionals window
- Add a new conditional by clicking on the “+” symbol
- Define the condition and then the consequence
If user clicks on “flag1” Then this image changes aspect and becomes “flag2”
- Close the conditionals window and test the experience
Interested in learning how to make this button interact?
If so, we invite you to click on the link below to read the tutorial “Go further: interactivity in virtual reality”.
Your turn now to have fun with Sphere. Leave your comments and questions below!
See you soon for another tutorial!