Animatic Builder Development Continues

Animatic Builder Development Continues - Auth: Whitney Krape

The Redesigned Animatic Builder timeline. - Auth: Whitney KrapeThe Redesigned Animatic Builder timeline.

During the past few weeks I have been diligently updating Animatic Builder with new features and a completely new interface. Overall the main idea of the App hasn’t changed; building and maintaining a sequence over a range of any internet connected devices. What in the release makes that goal easier? Quite a bit.

From the start the whole App has been rebuilt with an AJAX, or asynchronous, connection so the user can modify the sequence without the delay of reloading page each time a change needs to be saved. Every on page change is made once a user focuses away from a changeable element. As well, each change effects the sequence immediately so a duration takes effect right as it is made.

The playback system has changed drastically as well. The most obvious alteration is the introduction of a self-centering elastic layout which keeps the current frame in the center of a browser window and when the browser is re-sized the whole layout expands around it to any size. Animatic Builder as on the iPhone. - Auth: Whitney KrapeAnimatic Builder as on the iPhone. You can look at the app on an iPhone for editing then pull the a sequence on a projector and stretch the browser window to fill the screen. In regards to the playback presentation, I’ve added both a dimming effect and a series of hiding tabs so a user can reduce the whole layout to just the image in a frame. In this way, a user can play a sequence as a movie, seamlessly. Playing back a sequence in the browser feels just like a playing QuickTime movie.

Adding images to the sequence has also been simplified. By double clicking on an frame brings up an image change box where a user can choose from an expandable library. In this same dialog, images can be added, deleted, and collected from the uploads folder.

All of these changes are cross platform. The elastic CSS layout causes some problems on mobile devices however, they aesthetic not functional. More importantly, using Apple’s JS API, I have added gesture support so one can glide through a sequence easily. Mobile support is light, however, as the iPhone does not allow uploading from their devices but the image menu is available by clicking with two fingers. As well, the iPhone only supports vertical orientation at the moment and the layout need some adjustment. The layout is based on percentages to allow for flexibility across platforms, however when mobile Safari opens some elements get very distorted.

I have started a page on the site specifically for Animatic Builder and I will continue to update it as I use it for my film. To check out the latest version, editing enabled, head here. Animatic Builder version 1.0 - Auth: Whitney KrapeAnimatic Builder version 1.0

And the new home of the app. whitneykrape.com/animatic-builder/