Animated Png (APNG) is a more recent animated image format used for web pages but is now supported by most web browsers. The main advantage over
animated gif is that there is no restriction to 256 colours, which means that the quality is often better, however, the file size is often higher. They also support semi transparency whereas animated gif does not.
Click 'Export Animation' in the File menu and select Animated Png from the submenu. Then specify a file name and location and click 'Save' to display the animated Png options. After setting the options, click 'Export' and wait for the progress bar to reach the end. Open in a web browser to test the exported png (opening in the default Windows image viewer will only show the first frame).
Make sure that the speed of your animation is correct when playing before Exporting the animation because the same frame rate will be used when exporting the Png. This can be adjusted using the scroll bar next to the Play and Stop buttons.
Animated Png export options
Height
The Height option allows you to specify the dimensions of the exported png. The default value matches the height of the animation set in
Options. The width is determined automatically from the animation aspect ratio. Note that a larger value will increase the file size.
Loop
Select the Loop option so that the exported animation loops back to the beginning when it reaches the end. This is recommended if the animation is to be used on web pages. If not selected then the animation will play once and then stop on the last frame.
Smooth Edges
When enabled, the figures will have smooth
anti-aliased edges as they do when editing. When disabled, the figures will have jagged aliased edges, which is equivalent to exporting in Pivot 4 with Super Sample set to 1. Most of the time you will want Smooth Edges enabled as it is by default. However, disabling may be useful if you want a more retro look, to reduce file size or because you want to fill areas after exporting.
Transparency
Animated pngs can be exported with transparent regions so that they can be overlaid onto other components of web pages while allowing the areas behind to be seen. Firstly set the background of the animation to solid transparent using the
background colour editor. Set the opacity to 0 when selecting the colour. Now when you export the animation to animated png the visible areas of background will be transparent.
If semi transparent backgrounds or figures are used then they will appear correctly as semi transparent over any objects behind.
