New feature in Storyline 360: Interactive 360° images

Jul 27, 2021

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. 

177 Replies
Michelle Kenoyer

The 360-Degree Image feature is a really nice enhancement! Great work, everyone!

I just read Katie Riggio's article on accessibility support for this feature, and she commented that the Articulate team is still working on screen-reader support and keyboard navigation.

I tested out a brief interaction created with this feature and noticed that, although it is possible to navigate around the 360-degree image with all four keyboard arrow keys, there's currently (apparently) not a way to tab or navigate to a hotspot and select/open it.

Any ETA on when more accessible features, like the ones Katie mentioned, might be ready? Thanks in advance--and thanks for always working on improvements to SL360! :)

Annie Kim

Hi Michelle, thanks for the feedback!

Even though accessibility is still a work in progress, you should be able to tab to the different objects on a 360° image and then click the spacebar to open the labels. We are aware of a bug where sometimes the focus goes from the slide directly to the "Back to top" button and skips over all the markers and hotspots on that image. If that's what you're seeing, then going to another slide and coming back will sometimes magically fix that. 

We will continue rolling out accessibility improvements with every monthly update until we're done!

Jeanette Abrahamsen

Is there a way to pin characters from the Storyline library to a 360-degree photo so the character moves with the photo as users explore other parts of the image? If I add a character on top of a 360-degree image, the character stays in the same spot on the screen while the background moves behind them. I can shoot new 360 photos with real models and can think of some workarounds to get them to change their facial expressions if the user gets a question wrong or something. But I was hoping a feature like that would already exist, I just couldn't find it anywhere. Thank you.

Michelle Kenoyer

Thanks for the fast reply, Annie! In the item I was testing, this lack of focus/inability to tab to the different objects is happening consistently, but to be fair, the .story file containing the image has only one slide. I'll create another test 360 image item that contains more than one slide to see if that remedies the issue. Thanks again!

David Helton

Love this new feature but would be nice to be able to load a series of images to create a VR/table turn still interaction for like product review. The ability to have a quick way to do a 360 Product Viewer with hotspots and interactivity. If this already is able to let me know as I have clients that love the ability to take photos of products and then view in a table turn-style viewer with hotspots detailing aspects of the product. I am newer to Storyline so any help would be great. If this feature is not readily available it would be a nice added bonus to have as an insert like this new 360 image feature in beat.

Annie Kim

Hi Jeanette,

That feature doesn't exist officially, but I was able to find a hack a couple months ago where I added Atsumi to my 360° image. You can see my Review example here.

I did this by finding the 360° image in Media Library, clicking the Edit button on the bottom right, choosing Paint, adding Atsumi (I had previously exported the character) on top of the image, and saving the new image. Then the image in Storyline should update so that the character is now there and is part of the 360° image so it doesn't stay in the same spot while the image is being moved around. Hope that helps!

Annie Kim

Hi David,

Correct me if I'm wrong, but it sounds like you want to have a 3D object vs a 360° image. That's not currently supported, but you can submit it as a feature request here if you would like to see this in the future. This forum thread might also be helpful to you as Tyler gave some information about how to add 3D objects using the Web Objects feature. 

David Helton

Thank you for the reply. Having the ability to insert 3d objects would be a huge plus and something Articulate should really consider. I have added it to the new feature request...which I did several times a few years back so hopefully, it will stick this time. What we currently do is table-turn style photos of products and then build a product 360 with hotspots and interaction embedded. So we take a series of images and then load them into rows...end result is the user can grab the product and rotate around the actual product and not the world like the current beta 360 in Storyline. If Storyline had an option to load a series of images and then when the user clicked and dragged around the object it would flip thru the series of images giving the end user the feel of rotating the product. Like this web-based code example:

https://preview.codecanyon.net/item/easy-360-product-viewer/full_screen_preview/19294733?_ga=2.83695702.1352589150.1633007309-524644463.1629388225

But having the ability to have all this inside Storyline and not have to have a web-based option or web object.

Thanks again for the sample hack you provided and the comment.

Jerry Donney

Photoshop has an 360 image editor , so you can drop 3D objects anywhere on the 360 image space.  You can then add subtle shadows etc. to make it look like it was there.  Once you save back out to 360, you can't go back and separate.   I also think 3D object support would be great to have in SL.   

Edward Hoke

About that 2:1 ratio...

So I have been experimenting with creating 360 Pano shots in my iPhone (since I don't own a 3d cam at this time), bringing those into Photoshop in their Pano editor and converting to a 2:1 ratio - the editing settings in the software are 16:9, 5:4, 3:2, and then there is a freeform, and I can set to the recommended 2:1. In every instance of a 2:1 ratio when I put into a SL slide I get dimension errors - and if clicking through, it does look pretty wonky. I would never use the results in a class. 

I'm sure I am missing something and I am hoping someone in eLearning-space here can suggest something to help with my own images. Many thanks! And, thanks to Articulate for this feature!

Ya'll still haven't fixed things from 8 years ago - but that is a different topic! 

Jerry Donney

I like the new 360* image support, but to be practical we are going to need a way to support multiple camera positions in a space (simulate walk-thru).  We can add the new image to next slide, but if you have direction arrows to move back and forth between slides (photos) we need to be able to SET initial image coordinates on the fly in a "Trigger".  Is this a feature request I can make?

Becca Levan

Thanks for reaching out, Bobby!

You didn't miss anything. The ability to Show All on Hover is not a feature included with the markers on 360-degree images at this time, but I'd like to point out a feature on our roadmap for Tooltips when hovering that may help your interaction in the future.

We value your input! Could you share more about how you'd use this feature for our team to review? Submit a Feature Request.

Denise Hargett

I am working on building a process map. I thought that using a 360 degree image was a great idea at first. I have images of all my machines and then made gifs of the actions that each machine performs. I just tried to insert an image of the first machine and it doesn't move with the 360 image like the hot spots. Is there anyway to accomplish this? HELP! Never imagined pictures wouldn't move like the hotspots and markers. 

Jerry Donney

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.  

Denise Hargett

Yes, you did great. I followed your instructions to the letter. My problem occurred at the point when I Merged Down in Photoshop. The images became so grossly pixelated that I could not use them. And of course could not edit them because they were now merged with the base (panoramic) layer. This happened every single time with every single image I tried to merge down into the panoramic image in Photoshop 2022. Images were clean and clear until I selected the Merge down function. This even happened with the text's that I typed on the walls. Heavily pixelated after I merged down. I spent a week trying to figure this thing out, seemed like such a silly, simple thing-I have never thrown in the towel. I have a huge project explaining a manufacturing process where a dozen or so pretty complicated machines and assembly lines are used. I had everything (maps, assets, gifs) collected and was ready to build using the 360 images in Storyline. The success hinged on being able to insert the machinery images into the Panorama image first before inserting into Storyline. Never dreamt that I wouldn't be able to do that after watching the YouTube video. So I bragged to my manager who bragged to the Director of our division about the cool 360 degree output and the interactivity. It will be done by end-of-the week but not what I described. My pride is grossly wounded and will not be promising imaginings that have not been tested first.

Thank you for taking the time to respond. By the way, when I first opened Photoshop, I received a message that Photoshop would be discontinuing to support 360 functions and encouraged users to look at their other new 360 products. ???

Cheers,

Denise Hargett
Olympia I VSPOne I Lab Trainer Learning and Development
8719 Commerce Pl DR NE, Suite D, Lacey, WA 98516
P: 360.529.8616 I C: 360.480.9572 I denise.hargett@vsp.com I VSPOneTraining@VSP.com
One team. One Vision. One network.
[cid:image001.png@01D7CFE3.92E3D6D0]

NOTICE: This message is intended only for the individual to whom it is addressed and may contain information that is confidential or privileged. If you are not the intended recipient, or the employee or person responsible for delivering it to the intended recipient, you are hereby notified that any dissemination, distribution, copying or use is strictly prohibited. If you have received this communication in error, please notify the sender and destroy or delete this communication immediately.

Leslie McKerchie

Hi Denise!

I'm not sure if you intended all of this information to be included in a public forum reply, so I wanted to make sure that you were aware. Please click 'View' vs. 'Reply' to pop into the forums directly and edit your reply if needed.

It sounds like your questions are specific to Photoshop, but if we can help you with any of your Storyline 360 questions around 360-degree images, please let us know.

Also, your email signature came through when you replied via email. You can remove that if needed by clicking ‘Edit’ beneath your response. Here’s a quick Peek video if you need help.