The new version of Animatic Builder is up. This update includes a whole offline system taking advantage of HTML 5′s manifest and localStorage for offline use anywhere. To complement the new offline functionality is a redesigned UI which now scales to mobile platforms as well, specifically the iPhone. The are a number of speed improvements allowing well over 200 frames in a sequence without impacting playback performance. (The SQL updating and the uploading for the demo are disabled.)

I have completed about half of the storyboards and I’ll begin plugging them into Animatic Builder so I can edit the film as I go through my day.

I came to this point on Friday when I realized I wasn’t going to finish my animatic in a weeks time. It was at that point I took a break and stood back from the work for a moment and relaxed. Now, a few days later, I have a better outlook on the project.

As I mentioned before the harder parts of the project are two sequences where the doll/avatar animates a couple of ideas. Both ideas are quick flashes, but even with their short screen time, I want to build a design and feel that would get a viewer pulled in. The concept is, these are the “good” ideas that flash in an artists mind, that could be something interesting but not exciting. Once the doll tosses these ideas aside, I want a moment where the viewer has to get reemerged into the actual film.

Right now I am adding and developing the pieces up until the main character, he needs a name it seems, makes an escape out of the room.

At this point I was hoping to have more done, but with so many projects in the works I am comfortable with moving a little slower on the film. I’ll update with the animatic soon.

Opening Shot

It has been a busy week but I managed to get through most of the storyboards for the film. Rather than try and make a series of thumbnails, a bad idea by the way, I decided to commandeer one of the sketchbooks I hadn’t used yet for the task. Although index cards are normally preferred, I’ve been running around too much to make a proper storyboarding wall. Instead I’ll scan the pages and put them into my app so I can edit the animatic on my phone.

The most difficult parts of the film to conceptualize are two “story within a story” sequences which need to be bold graphically and have very simple story arcs. The shot setup is a bit odd in that the doll has to flip the pages off then have the wind carry the pages behind the foreground so they can be framed over the doll’s shoulder. Then once framed the pages need to continue flipping through even when they are not being torn off the stack. I don’t have this sequence shown here, but I’ll make sure my animatic is shared at some point.

Look below for my “how not to storyboard” section and a few sample storyboards from the upcoming film!
How not to storyboardLooking Up

On the left are a collection of thumbnails from my sketchbook where I thought the layout, and action, were getting worked out pretty well. Not really. The main story is getting put down on paper but the thumbnails are so small it is tough to get the layout and even placed in a row they don’t have much continuity; the page is downright confusing.

On the right is just one, very simple, frame from that sequence. Even without much of a background the frame works much better because the character is fully developed and outlining the action in blue helps the eye know what is going to happen in the scene.

Walking Across

The above image is an even better example of a fully laid out shot. The layout is easy to understand and the action is fully thought out. All of these images need a bit more work to be fully fleshed out, but they at least provide enough information for an animatic.

Check back next week for the animatic!

Turn Around of the “Idea”

A new website, a year, and now a new film. I realized that my previous film was far to complex to finish on my own in a reasonable amount of time. The main problems with “Riot” are too many characters and an overly realistic design. In developing my new film I have outlined a single main character with only a couple sets. By building a story on a single place and a single character I can focus on the animation rather than many different characters and sets.

The “Idea” as I am currently calling it, is about an idea come to life from a stack of paper. Simple. Probably a film that has been done many ways before. My objective to do my own take on a common story and see if it draws and audience.

Here goes.

The main image of the post is a paint over 3D sketch of a stack of paper on my desk which will serve as the main set. The lighting is going to change a bit as I have shifted the time to an early morning but the spotlight effect will stay the same.

The “turn-around” sketch is a quick drawing I made before working on the final design for the main character. I decided that the film will be a self portrait so I used my logo as the characters face while his body is folded from a ripped out section of a page. The other two drawings are more sketches of the character.

More concept art, hopefully some finished storyboards, next week.

(It would be foolish to expect updates weekly seeing as how I tried that before, but then some mistakes are meant to be repeated.)

Shot and set design“Idea” Character Design

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.

I have been very busy the past couple weeks, unfortunately not on my personal animation. On slow weeks such as this, rather than trying to stretch out a few scattered drawings, I will go into the techniques I am using to make the film. First I’d like to go over a recent addition to Photoshop, the timeline. It seemed rather odd to add a timeline but looking at the whole scope of Adobe’s product line, Photoshop is fast becoming the hub of Adobe’s catalog. The program you need to get any type of media done, which makes sense, the essential element of any piece of a graphic, film or software is the layout of the frame.

Down to the basics, why not Flash or After Effects?

An early shot with Flash on a 3D background

The obvious answer to most digital animation these days is Flash, but Flash is vector based, which produces a distinctive clean, sharp style. Achieving a rough, dirty look in Flash is tough especially in animations with only a few elements. In addition, if you are looking to go back and edit a vector drawing you are presented with a mess of shapes and no opacity controlled eraser. Overlapping elements have to be done at the layer level and exporting individual Flash pieces to other programs is not easy. As I have recently discovered outputting Quicktime files from Flash projects can mess-up timing, leaving elements such as voice over a frame or two off.

After Effects a sandbox where frames in a sequence can be manipulated at will, with one exception. Creating content in After Effects is no small task. Text, 3D layers, solid shapes are no problem but try making a character with any level of detail or a painted background. There is a way to draw in After Effects but its more a cheat then a day to day function. Pull up a Matte and draw, then use it over-top a solid layer, it works but why build image authoring into a program that hasn’t had it before.

Painting over a storyboard in Photoshop

This is where adding basic timeline functionality to Photoshop makes sense. Above CS3, layers in Photoshop can now be timed out outputted as sequenced .PSD files for any use. Animation in Photoshop becomes the same as on paper. Draw the keyframes, in-between it, and then… Well here’s the catch. You could finish an animation in Photoshop and send it out but Photoshop has no way of finishing off the animation; easily re-timing the sequence, bulk composting, and audio.

How is this useful information? Simple, I cannot stand scanning frames but I love hand drawn animation. With Photoshop and After Effects a hand drawn look is easy to achieve, yes you definitely need a tablet but considering the quality to price ratio of Wacom tablets, there is almost no reason not to buy a tablet. Two pieces of advice when buying a tablet. One, get a mid sized tablet, I have a large 6″ by 11″ tablet and even working on a wide-screen monitor it is still too much.

A slow week but still some useful information to be had. The post for this week, yes I’m a week behind, will have a look at a storyboard App I’ve built for the iPhone for building animatics and storyboards anywhere.

This update is the first weekly update on my short film “Relax.” Whether I will update once a week remains to be seen, but setting the goal is a good start.

Above is the construction of first shot from the film. The film will open on a black screen with the sounds of the city in the background then cut up from black to the main character stepping forward. The image shows the first and second steps in the process, layout and rough animation.

Shot Layout in Sketchbook

• First I draw out the basic shot in my sketchbook. Sometimes I’ll even register the shot in my sketchbook and draw a few of the keyframes. Since I only get so many hours a day to animate, I try and plan out the shot as much as I can while I’m on the train, on a lunch break, so on.
• After scanning all the material in, I break everything down in Photoshop and draw over each keyframe with the distinctive blue.

  Note: Why would I draw in Photoshop using blue, Non-Photographic blue, which is meant for sketches that are supposed to be erased when scanned/photocopied? Am I daft? No there is a point. Practically, the two hues let me layout a sketch then draw over it more carefully in clean-up. Also, for this film, the second hue will remain to pull the character out from the background.

• In the image above you can see all the frames overlaid on each other after I’ve drawn and timed them out in Photoshop. Yes I animate in Photoshop, in a later article I will go into depth on why Photoshop has evolved into a tremendous platform for creating “hand-drawn” animation.

In later posts I’ll go into the clean-up and color processes and get into the 3D animation, backgrounds and last but not least, compositing.

A little concept art to take in. This image I designed as a test for the look of the rioters in my upcoming short. I wanted the rioters to look sketchy and unfinished next to the clean 3D animated Police but ultimately I rejected this design as being too detailed and time intensive.

Makes for a nice promotional still though.

The Kid

The pre-production is going slow and steady. I have completed designing the major portions of the film; the two main characters, the set, and the “look and feel.” The final step is to put together an animatic. In normal production there would a series of storyboards, as seen on many a Pixar DVD, but with a project this small I don’t need to produce as much conceptual artwork.