Motion Path - controlling the image position using a horizontal scroll

Mar 04, 2015

Hi everyone. I have a large image of the world that’s wider than the slide dimensions. I’ve worked out how to use directional ‘left’ & ‘right’ shapes with motion paths and relative start points to move the image to the left/right in an incremental horizontal scroll type motion, but I can’t figure out how to stop the image once the left/right sides of it are visible on slide (e.g. if I keep hovering over the left motion path shape, the image keeps moving to the left and keeps going until it fully disappears off the left side of the slide).

Could anyone offer suggestions on how I can stop the image once the right hand side of the image has hit the right side of the slide & vice versa please? I’ve been trying different things to do this, but with no success. Hope this makes sense. Thanks in advance for any help offered. Mal


18 Replies
Michael Hinze

You could use a counter variable that is increased/decreased by the left/right animations. Once you figured out the variable's value when the animations hits the left/right edge, you could disable buttons and prevent motion path animations from moving the image too far. I have done this here: See the 'manual' option. A short description of this project is here:

Malcolm Hughes

Hi Michael. Thanks for getting back to me, and sending the links. I've taken a look & I thought I'd try the automated version first (before even thinking of the manual one!!), but just when I think I'm on the right track, I seem to take a few steps back. I'm going to keeping working at it though. Thanks again, Mal

Malcolm Hughes

Hi Michael. I've taken a couple of steps in the forward direction today. I've got the scroll to go left & then come back to the right automatically, as well as going back in the left direction again to complete the automatic looping. The tricky bit was getting the motion paths to be the same length, which I'm nearly there (unless I'm missing a trick which makes this easy). Also, when I add the 3rd trigger to send the scroll back to the left to complete the automatic looping, the image drops slightly. I've tried adding Relative Start Points/not adding, but I can't get it to be a 'seamless' loop. Could you share any thoughts you may have on this please?

My next challenge is to move onto the 2nd version (the 'manual' one), which was the source of my original discussion.

Appreciate any help/guidance you can offer. Kind regards Mal

Michael Hinze

Aligning/sizing motion paths is somewhat tricky. To make the motion paths the same length and vertical position (that would avoid the 'drop' you see) you can select a motion path, press CTRL+Shift+ENTER to display the Size & Position edit window and then input the exact coordinates and values. To loop, the Relative Start Point option needs to be set. 

Steve Flowers

Might have better luck using a slider with your image as the custom thumb. Bump up the size of the track and the thumb image to "mondo-super-big" and you can use the edges of the track to define how far the thumb can be dragged.

Set the limit of the slider to 100 and travel from 100 to 0. Then setup a couple of triggers to increment when keys are pressed and it'll travel from one end to the other. You get the bonus of allowing the image to be dragged if that's something you want:)

Malcolm Hughes

Hi Michael/Steve. Thanks both for getting back to me & offering suggestions on my discussion. These forums are a brilliant thing. I was waiting (hoping) that Michael would come back with a suggestion/trick regarding the automated situation, and he did. The CTRL+Shift+ENTER to display the Size & Position edit window was the thing that allowed me to control the motion path, and move forward massively.

Steve - thanks for your suggestion on using a slider; it's going to be my next build. I really like the idea of the large image being the slider control, very clever. I managed to figure out how to stop the image at the image edges from Michael's original reply. I've even worked out how to disable the buttons using a counter as suggested.

Thanks again both. Onwards & upwards (or left & right ;-) ). Regards Mal.

Michael Hinze


Ken Haas

Linda - See my post in this thread for an example and .story source file.

We applied what Michael describes and also added up/down/left/right key navigation.

Yep, that's a similar concept to what I had played around with here:

Julie Humphrey

Michael, This is exactly what I was looking for to solve my wide image problem. I went to your project link above to get the Storyline file but there doesn't seem to be a .story file in the download. Any chance you can post the file here instead? I know this is a really old post but I desperately want to use this technique in my current project and I don't have all the triggers to pull it off. 

Julie Humphrey

Thanks Ren. I posted a message on his website and he replied back to me from that site. Turns out the .story file was automatically changed to a .zip file by my companies security settings. I was able to change it back and it opened right up in Storyline. I am so thrilled to see the triggers in his example to fix my issue with a very wide image.

This discussion is closed. You can start a new discussion or contact Articulate Support.