Construct Animate's built-in video export option does not currently support transparency in the resulting video files. However you can still get a video file with transparency by exporting an image sequence, and using the free and industry-standard video processing tool FFmpeg to convert the image files to a video. This tutorial covers how to do that.
A similar process can be used to convert an image sequence to animated image formats like APNG, animated WebP, animated AVIF, and GIF as well. APNG, WebP and AVIF all support full alpha transparency and can provide a single file with a lossless encoding of your animation. A section on this is included at the end.
Download FFmpeg
Before starting, download FFmpeg. It's available for Windows, macOS and Linux. Make sure you follow the link to download an executable or package appropriate for your system (and not just the source code).
Once downloaded extract the files to a folder on your device. For example on Windows, you should have a folder with ffmpeg.exe inside it.
Add a subfolder named frames in to the same folder as the FFmpeg executable. This will be a working folder for exported image files.
Transparency
Exporting an image sequence will generate PNG or WebP files with full support for alpha transparency, which can then be converted to a video with transparency. However by default Construct sets the bottom layer to an opaque color. If you want the background to be transparent, make sure all layers in the project are transparent.
Export an image sequence
First of all, use the Image sequence export option to export your animation as a sequence of image files. See the guide exporting an image sequence for more details. In this case the only important export options are the duration and framerate. Remember which framerate you chose as it will be needed again later. The image format doesn't matter (both support full alpha transparency and both are supported by FFmpeg), but choose PNG for the purposes of this guide. There is no need to recompress images as the image files are only used as an intermediate step.
Once the export finishes download the resulting zip file, and extract its contents in to the frames subfolder you created earlier.
open a command prompt
Open a command prompt at the folder containing the FFmpeg executable. This may be referred to as Terminal, Command prompt or PowerShell depending on your system.
Depending on the system and its settings, sometimes there are some useful shortcuts for opening a command prompt in a folder, such as Shift + Right click on Windows and choosing Open PowerShell window here. Usually there are several ways of doing this, or you can open a command prompt and type in a cd command to navigate to the right folder. This guide doesn't cover the full details of doing this, especially because it varies depending on the system - search the web if you need more help specific to your system.
To check you have a command prompt in the right folder, type in ./ffmpeg (or just ffmpeg in the legacy Windows command prompt) and press Enter. It should list the FFmpeg version and some diagnostic information.
Run FFmpeg
Now we're ready to run FFmpeg to encode the video from the image files. Type in the following command:
./ffmpeg -framerate 30 -i frames/%03d.png output.webm
Be sure to change -framerate 30 to whatever your exported framerate was. For example if you exported at framerate 60, change that to -framerate 60.
Here is a quick explanation of each part of this command:
./ffmpeg means to run the FFmpeg executable in the current directory-framerate 30 specifies a video framerate of 30 frames per second-i frames/%03d.png means to use as the video input all the image files in the frames subfolder (where we extracted the exported image files) with the names 000.png, 001.png, 002.png etc.output.webm means to output a video in WebM format as a file named output.webm in the current directory.
Press Enter to run the command. FFmpeg will encode the video, which may take some time depending on the size of the content and the speed of your machine. It will display progress updates as it works.
Once it finishes, you will have a video file named video.webm in the same folder as the FFmpeg executable. The video uses the VP9 codec by default.
use your video!
Now you can take video.webm and use it in other places where videos with transparency are supported!
Note that not all tools such as video players support videos with transparency and so may not display them correctly. One way to check it is to view the video in the Google Chrome browser, which does support videos with transparency. It can be viewed directly in Chrome, or you can use the minimal HTML file shown below to display video.webm on a blue background. If Chrome shows the video with the blue background showing through, then the video transparency is working correctly.
<style>
html, body {
background-color: blue;
}
</style>
<video controls width="500">
<source src="output.webm" type="video/webm">
</video>
As an example here is what the Animated splash example looks like, modified to have a transparent background, exported and converted to a WebM video file with transparency, and displayed on a blue background with the above test page.
Advanced options
FFmpeg is an industry-standard tool with highly advanced encoding features, allowing complete control over the precise format and encoding parameters used for the video. Advanced users can refer to the FFmpeg documentation for the full command line options available. There is also plenty of information available by searching the web, as FFmpeg is a widely-used tool.
Animated image formats
FFmpeg is a powerful tool that supports many formats, including animated image formats such as animated PNG (APNG), animated WebP, and animated AVIF, all of which support a full alpha channel for transparency. GIF is also supported, although it is lossy and does not support a full alpha channel. Videos are typically lossy formats, and animated image files provide a way to have a single file with a lossless animation, although the file size may end up much larger. Some tools may support using or importing animated images but not videos, including Construct's own Animation Editor, so this can be a useful alternative format.
To encode an image sequence to an animated image format, the steps are the same as for a video, but the command to run is changed as described below.
Animated PNG (APNG)
Run the following command to encode an animated PNG file.
./ffmpeg -framerate 30 -i frames/%03d.png -f apng -plays 0 output.png
Note the extra arguments in this command:
-f apng indicates to use APNG format, even though the output file ends with .png. You can omit this and use a .apng file extension and FFmpeg will automatically use the APNG format, but the .png file extension is more widely recognized by tools.-plays 0 indicates infinite looping. You can omit this and the animation will only play once.
Animated WebP
WebP is a good modern alternative to PNG, and although it may not be widely known, it also supports animated images too. Run the following command to encode an animated WebP file.
./ffmpeg -framerate 30 -i frames/%03d.png -lossless 1 -loop 0 output.webp
Note the extra arguments in this command:
-lossless 1 indicates to use lossless encoding. It can be omitted to encode a lossy animated WebP, but in this case you may be better off using a video which will have much more sophisticated lossy encoding support.-loop 0 indicates infinite looping. You can omit this and the animation will only play once.
Animated AVIF
Although not yet so widely supported, the modern AVIF image format also supports animated images too. Run the following command to encode an animated AVIF file.
./ffmpeg -framerate 30 -i frames/%03d.png -aom-params lossless=1 output.avif
This defaults the animated AVIF to infinitely looping. Note the extra argument in this command:
-aom-params lossless=1 indicates to use lossless encoding. It can be omitted to encode a lossy animated AVIF, but in this case you may be better off using a video which will have much more sophisticated lossy encoding support.
GIF
Construct has its own GIF export option which is an easier way to export a GIF. However using FFmpeg allows advanced control over how the GIF is encoded. The full set of available options are not documented here - search the web for more details - but the basic command to encode an infinitely looping GIF from an image sequence is shown below.
./ffmpeg -framerate 30 -i frames/%03d.png -loop 0 output.gif
Note that the GIF file format is very old, dating from the 1980s, and it does not have support for a full alpha channel for transparency. It only supports a single color that is masked as fully transparent. It also is lossy if the image contains more than 256 colors. Consider using another format if you need alpha transparency or lossless encoding.
Conclusion
While Construct Animate's built-in video export option does not support transparency, you can use the Image sequence export option and the free industry-standard FFmpeg tool to get a WebM video file with transparency. This can be useful for web design purposes or to use in other video-editing tools which can overlay videos making use of the transparency. You can also use a similar process to encode an animated image format like APNG, WebP or AVIF, allowing for lossless encoding with full alpha transparency, which can be a useful option for some tools.