AfterEffects to Realtime

Author: Streamshapers

This is a quick overview tutorial-series how to do the full workflow from a simple AfterEffects Composition to a dynamic HTML-Realtimegrafic ready to use with e.g. CasparCG or SPX.

Start in AfterEffects

The first Step is to create a simple animation in Adobe AfterEffects including the conventions for StreamShapers-Ferryman.

This video is hosted on YouTube. Loading it will transmit your IP address and may set cookies. This choice only loads this one video — use Cookie Settings to allow all future videos automatically.

Start in AfterEffects — Setting up the composition

Export with Bodymovin (Lottiefile)

In the next video, you will lern how to create a Lottiefile with the extension "Bodymovin". You get all the important export options.

Export with Bodymovin — creating the Lottie file

How to use Streamshapers-Ferryman

In this chapter you will upload the lottie file into Ferryman to convert it into a production ready HTML-Graphic-Template. This is where "the magic happens".

Using StreamShapers Ferryman to convert the Lottie to HTML

Use Caspar-CG to play the HTML-Template

Now you are able to use your template for your production. You will lern how to use it with CasparCG.

Playing the HTML template in CasparCG

Your next steps could be:

Start with a more complex animation e.g. this Lower Third
Read the our documentation to get all the features
Join our Discord-Community to get in touch with other users Discord

Author: Streamshapers​

Start in AfterEffects​

Export with Bodymovin (Lottiefile)​

How to use Streamshapers-Ferryman​

Use Caspar-CG to play the HTML-Template​

Your next steps could be:​