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

Communication Between HTML5 Animations and Captivate 9

Community Beginner ,
Mar 23, 2016 Mar 23, 2016

Copy link to clipboard

Copied

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!

Views

2.6K

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
People's Champ ,
Mar 24, 2016 Mar 24, 2016

Copy link to clipboard

Copied

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.

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
Community Beginner ,
Mar 24, 2016 Mar 24, 2016

Copy link to clipboard

Copied

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.

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
Community Expert ,
Mar 24, 2016 Mar 24, 2016

Copy link to clipboard

Copied

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

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
Community Beginner ,
Mar 25, 2016 Mar 25, 2016

Copy link to clipboard

Copied

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. 

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
People's Champ ,
Mar 25, 2016 Mar 25, 2016

Copy link to clipboard

Copied

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?)

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
Community Beginner ,
Mar 25, 2016 Mar 25, 2016

Copy link to clipboard

Copied

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

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
Community Beginner ,
Aug 14, 2017 Aug 14, 2017

Copy link to clipboard

Copied

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?

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
Advisor ,
Aug 14, 2017 Aug 14, 2017

Copy link to clipboard

Copied

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.

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 ,
Apr 11, 2016 Apr 11, 2016

Copy link to clipboard

Copied

> 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

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
Community Expert ,
Apr 11, 2016 Apr 11, 2016

Copy link to clipboard

Copied

@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.

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 ,
Apr 11, 2016 Apr 11, 2016

Copy link to clipboard

Copied

@Lilybiri: From the official announcement:

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

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
Community Expert ,
Apr 11, 2016 Apr 11, 2016

Copy link to clipboard

Copied

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.

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
Contributor ,
Aug 14, 2017 Aug 14, 2017

Copy link to clipboard

Copied

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);

 

 -

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
Engaged ,
Aug 21, 2017 Aug 21, 2017

Copy link to clipboard

Copied

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?

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
Engaged ,
Aug 22, 2017 Aug 22, 2017

Copy link to clipboard

Copied

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?

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
Community Beginner ,
Aug 22, 2017 Aug 22, 2017

Copy link to clipboard

Copied

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

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
Community Beginner ,
Aug 22, 2017 Aug 22, 2017

Copy link to clipboard

Copied

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.

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
Community Beginner ,
Aug 22, 2017 Aug 22, 2017

Copy link to clipboard

Copied

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
Advisor ,
Aug 22, 2017 Aug 22, 2017

Copy link to clipboard

Copied

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?

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
Community Beginner ,
Aug 23, 2017 Aug 23, 2017

Copy link to clipboard

Copied

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. 

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
Engaged ,
Aug 24, 2017 Aug 24, 2017

Copy link to clipboard

Copied

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

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
Community Beginner ,
Aug 28, 2017 Aug 28, 2017

Copy link to clipboard

Copied

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. 

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
People's Champ ,
Aug 28, 2017 Aug 28, 2017

Copy link to clipboard

Copied

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

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
Community Beginner ,
Aug 28, 2017 Aug 28, 2017

Copy link to clipboard

Copied

LATEST

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. 

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