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

HTML5 animation control

Participant ,
May 20, 2020 May 20, 2020

Copy link to clipboard

Copied

Is it possible to pause and resume an imported HTML5 animation inside Captivate using custom buttons? 

 

I've searched these forums and the internet, and I'm quite surprised I haven't found this discussed by now.

 

We're not trying to sync up timelines, just a simple pause/resume toggle button.

 

Thanks!

 

 

TOPICS
Advanced , Advanced actions

Views

807

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

Participant , May 21, 2020 May 21, 2020

Found my answer hidden here: https://community.adobe.com/t5/captivate/controlling-an-edge-animate-oam-file-with-the-captivate-play-pause-buttons-on-the-skin/td-p/7788704?page=1

 

@chrismay_at_delta had the answer:

 

To play, attach this code to the button:

document.getElementById("myFrame_Animation01c").contentWindow.exportRoot.play();

 

To stop, attach this code to the button:

document.getElementById("myFrame_Animation01c").contentWindow.exportRoot.stop();

 

To find "Animation01c" - this is what you name

...

Votes

Translate

Translate
Community Expert ,
May 20, 2020 May 20, 2020

Copy link to clipboard

Copied

It is possible, but not without programming a solution in JavaScript.  Out of the box Adobe Captivate does not provide any way to bridge the functionality between the Captivate parent content and the animation content running inside an iframe. 

 

This is one of the things I miss most about SWF objects that you could just add to a Captivate slide and check a box so that the timelines were synched.  HTML5 animations, even when created with Adobe Animate, are a whole different animal.

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
Participant ,
May 21, 2020 May 21, 2020

Copy link to clipboard

Copied

Found my answer hidden here: https://community.adobe.com/t5/captivate/controlling-an-edge-animate-oam-file-with-the-captivate-pla...

 

@chrismay_at_delta had the answer:

 

To play, attach this code to the button:

document.getElementById("myFrame_Animation01c").contentWindow.exportRoot.play();

 

To stop, attach this code to the button:

document.getElementById("myFrame_Animation01c").contentWindow.exportRoot.stop();

 

To find "Animation01c" - this is what you named your HTML5 animation inside of Captivate, with a "c" added after.

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
New Here ,
Jun 19, 2020 Jun 19, 2020

Copy link to clipboard

Copied

Hi dastie, do you need to add any code to the Adobe Animate file? Also, what method did you use to attach the code to a button in Captivate...Execute Javascript or Execute Advanced Actions?

 

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
Participant ,
Jun 19, 2020 Jun 19, 2020

Copy link to clipboard

Copied

For our purposes, we did not need to add code to the Animate file. 

 

We used "Execute Advanced Actions" because we needed the button to change states. I would assume either method is fine if you don't need to do anything else.

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
Advocate ,
Jun 21, 2020 Jun 21, 2020

Copy link to clipboard

Copied

Hi dastie

There's an alternative way, if the HTML5 animation is coming from Animate and is imported to CP as Webobject OAM file.

In my scenario there is an external JS (i call mine initmodule.js or short imjs), which is embedded in the Captivate HTML template index.html. Long story for another post, this is in any way my scope perspective. My imjs is practically operating in the window where the cpAPIInterface is hosted.

 

Anyway, with this in mind, one can set up a function in imjs like this:

 

function pauseAnimation() {
	let intoframePath = document.getElementsByTagName("iframe")[0].contentWindow;
	intoframePath.pauseTimeline();
}

 

in Captivate, I suppose on a Button-object onSuccess, you select Execute Javascript and type:

 

window.pauseAnimation();

 

in Animate you need to code a function like:

 

window.parent.pauseTimeline = function () {
	this.stop();
};

 

Well, this assumes you have a simple animation in Animate on the main timeline. This scope of course can be more complex, the general way described here works for me though.

Klaus

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
Participant ,
Jun 22, 2020 Jun 22, 2020

Copy link to clipboard

Copied

LATEST

Thank you Klaus. I will try that approach next 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
Resources
Help resources