Images In Motion

A few months ago I noticed that the video presentations on DevMo were rather unwieldy to watch… A 280 MB Quicktime download doesn’t exactly offer immediate gratification! So, I uploaded all the videos on that page to, and today *finally* got around to editing the DevMo page to link to them. Share and Enjoy.

I considered putting them on YouTube, but the video quality there is lower and they had a size/time limit to uploads.


One more thing…

I’ve been working on a little side project for a while — an editor for creating Animated PNGs — and I see Dave let the cat out of the bag. Just as well, as I kept wanting to fix one more thing and have failed at the whole “release early, release often” thing. Boom. Andrew has a page where you can download it, and describes a bit how to use it.

I’ve also created a hacky little demo page showing some samples of APNGs. I’ve more ideas to add, as there are some clever things that APNGs should make possible.

This APNG editor is a decent start, but still needs a lot of work and polish to be a solid tool. Some things I’d like to add at some point…

  • Frame reordering
  • Ability to stop the animation and step forwards/backwards frame by frame
  • Colormap support (for 1 to 8-bit APNGs), which should allow for smaller file sizes. I think the spec allows this, but encoder changes would be needed.
  • Interframe diffing, so that video-like animations can be more efficiently encoded. I’m rather curious if the ability of APNG to do alpha blending will help out here… For example, to have an Animated GIF fade to black, each frame would have to be encoded as a full image (darkening as needed). But with an APNG, you could just overlay successive frames of semi-transparent black (which would compress very well).
  • Automatic cropping and repositioning of frames with all-transparent pixels along one or more borders.
  • Sandboxing of script execution, so that sharing rendering scripts would be safe. Declarative canvas and SVG integration would also be exceedingly awesome.

Patches welcome!

5 thoughts on “Images In Motion”

  1. // XXX Crap. After the image is loaded and plays one, resetting the
    // image doesn’t restart the animation.

    That makes APNG almost worthless for the Firefox GUI. I guess the best solution would be to have a scriptable API that gives some control over animations (pause, resume, jump to frame). Then again, this wouldn’t work for CSS images …

  2. Dao:

    I think that’s just a bug, and that it would be useful when fixed. It seems to me that whenever the src of an image is changed, the animation counter should be reset. This is a browser issue, so it’s not something the APNG spec addresses. Similarly, I’ve seen this problem on the web with viewing an animated gif, but clicking reload doesn’t make it start playing again.

  3. You mislabeled the videos, both in Google and on MDC. The DOM link goes to a video with that title, but it’s really dbaron’s layout talk. Similarly, the layout link goes to a video with that title, but it’s jst, not dbaron.

  4. Hmm, yeah, something isn’t right there. I’m not sure if I mixed something up, or if it was like that before. 🙂 It should be fixed now.

Comments are closed.