I have a requirement to adjust a very wide flowchart in a scroll bar but I cannot make the scroll-bar work horizontally (left to right or vice-versa). Any help or suggestions?
It's possible to get this done but it takes a little trickery:)
Start by rotating whatever you want to have scroll wide 90 degrees counter clockwise and inserting into a scrolling panel.
Then create another shape. It can be anything. Don't worry, we can make this shape transparent later.
Group the shape and the scrolling panel. Notice how you get a rotation handle now.
Rotate the shape until the scrollbar is where you want it. In Storyline 1, I don't believe you could see the change in the preview. It works in publish.
When you're done, expand the group (don't ungroup or it will break the transformation) and select the shape, remove the stroke and make the shape color transparent.
Really strange. That one works as expected for me as well... It's publishing showing the image within the scrolling panel in HTML5 and Flash. I wonder if it's failing for you due to the large size of the source image?
You can cut the image into smaller pieces and put them on different layers with buttons that allow you to "move" to the left and right. It isn't as elegant as a scroll bar but will allow the user to view more content. Sort of how galleries work on websites.
Alternatively, you could use the Storyline 2's slider functionality to make it a bit more like a scrolling panel. Again, you would have to cut the image into smaller pieces, but it should give you what you are looking for.
I was able to get the horizontal scroll bar, but the picture, which I dropped in, would not show completely regardless of where the scrollbar was positioned. The picture was cut off and it was overly challenging to manipulate the scroll bar considering adjustments were based off the original vertical axis. I am sure that the workaround will work for objectives with smaller graphics involved. I will continue to play with this workaround, when I get the time. I am very surprised that the horizontal scroll bar option is not available.
You could also use 2 sliders. One is the slider, that the user drags, the other one is the content you could put in the thumb of the other slider that has the inverse values, so when you move one, the other one moves in the opposite direction.
But of course, this all depends on the type of content that you have.
19 Replies
Hi Sahil -
It's possible to get this done but it takes a little trickery:)
When you're done, expand the group (don't ungroup or it will break the transformation) and select the shape, remove the stroke and make the shape color transparent.
Nice trick, Steve! That'll be handy in the tool belt.
Thanks Steve! That's a great trick!
Awesome! How much trial and error did this take to figure out?
Figured it out by accident back in the SL1 beta a few years ago. In SL1, you couldn't see the rotation in the authoring space. It's improved a bit:)
This post was removed by the author
I am sorry to say but your way did not worked as expected. In the file it works but it doesn't work in published output! Please see attached grabs.
Strange. Works for me on my end in publish both in a slide and within a lightbox. Mind attaching a copy of your slide?
Sure Steve!
Find the file on this location:
Sample file
Really strange. That one works as expected for me as well... It's publishing showing the image within the scrolling panel in HTML5 and Flash. I wonder if it's failing for you due to the large size of the source image?
Yes Steve, the image is pretty large! So is there any alternative?
You can cut the image into smaller pieces and put them on different layers with buttons that allow you to "move" to the left and right. It isn't as elegant as a scroll bar but will allow the user to view more content. Sort of how galleries work on websites.
Alternatively, you could use the Storyline 2's slider functionality to make it a bit more like a scrolling panel. Again, you would have to cut the image into smaller pieces, but it should give you what you are looking for.
Here is an example of the option mentioned by Deanna: moving a large image left/right with motion path animations:http://dev.keypointlearn.com/xcl73_SL2/Panorama/V1x/story.html Instead of buttons, you could also have a slider 'drive' the movement.
Thanks Deanna and Michael, that's awesome!
Michael , can you please share the story file to me?
This post was removed by the author
Does not work in Storyline2.
What exactly doesn't work in SL2?
I was able to get the horizontal scroll bar, but the picture, which I dropped in, would not show completely regardless of where the scrollbar was positioned. The picture was cut off and it was overly challenging to manipulate the scroll bar considering adjustments were based off the original vertical axis. I am sure that the workaround will work for objectives with smaller graphics involved. I will continue to play with this workaround, when I get the time. I am very surprised that the horizontal scroll bar option is not available.
Michael,
Great solution for horizontal scrolling. Any chance you could share the SL file?
Thank you for this. Glad there's a workaround for this.
You could also use 2 sliders. One is the slider, that the user drags, the other one is the content you could put in the thumb of the other slider that has the inverse values, so when you move one, the other one moves in the opposite direction.
But of course, this all depends on the type of content that you have.
This discussion is closed. You can start a new discussion or contact Articulate Support.