Student, Programmer, Flash Enthusiast
How To Make an Animated PNG
August 16, 2009Posted by on
What is a PNG? .PNG is a file format for pictures (like JPG). PNGs have good compression and zero loss of image quality. They are the successor to JPGs, and hopefully more and more people will continue to use this format.
You know how .GIF files can be animated so that it looks like the picture is moving? There’s a new format out called APNG (Animated PNG) that will retain the high quality of your images instead of reducing them to a crummy looking 256-color GIF file. Before you get too excited, just keep in mind that it doesn’t have a lot of Application support…yet. As far as Internet browsers are concerned, new versions of Opera and Firefox support it, but Internet Explorer doesn’t. Here’s a more comprehensive list of the applications you can use with APNGs: http://en.wikipedia.org/wiki/APNG#Application_support
You need not worry, however, because APNGs are backwards compatible. If animation is not supported, whatever is on the first frame of your animation will show up as a static PNG image.
What you will need:
1) Mozilla Firefox version 3.0 or higher. Latest version (Currently at version 3.5.2 ) can be found here
2) The APNG Edit addon for Firefox
The editor is a piece of cake to use, and it has all the basic functionality you need to make an APNG. Just add your images one at a time (starting at Frame 1). You can change the amount of time each image displays by clicking on the number near the hourglass at the bottom of each frame. The delay is measured in milliseconds, so a 3 second delay between pictures (i.e. to make a slideshow) would be 3000 milliseconds. Once you’ve finished you animation, click the “Save Animation” button in the top-right, and you’re all done!
Check out the APNG I used as a preview for my Better Kongregate Firefox Addon: https://addons.mozilla.org/en-US/firefox/addon/13677