Scrolling Horizontally using Scrolling Panel?

Can the Scrolling Panel be used to scroll horizontally.  As in the case of a picture gallery with thumbnails that user can scroll through and then click to see the larger image?

If not, are there any templates or examples of using Storyline to create interactive photo gallery slides? 

I am attaching the Storyline slide that I have so far.

44 Replies
Mike Enders

Brent,

Stephanie did a cool photo gallery slide recently.  It's different structurally, but still pretty cool.  Also, you can achieve the scrolling effect using layers.  Here's an example I did back in the beta.  The arrow in the lower right simple toggles the layers for the images on the bottom. It's only half-baked, but should give you a sense of how you can accomplish something similar.

Hope this helps!

Mike

Brent Hirata

Hi Mike,

Thank you for the samples.  Yes, I did recall seeing Stephanie's creative photo galleries.  They are wonderful but seem limited in the amount of photos that you can reasonably display.  I think your example is closer to what I was thinking. On top of that wouldn't it be great if iPad user could do a finger swipe horizontally and have the thumbnails shift.  =)

Michael Grady

I have been able mimic a swipe feature by using: hotspots w/mouse hoover over, a rectangle shape scrubber bar, another shape for the slider (smoke-n-mirrors), and multiple layers.  That 'group' is on the base layer, triggering to the correct layer.  The layer properties allow for interaction with the base layer group. 

Robert Lengacher

+1 this feature request.

Hi everyone, I was able to find a workaround for this following these steps:


  1. Draw a background shape for the scrolling panel. A vertically-oriented rectangle works well.

  2. Draw the scrolling panel on the background shape with the same vertical orientation.

  3. Insert the image (or I guess text?) that you want to scroll horizontally.

  4. Rotate the image Left 90 degrees

  5. Drag the image into the scrolling panel. (Aligning top edges worked best for me.)

  6. Group the scrolling panel and its background shape.

  7. Rotate the newly created group Right 90 degrees and position where you need it.

  8. Voila! If all goes well your horizontal scrolling panel may just work.

Here's the working demo with a scrolling ruler.

Here's a Screenr where I walk you through the process.

Liz Guilfoyle

Think this is great, however I'm experiencing some troubles.  I am wanting to use this feature to emulate a scroll bar for a large data table. 

The desired outcome:  The image opens at the top left corner of the image, then the user will use the scroll bar to view columns to the right.

I also noticed this behavior was the same for the samples both current and from 2013.

Once I have the scroll setup, the image begins at full scroll; so instead of viewing the table at the top left corner, it is showing the image at the top right corner.

I have tried changing the initial placement of the image into the scroll and palying with different sizing to no avail.

Also, maniplating the image once placed seems to agitate storyline

Pascal Smet

I used this solution, and rotated instead of 90° clockwise, I rotated 90° counterclockwise. In that way the horizontal scrollbar starts on the left, which is what I want. The thing now is that the scroll bar is on top instead of bottom. But hey, I can live with that solution today.

I do think a horizontal scrollbar implemented by Storyline would be better ;-)

Teresa Kelley

I am the WebServant for an Organization.  I have some Web Design, Graphic Arts & Desktop Publishing experience,   I am wanting to incorporate your design on my home page for flyers, announcements, news & events.  Would you please contact me or direct me to a tutorial or script ?  Thank you, TK