Forum Discussion
New feature in Storyline 360: Interactive 360° images
Today we released a new feature in Storyline 360 called 360° images. We think you’ll love transforming any 360° image into an interactive learning experience that invites learners to explore and engage.
Import any panoramic 360° image, pick an initial view, and resize for the perfect fit. Looking for images to experiment with? Try this collection.
Once you’ve imported an image, you can add interactions using markers, hotspots, and triggers to capture learners’ attention and add contextual info to the images they’re exploring. You can create custom markers and add hotspots anywhere on the image.
Finetune how learners interact with 360° images easily. Add progress meters to show learners their progress, and choose how learners navigate through the image to create the immersive experience you want.
Download the latest version of Storyline 360 to start experimenting with 360° images—and share your projects! We’d love to see them here in E-Learning Heroes.
Hey gang! Just a quick reminder, you can still share your 360° image demos and examples in our weekly e-learning challenge: Creating Interactive 360° Images in E-Learning #337.
Your example doesn't have to be anything complicated or overly polished. Whatever you come up with, we'll feature it in the recap post. Sharing your work in the challenges is a good way to practice 360° images while connecting with fellow users. Hope to see you in the challenge!
Loving this new feature! Used it in my latest E-Learning Challenges demo.
Can you please recommend a model/brand of camera to produce the equirectangular panorama jpgs?
Nice Jonathan! (Although, pushing it a little with adding Tina to the "...genius of...). Keep it going!
Thanks! Tina is credited as one of the five songwriters alongside the rest of the band and producer Bryan Eno. One of the most underrated bassists around and definitely a genius, in my humble opinion.
This is amazing! Now if I can figure out how to format an illustrated panoramic image to import. When I import the panoramic, it just gives a tight circular view. I read that it needs to be an Equirectangular panoramic. So I'll need to set all that up prior to import. I'm wanting to use illustrated background rather than 360 photograph to make an interactive video. Or gamified experience/tour. Any tutorials out there on how to convert a regular panoramic illustration into a equirectangular panoramic? I so want to learn how to use this feature! looks awesome!
Hi, Chris.
You can add alt text to the 360º image itself by going to Home > Focus order:
What we included in the update was the ability to add alt text to images and videos in a marker or hotspot label within the 360º interaction.
I hope this helps!
I have done a number of edits to the 360 panoramic images, like adding 3D PPT objects into the scenes, changing art work on walls, adding my own green direction arrows on the floors, etc. Just use the 3D panoramic import in Photoshop. Once you have the 360 image opened you can move to the position where you want the object to be/stay. Draw or paste it on a layer, when your finished editing you need to merge the new layer (Ctrl+E) down. Once you merge with 360 layer you cannot change it independently, so do it last before exporting. Then, under the 3D tab select Export panoramic image and replace in Storyline and the object/edit will move with the scene. Hope i explained that clear enough.
This seems like a really great feature - I'm excited to use it! Seems to perform well during my tests.
As an aside, I really like how the new markers work in the 360° image feature (having content library icons integrated, allowing resize, etc.). It looks really flashy and modern. 😊 Are you planning on updating normal markers to allow for this level of customization? It would be great.
second this!
Michael Bauer,
I noticed as a default Storyline generates a variable "360Image1_VisitedItems". Creating a trigger like this should do what you are asking for. The value 5 aligns with the number of spots that i put on the 360 image.
I'm trying to accomplish this myself-- with no way to change the state of a marker (i.e. to hidden), is there a way to force a user to click each marker before proceeding?
Hi Jeff,
I have done this by creating layers for each marker, providing a message like "there is nothing to see here currently" on the base 360° image. Then making a true/false variable for each marker and adding the triggers in the 360° image:
- First Marker: set "name of specific variable e.g. first marker" to true when user clicks "first marker".
- Second Marker:
- set "name of second marker" to true when the user clicks "second marker" and if "first marker" is true.
- Show layer "second marker" when user clicks "second marker" if "first marker" is false.
- Then add a trigger that leads to the slide/layer where the marker leads to, if all the previous markers are true.
Repeat the second marker steps, adding always the previous steps to be either true or false.
I also attach a screenshot of a first set of triggers. I hope this helps?
Fantastic new feature. I really like it a lot and it opens up tons of new possibilities. Are there any plans to include the 360° images into the translation export in the near future? Currently it does not seem to work. Thank you.
Hi Dominik,
Glad to hear you're enjoying the new feature! In more good news, we do plan on adding translation support in the near future!
Great news. Thank you Annie.
I am working on a lesson right now utilizing 360 images. I am using an Insta360 One to take the photos. I then edit out the monopod and downscale the image using Affinity Photo. I bought the Insta360 One three years ago for personal use. It needs really good light. I hope the newer cameras are more light sensitive.
I am working on a project that is teaching learners how to inspect a multi-room biology lab facility. It already has ten different 360 degree photos. Each one has hot spots and layers. I want the learners to click on each hot spot on a 360 photo before they can continue to the next slide.
I see that i can use variables visited and that Storyline has automatically created these variables. My problem is that i don't know which 360 photo is which.
I can't seem to rename the "360Image#" myself. I can have a file name at import, and the object can be named in the timeline, but these names have no impact in the list of variable name list.
How do identify that a specific photo belongs to the variable "360Image1_VisitedItems"?
Hi Michael,
Unfortunately there's no great way to figure out which photo belongs to which variable except by clicking the Use Count and seeing what slide it's on like in the screenshot below. I know it's not the most ideal, but it matches the behavior with sliders and dials. Personally I've found the best practice to be to rename the variable as soon as I add a picture to my project.
Not sure why you're having trouble renaming the variables, but hopefully this gif will help! I renamed the first variable by just clicking the name. I renamed the second variable by double clicking and renaming in the dialog that pops up. Let me know if you still can't rename variables following either method!
