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

I. 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.

Open

By Jürgen Matern / Wikimedia Commons, CC BY-SA 4.0, https://commons.wikimedia.org/w/index.php?curid=72732492

II. Upload images to Storyflow

Open

These images can be found in this zip file:

Open

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

III. Ensure that videos are configured to stream

360 videos can be extremely large and can use up substantial storage space on your device. If you are using 360 video (or many large 360 images), you can configure them to stream to your device instead of being downloaded. In the media browser, click the item, and configure the streaming behaviour to be “Recommended” or “Required”:

IV. 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. Learners can visit and revisit any Scene in any order they choose. We will use an Enum to track which Scene they are currently visiting.

1. Open the Enum slideout:

2. Create a new enum named tour scenes:

3. Add an item for each Scene:

V. Create a Director Script with a Global Variable controlling the Scene

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

2. Create a Global Variable using the new Enum called Current Scene :

3. Create a “Setup” Frame

4. Drag and drop in Variable for the first Scene you want rendered:

VI. Create Subframes for each scene

This is the tricky part! Since learners 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”

Note: the option “Reset state when condition is false” only appears after you toggle “Live Frame” on

VII. Create a Script for each Scene and launch it from the corresponding Director Frame

VIII. 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:

IX. 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.

X. 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”: