Skip to main content
A
Anonymous
April 12, 2017
Question

JavaScript SDK Documentation ? Dynamic Text task?

  • April 12, 2017
  • 3 replies
  • 985 views

I'm doing a project in which I need to dynamically modify the content of a Text Caption and its position on the screen based on data that I'm dynamically reading from a server. I'm fairly new to Captivate but have experience as a full-stack web-developer. I've been able to piece together enough information about the Common JS interface to leverage my JavaScript skills inside of captivate, but I'm finding it very difficult to find an authoritative SDK documentation on the methods, properties, etc. available from JavaScript for Captivate.  On the web-side, it is relatively easy to look up DOM related resources, but not so on Captivate. Is there a such a list/documentation some place?

In terms of the task that I'm tackling now, I need to read some data from a php site on a different domain than the one that will be hosting my captivate output. I got this done via JSONP/CORS to bypass the problems associated with cross domain calls.

The incoming data will contain text that I need to display in a Caption box and also the position for some images that I need to display on the same page. Thus, I need to:

1. Set the contents of a Caption using Javascript

2. Read the width of the Caption box using Javascript

3. Set the X, Y position of graphics using Javascript

4. Dynamically load images using Javascript.

I would appreciate any pointers or advise from those of you who have spent some time with Captivate. I'm impressed by its capabilities.

Bob

This topic has been closed for replies.

3 replies

S
sdwarwick
Participating Frequently
April 26, 2017

TLCMediaDesign's suggestions are definitely correct when you are trying to make dynamic content in an existing captivate text-containing shape.      You break this model when you talk about controlling X/Y position.   Part of the problem is that Captivate is actually a "player" of shapes.  The time when shapes are displayed and when they are hidden is part of the captivate database.  It is very much possible to hack into this ( I've done it for other use cases )  but without more info,  it may actually be easier for you to literally bypass this entire captivate functionality.

One strategy would be to simply create an "absolutely" positioned div relative to TOS that you insert into the DOM through javascript.   pulling data through ajax and displaying that div might end up being easier than using captivate to generate the div and interacting with the movie player.  this gives you complete CSS control as well as you can add you own styles.    

M
mrsosa247
Participant
June 7, 2017

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

var obj1 = document.getElementById('s1_txt1c');

TweenMax.fromTo(obj1, 1, {alpha:0, top:"-200px"}, {delay:1, alpha:1, top:"20px", ease:Elastic.easeOut});

S
sdwarwick
Participating Frequently
June 7, 2017

TweenMax is a function of a library that is not part of captivate.  Not sure why this is being suggested.

anastasiam
anastasiam
Inspiring
April 26, 2017

I think the best resource currently available is the Adobe Help document that surely you have already seen.  

Learn about the Common JavaScript interface for Adobe Captivate

TLCMediaDesign
TLCMediaDesign
Inspiring
April 13, 2017

You need to make sure that the content of the Text_Caption is a variable, else it will be rendered as an image.

You put the variable in dollar signs: $$your_variable$$

Then to set it just use: window.your_variable = someString;

To get a reference to the Caption use document.getElementById(The name of the object in Captivate);

So it could be:

var txtCaption = document.getElementById("Text_Caption_1");

Then use normal JS to get the properties.

You should also be able to traverse the DOM in the developers tools to see how Captivate is naming elements.

To load images dynamically, you would do it just like in any other web page when you append an element to the DOM, or you could put place holder transparent pngs in captivate and change the source of the image.

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