In this tutorial, you will create your very first experience with Speedernet Sphere, a virtual tour that consists of moving between scenes (panoramas). You will need:
- 2 panoramic photos
- 1 pictogram
Here are the steps:
- Import media
- Add scenes
- Add elements in the scenes
- Define properties and conditionals for the elements
- Test the experience
In the project view (Home)
Start your project by importing media in the Media Manager. This enables you to be more efficient when building your experience.
Adding scenes is a 2-step process:
- Click on “Add a scene”
- Click on “Add media”, then look for and select your media
For this experience:
- Add two scenes
- Name them to better identify them
Now, open the first scene by clicking on the “Open scene editing” button.
You are now in the Composition mode
Add an element
To add an element in the scene:
- Click on the “add element list” (1)
- Click on an element and drag & drop the element onto the scene (in our example, it is an image type element) (2)
- In the “elements” column, rename the element (3). You will identify it more easily among other elements that will be added.
Define the properties of the element
This step consists of defining the properties of the element (associated media, its aspect and its state).
- Click on the “properties” icon in the “elements” column (1)
- Add the media (2)
- Name the aspect of the added element (3)
- Define the state of the element (4) (in our example, the element is visible and interactive)
- Name the state (5)
- Close the “properties” window (6). The media you chose appears on the scene
Place the element
You will now place your element where you want to in the scene using the “spherical movement mode”:
- Click on the element through the “elements” column to select it (1)
- If necessary, click on “spherical movement mode” to enable it (2)
- With the mouse, move your panorama to find the best location for your element (3)
You can then adjust the “Position”, “Rotation” and “Scale” of the element owing to the corresponding buttons.
Define the conditionals
Let’s move on to adding interactivity. In our example, clicking on the element we just created will make us move to the next scene.
- Open the “conditionals” window (1)
- Add a conditional (2)
- Fill in the conditions (If) (3)
- And the consequences (Then) (4)
- Close the window (5)
In our example:
Condition: If user clicks on element
Consequence: Then user enters next scene
Test the experience
To test your experience:
- Click on the “File” tab (1) and then click on “Test the experience” (2)
- Or click the “Test” button at the bottom right of the screen
- Click on the icon (3)
Now, it’s your turn! Your challenge is to add an element in the second scene that enables the user to come back to the first scene.
Tell us about your first Sphere experience, share with us your comments and questions!
See you soon on the next tutorial!
We also invite you to check the following tutorials: