Highlighted

How to move an object between multiple locations using buttons?

Community Beginner ,
Jul 18, 2019

Copy link to clipboard

Copied

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!

Most Valuable Participant
Correct answer by Lilybiri | Most Valuable Participant

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

Views

201

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to move an object between multiple locations using buttons?

Community Beginner ,
Jul 18, 2019

Copy link to clipboard

Copied

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!

Most Valuable Participant
Correct answer by Lilybiri | Most Valuable Participant

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

Views

202

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Most Valuable Participant ,
Jul 18, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Jul 18, 2019

Copy link to clipboard

Copied

Super helpful - thank you!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Lilybiri LATEST
Most Valuable Participant ,
Jul 18, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Advocate ,
Jul 18, 2019

Copy link to clipboard

Copied

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);

});

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Advocate ,
Jul 18, 2019

Copy link to clipboard

Copied

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);

});

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Jul 18, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Captivate User Guide
New Group