Create interactions between Speedernet Sphere and Storyline

Is it possible to create interactions between an experience designed with Sphere and a project in Storyline? Yes indeed.

Follow this tutorial to discover how!

To help you understand, let’s take an example:

"In a virtual visit of a site, a map appears automatically in the top-right corner of the screen. In each part of the virtual visit, users can see where they are thanks to the map."

Before we get into the heart of the subject, here’s an overview of the final result: 

Main steps

To integrate a Sphere experience into a Storyline project, follow these three steps:

1. In Storyline - add the site map and red dot in the project, and set up the interactions
2. In Sphere - create the interaction with Storyline in the virtual visit
3. In Storyline - insert the export of the virtual visit into the project

Step 1 - Add the site map in the Storyline project

Let’s start with the site map.

In this example, the picture of the site map, with the initial state “Hidden”, is inserted  into the slide where the export of the virtual visit will be inserted.

To do that:

• Insert a slide
• Insert the picture of the site map
• Place it where you see fit
• Click on the "States" tab
• Change the initial state of the picture to "Hidden"

Then, create the variable and trigger to show the picture of the site map.

• Open the window "Manage project variables"
• Create a new variable
• Name the variable "map"

Take care when naming the variable as you’ll also be using it in the virtual visit in Sphere.

• Select the variable type "True/False" and the default value "False"
• Click "OK"
• Create the following trigger:

[Change state of “map.png” to Normal
when the “map” variable changes to "True"]

In our example, the red dot on the map shows the location of the user in the virtual visit of the site.

To do this:

• Create a layer on the same slide
• Name it "Office 1"
• Insert a marker (you can also use a shape or a picture)
• Place it on the map. In this example we show the location of “Office 1” on the map

Next, create the variable and trigger to show the red dot:

• Open the window “Manage project variables"
• Create a new variable
• Name it “office1”

Take care when naming the variable as you’ll also be using it in the virtual visit in Sphere.

• Select the variable type "True/False" and default value "False"
• Click "OK"
• Create the following trigger:

[Show layer “Office 1”
when the “office1” variable changes to “True”]

Step 2 - Create the interaction with Storyline in the virtual visit in Sphere

Open the Sphere part of your project.

Since the virtual visit has already been designed, let’s focus on creating the interaction between Sphere and Storyline.

Remember that the site map must appear 3 seconds after the user launches the virtual visit.

To do that, in the first scene of your project:

• Open the tool "Events"
• Add a new event:

[At 3s
Then change variable Storyline “plan” (enter the exact name of the variable created in Storyline) to “True” (select the exact value defined in Storyline)]

In our example, we want the red location dot to appear when the user clicks on a button in each scene.

Let’s go to the scene "Office 1" where we had set up a red location dot to appear on the map in Storyline:

• Add an element. In this example we’ll add a text
• Name it in the elements column: "localisation"
• Go to the properties window of the element and define its settings as you wish:
• Aspect: "Where am I?"
• States: Visible and interactive
• Open the implications window of the element and add a new implication:

[If click "localisation"
then change variable Storyline “office1” (enter the exact name of the variable created in Storyline) to "True" (enter the exact value defined in Storyline)]

• Export your Sphere project

Step 3 - Insert the export of the virtual visit into Storyline

In this last step:

• Insert the Sphere export folder into the Storyline slide as a web object. To learn more, see the article "Integrate a Sphere experience into Storyline!"
• Publish the Storyline line, then host it on a server or LMS platform to view the result

You can enrich this example or create other types of interactions between the tools Sphere and Storyline as you see fit.

Feel free to send us your questions and comments!

See you very soon in the next tutorial!