0

I try to create an animated GIF of a bee. This image is a gif with transparency. I export it in Adobe Animate CC 2018 with such settings:

enter image description here

but as a result: I can't use this image on web. There are to much artifacts (when my web page background has a color):

enter image description here

What I do wrong?

Here is my Animate project: https://www.dropbox.com/s/6s9qs8vow8bs8kn/bee.fla?dl=0 (.fla)

  • Have you tried exporting with only two (or four) colors? Transparency and black ONLY? – SZCZERZO KŁY Jun 27 '18 at 11:40
  • @SZCZERZOKŁY yes, it's the same – byCoder Jun 27 '18 at 11:45
  • Since you say it's going on a website... Depending on the use case, you may want to export it to html5 canvas or as a sprite sheet animation. Unfortunately, I have no idea what kinda support Adobe Animate has for these. I'm pretty sure it has some sort of canvas export... – Joonas Jun 27 '18 at 12:36
3

Some possible solutions:

  1. Set the transparent Matte color the same as the webpage background.

matte setting

  1. Avoid antialiasing at the animation, this means pixelated border, sound hard but it is a good solution. For this, you need a good resolution file to develop your animation and simulate the borders. Some time ago, Kenzo use at their web page a very well done animated gif over static images with no soft borders. Here's the result:

kenzo

  1. Use an APNG or PNG animation file. The con is that it's not supported in all browsers, some of them display a static image. Here's a list: https://caniuse.com/#feat=apng. With PNG and APNG files, you can keep the transparency or alpha channel. This image is the one Wikipedia uses at the PNG Animation definition.

PNG

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.