Thursday, July 23, 2009

4 free tools to create Animated PNG (APNG)

The Animated Portable Network Graphics (APNG) is an unofficial extension to the Portable Network Graphics (PNG) file format that supports animation. PNG does not support animation natively, but APNG brings animation to PNG files that work similarly to animated GIF files. APNG supports 24-bit images while retaining 8-bit transparency which is not available in GIFs. It also retains backward compatibility with non-animated PNG files. APNG is a new technology which is still not adopted by most browsers; Firefox 3 and Opera 9.5 are the only browsers that support APNG.

Animated_PNG_example 

Example animated PNG.

Why APNG is better than GIF?

From Mozilla Labs:

The two most apparent problems are that GIF images can only contain 256 colors, and lack support for partially-transparent pixels. This results in images which often look grainy or rough, and which do not smoothly blend into their background.

Let’s take the following example:

apng-animation-gif apng-animation-gif

Both show the same GIF animation. Against white it looks great but it's not so nice against the colored background.

But with animated PNGs, a single animation works against any background because APNG supports transparency that provides better resolution and color. See how the following animated PNG looks equally good against both backgrounds. You will require Firefox 3 and Opera 9.5 or higher to view it. (Animated images credit: GIF Movie Gear)

apng-animation-png apng-animation-png

APNG is still not ready for the web due to it’s limited support. But within a few years as browsers start embracing the new format, APNG will start getting wider acceptance among web designers and web users.

How to create animated PNG?

Even though APNG is still some way off, we can get ourselves acquainted with some of the tools required to create them. So here are 4 free tools to create animated PNGs.

1. APNG Editor is a simple Firefox addon for creating animated PNGs inside Firefox. It can create animation by assembling individual images, or by running a user-created script to render each frame in a Canvas tag. It’s still beta but functional and includes several features such as:

  • Load each frame from any PNG file
  • Set loop control (play forever, once, X times)
  • Optionally set the first frame (displayed in older browsers) to be hidden in newer browsers.
  • Set the offset of each frame from the top-left corner of the animation
  • Set the time to display each frame
  • Set disposal options (clear image, keep image, revert frame)

 apng-editor

2. APNG Anime Maker is a standalone animated PNG maker. It too enables you to load individual frames, set delay and frame offset. It includes a number of disposal methods (keep background, keep previous image, clear image) and blending methods (overwrite the current contents of the frame's output buffer region; compose frame onto the output buffer based on its alpha). Additionally it allows optimization of the images and adjusting of compression levels.

apng-anime-maker

3. JapngEditor is a Java based APNG editor that requires Java 6. Features includes frame delays, disposal methods, blending methods and frame offsets.

japang

4. APNG Assembler is an online application that allows you to create an
Animated PNG from a set of static PNG files. The sequence of PNG files should have the same size, color depth, transparency, color pallete etc and ordered alphabetically or numerically. This set of PNGs should then be archived in the ZIP format and upload online. The online tool then creates an animated PNG from the uploaded files with a time delay set by the user.

16 comments:

  1. 5. VirtualDub APNG Mod

    https://sourceforge.net/projects/vdubapngmod/

    ReplyDelete
  2. http://animatedpngs.com
    Free Browser Based APNG Editor. Creates an APNG from any PNG, JPG, and GIF files. Features Animation Preview, the option to stretch frames to fit that have different dimensions, and control over the default image shown to non-apng capable browsers, including the option to embed a warning message to non-apng supporting browsers.

    ReplyDelete
  3. Great tip! Nice info and presentation. It depends however on your desired outcome. There are more software or program like WeGIF - http://www.wegif.com - that are dedicated to GIFs in which they are easier to create animation with. But if you really need to use PNG to your project, then its time you create animation in a PNG format.

    ReplyDelete
  4. APNG Assembler 2.0

    http://littlesvr.ca/apng/assembler-2.0/assembler2.php

    ReplyDelete
  5. OMFG What a bunch of worthless shite. None of it works.

    ReplyDelete
  6. Shutup anonymous with the comment 'OMFG What a bunch of worthless shi**' because some of it does work e.g Japng

    ReplyDelete
  7. DO NOT DOWNLOAD THIS! It gave me a virus that instantly crashes Firefox when opening it, I'm using Google Chrome right now.

    ReplyDelete
  8. No virus, retard. I checked them all. It's your computer. I hate it that whenever something goes wrong the noobs immediately blame viruses instead of the 10,000,000,000 other things that could possibly go wrong.

    ReplyDelete
  9. Let me recommend free online service.
    Creating GIF animations
    http://toolson.net/GifAnimation

    Resizing GIF without losing animation
    http://toolson.net/GifResizer

    Creating animation from WEBcam
    http://toolson.net/WebcamAvatar

    ReplyDelete
  10. finally, there is a jquery plugin to create transparent png animations its called AnimatedPNG http://animatedpng.info/

    ReplyDelete
  11. well thanks mate, but how to use VirtualDub APNG Mod?

    ReplyDelete
  12. I use virtual dub apng mod All the time it rocks!
    http://sourceforge.net/projects/vdubapngmod/

    BEST APP 2 USE!

    Check out my apngs on DeviantArt
    http://mandelscape.deviantart.com/

    ReplyDelete
  13. Some are really retard....They don't care about giving info, it's those ignorant that always post " FAKE, VIRUS, CRAp etc..." but spend most of there time playing game, watching porn, drinking beer. They think they're smart, but they don't EDUCATE them self, so for them that they only way to prove that they're not USELESS.

    THX ANYWAY FOR THE INFO GUY !

    ReplyDelete
  14. Which of these programs is avalieble in Spanish?
    Thanks!

    ReplyDelete
  15. RealWorld Paint can create and edit APNG files (and is available in Spanish and other languages BTW) http://www.rw-designer.com/image-editor

    ReplyDelete

Popular Posts