using buttons in sliders
Jan 27, 2015
Hi everyone,
I've been trying to build a "virtual tour" in Storyline, using a panoramic image inside a slider. The issue I'm running into is that we need to have buttons for certain areas on the image that can show the learner more information about that area. We wanted to have the buttons slide along with the image in the slider and I couldn't find a way to embed the buttons inside the panoramic image states, so I had to put them into separate layers which are triggered along with the panoramic image states when the slider variable changes. It requires a lot of layers, one for every slider variable, and there's going to be so many buttons on each layer that it will be really difficult to make any changes to the project down the road. Here's how it looks: https://9da44a250a5d11b728fff8c9abb8e41a24984299.googledrive.com/host/0B3EVHgFC2misMDNFdW5NSUZUWVk/ and I've attached my demo file so you can see how it's set up. There's only 3 clickable areas on the image in the attached file, but the final project we're building is going to have lots of areas that will need to display extra information, so I'm hoping there's an easier way of building this!
Does anyone have any suggestions on a better way of doing this (maybe there's a way to put buttons inside an image state that I'm not aware of?) or another way to do a virtual tour with buttons and extra info for learners?
Thanks for all your advice and help!
16 Replies
Have you considered grouping the image wit the buttons and the move the entire group, like I did here in the first example (image+markers): http://dev.keypointlearn.com/xcl73_SL2/Animations/V1/story.html
PS: Go WestJet!
That's fantastic, what a great idea - thanks Michael! I'll give that way a try. Thanks so much for your help!
Here is a slight variation on the concept of moving a panorama image: http://dev.keypointlearn.com/xcl73_SL2/Panorama/V1/story.html Again, instead of an image this could be a group of objects.
Nice example Michael! Thanks for sharing.
That's a great idea too! I like how you've set it up so you can switch between self running and manual, thanks for sharing your demos!
In case you need some info, here is a brief blog post about the setup: http://wp.me/p2BoUf-cx
Hi There,
I am trying to design this for a course I am creating but I can't seem to create the right motion paths. I was wondering if anyone knew of any tutorial or step by step guide available for me to recreate this?
Thanks in advance,
Hi Lucy
was an example of what you are after supposed to be attached or are you asking about the original post?
Hi,
Sorry yes I was asking about the original post.
Hi Lucy! I know that Michael (posting above) has some great blog posts related, but your best bet may just be to download the .story file and dissect it a bit :)
It's just knowing where the motion paths go as there is no way of viewing them. I am having difficulty replicating the example.
Hi Lucy!
This is a slider and you can see it on the bottom left of the image in the slide:
The 'movement' as you can see from the trigger panel is a collection of states on the image:
Hi Mike,
Could you help me with this interaction? I'd like to have my image automatically scan the slide, but I can't figure out how to do it.
I'm not sure what you are trying to do. It seems like you replicated the same image three times. The width of each of the images is 1256px, the dimensions of my example file are 1365px. The setup I used in my example only makes sense for very wide images (my example image group is more than 5100px wide). You image easily fits within the project dimensions and therefore would simply "scroll off the page" but not provide the panorama effect. Am I missing something?
Hi Mike,
I guess what I'm trying to achieve is zooming in on the image (I can make it bigger) and it pans across the screen. I'm confused on how long to make the motion paths.
Hi Katie! If a panning effect is what you're looking for, this tutorial might point you in the right direction. Is this what you had in mind?
This discussion is closed. You can start a new discussion or contact Articulate Support.