Highlighted

HTML5 animation control

Explorer ,
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!

 

 

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.

TOPICS
Advanced, Advanced actions

Views

404

Likes

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

HTML5 animation control

Explorer ,
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!

 

 

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.

TOPICS
Advanced, Advanced actions

Views

405

Likes

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
May 20, 2020 0
Adobe Community Professional ,
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.

Likes

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
Reply
Loading...
May 20, 2020 0
Explorer ,
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.

Likes

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
Reply
Loading...
May 21, 2020 0
New Here ,
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!

Likes

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
Reply
Loading...
Jun 19, 2020 0
Explorer ,
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.

Likes

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
Reply
Loading...
Jun 19, 2020 0
Advocate ,
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

Likes

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
Reply
Loading...
Jun 21, 2020 0
dastie LATEST
Explorer ,
Jun 22, 2020

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Jun 22, 2020 0