JSON Animations in ActivePresenter?

[ToanLS (Toan Le)]

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