The 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. 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

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

The Animatic Builder timeline.
For this update I am going to give an overview of a new online application I have developed over he past couple of weeks to aid in pre-production, Animatic Builder. If you are unfamiliar with storyboards or animatics there are overviews here. Essentially where storyboards are the first visual organization of a film idea, an animatic is the next step adding a duration to each storyboard so the pacing of a film can be developed. Animatic Builder is designed to make creating storyboard and animatic sequences easier by keeping a sequence and it’s associated content in a central location accessible from virtually anywhere within an intuitive user interface.

The core idea of Animatic Builder is that a sequence can be timed out, played back and updated from a web browser without the need for movie compression, emailing large files and maintaining timeline files. With a concept and a set of images, a timed out sequence can be arranged and played back in just a few minutes. Animatic Builder is not meant to replace a non-linear editor such as Final Cut Pro but for planning out a scene or short movie during pre-production. The functionality of the app will be focused on building sequences with only pre-production information, keeping the app lightweight and accessible from any modern browser. Animatic Builder keeps a sequence and it’s necessary files contained for easy access.

Inserting a shot into the Animatic Builder timeline.

The idea is that keeping a physical storyboard on hand, whether in a sketchbook or a hand-full of index cards, is impractical in many situations. With Animatic Builder, shots can be laid out with metadata such as a description, title, and notes so they can be browsed and updated easily. The app comes alive when a duration is added to each shot, turning the storyboard into a playable animatic.

The only requirement for the app is a JavaScript enabled browser, which includes nearly every modern browser mobile and desktop alike. While JavaScript is a basic requirement each platform presents a unique set of challenges.

As the core idea feature of this app is portability, every possible platform will considered during development from modern browsers such as Internet Explorer and Firefox to mobile platforms such as iPhones, Blackberries and Android based phones and netbooks. For the moment the most advanced features will be found on standard browsers and on the iPhone with gesture support.

The concept is pretty simple so description does not do it justice, instead I recommend giving it a test run.

Launch Animatic Builder

For a complete look at the future of the app take a look at the development tree attached below. And yes a user interface rebuild is on the list. I am aware that the app is quite homely looking at the moment.

1. Animatic Builder – Development Tree

   1. Update System

      1. Shot reordering system
      2. Asynchronous connection
         1. Remove update lag
         2. Enable Image/Movie preview during upload
      3. Support for multiple sequences
      4. Multiple versions of a sequence

   2. User Interface

      1. Clean-up, Simplify and Beautify
      2. Re-tune to place focus on shots, especially during playback
      3. Make metadata collapsible
      4. Current shot detection and highlight
         1. Play from current
         2. Update current shot

         3. Consolidate playback controls

            1. Move shot/note controls to playback bar
            2. Only information in sequence
            3. Center controls in window
            4. Goto shot number

      5. Rebuild scrolling

         1. Disable scrolling

         2. Re-enable scrolling to match device

         3. Fixed position for iPhone
         4. Center and focus shot
         5. Build “breathing” transition between previewing and playback
      6. Investigate seamless camera operations, pan, zoom, rack

   3. Offline Support

      1. Portable version separate from server
      2. Reads/Writes text information to single file
      3. Uploaded and parsed by online version
      4. Save different versions of sequences
      5. Take advantage of device specific databases
      6. Download/upload zipped file of associated content

   4. Audio Engine

      1. Simple audio playback timed to shots
      2. Replace/add browser scroll-bar with both audio/video markers
      3. Keep audio/video timeline integrated

   5. A more creative/inspiring name than Animatic Builder

As the app currently resides entirely on a server, some skill is required to setup and maintain the system. Therefore, rather than taking the time to develop an installation for the app, I am keeping the server side source closed and the app only available for previewing. If you are interested in using the app please contact me with the form at the bottom of the page. At this point I am trying to gauge interest in the concept and see where the project goes.