New beta feature in Storyline 360: Interactive 360° images

Today we released a new beta 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. 

What’s a beta feature? 

Beta features are early versions of features we’re adding to Articulate 360. We release features in beta to get your feedback on how you’re using the feature and what enhancements you’d like to see. 

This first release of 360° images is just our starting point for this feature. Our engineering team is adding more goodness to 360° images, including making them accessible to all learners. Please let us know what other enhancements you’d like to see using our feature request form.

77 Replies
John Reiter

I have been using 360 degree images as a web object. 

I'd like to create a map with a series of panoramas. The student will need to "navigate" a specific path in order to continue on in the lesson.

I can create a map similar to what what you see real estate agents do. I just can't pass any variables back into to STL 3.

Does anyone know of an example that tracks how a student navigates?

 

Jerry Donney

Is there a zoom feature for the 360 image view?  Or is a zoom in and out planned?  For example, as you spin around the image, you could zoom in a bit on objects.  I created a zoom area with my own transparent zoom + and zoom - buttons that works.  I imagine a touch device would already have "pinch and zoom".

Annie Kim

Hi Jerry,

While you can pinch and zoom on mobile devices, there isn't any zoom functionality specific to 360° images currently. You can submit a feature request, but we'd also love to hear more about what you're looking for. Do you want to have a zoom region (similar to the stage) or be able to zoom with a mouse wheel? 

Jerry Donney

Yes, zoom with the mouse wheel so learner can look closer at objects.  Also, is it a bug that the "Hotspot"  shading area is visible when in Preview?  The 360 view already provides a hand cursor and the pulsing icon. The teal "hit' area is distracting and should hide in Preview similar to regular SL hotspots.  And Thank you, it's a cool new feature.

PJ Palomaki

This is a great addition, well done! Couple of comments:

  • Please add 360 video support! (requested this via feature request form)
  • Custom markers or at least custom icons (apart from default and Content library ones)
  • As Mehdi Achbaro mentioned, transition between two 360 images is not smooth if placed on separate slides. Is there a way to actually achieve similar transition as on the video above?
Ren Gomez

Hi PJ,

Thanks for the added feedback! 360 video support and custom markers/icons have been shared with the team, so I'll add you to the list of folks who have requested it.

As far as the 360 image transition, Annie mentioned here that it's an intentional nudge to provide an indication to the user. The team is considering making that a toggle option, so we'll keep you updated here!

Mehdi Achbaro

Hi, 

There is a weird behavior with the hotspots. When I click a hotspot It shows the color of the hotspot even if I have unchecked reveal hotspot in the settings. Also whenever I click somewhere in the 360 image the hotspots shows up again all at ones!

Did someone found a solution to this? 

Here is a video of the issue.

Thanks.

Ren Gomez

Hi Mehdi,

Thanks for reaching out and sharing that video! I couldn't tell when you were clicking or hovering, but when the Reveal Hotspots option is unchecked, this is what should happen:

  • No initial visual cue displays for visited or unvisited hotspots.
  • Hovering over a hotspot area changes the cursor to a hand.
  • Clicking any area of the hotspot displays its entire shape and thickens its border.
  • Visited hotspots become a darker color.
  • Clicking outside of a hotspot causes visited hotspots to briefly flash. (Unvisited hotspots don’t appear. Visited hotspots are darker.)

It looks like the expected behavior is occurring, but let us know if something isn't matching this!

📚 360 Degree Images: Understanding How Hotspots Behave

Mehdi Achbaro

Thank you Ren Gomez for replaying. 

Actually that last point ''Clicking outside of a hotspot causes visited hotspots to briefly flash. (Unvisited hotspots don’t appear. Visited hotspots are darker.)" that we want to avoid, we don't want any hotspot to appear, we want it to be completely transparent. I don't know if there is a work around it, I will keep trying to find a solution. 

Thanks again. 

Jerry Donney

It would be nice if you could add additional editing features to the hotspots, like transparency, and separate outline and fill settings.  Also, the ability on preview to have a pulsating outline on hotspots with no fill area revealed, similar to a Marker with a transparent fill and no icon.  Thanks for this new 360 function, looking forward to using it in future projects.

Mehdi Achbaro

Hi,

We recently found a bug on iOS devices, when we move from a 360 image to another one using hotspots randomly the course restarts, the whole browser refreshes. I have tried to find out what creates the issue, I went and deleted element by element, once I delete the 360 image and add a simple next button it works fine, I have tried only taking off the hotspots and keeping the 360 image and adding a next button, but the bug still exists so the only way we get rid of the bug is by deleting the 360 images.

I have tested on other android devices here below you will find the results.

  • iPhone 12 → iOS 14.8 → Safari, Chrome, Firefox → The course restarts randomly
  • Samsung Tab S7  Android 11 Default brows, Firefox → Everything works fine
  • Samsung Tab S7 → Android 11 → Chrome → At some point randomly the 360 image disappears leaving a white BG

You also find here attached a video of the bug.

It will be awesome if you can address this issue on your next update 😊

Thanks. 

Iris Schlabitz

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?

Lauren Connelly

Hi chris!

I'm excited to share that we just shipped Storyline 360 (Build 3.56.26145.0) today! In 360° interactions, you can now add alt text to images and videos to make them accessible to screen reader users.

Make sure to update Storyline 360 in your Articulate 360 desktop app! If you have any additional questions, you can reach out to us in this discussion or in a support case.

Crystal Horn

Hi there, Iris. With today's update to Storyline 360, we've also fixed the issue with 360º images not appearing when you first view your Storyline block in a Rise 360 course. 

Let me know if you're not seeing the fix after republishing your Storyline interaction and adding it back into the Rise 360 lesson. 

chris boucher

Thank you Lauren, this is helpful. When it comes to the 360 images themselves, I see the option to add Alt Text, but it appears inactive when I am inside the interaction. Is it possible I am missing something? 

It would be really convenient to add Alt Text to the 360 images from there. I see I can do it from the Media Library, but for 360 images it can be difficult to decipher what's what, since you aren't looking at the images from within a 360 viewer.