• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Moving objects using JavaScript

New Here ,
Mar 28, 2018 Mar 28, 2018

Copy link to clipboard

Copied

Hey guys. I am using Adobe Captivate 10 and I am having the following problem.

I want to create an interactive game for youngsters how to learn to use the Internet in a safe way.  My idea is to create a quiz and if a person answers correct (the answers are the buttons in blue) the girl which u see in the picture moves in the green part and if the answer is wrong  - to the red one and one of the shields disappears. The girl, net and shields are elements which duration is till the end of the project. When I am on slide 1 and and I give my answer the girl is moving in the right way, But when I continue on the second slide the pictures goes on position 0 - so the movement which was made the previous slide stays only in the first slide and has no effect for the second one. Which is my problem cause I want it to be on the position where it was moved after giving the answer on the first slide. I had the idea to put a code on the slide (like to launch it on enter of slide) which needs to check if the previous slide the person gave a correct or wrong answers. I put on slide 1  for the buttons - reporting and contain a quiz and gave points. In the code i am trying to use the default variable for quiz result in order to find out what kind of answer the person gave. For all these movements I am using this codes:

- moving the picture of the girl -

var obj = document.getElementById( "Image_246c");

obj.style.left = 40 + 'px';

- what kind of answer was given:

document.getElementById("Image_203c").style.visibility="hidden";

//var posX;

//var posY;

var obj = document.getElementById( "Image_249c");

if (cpQuizInfoPointsPerQuestionSlide==1) {

obj.style.left = -29 + 'px';

//obj.style.top=-33 + 'px'

}

//else {

// obj.style.left = 40 + 'px';

//}

But it doesn't work. Can u give me advices why it is not working, which variable should be used and if u have any suggestions how I can implement what i want to.

screen.jpg

Views

1.3K

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
community guidelines
Contributor ,
Mar 28, 2018 Mar 28, 2018

Copy link to clipboard

Copied

There's a lot to take in here.

You may want to try and save the actual x and y offsets after the object moves on slide 1. On slide 2, you shouldn't need to check the value of the previous answer. What you need to do on slide 2 is run JS on slide enter and set the object's position (top and left) to that of the saved values.

This is untested:

// function to get x and y offsets

function getOffset(el) {

    return {

    left: el.offsetLeft,

    top: el.offsetTop

  }

}

On slide 1, after you've moved the objects, save position:

var posX = getOffset(yourObj).left;

var posY = getOffset(yourObj).top;

// Slide 2

yourObj.style.left = posX;

yourObj.style.top = posY;

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
community guidelines
New Here ,
Apr 04, 2018 Apr 04, 2018

Copy link to clipboard

Copied

Thank you very much for your suggestion. The problem is there that if a put JS on enter slide for moving the object it is not moving at all. I tired only putting a code for moving the object but it is not working. I tried your suggestion but unfortunately i didn't achieve functionality.

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
community guidelines
Engaged ,
Apr 04, 2018 Apr 04, 2018

Copy link to clipboard

Copied

Remember that you need to add a 'c' in your javascript to the end of the object's ID. Otherwise you are not moving the canvas object.

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
community guidelines
Engaged ,
Mar 28, 2018 Mar 28, 2018

Copy link to clipboard

Copied

I'm not 100% sure the functionality you want.  

Here's the I approach I use with animation in JS, variables, and having the object remain where you want.

1. Create two variables 'sPos' (starting position) and 'ePos' (ending position). Give each a value of 0

2. Execute this script when you want the object to move. 

sPos = ePos

 

 

 

ePos = ePos + 16;

 

 objectc.animate([

 

 

  {    transform: "translateY("+ (sPos)+ "px) ",   },

 

 

  {    transform: "translateY("+ (ePos)+ "px) ",     }

 

 

], {fill: 'forwards', duration: 1000});

This will have the object only move on the Y axis, but you can have it move diagonally with something like:

  {    transform: "translateY("+ (sPos)+ "px) ",   },

  {    transform: "translateX("+ (sPos)+ "px) ",   },

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
community guidelines
Participant ,
Mar 28, 2018 Mar 28, 2018

Copy link to clipboard

Copied

Applying the JS must be repositioning the objects. Have you tried applying effects instead. It's a quick and efficient way to move objects.

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
community guidelines
Community Expert ,
Mar 28, 2018 Mar 28, 2018

Copy link to clipboard

Copied

Having exact movements with motion effects is not easy at all, even when you are using guides and rulers. You could edit the xml-files to make it more precise. However it is not as quick as you think, when needing a lot of movements, because you have to create a lot of custom effects to be applied with actions which takes a lot of time. I use effects all the time, and you'll find several posts about them on  my blog, but there are limitations. And the interactive game which is the subject here, would be better suited with a JS workflow. Have a look at this movie with a game. I was very careful designing the complicated motion path and syncrhonizeing it with the timeline movement and pauses. Nevertheless it is not at all perfect concerning the movements:

Game

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
community guidelines
New Here ,
Sep 09, 2022 Sep 09, 2022

Copy link to clipboard

Copied

Hey Lieve, do you have anywhere in your blog detailed how to program a game like that one you created?

The movements are set throught JS? 

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
community guidelines
Community Expert ,
Sep 09, 2022 Sep 09, 2022

Copy link to clipboard

Copied

LATEST

No, I only used JS to create the random numbers. This game was created for a presentation about the Timeline. I mainly  used the Timeline and fractured motion paths. Whenever  and/or for fomratting numbers/dates.

Since a while I am no longer eager to post all my workflows freely for everyone to abuse of me. Too much plagiarism around. 

Fractioning motion paths: I explained that term in:

https://blog.lilybiri.com/fractioning-custom-motion-paths

 

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
community guidelines
New Here ,
Apr 04, 2018 Apr 04, 2018

Copy link to clipboard

Copied

Do you guys think the problem may be coming from the fact that the element is in fluid box and the duration of it is till the end of the project. So physically the element the element is not presented on slide 2. Are the object in project global variables?

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
community guidelines
Community Expert ,
Apr 04, 2018 Apr 04, 2018

Copy link to clipboard

Copied

I will not answer about JS, but AFAIK it is NOT possible to have an object timed for the rest of the project in a normal fluid box.

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
community guidelines
New Here ,
Apr 11, 2018 Apr 11, 2018

Copy link to clipboard

Copied

Yes, you are right. I am putting "c" all the time. Do you have any idea how I can access the quiz variables which are integrated in Captivate database? I mean the one the quiz which is for reporting (from the program itself).

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
community guidelines
Community Expert ,
Apr 11, 2018 Apr 11, 2018

Copy link to clipboard

Copied

List of quizzing system variables in this blog post:

Using Quizzing System Variables - 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
community guidelines