I’ ve made a quick little basic demo lower third - you can download the template and the ae project here:
template and ae project
Here a short and by no means fulfilling how to:
In AE name the dynamic text layers: .f0 .f1 or .name .title or whatever you like, just remember the “.” in front. (it will be a class in the code later)
Then make some cool graphic!
Select the composition in bodymovin extension - in setting - unmark “glyphs”
(you can use glyphs if you want them embeded, but you will have to write all the characters you will need in the text layer, )
and select standard export.
There is a lot of other options, but I have not used them so far.
Render, and bodymovin will ask for a path to the font - I place the font in the same folder as the rest of the template files, so it’s just the name (Roberto-bold.ttf in my example) of the font.
Bodymovin will make a data.json file (or what you call it) and if you have images in your AE timeline it will make a image folder to (look in example)
In the demo lower third template folder you can see the scripts needed for it to work in caspar -
At the top of the index.js you can change in and out frames, and thats the frame number from AE.
you can also change the path and name of the json file from bodymovin.
The lottie.js is the player, and then the wonderful webcg-frameswork.umd.js
Name the keys i CCG client the same way as in the AE Timeline: f0, f1 - but without “.” in front.
And it should work…
Load before play, the first time you use it. Stop will not remove the template, so if you hit play again after stop, it will play again.
If you want bodymovin to resize the dynamic text, pay attention to the size of the text box in AE.
Hope it helped, and if you have any questions let me know.
best regards Heine