!This read me is in process, so some parts of it may changed continuously.
This is a lower third template example for CasparCG. The animation is exported from After Effects with the bodymovin plugin (ver. 5.9.6), and then played in the html template with lottie player.
There are two examples in this repository; the only difference between them is the json files that the bodymovin plugin exports. The AE project is also here.
The js and html files are the same - index.js handles the animation, lottie is the player and webcg-framework.umd.js manages the input and control from CasparCG
The lowerthird looks like this:
The "Name", "Title" and a image(casparcg logo) are dynamic, and can be replaced. It's possible to add as many dynamic text fields and images as you like.
It´s the naming of the layers in After Effects that makes them dynamic in this template, so it looks like this in AE:
Dynamic text or images will have to start with a dot and then the layer name.
Here the names used are ".f0",".f1" & ".image" for the image, and to connect to those fields in the official CasparCG client, the key/values will look like this:
To test the image replacement, you can try to type "images/img_0.png" in the key: image
To determine which part of animation to play, some markers need to be put on the timeline in AE.
There has to be a "play" and a "stop". They follow play and stop called from casparcg.
So set a marker on the first frame of the given part of the animation, and in the naming box type "play"(if it's play), and type in the duration.
Do the same for stop - So if your template only has to have the dynamic fields updated on load, and there is no loop animation in it, see the fonts section of this readme
Update animation
If you need to update the template after the first load'n'play you have to add a marker and name it "update" like play and stop. The duration of the update marker could be 2-3 frames. Then the template will update, when update is called from casparcg. In this example, the update animation looks like this
So the update needs a delay so the text can animate out before the template updates, and it is possible to add that delay in the marker dialogbox. However, the format typed in the marker must be altered slightly.
Instead of "update", type "name: update" and on the next line, type "updateDelay: (the delay in frames, in this case 5)"
If there is a loop defined, it will end its cycle before the update animation runs.
Loop animation
If you want a loop animation, you can make your loop part of your timeline, just like play, stop, etc.
Then, right after play, the loop will start until stop is called. If you have a loop defined, but no update marker, the template will update when the loop plays and if its paused(loop delay) it will start right after the update is called. If stop is called, the loop will finish its cycle before the stop animation.
It is also possible to have a break between each loop, but then the format should look like update:
"name: loop", "loopDelay: (the pause in frames between each loop)"
You only need to type "loopExternal: true" if the loop is external.
So if you want to have the loop as an external animation, you make the line: loopExternal: true
If you have the loop external, the update animation (if you have one) will update immediately, and the loop just keeps running, but if you stop it, the loop will finish first.
The external loop has to be named "loop.json", when you export it. And in that timeline, you will have to, at a minimum, put in a marker named: "loop", and set the duration of the loop. In this example, there is also a play and stop animation.
The loop delay is set at the loop marker in the main timeline.
Export:
Export the animation and name it: data.json, and have all the js files from one of the templates in this repo and give it a spin. If you have any images, bodymovin will create a folder named: "images" and make a copy of the images used (this can be changed in bodymovin settings), and then lottie player will look for that folder/images, if the images are not dynamic.
Fonts
There are different ways to control fonts with bodymovin and this template.
Here are the 2 ways I use:
Glyphs: Add a text layer to the animation, type in all letters, numbers, etc. for every font used. Move that text layer(s) out the visible area, and make sure when you export it with bodymovin, that glyphs is checked.
Fonts paths
Uncheck glyphs
And when the fonts dialogbox popup during export do like this:
Rename the "Font Famliy", so it is the same as the name in the red dotted box, and then write the path in the "Font Path" For each font used, with a path typed in in the export, the template adds a "@font-face" to the style with the font-family and the path, when its loaded.
I made a fonts folder in the template, so here the path is "./fonts/nameOfFont.ttf"
This is just an example and a starting point. There are a lot of ways to do things differently to fit other kinds of templates. So let me know if anything is not working as it should or if you have any questions about the templates. [email protected]
Further reading about bodymovin/lottie/casparcg:
CasparCG forum:
https://casparcgforum.org/
Bodymovin:
https://github.com/airbnb/lottie-web/wiki/AfterEffects-Plugin-Information