Skip to main content
D
da_texas
Inspiring
May 21, 2020
Answered

HTML5 animation control

  • May 21, 2020
  • 3 replies
  • 1298 views

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!

 

 

This topic has been closed for replies.
Correct answer da_texas

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 named your HTML5 animation inside of Captivate, with a "c" added after.

3 replies

kdmemory
kdmemory
Inspiring
June 21, 2020

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

D
da_texasAuthor
Inspiring
June 23, 2020

Thank you Klaus. I will try that approach next time.

D
da_texasAuthorCorrect answer
Inspiring
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 named your HTML5 animation inside of Captivate, with a "c" added after.

S
samc624129
Participant
June 19, 2020

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!

D
da_texasAuthor
Inspiring
June 19, 2020

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.

RodWard
Community Expert
RodWardCommunity Expert
Community Expert
May 21, 2020

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.

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