...
Quick Links
| Table of Contents |
|---|
...
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.
...
...
II. 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.
...
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. Users Learners can visit and revisit any scene Scene in any order they choose. We will use an Enum to track which scene Scene they are currently visiting.
Open the Enum slideout:
...
Create a new enum named
...
tour scenes:
...
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 360 Tour Director”Director :
...
2. Create a global variable Global Variable using the new Enum called “Current Scene” Current Scene :
...
3. Create a “Setup” frame and set the variable to Frame
Drag and drop in Variable for the first
...
Scene you want rendered:
...
...
VI. Create Subframes for each scene
This is the tricky part! Since users learners can move between scenes 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.
...
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 catalogCatalog:
...
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”:
...