New feature in Storyline 360: Interactive 360° images

Hello Jurgen, and welcome to E-Learning Heroes. 😊

This feature is exclusive to Storyline 360. You can see a comparison of versions here.

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?

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

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? 

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.

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?

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!

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.

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

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. 

Adding a toggle option for handling repeated images would be great, as I find the nudge helpful and wouldn't want to lose it... 

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.

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. 

Hi Mehdi,

Thanks for bringing this to our attention! Are you able to share your .story file so we can investigate the issue? You can attach it here or email it to me directly. If you're not able to, it would help to at least have the Review link. 

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 Annie, 

Sure! I can email it to you but I wasn't able to send you a direct email from your profile. 

I just sent you an email so you can just reply to that with your story!

second this! 

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?

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.

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. 

That is great news Crystal, thank you!

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.

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!