Forum Discussion
Demo: Detective Security Leaks within 360 panorama
I used to love using 2D office layouts for creating learning activities for different course topics. Learners can explore the virtual office and learn to deal with whatever might actually happened in real world and that always leads to a good learning performance. So when Storyline add the 360 image function, I think I should transform the virtual office from 2D to 360 panorama and see how it works.
Below are the functions I want to test in the new 360 image:
- Zoom in/out function: I got this worked, however the tooltip won't show while the 360 image is zoomed in, I hope Articulate team will fix this. I think I don't actually need zoom function in this demo but I can see in different applications will need it.
- Jump between different 360 images: I am satisfied with this, they can be in different slides or different layers.
- A message(layer) shows properly no matter it is zoomed or not: it won't be a problem if no zoom function here. But since I use zoom function, and a layer will also be zoomed when opening. It took me a little time to figure out how to zoom out first when a layer opens so it will show the correct size I want.
- The shown message(layer) hides automatically(without clicking close) when user keep exploring: it also works as expect in a 360 image environment.
One thing I found weird is if I click on any non interactive area of the 360 image, the hotspots I've interacted with will also show at the same time. I assume that's a bug for beta version.
I think that would be a feature over a bug just to guide people to a hotspot
This is awesome, Joanne! I love the badges at the top to let me know how many I have left to find. And the topic is so perfect for 360° images. Thanks so much for sharing this example with the community!
The hotspot behavior is expected. You can learn more about that here. I love the ideas you shared to help us improve the 360° learning experience. Would you mind submitting a feature request?Thank you Sarah for explaining the behavior of the hotspot, I can see that behavior could help users aware of where they have interacted. I've updated the demo by adding hints because I found that it will be more difficult for users to find all the "correct" hotspots than in a 2D environment.
I've submitted a feature request for zoom function in 360 image. And I also like having states for 360 image so for example I could change the whiteboard to be cleaned after users click the related hotspot. And I've submitted that too.
This is great Joanne!
Would you mind sharing which camera you used? Did you need to edit outside of Storyline 360 first?
Thanks!
Hi Michael, the 360 images I used are open-source 360° photos from Flickr.
Great example, Joanne! Can you explain how you created the zoom effect?
At first, I used the zoom function built in SL with the jump to time triggers to create the zoom effect. Though I got that work it would also zoom layers too. So I had to add more triggers to fix it (described in the third point of the article). After I post, one day an idea came to me that since we can use JS to scale an image, maybe it could scale the panorama image too since it is a jpg file. And then I instead SL zoom function with JS code and it works perfectly.
The JS code I used is:
var myElement = document.querySelectorAll("[NAME OF THE PANORAMA IMAGE']");
gsap.to(myElement, {duration: 0.5,scale:2});
This is super well done, Joanne!
Hi Joanne this is great - did you create this in storyline and then add the slide in Rise?
Also are you able to share your source file?
Hi Jane, it is a Storyline demo, though it should be able to add to a Rise course. I am afraid not able to share my source file.
- Hi Raylan,
I've tested the demo on Chrome, and it worked as it should. Not sure what problem might encounter with your question, could you explain more?
Hello, in case some of you wants to have the steps to do it :
You can zoom in and zoom out by executing 2 javascript here :
To zoom in :
var panoramaImg = document.querySelectorAll("canvas");
gsap.to(panoramaImg, { duration:1, scale:2 });--> You can call the variable with any name
--> The queryselector must be All since it's the Canvas (when inspecting the module, you see that the image is "canvas")
--> Duration can be changed (1 is good for the zooming effect)
--> Scale can be changed too (2 is x2, don't do zoom too much if the quality is not high)
To zoom out :var panoramaImg = document.querySelectorAll("canvas");
gsap.to(panoramaImg, { duration:1, scale:1 });Like before but the scale is 1 (100% of the image)
Also, don't forget to execute the javascript with a trigger (here by clicking on the icon 1 to zoom in and on the icon 2 to zoom out)
Don't forget to change hide the icon 1 when icon 2 is normal, hide icon 2 when icon 1 is normal
Don't forget to hide the icon 1 when you click on it, hide icon 2 when you click on itYou can't do it by states (except if you have the solution, in this case, please share us !)
One thing to remember... querySelectorAll gets ALL elements of the type 'canvas' in your project. And so the variable is a HTMLCollection. If you only have one canvas element in your Storyline that will not be an issue...if you have more.. do use either querySelector to get a specific one...or just this coding to get a specific one out of a collection.
var panoramaImg = document.querySelector("canvas"); // if you have just onevar panoramaImages = document.querySelectorAll("canvas"); // if you have more//then you can select any specific on the collection like this.gsap.to(panoramaImages[1], {duration:1, scale:2 });
Hi everyone,
I have tried adding a new post but haven't had any feedback or direction.
I am trying to add a tracking of an interaction/knowledge check to the a 360 image. There is a link below to showcase more.
https://360.articulate.com/review/content/adcecfb0-8fa4-411f-b55d-fad1eb7b8dd3/review
The specific part I am looking at is Part 2 of the course, where the question stays in the same place even when the users is moving around the screen.
CAN ANYBODY HELP PLEASE?Thanks
Mekesh
Hi Mekesh. I've just replied on your original post about this example and we can see what ideas we can come up with there.
Hi Walter and welcome to the community! I want to make sure I understand. What has affected Windows? Can you share a little more detail about the issue and perhaps a screenshot so we can see what's going on?
