Scrolling Panels: demo and details (Storyline 2)
May 15, 2017
I've been working with scrolling panels. Here's a demo showing a few ways to use them in explore/explain situations.
If you haven't tried them, scrolling panels allow you to present larger chunks of content, including controls, inside a rectangle that permits vertical but not horizontal scrolling. Basics for Storyline 2 here.
Creating a scrolling panel is easy:
- On the Insert toolbar, in the Interactive Objects section, click Scrolling Panel.
- Click and drag on your slide, just as you'd do when inserting a shape. You can resize the panel just like a shape.
How to get objects into the panel
Objects on your slide don't automatically go into the panel.
If they were already on the slide when you added the panel, click and drag them. Pay attention to what I call the drag point - the spot where you click and hold an object so you can drag.
If when you click, the drag point's inside the boundaries of the scrolling panel, you only need to move the object a few pixels. As long as you release it while the drag point is still inside the panel, the object will be contained by that panel.
If you release the object with the drag point outside the panel, the object will not be inside the panel.
If you add a panel and then insert a new object, even if it looks like it's inside the panel, it's not. Click, drag, and release when the drag point's inside the panel boundaries.
Use the timeline to check: objects contained by the scrolling panel are indented under it. In this example, txt Callout C is not contained by the panel; btn Callout A and btn Callout B are. (In the timeline, you may need to click the triangle to the left of the scrolling panel to see the objects it contains.)
When an object's inside a scrollable panel, you'll only see the portion of the object that's within the panel boundaries. For parts beyond the boundaries, you see only the object's outline.
How wide should your scrolling panel be?
At least 20 pixels wider than the object you plan to scroll. You can't scroll horizontally, and the vertical scroll bar takes up about 20 pixels. In my demo, the scrolling panels are each 380 pixels wide. I made sure my scrollable objects were no wider than 360.
When you insert a large object (like an image), Storyline will scale it so it fits within the dimensions of the slide. For a tall object, the width might be much smaller than you want. Here's what I do in that case:
- Drag the scaled-down object so its upper left corner fits in the upper left corner of the panel.
- Release.
- Use Picture Tools / Format / Size, with a locked aspect ratio, to change the width of the scrollable object.
If you know your panel's width, you can subtract 20 and enter the result for your object's width.
What about positioning clickable shapes and hotspots?
These interactive elements work just like other objects: when you first add them to your slide, they're not contained by the scrolling panel. Use the drag-point technique to get them contained. Then they'll scroll inside the panel, "staying in place" relative to the underlying object as in the attached demo.
If you want the clickable shape on a part of the scrollable object that's not visible at the start, use the panel's scroll bar to display the desired location inside the panel's boundaries. Move the clickable to that location, using the drag-point technique.
You could also drag your object completely outside the panel. Next, position all your clickable items. Finally, select all the items and the object, and drag the whole group back into the panel. This works but to me feels cumbersome.
Advice you've heard elsewhere: name your objects in a consistent, easy-to-understand way. The "highlight layer" section of my demo has four callout objects, four highlights (the shapes outlining sections of an image), and four text boxes. Naming conventions made setting triggers much easier.
8 Replies
Cool examples, Dave! Adding interactive objects to scroll panels has been a well-kept secret:-)
Adding this topic as a challenge idea. Thanks for the cool demo and source file, Dave!
You're welcome. I was having a hard time figuring out when the interactive stuff was on the panel, and when it wasn't, so I did a lot of experimenting. It took quite a while to figure out the drag point business.
As they say, good judgment comes from experience; experience comes from bad judgment.
Very cool example!
I upgrade to storyline 360 and not the B&C callouts don't work properly on the first example. They only flash up very briefly. Not sure if it's a bug or not.
Hi Tristan - I noticed the same thing, too. I reported the issue so the devs can take a closer look.
I had a "not working properly" (or "as expected") situation on the third scrolling panel (the timeline). I tried having "appear on hover" text related to each of the circles on the timeline -- show the year on hover, hide it again when moving away. But sometimes the year stayed visible, even after clicking another circle on the timeline. I couldn't find a consistent pattern, so I removed it from my demo.
I'll try recreating it and posting it as a question.
Tristan:
In Storyline 2, I ran into odd behavior elsewhere with states, so I'm wondering what happens to the disappearing callout circles if they don't change state when you hover. (I don't have Storyline 360.)
Background on the demo: so you don't have to piece it all out yourself.
Most of the action takes place on one slide, scroll panel demo, which has a base layer and four additional layers.
From an interface point of view, next time I'll include something in the explanatory textboxes to confirm the callout they belong to -- so it's easier for you to tell that you're reading the explanation for callout C and not A or B.
Get your scrolling panel on in this week's challenge: https://community.articulate.com/articles/using-scrolling-panels-elearning
Thanks for the inspiration, Dave!
This discussion is closed. You can start a new discussion or contact Articulate Support.