Skip to main content
K
keith888
Known Participant
October 24, 2016
Question

Captivate scripting - change x & y position of object

  • October 24, 2016
  • 3 replies
  • 4614 views

Hi all,

I am asking this because I would like to know if this is technically possible in Captivate 9...

What I would like to do is to have a button with a script on it so that when you click it an object

on the screen (this could be an image or a flash SWF object etc) moves from one point of the

screen to another. For example, it could be in the top-left hand corner and when you click the button,

it moves to the bottom right hand corner.

I know you can make one object on one part of the screen invisible by hiding it and making an identical

object elsewhere visible by showing it to give the illusion that it has just "moved" but I am wondering if

a script is possible where I can just move the same object.

Thanks in advance.

Keith

Moderator: took out your personal email address, this is a public forum

    This topic has been closed for replies.

    3 replies

    tomc69945220
    tomc69945220
    Participant
    December 4, 2017

    Most of the time if you just use the element name (e.g "Image_1") it won't work the way you want it to, your best option is to check the object name within cp-frameset if you inspect on a browser while previewing it. Basically by adding the prefix "re-" and suffix "c" in your script, it works every time for me.

    As an example:

    document.getElementById("Image_1")

    would become:

    document.getElementById("re-Image_1c")

      H
      Hashim Awang
      Participant
      March 20, 2020

      TQ Very much...at last..itss work

      C
      Cattel
      Participating Frequently
      May 19, 2020

      Well, I get it to work in a blank project adding the "c" suffix.

       

      var obj = document.getElementById( 'objetoc' );
      var posX = parseInt( obj.style.left );
      var posY = parseInt( obj.style.top );
      obj.style.left = ( posX + 10 ) + 'px';
      obj.style.top = ( posY + 10 ) + 'px';

       

      But I have no luck with the button, It seems that the object isn´t really an object and javascript just move the picture of it, not the click box (and the rollover and down states).

       


      I kept doing some tests and the winner is... THE CLICKBOX!!

      Is the only clickable object I can move properly. The button and the smart shape button lost their action area, but the clicbox moves arround keeping its functionallity. The trick is that you must move simultaneously the object itself and the "re-objectc" thing.

      Hope it will be useful for someone.

       

      var obj3 = document.getElementById( 'cajaclic' );
      var posX = parseInt( obj3.style.left );
      var posY = parseInt( obj3.style.top );
      obj3.style.left = ( posX + 10 ) + 'px';
      obj3.style.top = ( posY + 10 ) + 'px';

       

      var obj4 = document.getElementById( 're-cajaclicc' );
      var posX = parseInt( obj4.style.left );
      var posY = parseInt( obj4.style.top );
      obj4.style.left = ( posX + 10 ) + 'px';
      obj4.style.top = ( posY + 10 ) + 'px';

       

       

      Lilybiri
      Lilybiri
      Legend
      October 24, 2016

      You can trigger any effect, also a motion effect using either directly with that button, or with an advanced action. If you don't need to do anything else with that button, the first approach will do what you want. At least: if you know the exact location where the object has to end. Motion path can be edited on the stage.

      TLCMediaDesign
      TLCMediaDesign
      Inspiring
      October 24, 2016

      This is a script I used to incrementally move an object by 10 pixels right and down. If you change the number (10) it should work for you.

      var obj = document.getElementById( 'Image_1c' );

      var posX = parseInt( obj.style.left );

      var posY = parseInt( obj.style.top );

      obj.style.left = ( posX + 10 ) + 'px';

      obj.style.top = ( posY + 10 ) + 'px';

      K
      keith888Author
      Known Participant
      October 24, 2016

      Hi, Thank you for your reply.

      How EXACTLY do you implement the above script in captivate?

      Thanks

      TLCMediaDesign
      TLCMediaDesign
      Inspiring
      October 24, 2016

      Choose Execute JavaScript as the action on your button. Put the script in the script window and make sure the dropdown selection is current. The items in bold are the name of the object you want to move and the numbers are where you want it to move relative to where it is. Whatever you object name is you may have to append a "c" to the instance name.

      var obj = document.getElementById( 'Image_1c' );

      var posX = parseInt( obj.style.left );

      var posY = parseInt( obj.style.top );

      obj.style.left = ( posX + 10 ) + 'px';

      obj.style.top = ( posY + 10 ) + 'px';

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices