Trigger HTML5 Animation via JavaScript

ActivePresenter Support Questions
#1

Problem:
Hey there :slight_smile:
I just wanted to know if it is possible to start a HTML5 Animation via Java Script.
The idea is that I Drag a dragsource on a droptarget. When this happens, the HTML5 Animation should be played. So I imagined the trigger like this:
image

But I can’t find anything on the internet that helps me to fill out the JavaScript with the right function. The animation is inserted as a Web Object via HTML package and the Entry Point is displayed, too.

Any help would be highly appreciated.

Kind reagards
Sarah

#2

Hi,

It’s possible both conditions below are met:

  1. ActivePresenter HTML5 is allowed to access your HTML5 animation: You should host both ActivePresenter HTML5 and your HTML5 animation on the same domain.
    Otherwise, you need to enable cross-origin resource sharing for your HTML5 animation page so that it can be accessed by ActivePresenter HTML5.

  2. Your HTML5 animation provides a public function to play it.

// get HTML5 animation window and document from the web object name
var animationIframe =  prez.object('Web Object name').frameNode;
var animationWindow = animationIframe.contentWindow;
var animationDocument = animationIframe .contentDocument;
// call HTML5 animation public function to start it
// suppose the function is startAnimation(), attached to the window object
animationWindow.startAnimation();

Regards

#3

Hi，
What if I want to trigger the ActivePresenter function in my HTML5 animation? How do I get the function I created in ActivePresenter from HTML？
Such as:

var doc = AtomiAP.presentations[0];
var myFunction = doc.getFunction('myFunction');
if (myFunction)
  myFunction(doc);

The above code is just scribbled by me, I hope you can provide the correct code. Thank you!

#4

Hi @wei_xie,

In your ActivePresenter project, you need to assign your function as a property of an object that you can access from outside (e.g. the presentation prez object, window, AtomiAP):

// in ActivePresenter
prez.myFunction = function() { /* your function body */ };

// outside ActivePresenter (you may need to get AtomiAP object from the frame which it's embedded into)
var prez = AtomiAP.presentations[0];
if (prez.myFunction)
    prez.myFunction();

Regards