Communication Between HTML5 Animations and Captivate 9

[USM_online]

Lilybiri posted this in response to a question re: animation in Captivate, and I'd love to get some further clarity on it.

"Edge Animate can create animations, and 'was' considered the alternative for Flash animations when the HTML5 hype started....Captivate has the possibility to embed such animations, like you can embed animated GIF's (old but still functional both for SWF and HTML5 output) as well. However you have to be aware of the fact that there is no direct communication between those animations and Captivate, unless you know JavaScript. Such a communication is only possible using widgets."

Emphasis mine.  What widgets or what JavaScript knowledge is required here?

Context:

My team has already started making HTML5 animations in Edge Animate, and I'm tasked with getting them to play nicely with Captivate 9 in a responsive course that utilizes several of the interactivities captivate is set up to execute.  I've imported the first .oam file onto my slide just fine.  My "on enter" action is set to "pause" and the animation plays on its own nicely.  Upon conclusion of the animation I'm seeking to set up two click boxes over elements of the animation and use those click boxes as buttons to trigger subsequent respective animations with attached audio. 

My direction is to have all three animations able to play individually on the same slide to give the learner a seamless experience, rather than put each on its own slide and repeat the above process.  Can any of you offer some insight as to a good way to execute this?  I don't have current experience with JavaScript, CSS or html, but I've done some coding years ago and I'm not afraid to learn if that is needed.  Some direction on this would be greatly appreciated!

[TLCMediaDesign]

My thought is that you need to put invisible buttons in the subsequent animations so that the user can click them to start. They should initially be paused.

Communication from an oam can be done with javascript to Captivate quite easily with window.parent.window.captivateCommand, but communication from Captivate to an oam is much more difficult as you need to get a reference to the iframes that the animations are in and the iframe content.

[USM_online]

Thanks a lot for the reply. 

Regarding your first point--I had a similar thought to create buttons on the subsequent animations to trigger them to start.  But when I import them into the slide I'm not seeing how to pause them upon entry, so they load and play automatically. When I look at the options on Adding animations to an Adobe Captivate project I see how to delay them for a particular time, but not pause them completely like a video until the user creates a triggering event to start them.  Can I pause them upon entry in Captivate or does that need to set in Edge Animate before exporting the .oam?

Thanks for offering the window.parent.window.captivateCommand--it's not listed in the documentation I've seen.  Broad question, but how do I get to the iframes and the content?  The course we're working on is an animation-heavy project originally built desktop-only in Flash being rebuilt using Captivate for responsiveness, so there's a high likelihood of needing Captivate to communicate with the oam files later on.

Thanks again for your insight.

[Lilybiri]

You'll have to set that pause in Edge Animate (was same for Flash animations) ,which is pretty easy with the available snippets.

[USM_online]

I did set the pause in Edge easily enough, thank you.  It was as simple as disabling "autoplay" actually.  Now the issue is getting Captivate to play it upon clicking the associated click box, which I'm thinking has to do with what TLC mentioned about the iframe content.  Do either of you have any further suggestions around that?  Thanks for the pointers. 

[TLCMediaDesign]

I think you are over complicating it. Can you not create the "click box" or an invisible button in EDGE to start the animation?

I don't use Edge at all, but I think you should be able to do something like that.

Otherwise you have to:

1. Get a reference to the iFrame(s) in Captivate

2. Figure out which iFrame has the animation you want to trigger (may be next to impossible without probing for some unique value)

3. Get a reference to that iFrames content

4. Send the JavaScript to play the animation (whatever that might be?)

[USM_online]

Ha!  I think you might be right about creating that button in Edge.  I'll give it a whirl and report back.

[sephoraa68601556]

How do you do this? I have communication between the HTML5 web object and the captivate stage, now I would like to do the reverse. How do you figure out the scope of the iframe that the web object is in? There has to be a way to trace this out right?

[Jim_Leichliter]

Open the developer tools in your browser and look at the structure of the page.  You'll see that the HTML5 animation is an iFrame within Cp.  Through JavaScript, you can programmatically obtain a reference to the window and/or document of the iFrame.  But first, you'll have to get a reference to the iFrame itself.

[d13d13]

> My team has already started making HTML5 animations in Edge Animate

Are you aware that Edge Animate was discontinued in November 2015?

Adobe Edge Animate Team Blog

[Lilybiri]

@d13d13  May I add a small correction: there will be no more updates because of the release of Animate CC, but that is not the same as 'discontinued' IMO. Edge Animate is still available and has many features that makes it more user friendly than Animate CC. Try to create an OAM with a transparent background in Animate CC, or a responsive animation, or a looping animation and you'll see the difference with Edge Animate.

[d13d13]

@Lilybiri: From the official announcement:

"Edge Animate [is] no longer being actively developed."

[Lilybiri]

I know perfectly well (I am an ACP after all)  but it is still supported and available: no longer updated is the same as what no longer being actively developed.  As long as it is available I will largely prefer Edge Animate for quick ans simple OAM's. And I hope that more aspects of Edge Animate will make it to the big brother Animate CC.

[sdwarwick]

if you are using the "web object" to embed the iframe, then I'm happy to report that you can set the iframe ID in the "properties" tab.    setting the id to something like "my_iframe"  results in an actual id on the iframe of "myFrame_my_iframec" -  note the "c" on the end and the "myFrame_" at the beginning.  

with that you can easily get into the iframe and send messages.  

idoc = $("#myFrame_my_framec") ;

iframe_reference = $("#an_id_you_want_from_the_iframe",idoc);

 -

[dan561]

That looks great, but how would I call a function in the HTML? I have a button on my slide that I would like to use to start the animation moving in my iFrame called animationFrame. The function in the HTML is animate()

I assume there's something to add, since the following doesn't work:

idoc = $("#myFrame_animationFramec");

idoc.animate();

How do I create a reference to that function so it can be called?

[dan561]

I've found a partial answer:

document.getElementById('myFrame_animationFramec').contentWindow.animate();

OR

window.frames[0].frameElement.contentWindow.animate();

Both work in IE and Firefox, but not in Chrome and I haven't tested in Safari yet.

Any suggestions for making this work in all browsers?

[sephoraa68601556]

Works on OS X in Firefox and Safari for me but not Chrome. Thankfully I only have to worry about FF.

[sephoraa68601556]

Interesting, it works in all browsers for me when I Preview/HTML5 in browser, even chrome. When I publish the course however, it no longer works in Chrome.

In Captivate I am using window.frames[0].frameElement.contentWindow.tl.pause(); and window.frames[0].frameElement.contentWindow.tl.play(); to control an embedded html5 animation. It is referencing a Greensock timeline named "tl". This pauses and plays the html5 timeline as expected.

I am able to communicate from my HTML5 animation to Captivate slide in all browsers using window.parent.window.cpAPIInterface.next();, for instance, to move to the next slide.

[sephoraa68601556]

There is an issue when communicating to an iframe in chrome: javascript - SecurityError: Blocked a frame with origin from accessing a cross-origin frame - Stack ...

[Jim_Leichliter]

If the iframe is a different origin, then yes, this will be problematic in Chrome.  If you own both pages, and it's still different origins, like the post suggests, there are workarounds.  Is the page hosting the iframe and the iframe itself of the same origin?

[sephoraa68601556]

I am zipping up an html5 doc and dependencies and using Media/HTML5 animation to embed in Captivate. The HTML doc is pointing to remote jquery and gsap. I tried making those local and zipping them up with the rest and it still throws the cross-origin frame error. I need to get a better understanding of origin and iframes. 

[dan561]

Does it make any difference embedding as Media/HTML5 or Web object?

[sephoraa68601556]

It seems like the only difference between web object and HTML5 animation is the ability to create a custom embed. New problem we are having is Chrome on mobile tablets does not allow Drag and Drop. So frustrating. Solve one big problem, face the next. This has nothing to do with Captivate. It is a Chrome default setting. 

[TLCMediaDesign]

You'll need and external JS library. I use touch-punch for jQuery UI. There is also interact.js and a few others

[sephoraa68601556]

The problem is that Chrome drag and drop functionality is disabled by default on our learners tablets, even the new Surface Pro tablets. Waiting to get Chrome installed on our development machine to see what settings need to be changed. I could not get any drag and drop functionality to work in the Chrome browser. Tried Codepen etc... Drag and drop would not work. Everything works great in FF but the company just switched to Chrome for all of our learners.