Forum Discussion
Help Needed: Using a Slider to Rotate a 360-Degree Image in Storyline 360
Use a slider in Storyline 360 to rotate a 360-degree image, similar to using the A and D keys for left and right movement. Any advice or examples would be a huge help!
- Nathan_HilliardCommunity Member
Linking these threads together for future readers.
See also: How to implementing 180-Degree Slider Control | Articulate - Community
- MichaelHinzeCommunity Member
Based on the screenshot, you are using a 360 image imported into Storyline. There is now way to control this built-in object with a slider & triggers. Also, there is no way to limit the built-in image object to a 180-dregree rotation.
- EswarkumarKanthCommunity Member
Thanks for the clarification!
I want to connect a slider to the 360-degree image, enabling the user to control the horizontal movement, similar to how the 'A' and 'D' keys work. I'm unsure which method would result in smoother interaction, so I'd appreciate your recommendation on the best approach. Please refer to the attached image. Additionally, instead of rotating the image a full 360 degrees, I only want to rotate it 180 degrees using the slider.
The process I’m describing differs from typical object rotation in product viewers (e.g., rotating a device with a dial). My image is equirectangular, commonly used for 360-degree panoramic views, and I only want to control 180 degrees of its movement through the slider.
Based on the instructions provided, the image can be rotated and moved using the keyboard keys (W, A, S, D), but I’d like to replicate this interaction using a slider instead of keyboard input.
I also came across a discussion here where someone mentioned difficulties with students using Chromebooks being unable to rotate 360-degree pictures on their touchscreens. They were seeking an alternative method, such as using a slider, to rotate the image. I’m facing a similar challenge, and I’d appreciate any guidance on how to best implement this functionality. - MichaelHinzeCommunity Member
I'm not exactly sure what exactly you mean by 360-degree image, as they are variations, e.g. an image imported into Storyline or a rendered animation from some 3D software. In the past, I have worked with 360-rotated device images. If you have the option to export your 3D image as individual bitmaps, you could add them as states of a Storyline object and then change the object state based on the slider variable's value. See these old example here (examples 4-6) https://dev.keypointlearn.com/xcl74_SL3/DialsV1x/story_html5.html This was done with dials, but the concept is the same.
- MirandaMiller-8Community Member
MichaelHinze this is a great example and something we want to do for one of our projects this month. What image file types did you use/import to create the rotating 3D image (drone and black box)? Our engineering team creates a plethora of image types but I don't know which to ask for and which will be compatible in storyline to do a similar interaction. Would love to connect!
- MichaelHinzeCommunity Member
Here is a list of supported image file formats in Storyline: https://community.articulate.com/kb/user-guides/storyline-360-adding-pictures/1120815
- PriyankaOjha-11Community Member
Hi MichaelHinze. This is an amazing set of examples that you shared. Do you have the storyline versions of these examples? Thanks!