How to move an object between multiple locations using buttons?

[Guest]

Hello everyone. In a Captivate 2019 course I am creating, I need the user to be able to move an image object between multiple points using buttons. Is there a way to move an object smoothly from one point to another using advanced actions or java script? The reason I ask is because the motion path functionality seems to be tied to the timeline for each slide, which seems limiting. I'd like to be able to indicate, no matter where they are in the timeline, if X button is pressed, move the object from this location to that location. Is that doable? Thank you in advance!

[Lilybiri · Accepted solution]

You can launch a motion effect with a button and/or with advanced/shared actions.

Have a look at the blog post I published yesterday, an example of motion effects triggered by a toggle button:

Sliding Menu - Captivate blog

[Guest]

Super helpful - thank you!

[Lilybiri]

You're welcome. I'm sure that with JS much more can be achieved, but tried to show what is possible with motion paths in Captivate.

[Stagprime]

This little block of code would move a box on your stage with the name of box to the right by 150 pixels over the course of a half second.

If you want to move something to the left - still use left but put in a negative value for the pixels.

If you want to move something up or down - use top instead of left with plus or minus values in the same way.

$(document).ready(function() {

$("#boxc").animate({left: "150px"}, 500);

});

[Stagprime]

Better yet - You could also create a little directional pad and use them to nudge your object so many pixels in a particular direction.

For that just use a  +=  or a  -=  in front of your pixel distance. This would be for an object with the name of  box.

Right Button

$(document).ready(function() {

$("#boxc").animate({left: "+=50px"}, 500);

});

Left Button

$(document).ready(function() {

$("#boxc").animate({left: "-=50px"}, 500);

});

Up Button

$(document).ready(function() {

$("#boxc").animate({top: "-=50px"}, 500);

});

Down Button

$(document).ready(function() {

$("#boxc").animate({top: "+=50px"}, 500);

});

[Guest]

This was helpful information for the future as well! Thank you!