Skip to main content

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.

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.

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".

Use Caspar-CG or SPX to play the HMTL-Template​

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

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