Skip to main content
Inspiring
May 11, 2018
Answered

Including After Effects animations into Captivate project using bodymovin and external js file

  • May 11, 2018
  • 2 replies
  • 2412 views

I'm working on trying to find a way to include After Effects animations into my captivate projects using the bodymovin plugin and external javascript files. Before I continue, I'll mention I'm very new to code/javascript libraries/etc. so I may not be correct in everything I say and I apologize. I'd prefer to be able to use after effects animations, because I'm much more familiar with creating motion graphics in AE than using Captivate's clunky effects panel.

With the help of other forum users and after a lot of experimentation - I was able to recreate this awesome codepen setup (Simple Bodymovin Demo​)  with my after effects animation using Dreamweaver and publishing the index.html file to a web server. The animation loads up perfectly.

From there, I tried to figure out how to include a javascript file into my captivate project and found this solution to work well - Load a java script library in captivate

However, my after effects animation is not playing as expected.

My captivate file is setup as such. I have two slides. On the first slide there is a simple shape button and on the second slide there is nothing.

My onEnter action for the first slide is to execute javascript and in the script window I wrote -

function addScript(src){

var s = document.createElement ('script');

s.setAttribute('src', src);

document.body.appendChild(s);

}

addScript('cp.js','bodymovin.js');

Then for the button shape I gave it an action of execute javascript and in it's script window I wrote -

nextSlide();

This is a function I defined in my cp.js file.

Note, after I publish my project I add in my cp.js file and bodymovin.js file to where the index.html file of the project is located. I also add in my animation json file, which is titled data.json (the default name from bodymovin I believe).

On my second slide, the onEnter execute javascript action script window has -

alert("youfoundme!");

var animation = bodymovin.loadAnimation({

  container: document.getElementById('bm'),

  renderer: 'svg',

  loop: true,

  autoplay: true,

  path: 'data.json'

})

I added the alert just as a marker for myself. The rest of the script I got from the codepen I listed above.

Now, in my cp.js file I have written -

alert("Javascript file loaded Okay!");

function nextSlide(){

window.cpAPIInterface.next();

}

function prevSlide(){

window.cpAPIInterface.previous();

}

The alert pops up on the first slide and the nextSlide(); function works on my button, so I know my Captivate project is reading this file okay. But when I publish my project and go to the second slide, I get the alert, but my animation data.json does not play. I imagine this has something to do with the bit of code from the codepen ?? Not sure what kind of container Captivate is, or what needs to be listed there??

Any help would be much appreciated and I hope I explained my situation well!

Thanks.

This topic has been closed for replies.
Correct answer KeelyM

An update for anyone who stumbles across this trying to do the same thing. I'm an idiot and didn't add an alert line to the bodymovin.js file, so I didn't realize until recently that it wasn't loading the file. I thought I could add two external js files, separating them with commas, but it was only loading the first one listed.

Anyways -

Once I put bodymovin.js first and changed my code from above to (this is on the onEnter action of my slide)  -

var animation = bodymovin.loadAnimation({

  container: window.cpAPIInterface.getVariableValue("myContainer"), // with how it was written previously it was calling to something that doesn't exist in captivate, so I added a clickbox on my slide and named it 'myContainer'.

  renderer: 'svg',

  loop: true,

  autoplay: true,

  path: 'data.json'

})

it shows up now!

I guess if you want to load two external files they need to be written on separate lines -

function addScript(src){

var s = document.createElement ('script');

s.setAttribute('src', src);

document.body.appendChild(s);

}

addScript('bodymovin.js');

addScript('cp.js');

when I had them in the same line - addScript('bodymovin.js','cp.js'); it was only loading the first one listed.

  

Now time to experiment with this some more!

2 replies

KeelyMAuthorCorrect answer
Inspiring
May 16, 2018

An update for anyone who stumbles across this trying to do the same thing. I'm an idiot and didn't add an alert line to the bodymovin.js file, so I didn't realize until recently that it wasn't loading the file. I thought I could add two external js files, separating them with commas, but it was only loading the first one listed.

Anyways -

Once I put bodymovin.js first and changed my code from above to (this is on the onEnter action of my slide)  -

var animation = bodymovin.loadAnimation({

  container: window.cpAPIInterface.getVariableValue("myContainer"), // with how it was written previously it was calling to something that doesn't exist in captivate, so I added a clickbox on my slide and named it 'myContainer'.

  renderer: 'svg',

  loop: true,

  autoplay: true,

  path: 'data.json'

})

it shows up now!

I guess if you want to load two external files they need to be written on separate lines -

function addScript(src){

var s = document.createElement ('script');

s.setAttribute('src', src);

document.body.appendChild(s);

}

addScript('bodymovin.js');

addScript('cp.js');

when I had them in the same line - addScript('bodymovin.js','cp.js'); it was only loading the first one listed.

  

Now time to experiment with this some more!

Participant
April 16, 2021

Hey there Keely!

 

I wonder if you can share with us the Captivate project in which you've managed to import JSON animations via bodymovin script. I'm trying your workflow in Captivate 2019 and is not working. 

 

I have tried to follow your steps but for some reason I haven't managed to view my bodymovin animation in the HTML5 output. Which I have previewed in my desktop and upload to a server. As I understand the JSON animation should display inside the clickbox named "myContainer". Please correct me if I'm wrong.

 

After publishing I copied my data.json and bodymovin.js files into the main folder of my html5 output. I have also tried publishing these files within the export by means of assigning an invisible button the Action "OpenURL or file" to bring bodymovin.js and data.json to the HTML5 folder.

 

On slide enter I have stacked both your JS actions in an Advanced action:

})
function addScript(src)
{ var s = document.createElement ('script');
s.setAttribute('src', src);
document.body.appendChild(s);
}
addScript('bodymovin.js');
var animation = bodymovin.loadAnimation({
  container: window.cpAPIInterface.getVariableValue("myContainer"), 
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json'
})

 

Until now, this is not working. The only alternative that is working is to host my bodymovin animation in a server and display this web object in Captivate via URL. But I'm looking for a way to avoid this for security problems with some of my clients. 

 

Any insights will be much appreciated!

 

Jose

RodWard
Community Expert
Community Expert
April 16, 2021

This HELP file for CpExtra might be of use:

https://widgetking.github.io/cpextra/features/javascript.html#loading-javascript-files-into-captivate

It's a new feature recently added to CpExtra.

Stagprime2687219
Legend
May 11, 2018

Have you tried to zip your HTML file and import it as an HTML5 Animation under the Media Menu?

Perhaps that is all you need...?

Or is the JavaScript part a requirement for the animation to work?

When I have included a different JS file, I had to put it in the assets/js/  folder and then refer to it by adding it to the following line of the published Captivate index.html file.

          var lJSFiles = [  'assets/js/jquery-1.11.3.min.js','assets/js/yourfile.js','assets/js/CPM.js' ];

Perhaps I don't fully get the needs on this one but maybe this will help spark some ideas...?

KeelyMAuthor
Inspiring
May 11, 2018

Thanks for the response!

I've had issues with adding .zip files as HTML5 animations as they usually cause my project to crash/fail on publish. Not sure why? But I haven't tried zipping an HTML file, I've done it with .oam files and .js files. 

I don't necessarily have a specific need I'm trying to meet right now, more so just wanting to experiment and see what is possible. I know there's a few other ways I could add in animations, I was thinking though maybe using .json files for my animations would keep the project lighter and help it run more smoothly (as opposed to adding in a bunch of GIFs which is what I've been doing).

Jeremy Shimmerman
Participating Frequently
May 14, 2018

I wasn't able to view your codePen but was curious as to what kind of animation you were trying to accomplish.  You don't always need to integrate an external js library to do animations.  Check out my blog 

https://elearning.adobe.com/2018/01/how-to-animate-buttons-and-lots-of-other-cool-javascript-stuff/