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.
1 Correct answer
10
Replies
AdChoices