Template After effect

[nicholas.ichkitidze]

Dear All

Can I create a lower third template in Adobe After Effect and manage it from Caspar? Any links, Doc, tutorials, ideas?

thanks a lot

[Heine_F]

Yes, you can export a timeline with the plugin bodymovin(free) - The plugin exports files to be used by a player called lottie, and that can be embeded in a html template and controlled with javascript/casparcg -
I made a demo template in another post, there is also the ae file.
Its not everything in After effects that works in the plugin, like particles - but you can always export it as a png sequence reimport and then export that with bodymovin. There are other ways to do the controlling javascript, just search the forum after bodymovin or lottie

Bodymovin?

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 …

You can get the plugin here: Adobe Exchange
Lottie and after effects:
Lottie Docs

I hope that helps!

[nicholas.ichkitidze]

Hello Heine_F

I can manipulate on your lower third template from Html using CasparCG invoke method.
but
I have troubles exporting composition from AE using bodymovin extension in a proper way. could you please guide me how to achieve this?

below, this is screenshot of your template which work fine with CasparCG for me. I mean how to export like this files from AE using bodymovin?
thanks in advance

[didikunz]

I am not sure, if you understand the workflow here: What you export from After Effects (using BodyMovin) is only the data.json file. The rest needs to be built by you, that is not been generated. I currently work on a tool to automate this process, but it does not run yet.

[Heine_F]

hi Nicholas - Didi wrote the answer - only the json file, and if there is any images in your comp it will generate a Images folder.

You can use the js files in the template for your own export from AE - replace the data.json with your export from bodymovin(name it: data.json). In the index.js file, you can change the In & out of play,stop and update.

Place the font you want to use in the folder, type the font name with filename(ttf,otf etc.) in the export dialog box and it should work.

Below is the code you will need to change in the index.js file:

var animSettings = {
    "play": {
        "in": 0,
        "out": 25
    },
    "update": {
        "in": 30,
        "out": 45

    },
   
    "stop": {
        "in": 50,
        "out": 66
    }
}

[nicholas.ichkitidze]

Really thanks a lot Heine_F.
Now I understand behavior of bodymovin!. but I can not find solution for this issue.

for example from above code, how to can I play section “update” only with loop and further at any time how to stop current iteration at the end of “update” and than play “stop”?

thanks again

[Heine_F]

Hi Nicholas, sorry for the late replay. Did you find a solution?

[didikunz]

If I remember right, there is some kind of position event, that you can subscribe to. If the loop reaches the out frame (45) go and play the “stop” section. Of course in the stop command, that is called by Caspar you need to set a boolean, that signals the position event handler, that you want to skip out.