• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

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

Engaged ,
May 11, 2018 May 11, 2018

Copy link to clipboard

Copied

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.

Views

1.4K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Engaged , May 16, 2018 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({

  containe

...

Likes

Translate

Translate
Advisor ,
May 11, 2018 May 11, 2018

Copy link to clipboard

Copied

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...?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
May 11, 2018 May 11, 2018

Copy link to clipboard

Copied

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).

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
May 14, 2018 May 14, 2018

Copy link to clipboard

Copied

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/

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
May 14, 2018 May 14, 2018

Copy link to clipboard

Copied

Thanks Jeremy! I have read your blog post before and it is an amazing resource! I guess I'm being lazy and trying to find a way to include animation via bodymovin, since I don't know how to write css animation and I've had some difficulties getting that method to work (through all my own fault, I'm sure).

It is a pretty simple scale up with some overshoot and bounce animation however.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
May 14, 2018 May 14, 2018

Copy link to clipboard

Copied

Yes anything with physics (like bouncing) will require a more robust external js library.  If you're just messing around with straight forward animation it's pretty simple to learn some basic css.  This website CSS Animations vs Web Animations API | CSS-Tricks  has been really helpful.

I don't think I can help you much with bodymotion though. Have never tried it but will. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
May 14, 2018 May 14, 2018

Copy link to clipboard

Copied

Thanks, I will check out those links!

Would love to see a blog post on your experience with bodymovin if you ever get the chance to try it out!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
May 16, 2018 May 16, 2018

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 15, 2021 Apr 15, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 15, 2021 Apr 15, 2021

Copy link to clipboard

Copied

This HELP file for CpExtra might be of use:

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

It's a new feature recently added to CpExtra.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 16, 2021 Apr 16, 2021

Copy link to clipboard

Copied

LATEST

Thank you Rod! 

 

I saw what CpExtra is capable to do, but I haven't tried it out yet. My idea was to find an alternative solution, but still it will be of tremendous help if you can assure me that the CpExtra workflow will allow me to load .json animations into Captivate projects, what kind of container should I use, and of course if this is possible within fluid-boxes for responsive projects.

 

Since I haven't seen an actual project working with .json animations, I'm still reluctant to buy CpExtra. 

 

As I said, I can always upload this .json animations into a server and place them within a web object in captivate pointing to a URL. But I'm looking for a standalone solution. 

 

 

Kind regards, 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines