JSON Animations in ActivePresenter?

ActivePresenter Support Questions
1

Hi,

is it possible to use json file format in ActivePresenter for smaller illustrations? I want to have animated icons, which will only be animated when the user hovers over them. For the animated icons we use json files, which already include the animation itself. I was fiddling around with activepresenter but was not able to make the magic happen.

Best regards,
Mel

2

Hi Mel,

If the animated icon is independent from other ActivePresenter objects, you should embed it into a Web Object as mentioned in this thread Easy way to insert Lottie animation - #2 by Hang

Otherwise (e.g. in case you want to click the animated icon to show/hide another object), you should do the following steps to embed the animated icon directly into a shape:

  1. Add script to load Lottie library in Project > Properties > On Load event
     if (!window.bodymovin) {
     var lottieUrl = 'https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.11.0/lottie.min.js';
     var script = document.createElement("script");
     script.type = 'text/javascript';
     script.src = lottieUrl;
     document.head.appendChild(script);
     prez.loadLottieAnimation = function(loadAnimFunc) {
         if (window.bodymovin)
             loadAnimFunc();
         else
             script.addEventListener('load', loadAnimFunc, false);
     };
 }
  2. Add a shape to the slide, the lottie animation will be loaded into this shape in step 3. You can make this shape transparent by settings its fill color opacity to 0
  3. Add script to load Lottie animation in the slide On Load event
     // load Lottie animation into 'lottie' shape
 var jsonAnim = {}; // replace {} by your JSON animation data
 var animAPObject = prez.object('lottie'); // update the shape name
 
 prez.loadLottieAnimation(function() {
     var animLottieObject = bodymovin.loadAnimation({
         container: animAPObject.node,
         renderer: 'svg',
         loop: false,
         autoplay: false,
         animationData: jsonAnim // or path: path to JSON file
     });
     // play animation on rollover/ rollout
     var direction = 1;
     animAPObject.on('ap-rollover', function() {
         animLottieObject.setDirection(direction);
         animLottieObject.play();
     });
     animAPObject.on('ap-rollout', function() {
         animLottieObject.setDirection(-direction);
         animLottieObject.play();
     });
 });

Sample project
Lottie.approj (300 KB)

Regards

2 Likes
3

Thanks again for your great help!

1 Like