How To: Create A First Experience Step By Step

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)

Import media

Start your project by importing media in the Media Manager. This enables you to be more efficient when building your experience. 

Add scenes

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:

• Speedernet Sphere: first steps
• Speedernet Sphere: an intuitive interface
• How to: manage your media within a Sphere project
• How to: manage the scenes of an experience