I am trying to make a google maps style interaction with a panoramic photograph. I want to be able to hotspot different places in order to take you to other pages of information. So far i am thinking that it may have to be done outside articulate storyline 2 by providing URL links. Does anyone have any suggestions or advice?
You could try to have a map, and then hotspot on the right, (for example), so that when people hover over it, another layer is opened up (hiding the first), and then the previously hot-spotted area is now on the left of the image.
Not sure how practical this would be in reality, as would need to be set up to go back and forth over multiple layers, but it might work.
Have a look at the first example here. This panoramic image is part of a group that also includes other elements (in this case Markers, but it could be hotspots or buttons with JumpToURL triggers as well). The entire group is moved horizontally with motion paths
Hi,
Not quite sure of the details, I was really thinking aloud aloud, but seems
that this might work, as I have seen similar things done by using layers to
highlight parts of an image.
I've created a long image for the navigation panel, and grouped buttons on to it.
(so far only buttons 1 and 2 change states and layers when you click on them)
I followed your advice on creating a motion path for the group,
The part I can't figure out is – how to make the group stop moving when it reaches a certain point.
I'd really appreciate your any advice you can give me on this issue
Thanks in advance 🙏
Hi Danit, it's been a long time since I did this example and I don't have the source file handy right now. But I think I used a counter variable that was increased/decreased by the <> buttons. Based on the variable reaching a low anf high value I disabled the <> buttons, so that the image couldn't be moved further to the right/left. Hope that makes sense.
7 Replies
You could try to have a map, and then hotspot on the right, (for example), so that when people hover over it, another layer is opened up (hiding the first), and then the previously hot-spotted area is now on the left of the image.
Not sure how practical this would be in reality, as would need to be set up to go back and forth over multiple layers, but it might work.
Have a look at the first example here. This panoramic image is part of a group that also includes other elements (in this case Markers, but it could be hotspots or buttons with JumpToURL triggers as well). The entire group is moved horizontally with motion paths
Thank you Michael and Bruce
Very helpful!
Bruce is the panoramic inserted to the articulate window as you would a video? Also how do you add the left and right controls
Hi,
Not quite sure of the details, I was really thinking aloud aloud, but seems
that this might work, as I have seen similar things done by using layers to
highlight parts of an image.
Hi Michael,
I love the motion path animation example you made with the sights of berlin!
It inspired me to create a scrollable navigation panel - http://telem.openu.ac.il/Danit/10408/0603MotionPathGroupedButtons/story_html5.html
I've created a long image for the navigation panel, and grouped buttons on to it.
(so far only buttons 1 and 2 change states and layers when you click on them)
I followed your advice on creating a motion path for the group,
The part I can't figure out is – how to make the group stop moving when it reaches a certain point.
I'd really appreciate your any advice you can give me on this issue
Thanks in advance 🙏
Hi Danit, it's been a long time since I did this example and I don't have the source file handy right now. But I think I used a counter variable that was increased/decreased by the <> buttons. Based on the variable reaching a low anf high value I disabled the <> buttons, so that the image couldn't be moved further to the right/left. Hope that makes sense.
Forgot to mention, I used a similar scheme for Up/Down/Left/Right buttons in this example here.
This discussion is closed. You can start a new discussion or contact Articulate Support.