In this tutorial, you will see how to change the aspect of an element with a click.
Let’s follow a simple case:
- in the scene, there is an elevator and a button.
- the button can have a gray aspect (off) or a green one (on)
- the button changes from gray to green when clicking on it
- for this example you need two images.
Here are the steps to follow:
- Enrich the panorama with an image element, for our case, the button
- Define the properties of the image element (aspects and states, on and off, interactive and visible)
- Create interactions (using conditionals, when clicking the button, change its aspect)
Step 1 – Enrich the Panorama
Add the image element to the scene:
- click the “add element list”
- click the image element and slide it into the scene
- rename it in the column “elements”, you will find it faster among the other elements.
Step 2 – Define the Properties of the Element
In this step, you’ll define the properties of the element: the 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 a visual representation (graphic). In this example, the “button” element has two possible aspects: gray or green.
- Rename the initial aspect “off”
- Associate an image (the gray button) to this aspect by clicking the button “add an image”.
- create a second aspect by clicking the “+” symbol
- rename it “on”
- add an image (the green button) to this aspect
Configure the State of the Element
For an image element a state is defined with two characteristics:
According to the scenario planned, you can have several states for one element. For example an image element can be “invisible” at the beginning of the experience and become visible and interactive (clickable).
In this example the element has only one state during the whole experience: “visible” and “interactive” (clickable).
Remember to give a significative name to the state to find it faster if necessary.
Close the “Properties” window .
Step 3 – Create Interactions Using the Conditionals
Conditionals enables the user to interact with the element of an experience by defining the conditions and consequences. For example: if you click the gray button, it turns green.
Change the Initial Aspect of an Element
In this example, when you click the image element, the aspect will go from the aspect “off” (gray) to the aspect “on”(green) as if you were pushing a button to call an elevator.
- open the “Conditional tool” window
- add a new conditional by clicking the “+” symbol
- define the condition and the consequence
- If click on “button”
- Then the button changes aspect and becomes “on”
- close the window to test the experience
Would you like to know how to interact with the elevator button?
Follow the link to take the experience a step further.