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
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: http://dev.keypointlearn.com/xcl73_SL2/Panorama/V1x/story.html See the 'manual' option. A short description of this project is here: http://wp.me/p2BoUf-cx
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
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
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.
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:)
Yep, Steve's suggestion would work too. Here is just one example of a slider where the thumb is a wide image: http://dev.keypointlearn.com/xcl73_SL2/Wall/V2/story.html This one needs to be dragged, but I could have added keypress triggers or have it 'slide' back and forth automatically.
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.
Hi Steve. Thought I'd let you know I had a go at using a mega-big image as the thumb in a slider & it worked dragging it right/left. Many thanks for the suggestion. Cheers Mal
Thanks Mal for the update here and glad that Michael and Steve were able to get you working as needed.
HI Michael
Any chance of getting a sample of the panorama file it looks really good and it is something I would like to use. I have created a slide with a panoramic image that moves from left to right and that is about it. I am really struggling and your help would really be appreciated.
Thanks in advance
Hi Linda,
Michael is still a regular contributor here in the forums, so likely he'll see this but if not you can use the "contact me" button on his profile to reach out directly.
Linda - See my post in this thread for an example and .story source file. https://community.articulate.com/discussions/articulate-storyline/how-to-pan-the-screen-left-and-right-using-a-slider-and-motion-paths
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: http://dev.keypointlearn.com/xcl73_SL2/A350/V1/story.html
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.
Hi Julie,
Michael may no longer be subscribed to this conversation, but feel free to click on his profile and use the Contact Me button to connect with him!
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.
Hi Ren,
can you plz share the storyline file of the cockpit module
Greetings, shilpi!
Michael developed the cockpit example. Isn't it neat?
Feel free to use the Contact Me or Website option on Michael's profile page to reach out and reference its source file!
This discussion is closed. You can start a new discussion or contact Articulate Support.