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?

TLCMediaDesign
TLCMediaDesign
Inspiring
August 28, 2017

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. 


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

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.

    U
    USM_onlineAuthor
    Participating Frequently
    March 24, 2016

    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
    Lilybiri
    Brainiac
    March 24, 2016

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

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