Photo Slideshow: Infinite Loop - A Different Way


This week I decided to take my first crack at an eLearning Challenge with my newly acquired Storyline 2.

This is the first time I have used motion paths and all though they are great I do find them a bit finicky when you have to use the path tool, would be nice to input co-ordinates for start and finish to make this easier.

I got my inspiration from Kevin Thorne & Michael Hinze infinite sliders. And as we all know there are many different ways to achieve the same effect in storyline.

In their sliders they utilize 2 different layers for left > right and right > left. But I got thinking what if you had allot of images? your layers could stack up quite quickly.

So my solution was:

1. Start with my first image at the starting position.

2. Then I added all the images that follow that to the left, after my last image I added the starting image and 2 more at the end

3. Then I did the same thing going to the right.

4. Grouped all the images together.

5. Added a motion path to the left.

6. Added a motion path to the right.


7. Then I added a variable to track image position based off the starting point.

8. When they move left I added 1 to the variable and when they moved right I subtracted 1.

There are 9 positions in my slider so when I am at position -8 to the left, or +8 to the right my next image to slide in is the duplicate of my starting image.

So to make this infinite, I create 2 more slides to do the animation to get my duplicate image back into the middle. So when they get to -8 or +8 it goes to that slide plays the animation to slide the starting image back in and then immediately jumps back to the main slide when the timeline ends which is set to reset to initial state when revisited.

Now they are back at the beginning and the slider keeps on sliding.

So tally is:

3 slides
4 motion paths
1 image grouped

You can view the demo here.

Hope this makes sense.

6 Replies