Scrolling Panels: demo and details (Storyline 2)
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.
- 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.