Skip to main content
U
USM_online
Participating Frequently
March 23, 2016
Question

Communication Between HTML5 Animations and Captivate 9

  • March 23, 2016
  • 3 replies
  • 3999 views

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!

This topic has been closed for replies.

3 replies

S
sdwarwick
Participating Frequently
August 14, 2017

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

 

 -

D
dan561
Inspiring
August 21, 2017

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?

D
dan561
Inspiring
August 22, 2017

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?

D
d13d13
Known Participant
April 11, 2016

> 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
Lilybiri
Brainiac
April 11, 2016

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

    D
    d13d13
    Known Participant
    April 11, 2016

    @Lilybiri: From the official announcement:

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

    TLCMediaDesign
    TLCMediaDesign
    Inspiring
    March 24, 2016

    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.

    S
    sephoraa68601556
    Known Participant
    August 14, 2017

    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?

    J
    Jim Leichliter
    Brainiac
    August 14, 2017

    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.

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