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. 
  • 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
Dave Ferguson

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.

Dave Ferguson

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.

Dave Ferguson

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.

  • The base layer has buttons to let you choose the three scrolling panel examples.
  • On the base layer:
    • A trigger shows the text boxes for base layer when the timeline starts,  so you see the introductory title and text above the selection buttons.
    • Three triggers to show one of the layers with a scrolling panel example  based on the selection button clicked.
  • On the example layers:
    • By default, the base layer is visible and its buttons will work.
    • There's a trigger to hide the text boxes for base layer when the example's scrolling panel is Normal.
      • I can't recall if this was necessary, but I did it once and left it for all three example panels as "visibility insurance."
      • Each of the example layers has its own title and text that appear in the same place as the base layer's text does.
  • The textbox layer (first example) has three textboxes in the timeline. Each box is set to Hidden. Hovering over a callout circle in the scrolling panel changes the state of the corresponding textbox to Normal, and returns it to Hidden when the mouse leaves.
  • The highlight layer (second example) is the most complicated. In the example, I'm explaining four different parts of a sample job aid.
    • Four callouts in the scrolling panel. Each has a Normal and a Hover state.
    • Four highlight shapes in the scrolling panel. Like the callouts, because they're in the panel they move as you scroll the panel (which means they stay in place relative to the underlying image).
      • Initial state of the highlight shapes is Hidden.
    • Four textboxes on the slide but not in the scrolling panel. Initial state of the textboxes is Hidden.
    • Triggers: when you click on a callout (e.g., Callout B):
      • Change the state of the corresponding highlight shape to Normal (HL shape B). In the example, the idea is to highlight a particular portion of the job aid.
      • Change the state of the other highlight shapes to hidden (shapes A, C, D). This turns off any other highlight that's currently visible.
      • Change the state of the corresponding textbox to Normal (Textbox B). The textbox explains the highlighted area. I put the box outside the scrolling panel so as not to obscure any part of the job aid.
      • There's an additional trigger for each textbox to turn it to hidden if any other textbox is made Normal (so, if the user clicks C, hide textboxes A, B, D).
    • The lightbox layer (third example) is the simplest:  click-on-a-callout triggers a lightboxing of the corresponding explanation slide. Lightboxing means I didn't need any "take me back" actions.

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.