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
Select an option from the drop-down list. When set to
Smooth Edges, the figures will have smooth
anti-aliased edges as they do when editing, although
sprites may still not appear smooth. When set to
No Smoothing, the figures will have jagged edges and appear pixelated. Most of the time you will want Smooth Edges enabled. However, setting to No Smoothing may be useful if you want a more retro look, want to reduce file size or because you want to fill areas after exporting. When set to
Smooth Sprites all figures and
sprites will appear smooth. This setting uses
super-sampling and so takes longer to export. There is no advantage to using Smooth Sprites if your animation does not use sprites.
No Smoothing Smooth Edges Smooth Sprites
Smoothing options, showing a zoomed in section of a line segment (ground) and sprite (horse leg)
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.
