Forum Discussion
Using Slider with Markers or Hotspots
Am I trying to create something that is impossible? I get so excited with all of the neat tools that Storyline and Rise offer that my imagination runs wild! I was inspired by Tom's parallax effect video to create an interactive floor map of my building for new learners instead of the traditional floor plan. I drafted the map in Canva and then brought the picture into Storyline 360. Due to the size of the picture, (I only have half the floor drafted at this point) I decided to add a slider and make the picture the thumb of the slider. That way I can make the picture bigger on the screen for learners and easier to select the portion of the floor map they want more information on. That part I was able to do, easy peasy (thanks again Tom)!
Now comes the hard part that I can't get working. When a department comes into view, I would like the learner to be able to click on a department, which will cause a new layer to appear. I tried using hotspots but as you guessed, as the learner slides left/right the picture moves but not the hotspot. So, I moved on to markers and same thing! I tried making an additional slider which had the name of the department as the thumb and that did not work very well or look right. Am I going down the wrong rabbit hole or am I in the wrong wonderland entirely, one where sliders + hotspots/markers collaboration does not exist? I am attaching a copy of the story in case someone has a better idea.
Hello IlianaBaez . Here is the .story file. Please note that you need 2 triggers to move and automatically keep moving the map floor in each direction. And an important tip: first create a Group with your image (the map floor) and a shape (whatever it is) hidden behind it. Then apply the motion paths to this Group. Next, you can add any clickable element to the moving Group: set the clickable element on the map, cut and paste it after selecting another element in the Group. That's it. If you apply movement paths to your large image, then create a group with other elements, this will cause problems. I hope this helps.
7 Replies
Hello! ThierryEMMANUEL, love your option! We were thinking of the same evolution of this story which is allowing the person to change floors. Would you please be able to share the .story with me so I don't have to "recreate the wheel". Thanks for your assistance with this!
Hello IlianaBaez . Here is the .story file. Please note that you need 2 triggers to move and automatically keep moving the map floor in each direction. And an important tip: first create a Group with your image (the map floor) and a shape (whatever it is) hidden behind it. Then apply the motion paths to this Group. Next, you can add any clickable element to the moving Group: set the clickable element on the map, cut and paste it after selecting another element in the Group. That's it. If you apply movement paths to your large image, then create a group with other elements, this will cause problems. I hope this helps.
Hello IlianaBaez . I have a solution for you, provided you don't want to use a slider ABSOLUTELY. I tried to put it into practice a few weeks ago on a professional project but preferred to abandon it for several reasons. The main one is that the slider thumb won't accept very-very large images without degrading visual quality.
So, I started from 0. I grouped your floor map with markers, clickable shapes, buttons (whatever you want, except hotpots! which don't accept being grouped) placed on the areas to be explored. This group has 2 motion paths (left and right). And I suggest you place 2 zones on the left and right of the screen, which you simply hover over with the mouse to move the group (image AND all clickable elements) and thus move around the layout. And that's it! The advantage is that you can customize everything as you like. You can even expand your floor map. You can add clickable elements at any time, and therefore as many additional layers as you like. You can change the scrolling speed of the shot, if you find it too slow or too fast. And most of this demo is created in 10 minutes.
Check out the Review link and let me know if this solution meets your needs. If so, the .story file is at your disposal, of course.https://360.articulate.com/review/content/1aa96be0-361e-44e0-bc89-5fcdb50fbee6/review
NB : I've placed clickable zones on Kitchen / Pharmacy / Pension / Restroom / Elevator
Remember, too, that the floor map could move... up and down.
It's a bit of a complex interaction where the hotspot needs to move in sync with the slider, following the same direction. You can achieve this by creating two motion paths on the hotspot (one for left, one for right) using relative start points. Then, determine how far the slider moves with each step in either direction so you can move the hotspot by the same distance, keeping it aligned as it follows the slider. The hardest part is figuring out which direction the slider is moving, so the hotspot can adjust its movement accordingly. I set up a basic example using a blue button to make the movement more visible on the slide. I placed the button over a specific part of the slider image. As that part of the image moves, the blue button moves with it. This way, the button is only clickable when that part of the image is visible on the slide — once it moves off the slide, the button moves out of view as well. This solution uses a few extra variables and triggers to make sure the slider works as intended. I know it can get pretty complex with more buttons moving along the slider image (more motion paths), but honestly, I don’t see a better option at the moment. There we go! Not totally sure if this is exactly what you had in mind, but hopefully it's close.
Let's try this again! Here is the story file.
Hi IlianaBaez,
I see your .story file attached—great news! I'll open this discussion up to our fabulous community!
Hope that you have a wonderful weekend!
Hi IlianaBaez!
Thanks for reaching out!
It sounds like you meant to include a copy of your .story file, but it looks like it didn't come through with your post.
Not to worry! If you'd like to try uploading that again, I'm sure our community can offer helpful design suggestions.
