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!
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
...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.
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.
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!
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.
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
Copy link to clipboard
Copied
Thank you Klaus. I will try that approach next time.