Wednesday, May 5, 2010

Timeline Animations

When I was working on the original resource editor we really wanted to add an easy to use animation tool. The main issue was getting it to work on a Series 40 device with 2mb of heap space and a relatively high resolution.

I came up with the notions of IndexedImage and StaticAnimation to solve these problems by limiting the bits per pixel in the image/animation. The animations provided were very static and limited, they still suffered from memory issues and performance issues so the problems weren't completely solved.

Sometime along the way I came up with the concept of EncodedImage that allows us to leverage the JPEG/PNG compression in runtime to trade RAM overhead for performance. This allowed us far more power than IndexedImage and to a great degree we shifted all our current code to use EncodedImage rather than IndexedImage. For StaticAnimation we had no substitute, until now... Recently I committed the Timeline animation which is supposed to be a more elaborate animation model leveraging encoded image, its highly experimental and probably buggy but it already shows off the general direction.

Its not supposed to rival the elaborate use cases of Java FX/Flash/SVG, its a simple animation engine designed mostly for Spalsh screens and small effects. In the video to your right you can see the resource editor editing a simple timeline composed of 3 images a background, a logo and a flying saucer. You can generally add an image and determine an effect and a duration for said effect. Not much in general but in the right hands it can be plenty.

I hope to enhance this significantly and would like reasonable feature requests/suggestions to decide on direction. You can try the current resource editor in the webstart link at the lwuit site (click the orange "Launch" button, I can't place it here since the JavaScript doesn't work in Blogger).

The video demonstrates the creation of a simple timeline from 3 images, AnimationObjects are then added to position and move these images appropriately. One of these images is a Sprite which is automatically broken down into frames. Try the resource editor and the new classes within the animation package to get a better grasp of what I'm talking about and comment on the post.

On a different subject matter we are looking for some feedback on the HTML component from people who are taking it to production. If you represent such a company please drop us a line to lwuit at


  1. Thanks for solving my problem. The video makes every thing clear in my mind.

    animation company