Using 360 images can be a quick way to create an immersive tour of a location. With the October release of Motive Cloud, you can now create your own 360 tours in Storyflow.

Quick Links

1. Collect the images

Your first step is to collect the images you’ll use. Storyflow currently supports images in equirectangular format. A sample image is shown below.

2. Upload images to Storyflow

These images can be found in this zip file:

These photos were taken by Böhringer Friedrich. CC BY-SA 4.0.

3. Organize your photos and create an Enum that represents each scene

A 360 tour is a bit different from other content you’d normally author with Storyflow. Users can visit and revisit any scene in any order they choose. We will use an Enum to track which scene they are currently visiting.

• Open Enum slideout

• Create a new enum named “tour scenes”

• Add an item for each scene

3. Create a director Script with a global variable controlling the scene

1. Create a Script called, for example, “360 Tour Director”

2. Create a global variable using the new Enum called “Current Scene”

3. Create a “Setup” frame and set the variable to the first scene you want rendered

4. Create Subframes for each scene

This is the tricky part! Since users can move between scenes at will we need to avoid “recursion”--basically having each Script call into other Scripts that call back into the first Script, and so on. This can eventually overwhelm the system because so may Scripts would be running at the same time.

Instead we use Live Frames along with Variable Comparisons to manage the tour. For each subframe:

1. Add a Variable Comparison for the Scene

2. Make the Frame a “Live Frame” with “Reset when condition is false” set to “true”

5. Create a Script for each scene and launch it from the corresponding Director Frame

6. Now add the 360 Media to the scene Script

1. Drag a 360 Media Playable into the Frame

2. Click to add Media. The first time you do this you will be prompted to create a new 360 Media Item catalog:

3. Click to add a link to the actual image file. You may need to add the image to a Media catalog if you haven’t already. Your Resource should look like this:

4. Now you can add anchors using the new 360 editor. Click the viewer button in the toolbar and you should see this image editor:

5. Create an anchor using the editor on the right and drag it into position for a Hotspot to move to Scene 2:

6. Create a Subframe and add a Hotspot to this anchor:

7. Add a Select event Frame:

8. Set the Current Scene variable to Scene 2:

7. Repeat for all other Scenes

Once you’ve configured all of the Scenes and Hotspots, you should be able to move around the 360 world by simply pointing & clicking the Hotspots. You can add text, change colour, or even use your own image for Hotspots.

8. Make sure images have a common “North”

Once you’ve set up your tour, you may notice that some transitions are disorienting because you are suddenly looking in a different direction. It’s important that all images have a common concept of “North” so that the user feels like they’re actually moving around the scene. Choose a landmark that’s easy to identify in all the photos and use this to calibrate the images by rotating the image to point at this landmark and clicking “Set North”: