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

Call advance action on variable change

Community Beginner ,
Nov 12, 2015 Nov 12, 2015

Copy link to clipboard

Copied

I can't seem to find a definitive answer to this question on the net.

Can you call an advanced action from Javascript? This would be useful for many reasons, but the situation I currently have is this:

I'm listening to a variable change event based on this documentation

and instead of running a anonymous function I need to call a advanced action.

Is this possible?

I ideally from within a Captivate javascript window.

Many thanks

TOPICS
Advanced

Views

2.2K

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

correct answers 1 Correct answer

Community Beginner , Nov 13, 2015 Nov 13, 2015

Thanks RodWard

I wouldn't say I'm an expert JS coder by any means, but I had a dig around in the published project code and got a sense of what CPM.js is doing.

I found if I created an Advanced Action in Cp and assigned it to an object on a slide, so the Advanced Action is included in CPM.js I can call the Action by targeting the stage objects data like so: cp.runJavascript(cp.model.data.nameOfStageObject.oca);

I'm not sure if this is the best way or how well this will stand up across browsers and

...

Votes

Translate

Translate
Community Beginner ,
Nov 12, 2015 Nov 12, 2015

Copy link to clipboard

Copied

btw I'm using Cp 9

Thanks

Votes

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 ,
Nov 12, 2015 Nov 12, 2015

Copy link to clipboard

Copied

Yes it is, but not with standard functionality in Captivate.

There's a new HTML5 widget currently being developed that does this.  It allows you to add event listeners to Captivate via User Variables that can then trigger Advanced Actions.

Sounds weird I know.  But it's possible.

The widget is currently in BETA.  It will be announced soon on www.infosemantics.com.au

Votes

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 Beginner ,
Nov 12, 2015 Nov 12, 2015

Copy link to clipboard

Copied

Thanks RodWard for your reply.

My project is extremely urgent so not really able to wait for the widget to be announced unless it's like this week

If it can be done with a widget, then surely it can be done with JS? Where are advanced actions stored in a published project after a dev has created a new advanced action?

Thanks

Votes

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 ,
Nov 12, 2015 Nov 12, 2015

Copy link to clipboard

Copied

Understand your urgency.

If you are an expert coder with JS then a lot of things are possible.  But accessing Advanced Actions from JS is one of the harder things to pull off.  And for SWF output, you would be far better off trying to code the functionality in an SWF widget than in JS.  HTML5 would be suitable for JS, but ONLY if you know your stuff.

The widget will be ONLY for HTML5 and Responsive projects.

Votes

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 Beginner ,
Nov 13, 2015 Nov 13, 2015

Copy link to clipboard

Copied

Thanks RodWard

I wouldn't say I'm an expert JS coder by any means, but I had a dig around in the published project code and got a sense of what CPM.js is doing.

I found if I created an Advanced Action in Cp and assigned it to an object on a slide, so the Advanced Action is included in CPM.js I can call the Action by targeting the stage objects data like so: cp.runJavascript(cp.model.data.nameOfStageObject.oca);

I'm not sure if this is the best way or how well this will stand up across browsers and mobile devices (I need to test more), but it seems to work.

Would you have any other suggestions?

Votes

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 ,
Nov 13, 2015 Nov 13, 2015

Copy link to clipboard

Copied

Nope.  Well done.

You just need to test it every way possible and on every device.

Votes

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 Beginner ,
Nov 13, 2015 Nov 13, 2015

Copy link to clipboard

Copied

Thanks. Yes for sure, will do. So far so good

Votes

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
Explorer ,
Dec 21, 2015 Dec 21, 2015

Copy link to clipboard

Copied

Your targeting stage objects solution is fantastic - incorporating this into my current project. Thank you!

Votes

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
People's Champ ,
Dec 31, 2015 Dec 31, 2015

Copy link to clipboard

Copied

Good find.

I'm sure you noticed that there really are no shared actions in the CPM.js either, they are really only for development in the IDE.

I've found that it's easier to write the actions in an external JS file and pass in the arguments to a reusable function.

Say you have an advanced action to show Text_Caption_1 and hide 3 other text captions. You need to write several iterations, show 1, hide 2,3,4; show 2, hide 1,3,4 etc. This would be time consuming in an advanced action and you would need to write 4 advanced actions or create one with multiple tabs with conditions.

If you name the elements correctly you can pass into the function which element to show and the function will hide all others. The external JS function knows which Caption is visible so it shows the newly selected caption and hides the caption that is visible.

You can also take it a step further and name the slide "clicks_4", then parse the slide title, dynamically build an array and determine if all 4 items are clicked to show the next button.

We have just built a course that if you click a popup link, the course pauses, disables all interactive objects, including navigation, cc, and audio buttons on the slide and shows a lightbox with a play button to resume when you are done with the popup. Clicking the play button resumes the slide and enables all of the interactive objects. We disable the objects because you could still click them under the lightbox and the project is still paused, with the play button still on the slide. This is all done dynamically with one function, on any slide, with any object names (the script doesn't care what the name is), an no advanced actions. Just one very small piece of JavaScript. What would it take to do this for every slide and every object with advanced or shared actions?

Once you create the scripts you can use them on all of your projects and never need to write them again. Just use specific naming conventions and document the API.

Votes

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 ,
Dec 31, 2015 Dec 31, 2015

Copy link to clipboard

Copied

Hi David! I have the most respect for you concerning JS solutions. But your explanation about advanced/shared actions makes them look as if they need a lot more work which is not always the case.

The explanation about the Text captions: group them in one group, and create a shared action with two commands: Hide Group, followed by Show Caption. When applying that shared action you only have to pass the two parameters. I wonder if your approach is so much quicker That shared action 'Hide1Show1' is in my external Script Library which I can use in each project as External Library. Moreover shared actions show up in the Library with their usage, something that makes managing so much easier. Personally I would never use a JS function in that case.

I created a similar use case for your second example recently: pausing the project, disabling all interactive objects, closing the TOC (if it is open), closing a Help lightbox (if it is open) etc. Probably there your approach could have saved time, totally agree. In that case I used advanced actions because in a shared action you cannot 'freeze' some objects not to become parameters (as can be done for variables and literals).

Happy New Year!

Votes

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
People's Champ ,
Dec 31, 2015 Dec 31, 2015

Copy link to clipboard

Copied

Thanks for the input Lieve, your insight is always helpful.

If I had my way I would still be coding everything in straight HTML, much smaller and efficient, but we have to use Captivate in many of our projects.

It's a fault that I have that I get obsessed with making things easier from my angle. The beauty of the HTML output is that you can use JS so Much easier.

I agree that you can use the groups to hide, and then show an element within a group, but that is not apparent to the average user. and you still need to create multiple advanced actions or a semi-complex conditional with variables.

You have a great new year also! Hopefully we can meet in Vegas in the coming year!

Votes

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
Explorer ,
Jan 11, 2016 Jan 11, 2016

Copy link to clipboard

Copied

TLCMediaDesign wrote:

...

If you name the elements correctly you can pass into the function which element to show and the function will hide all others. The external JS function knows which Caption is visible so it shows the newly selected caption and hides the caption that is visible.

TLC/David,

It sounds like you're using a Javascript function to show/hide stage objects. That's been something I've wrestled with in the past, would you mind elaborating a little bit or posting a few lines of code? Getting to the bottom of that would be really significant for me.

Thanks!

Votes

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
People's Champ ,
Jan 12, 2016 Jan 12, 2016

Copy link to clipboard

Copied

Say you have 4 Text Captions on Slide 4. Name them TC_4_1, TC_4_2, TC_4_3 and TC_4_4. Where:

TC = Text Caption

4 = Slide Number

1 = Element Identifier

JavaScript to call when you want to show Text Caption TC_4_3:

The arguments are; Text Caption to show, Number of Captions to show Hide for this slide

showHideElement('TC_4_3', 4)

The JavaScript function is:

function showHideElement( what, n )

{

var te = what.substr( 0, what.lastIndexOf( '_' ) + 1)

for ( var i = 1; i < n + 1; i++ )

{

  cp.hide( te + i.toString() )

}

cp.show( what );

}

Votes

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
Explorer ,
Jan 13, 2016 Jan 13, 2016

Copy link to clipboard

Copied

That's working perfectly, thank you very much! 

I haven't seen much, or any, documentation on the cp methods such as show and hide. It's not mentioned in the Common JS interface‌ documentation at least. Did you get at those with cp.getOwnPropertyNames and some experimentation? Or is there some documentation out there I haven't found yet..

Thanks for your time!

Votes

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
People's Champ ,
Jan 14, 2016 Jan 14, 2016

Copy link to clipboard

Copied

LATEST

I did not use Object.getOwnPropertyNames.

I look through the CPM.js to determine how the project is built and find CPs internal methods.

I have used Object.getOwnPropertyNames but in a much more defined context. It can easily return way too much information, like every element in the project. You need to parse through the JSON object and find smaller chunks to process.

The JSON is then rendered to HTML where you can access the elements using getElementById()

It is possible, although not really advantageous, to dynamically build the showHideElements example without any JavaScript attached to the buttons in CP. You can check and see if there are buttons on the slide, read their names, attach eventListeners and then show/hide corresponding elements. Naming conventions are very important.

I have actually done this in a project where the dynamic function is utilized just by naming the slide "clicks_4". The code first reads the slide label, then creates arrays based on the slide title and activates the Next button when all items have been clicked. You can actually parse through an array of elements on the slide to find only buttons that are named a certain way and attach listeners only to those objects. As long as you follow strict naming conventions it makes the designers work easy as they don't need to create any actions at all, just put the elements on the slide and name them correctly and name the slide correctly. The conventions are documented. On slide exit all listeners are removed and the variables and array are nullified.

Adobe really should provide an expanded commonJSInterface.

Votes

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
Resources
Help resources