Animated png

From Wikinormous

Animated GIF is very "old-web", and I thought that progress must have been made besides flash formats and the like. It had. As of 2007, the first browser got support for animated png Browser support Firefox among them as late as june 2008. There are other formats e.g animated MNG (Multiple-image Network Graphics) but I have not pursued this any further. More information on APNG on above wikipedialink and more information on MNG

So if you are using Opera or Firefox you should be able to see the "boggleball" (aka The wikinormous sphere) in the upper left corner, in a slow blinking fashion. In most other browsers an animated png should still be visible (showing the first frame) since the file extension still is .png, and here follows a simple ...


howto

  • First you need GIMP or PS or other image editing app to fix and touch your png images (or other formats depending on quality and transparency).


  • The APNG editor (extension) I use can be downloaded from mozilla add-ons A simple Open File in Firefox or drag and drop in the Add-on window will install it.



  • When installed, open the editor under Tools.



  • Below you see how simple it is to drag and drop (or Open File), set time and auto preview your animation. 60000ms is apparently maximum per frame but can be fixed with added frames or with javascript.



final samples

OriginalBoggleball.png glowboggleballanime3.png faviconSpini2.png              blueSpin.png

resources and links

online apng assembler

mozilla APNG specification

labs.mozilla.com with additional scripts for more advanced animation and optimization.


<comments />