Highlighted

Captivate scripting - change x & y position of object

New Here ,
Oct 24, 2016

Copy link to clipboard

Copied

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

Views

2.0K

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

Captivate scripting - change x & y position of object

New Here ,
Oct 24, 2016

Copy link to clipboard

Copied

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

Views

2.0K

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
Oct 24, 2016 0
Adobe Community Professional ,
Oct 24, 2016

Copy link to clipboard

Copied

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

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...
Oct 24, 2016 0
New Here ,
Oct 24, 2016

Copy link to clipboard

Copied

Hi, Thank you for your reply.

How EXACTLY do you implement the above script in captivate?

Thanks

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...
Oct 24, 2016 0
Adobe Community Professional ,
Oct 24, 2016

Copy link to clipboard

Copied

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

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...
Oct 24, 2016 2
New Here ,
Oct 24, 2016

Copy link to clipboard

Copied

Hi,

I have tried it but it doesn't seem to work

Thanks

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...
Oct 24, 2016 0
New Here ,
Oct 24, 2016

Copy link to clipboard

Copied

Hi,

Have you got a working example?

Thanks

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...
Oct 24, 2016 0
Adobe Community Professional ,
Oct 24, 2016

Copy link to clipboard

Copied

Not that I can share from my current work location.

What type of object are you trying to move?

What is it's name?

Can you post the code you are executing?

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...
Oct 24, 2016 0
New Here ,
Oct 25, 2016

Copy link to clipboard

Copied

hI,

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

Image_1c is a FLASH swf file but I have tried this with a bitmap image and changed the name of that to Image_1c.

Would it be possible for me to send you the Captivate file?

Thanks

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...
Oct 25, 2016 0
Adobe Community Professional ,
Oct 25, 2016

Copy link to clipboard

Copied

This won't work for Flash output. You are going to need to use Lilybiri's solution or else have two of the swf files. Hide one then show the other in a different position.

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...
Oct 25, 2016 0
New Here ,
Oct 25, 2016

Copy link to clipboard

Copied

So, I have to use an image file such as a PNG. correct?

Thanks

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...
Oct 25, 2016 0
Adobe Community Professional ,
Oct 25, 2016

Copy link to clipboard

Copied

If you are publishing to HTML5 it can work. If you are publishing to swf it will not.

It doesn't matter what you are trying to move a swf, png, smartshape, you cannot get a reference to the element because it is inside of the swf, in HTML5 the elements are all accessible with code because they are in div or canvas elements.

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...
Oct 25, 2016 0
New Here ,
Jun 07, 2017

Copy link to clipboard

Copied

How do you apply javascript to a text caption. Adding a c does not seem to animate it only the shape of the box animates leaving the text at its location

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...
Jun 07, 2017 0
Most Valuable Participant ,
Oct 24, 2016

Copy link to clipboard

Copied

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.

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...
Oct 24, 2016 0
Community Beginner ,
Dec 04, 2017

Copy link to clipboard

Copied

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

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...
Dec 04, 2017 3
New Here ,
Mar 19, 2020

Copy link to clipboard

Copied

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

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...
Mar 19, 2020 0
Community Beginner ,
May 18, 2020

Copy link to clipboard

Copied

Hi Hashim, have you got a working sample of this? I´m struggling to move buttons around when a button is clicked but it doesn´t work at least in html5 preview mode with or without "re" and "c" (why is captivate so awfully undocumented?). I think I´m missing some javascript syntax like add "cp." somewhere. Thanks!

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...
May 18, 2020 0
Community Beginner ,
May 18, 2020

Copy link to clipboard

Copied

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

 

moving.png

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...
May 18, 2020 0
Community Beginner ,
May 18, 2020

Copy link to clipboard

Copied

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

 

 

moving2.png

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...
May 18, 2020 0
Lilybiri LATEST
Most Valuable Participant ,
May 19, 2020

Copy link to clipboard

Copied

Bad thing is that the click box can NOT be used in Fluid Boxes projects.

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...
May 19, 2020 0