Exporting GIFs with Construct Animate

11

Stats

1,790 visits, 2,365 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 9 Aug, 2022.

Construct Animate provides a GIF export option that lets you export your animation to a GIF file.

GIF limitations

GIF is an ancient format in computing terms, dating back to the late 80s. Computers back then looked and worked significantly differently to modern devices and had much more severe limitations. As a product of its time, it has some fairly serious limitations compared to modern image or video formats. These include:

  • Only supporting 256 different colors (compared to at least 16 million colors with modern formats), often resulting in wrong colors and "banding" on gradients
  • Poor compression relative to modern formats, resulting in unnecessarily large file sizes
  • Only 1-bit color-masked transparency, where one color can be chosen to be displayed as transparent (compared to full alpha channel and semitransparency support in modern formats)
  • No support for audio (modern video formats all support audio as well)

As a result of these limitations, many websites and apps actually display videos in place of GIFs, as they have both much better quality and much better compression. Confusingly, these websites and apps frequently still label such videos as "GIF". This even applies to entire services: despite the name, Giphy routinely serves up its animated images as MP4 videos.

Many of these websites and apps (including Giphy) accept video files in addition to GIF files. Usually this is preferable for the better quality and file size. Therefore where possible consider exporting a video instead. (Even if you need an animated image format, modern formats like APNG and WebP can handle that better, in which case consider exporting an image sequence and using one of the many free tools on the web to make an animated image file). The main reason to still use an actual GIF file is just for compatibility with software and services that don't yet support using a video in place of a GIF.

General options

The general GIF export options are:

  • Duration: how long the exported GIF should be, in seconds. You may want this to match the duration of the longest timeline in your project, or adjust it to include or exclude some other animated content.
  • Framerate: how many frames per second the exported GIF should have. This defaults to 12 frames per second. (With GIF's poor compression, higher framerates can produce very large file sizes.)

Advanced options

These options let you further customise how the GIF is exported.

  • Dither: to help work around GIF's 256-color limit, dithering can be used to create the impression of smoother color changes with a limited set of colors. There are four types of algorithm that can be used to apply dithering. Each also supports a "serpentine" variant which essentially runs the algorithm in alternating directions for each row rather than always in the same direction.
  • Enable transparency/Transparent color: check Enable transparency and choose a color to use that color as a transparent mask. For example if the transparent color is green (0, 255, 0), and the background color is set to the same color, then the background will become transparent. Note that the transparency will only apply to that exact color; even the slightest color change will appear as a green color rather than transparency. For this to work best, make sure the color does not appear in any of the other content you want visible, otherwise there may be other parts of the image that accidentally appear transparent.

Exporting

When the export process starts, it opens a popup window to do the exporting. If you see a message about a popup being blocked, make sure you allow popups. You may also need to re-start the export.

The popup window will display the progress and show a thumbnail of the current frame being exported. When export finishes, the popup window automatically closes, and then the collected frames will be encoded in to a GIF file. This process may take a while longer.

After that the result is shown in a dialog. This includes a link that can be clicked to download your exported GIF, or a link to share it directly to another app.

If you need more advanced control over the GIF encoding process, consider exporting an image sequence, which can then be imported in to third-party GIF creation tools.

  • 0 Comments

Want to leave a comment? Login or Register an account!