Forum Discussion
How to make this image transition?
To recreate the use of buttons as seen in Nejc's video (This guy is really smart and nice), you need to create 4 triggers per button. So, 8 triggers for the 2 left/right buttons. But it is not complicated at all.
>>I'll start with the RIGHT button (to move the panel to the right)
You need 1 first trigger to start moving the "scrolling panel" when you click on the button. 1 other trigger to continue moving as long as the button is pressed. Ditto for the “image” in the panel, so 2 other triggers.
BUT FIRST, you need to ensure that the panel and image will move CONTINUOUSLY and REGULARLY as long as the button is pressed.
The Motion Path to the right of the “Panel” is 10px in 0.10s; no slow motion; relative starting point.
The Motion Path to the left of the “Image” in the panel is in the opposite direction, same setting.
OK, now:
- 1st trigger: Move "Panel" along its Motion Path (to the right) when “Right Button” status is “pressed”.
-1st trigger bis: Move “Image” along its Motion Path (to the left) when the “Right Button” status is “pressed”.
-2nd trigger: Move “Panel” along Motion Path (to the right) when the Motion Path ( to the right) of “Panel” ends IF Right Button status is pressed.
-2nd trigger bis: Move “Image” along Motion Path (to the left) when the Motion Path (to the left) of “Image” ends IF right button status is pressed.
(My apologies if the triggers are not perfectly translated, I have the French version).
This allows you to: trigger movement to the right if you click the RIGHT button, and continue the movement (10pix per 0.1s = very smooth and continuous, but you can change the speed) as long as the button remains pressed. It stops as soon as you stop clicking.
All that's left is to create the Motion Path (to the left) if you haven't already done so, and apply similar triggers to the LEFT button.
Have I made myself clear?
If you need the little .story file with which I tried and verified that this works, just let me know.
To recreate the use of buttons as seen in Nejc's video (This guy is really smart and nice), you need to create 4 triggers per button. So, 8 triggers for the 2 left/right buttons. But it is not complicated at all.
>>I'll start with the RIGHT button (to move the panel to the right)
You need 1 first trigger to start moving the "scrolling panel" when you click on the button. 1 other trigger to continue moving as long as the button is pressed. Ditto for the “image” in the panel, so 2 other triggers.
BUT FIRST, you need to ensure that the panel and image will move CONTINUOUSLY and REGULARLY as long as the button is pressed.
The Motion Path to the right of the “Panel” is 10px in 0.10s; no slow motion; relative starting point.
The Motion Path to the left of the “Image” in the panel is in the opposite direction, same setting.
OK, now:
- 1st trigger: Move "Panel" along its Motion Path (to the right) when “Right Button” status is “pressed”.
-1st trigger bis: Move “Image” along its Motion Path (to the left) when the “Right Button” status is “pressed”.
-2nd trigger: Move “Panel” along Motion Path (to the right) when the Motion Path ( to the right) of “Panel” ends IF Right Button status is pressed.
-2nd trigger bis: Move “Image” along Motion Path (to the left) when the Motion Path (to the left) of “Image” ends IF right button status is pressed.
(My apologies if the triggers are not perfectly translated, I have the French version).
This allows you to: trigger movement to the right if you click the RIGHT button, and continue the movement (10pix per 0.1s = very smooth and continuous, but you can change the speed) as long as the button remains pressed. It stops as soon as you stop clicking.
All that's left is to create the Motion Path (to the left) if you haven't already done so, and apply similar triggers to the LEFT button.
Have I made myself clear?
If you need the little .story file with which I tried and verified that this works, just let me know.
Hi Emmanuel, I almost got the result, but I´d like to know how to set the speed of the motion, and please, share your story file.
I'm really sorry for this late reply, and probably unnecessary now, but I wasn't notified of your request (there's probably a @ThierryEMMANUEL missing from your message for this to be the case). I stumbled upon this thread quite by accident while doing some housework.
For speed, it's very simple: all you have to do is increase the movement distance during the 0.1s, which means modifying the length of your motion patch: from 10px to 20px for example = 2 times faster.
For the .story file: it must be somewhere on my PC, but where? and what's its name? I'm looking for it.Thierry
Oh thanks ThierryEMMANUEL. I´ll try. If you find your file, it will be great.
Hi DanielAlbarran This will become clearer as you study the file, of course.
I looked everywhere... and I couldn't find it. So I recreated it, but when you know how to do it, it only takes 15 minutes.
You'll see that it doesn't have many triggers.
Remember a very simple principle: hovering over a button causes the scrolling panel to move in one direction AND the image inside the panel to move in the opposite direction simultaneously.
However, I realize that I forgot to mention an important fact: you can't apply a motion path to a scrolling panel. You must first group it with a shape (whatever that shape may be) and then apply the motion path to the Group.
I hope this helps. Please let me know!