Skip to main content
A
A.I.1
Legend
May 31, 2018
Answered

Best way of rendering to an animated png with alpha channel?

  • May 31, 2018
  • 3 replies
  • 38215 views

I'm doing a logo animation for someone. They've asked for it in "png" format. At first I thought they meant quicktime with png compression and an alpha channel (doable in CC 2017), but they say they want a "format that will be easy to place into banners, newsletters, website pages etc..

Do I need to render out of After Effects and load it into some other program to convert it into an animated .png (apng format?), and if so is there a recommended program for this? Or is there a better format that will do what is being asked (.gif won't be the best since the logo has >2000 colours).

    This topic has been closed for replies.
    Correct answer Warren Heaton10841144

    You can create a PNG sequence (multiple frames of the animation exposed to PNG file format with transparency). 

    You can't create single PNG file that contains an animation.  The file format doesn't support that.

    3 replies

    A
    A.I.1Author
    Legend
    June 4, 2018

    Thanks for the info about GifyGun. It is a lot more convenient to use than exporting the frames (when those exported frames aren't needed for something else) and importing into another program etc. then exporting from that.

    The only issues with Gifygun is that it doesn't let you specify a filename (sets it based on the composition name, with a number added if there is already a file with that name), but more importantly, at least for the comp of the last delivery, the edges of things, where they meet the transparent parts of the gif, look more pixelated/less anti-aliased than the output of Easy Gif Animator Pro. Another small thing is towards the end of the anim where a coloured object appears after the previous part of the anim had been grayscale, isolated coloured pixels appear within the grayscale areas of the frame (but this is just a few and isn't really very noticable at normal res, but doesn't happen with the same anim from the other program. Though in GifyGun it seemd to happen less when GifyGun scaled down the comp, but like I said, it's not really noticeable at normal res).

    So the only real issue with GifyGun seems to be the more pixelated outline of objects where they meet the transparent areas (maybe because transparency was one of the newer updates), eg. things that are round/rounded (circular object, rounded outline of text) look less round and more step-like jagged than the rounder look from Easy Gif... This is when viewed in both smplayer and Internet Explorer at normal (100%) size.

    Roei Tzoref
    Roei Tzoref
    Legend
    June 4, 2018

    Please report your issues to GifGun Author in Aescripts support page and help make it better.

    PGZ@Mobibase
    PGZ@Mobibase
    Inspiring
    June 1, 2018

    The gif option is by far the easyest. But it will probably be limited for the 2000 colors you need.

    If you worked with vectors, you may want to take a look at lottie,

    GitHub - airbnb/lottie-android: Render After Effects animations natively on Android and iOS, Web, and React Native

    It is more complex to build and handle than gif or even Apng, but this kind of "code-render" is slowly coming to a mature state.

    Basically It renders your animation in json-like, meaning it keeps all vector information intact and is supposed to be easy for a developer to integrate in HTML5.

    Sadly, it does not -yet- handle all types of filters, objects and some other stuff.

    Hope this helps....

      A
      A.I.1Author
      Legend
      June 1, 2018

      Thanks. My animation is using bitmapped graphics (eg. .png) as well as vector (.ai) though they were originally ai., with various AE effects. I think that might be good for in future but it seems mostly about mobile devices too (not sure it would work for email newsletters on PC). Basically the files need to be delivered today (as well as the animation finished). So I'll probably look at that later but for now I'll probably just deliver it as the formats previously mentioned (the person originally asked for a png so if I can find an animated png/apng format program I'll load the After Effects frames/video into that and save/export. But I'll also upload a quicktime png compressed video and maybe a png sequence (maybe different frame sizes - or at least a smallish frame size for the animated png/apng) and also a .gif (smaller frame size than the quicktime png). Hopefully the thousands to 256 colours won't be too much of an issue. If that can look okay that seems the most compatible for everywhere eg. based on the recommendations (at least for now - maybe that lottie exporter might also be compatible - but I'll look at that more in future as it seems more complex).

      PGZ@Mobibase
      PGZ@Mobibase
      Inspiring
      June 1, 2018

      "not sure it would work for email newsletters on PC"

      Depending on the solution you use, you can customize -or not- HTML, so it will definitely work on mailchimp for example....

      Good luck for your delivery !

      W
      Community Expert
      Warren Heaton10841144Community ExpertCorrect answer
      Community Expert
      May 31, 2018

      You can create a PNG sequence (multiple frames of the animation exposed to PNG file format with transparency). 

      You can't create single PNG file that contains an animation.  The file format doesn't support that.

        A
        A.I.1Author
        Legend
        May 31, 2018

        Thanks.

        See APNG - Wikipedia  - APNG uses the .png extension for animated pngs. But it isn't supported in the official Firefox release (according to that wiki link) and also isn't supported in the Microsoft Edge browser (though it is in other browsers).

        So what format am I best delivering the animation in that will "be easy to place into banners, newsletters, website pages"?

        Output it as a quicktime png (but will that work in newsletters sent via email?)?

        Or am I best reducing the colours to 256 and outputting it as a .gif since it will be more compatible than "apng"?

        Or send it in as many of these formats as I can so the places where a quicktime file will work (eg. web) will use that and email newsletters will use the .gif - and maybe send an apng format version too just in case?

          Mylenium
          Mylenium
          Legend
          June 1, 2018

          You use GIFs all the way. Video files are only supported by big ad networks, but you would have to tailor them to exact specs plus even then e.g. for mobile use you would need fallback static images or a ton of videos in different sizes and CoDecs. And as Warren already pointed out and you found out - aPNG is not an official web standard, so it's out.

          Mylenium

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices