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!
I thought I had seen an example of something similar to what you are asking, but now I cannot find it. Hopefully someone in the community will be able to pop in and assist you with your design. You may want to reach out to Michael, owner of the blog you referenced, as well.
Hi Michael! Actually, I think it was your blog post I am referencing. I also made a comment on there as well, so my apologies for doubling-up. I'm away from my computer now, but will post my story file as soon as I get back. Thanks!
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!
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.
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.
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.
Thanks Michael. I think I'll try the states + animations route to see if that gives me a better result. I do like the easing options though with motion paths. Thanks again!
11 Replies
A lot of people struggle with motion paths. You might consider states and animations.
Hi Lee!
I thought I had seen an example of something similar to what you are asking, but now I cannot find it. Hopefully someone in the community will be able to pop in and assist you with your design. You may want to reach out to Michael, owner of the blog you referenced, as well.
Can you post your .story file here so that a community member can have a closer look and suggest a solution?
He's watching ;)
Thanks for popping in Michael!
Hi Michael! Actually, I think it was your blog post I am referencing. I also made a comment on there as well, so my apologies for doubling-up. I'm away from my computer now, but will post my story file as soon as I get back. Thanks!
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!
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.
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!
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.
Thanks Michael. I think I'll try the states + animations route to see if that gives me a better result. I do like the easing options though with motion paths. Thanks again!
Thanks again so much everyone! I got the motion path way to work out the way I needed. Thanks for all of your input and help!!! Yay!
This discussion is closed. You can start a new discussion or contact Articulate Support.