Javascript smooth moving of objects

ActivePresenter Support Questions
1

Problem:
Hi,
I want to shift an object smoothly. This is the code I use:

for(i=1; i<=100; i++) {
setTimeout(function(){
prez.object(‘Manner’).translateBy(1,0);
}, 10);
};

As I understand, this should shift the object ‘Manner’ 100 px to the right, and this shift should take 1 second.
But it does not seem to work.

What am Missing?

Thanks, Rolf

ActivePresenter Version 8

OS: Win 10

Notes:

2

Hi Rolf,

You should not use for loop to create animation steps like this, but call the next step when the current step completes.
The code should look like:

var mannerObj = prez.object('Manner');
var stepNumber = 0;
function translate1px() {
  // current step
  mannerObj.translateBy(1,0);
  ++stepNumber;
  // prepare for next step
  if (stepNumber < 100)
    setTimeout(translate1px, 10);
}
// prepare for first step
setTimeout(translate1px, 10);

Moreover, please take notice to the quote for a literal string, it can be single quote ' or double quote ". The quote in your code (‘Manner’) is not these ones.

You can also do this wihout coding by creating a motion path animation in an interactive timeline, and use a Start Timeline action to run that timeline.

Regards

3

Thanks, Toan,

this works fine. I now tried to make the object an argument for the function. It works insofar as the code shifts the object to the right 100px (in 10 steps). But it does it in one jump. Why does the setTimeout not work in this case?

Thanks!

PS: The smart quotes is something that happens on your website. Even if I copy your code here (var mannerObj = prez.object(‘Manner’)) it ends up in smart quotes.

Here is the code I use:

var stepNumber = 0;

function translate1px(Objekt) {
Objekt.translateBy(10,0);
++stepNumber;
if (stepNumber < 10){
setTimeout(translate1px(prez.object(‘Shape’)), 10);
};
};

translate1px(prez.object(‘Shape’));

4

Hi Rolf,

setTimeout requires a function to execute at timeout, so you should not pass a function call (translate1px(prez.object('Shape'))) as its argument.
The code should look like this:

function translateObject(object) {
  var stepNumber = 0;
  function translateStep() {
    // current step
    object.translateBy(10,0);
    ++stepNumber;
    // prepare for next step
    if (stepNumber < 10)
    setTimeout(translateStep, 10);
  }
  // first step
  translateStep();
}

translateObject(prez.object('Shape'));

About code formatting in this community, please see this page:

Regards

5

Thanks, Toan, works perfectly!!!
Best, Rolf