You Want To Know About Animations In Firefox 3

One of the cool new features coming in Firefox 3 is support for a new animated image format. Browsers have supported animated GIFs for more than a decade, but the GIF image format has a number of limitations and is overdue for replacement. The PNG image format is now widely accepted as a superior replacement for static GIF images, but for animated GIFs there has not yet been a clear successor. The new Animated PNG format (APNG) is a simple extension to PNG, making it superior for animations too.

Some Problem Case From Animations In Firefox 3

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. A clever designer can somewhat mitigate these problems, but the tricks used don’t always work well in different situations — especially if the image is animated. Let’s look at an example of this problem…

For Example:

In Firefox 2, the animation used to indicate that a page is still loading (affectionately known as a “throbber“) is an animated GIF. Here’s the actual image used on OS X, placed against some different backgrounds:

you can see that when used on a light gray background (OS X’s default color), the throbber looks just fine. But against any other background, it looks terrible. Why? To antialias the image, in order to make it look smooth, pixels must be blended to a fixed color (the expected background). If partial transparency was supported, the antialiased pixels could be made appropriately transparent, and the animation would look fine against any background.

Here’s the throbber, now rendered as an APNG: [If you’re viewing this page with Gran Paradiso, the development version of Firefox 3, you’ll see the images below as they, uhh, throb. If you’re not, you should just see the static first frame — APNG is backwards compatible with existing PNG viewers.]

The APNG version clearly looks better against different backgrounds. And that’s useful to have in practice, as it allows Firefox themes and extensions (like Chromatabs :-) to change the browser’s chrome while reusing the existing throbber, and not end up with an ugly mess.

A spiffy new animation format is nice, but without an authoring tool no one will use it. But who’s going build such a tool before anyone is using the format? Chicken, meet egg.

Luckily, here at Mozilla Labs we have the technology to build both the chicken and the egg! The Mozilla platform can encode as well as decode APNG images, runs on multiple platforms, and has familiar environment for dealing with UI/scripting/graphics. So, yadda yadda, I wrote a Firefox extension to make creating APNGs easy. It’s called “APNG Edit.” Not the most creative name, but it’ll do. Here’s what it looks like:

My goal was to create a simple editor; the primary workflow being to load up a series of images (one for each frame), adjust the various settings for each frame, and then encode and save the finished animation as an APNG file.

Oh, and “one more thing”!

I quickly realized that while a simple editor to assemble frames was a good first step, a Mozilla-based editor could be a lot more powerful with some minimal effort. Why not take advantage of Javascript and , so that animations can be dynamically created and modified? Instead of drawing each frame in Photoshop or Gimp (over and over, as you fine-tune how you want the animation to look), it’s far easier to script the drawing tools provided by simply adjusting the script parameters and re-rendering the animation .

The first version of the clock animation resulted in a rather large file (about 450K) because each frame was a complete rendering. I wrote another script to optimize each frame by only encoding interframe differences, which knocked the size down to 79K. I could also make easy adjustments to the dimensions or frame count, by simply adjusting the script parameters and re-rendering the animation .

Improve and Experiment With It..

Try out the editor for yourself. You’ll need:

• Gran Paradiso Alpha 7 (or newer). APNG Edit does not work on Firefox 2.
• The APNG Edit extension from the Mozilla Addons site.
• (Optional) Some sample scripts and images to experiment with.

There are still some rough spots in the editor which need improved, and there are a lot of interesting possibilities for new features. Unfortunately I anticipate most of my time will be spent working on Firefox 3; however I would welcome patches and scripts from anyone interested. Here’s some ideas for future directions:

• Add the ability to edit frames in an existing APNG or animated GIF (needs changes to imgIDecoder)
• Reorder frames by drag’n'drop
• Save APNGs as color mapped 8-, 4-, or 2-bit images (for decreased file size)
• Scripts to perform more kinds of frame manipulations.
• Sandboxing of scripts to prevent malicious code
• Cropping frames
• Scaling frames
• Animated text with the new
• SVG-based frame rendering