Incremental Motion Path Animation Trigger

I'm trying to create a simple menu navigation where the user would have, say, 5 choices on the bottom of the screen to choose from. The user could then click the  right arrow and those 5 choices would slide to the left, revealing an additional choice. Then when the last choice is on screen, I'd like to disable that arrow from being clicked.
I found this example where it's doing the exact same  thing I want to do, but with a panoramic photo. http://blog.keypointlearn.com/2014/09/16/examples-of-motion-path-animations-in-storyline-2/ I'm curious to know if anyone knows how this is done using motion paths. Thanks!

11 Replies
Lee Millard

Michael,

Thanks again for chiming in and taking a look at my file. I really appreciate, and love following your blog. Slide 3 is the one in question. I think I've got the "move" right down when you click on "right," but the left one seems to be jumping back each time even though I have relative start point selected. Also, I think I might need to add a condition in eventually to disable the right or left buttons when it reaches an end. Thanks again!

Michael Hinze

Have a look at the attached and see if that's what you wanted. I added a variable that indicates the position of the bar. Based on that variable I disabe/enable the right/left buttons. I also changed one motion path. You may have to do some finetuning of the motion paths to make the movement more seemless and precise. 

Lee Millard

Michael,

This is extremely helpful! What you did taught me a lot. A concern of mine is with motion paths themselves. I don't know if I'm not doing something correctly or what. I have been struggling with the positioning and organization of motion paths. When you get multiple ones it seems that it's very confusing to stay organized. One thing I've noticed in my files and yours, is that the pixel movement is not exact. For example, on the file you sent/posted, you can see that the blue rectangle has a hard left edge. If you click "Left" until you can't click anymore, then click "Right" to go back to the starting point, you can see the gradient overlay is overlapping the blue rectangle. If you repeat that process, it overlaps even more. Is this a limitation of motion paths or am I just setting them up incorrectly? I'd love it if you could set it up, say to move the group of rectangles a certain number of pixels on each click.

Many thanks again!

Michael Hinze

Hi Lee, from what I saw in your original file you are not doing anything wrong. Using multiple motion paths (especially paths that overlap) is not the most user-friendly process. It does take a lot of trial-and-error to get them pixel-perfect. You can set up the paths so that they move the object a certain number of pixels, by setting the width of the motion path. If you are still not happy with the result, you might want to give Walt's suggestion a try and use states instead of motion paths.