After Effects to WebM video for Website

After Effects to WebM using FFMPEG

Adobe After Effects is a powerful software tool for creating and editing visual effects and motion graphics. One of the key features of After Effects is the ability to export your work in a variety of formats, including PNG images with alpha channels.

Exporting PNG images with alpha channels allows you to create graphics that have transparent backgrounds, which can be useful for overlaying your graphics on top of other images or video footage. It’s especially nice when using on the web when you need to match your video background with your web page background . To export your work as a series of PNG images with alpha channels in After Effects, follow these steps:

  1. In the composition window, select the range of frames that you want to export.
  2. Go to File > Export > Add to Media Encode Queue
  3. In the Preset Browser, search for “png” and drag “PNG Sequence with Alpha” to the right hand window.
  4. Click on the one of the links if you need to scale your video down for the web.
  5. Click on the Output File to change the name if you want. Let’s say we call it “animation” here.
  6. Click Play.

Once you have exported your PNG images with alpha channels, you can use a tool like FFmpeg to combine them into a single video file. FFmpeg is a free and open-source software tool that can be used to encode, decode, and transcode audio and video files.

To combine your PNG images into a single video file using FFmpeg, you can use the following command:

ffmpeg “animation%03d.png” output.webm

This command will take all of the PNG images in the current directory, combine them into a video file with a frame rate of 30 frames per second, and save the output as a WEBM file.

In our testing, this produces not only a transparent background, but also the smallest file size as opposed to other format. For comparison, in the video, the same file was 5MB with animated gif, 1.1MB as mp4 using h.264 encoding, and only 250KB when using the method described above.

Let us know how we can help you on your next startup, web, or integration project!

Leave a Comment

Sign in to post your comment or sign-up if you don't have any account.