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.

Main Steps

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.

Initial Aspect

  • Rename the initial aspect “off”
  • Associate an image (the gray button) to this aspect by clicking the button “add an image”.

Secondary Aspect

  • 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:

  • visibility
  • interactivity

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.

Sphere Team


Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.