Saturday, January 1, 2011

Making web animations

I came across this cool animation on Sander Huisman's blog. Original animation was a lossy YouTube link, and it doesn't do it justice. The way to get a high-quality embedded animation is to generate individual frames and then export to Flash format as follows

Export["~/research/qr/hinges/anim.swf", images];

Then include the following snippet in your page. Location of the swf file goes in two places, allegedly to provide compatibility for IE+Mozilla browsers



  1. From the help:

    Export["file.swf", Manipulate[...], "ControlAppearance" -> Automatic] exports a Manipulate object to a Flash animation file, rendering user controls in the style of the local notebook interface.

    Which is even easier; you don't have to make any frames yourself :)

  2. It's easier, but it makes too few frames by default so the result looks jaggy. One thing I'd really like is a way to make the animation with interactive slider that lets user go back. Theoretically it should be possible by importing images into some Flash slide-show maker, but it's still on my todo list

  3. Beautiful and notebook instructive to me.
    I have also posted the html into the notebook (for my reference).