Techniques for Natural Animation

(Trey Yancy) #1

Walt Disney made his name by using a huge vertical camera rig that shot down through layers of glass over which he placed acetate cells of hand painted art. The rig allowed for the vertical position of the layers to be adjusted. This, combined with the correct choice of lens and aperture settings, provided for total control of depth of field so that the farther away from the lens the layer was, the more blurred the image would be. By gradually changing the distance of the plates from the lens, the illusion of depth was impressive.
As the layers could also be moved independently along the X and Y axes, the midground and background could move at different speeds. When combined, it provided a stunningly realistic effect for a cartoon. And this was eighty years ago.
In addition, for his first major motion picture he shot film of a human model acting out the part of a cartoon character, with the artists drawing onto acetate cells placed over the blown-up stills. This is the very first example of motion capture in the film industry. (Again, this was eighty years ago.)
Disney bet the farm on this system. When he released Snow White and the Seven Dwarfs in 1937 he was close to being flat broke. If it had flopped, he would have been out of business. The film was a major hit and everything done by Disney since then owes its existence to that huge seven-foot tall camera.
(If you check out the Betty Boop cartoons of the time, Disney’s competitor Max Fleischer did the same thing.)
What we are doing today with parallax is nothing new. It is what Disney was doing in the nineteen-thirties - just one short decade after the arrival of talking pictures.
The attached file does not demonstrate such fancy stuff as motion backgrounds and simulated depth of field. You can add this on your own. Rather, this is a simple layered animation of a woman filling out a form - check boxes and signature - with a focus on creating a more natural, human-like animation, and it uses a visual trick to draw the viewer’s attention and shift the viewer’s attention.
The original layered Photoshop file is included. The source photo was duplicated several times and the individual elements have been selected and other content deleted. At bit of retouching was required, such as lengthening the arm, cloning elements of the desk and document, touching up the hand where the pen had been, adjusting the front of the blouse, and touching up the hair over the collar.
Everything is aligned in Hype by outputting all the layers at the same size and assigning them to the same X and Y positions. You can save space by eliminating the space around the pen, the arm and the head, and eyeballing the starting positions. The key is in setting the offset of the pen and the head so that they rotate naturally.
In Hype the pen is grouped with the hand, which is set to move at a steady rate, to move to the side, then once again move at a steady rate. The pen is animated by throwing in slightly random rotations, copying the keyframes and pasting them in several times, with individual keyframes being moved randomly in time to make the motion irregular.
There are two writing sequences, separated by a sequence when the hand moves from the checkboxes to the signature. Start with animating the movement of the hand group with keyframes only for the start and finish points of the two writing sequences.
When the hand reaches the position of a checkbox, drop in a position keyframe, copy that keyframe, move the cursor to the right of the existing keyframes, and paste it in. Drag that keyframe forward to around half a second after the original checkbox keyframe, then drag the subsequent keyframes in the arm group by the same number of frames to maintain the relative speed of the arm. Do this with each of the checkboxes.
Go back to the areas between pauses and remove the rotation keyframes so than the pen only moves when paused. Make sure that the pen is at the same angle at the start and end of these pauses.
There needs to be a longer pause as the hand moves to the signature sequence, as the woman checks to see what she needs to do next. When animating the signature sequence, move the cursor to the point in time between the writing of the first and last names and delete the rotation keyframes for this gap, making sure that this gap is bracketed with a pair of keyframes set at the same angle. Don’t insert a pause between first and last names.
Have the angle of the head move to match the position of the arm as it moves down the page between checkboxes. Once she is done, the hand moves away, but the head needs to stay at the same angle as she checks her work. Then the head returns to the original angle as the loop replays. Note that she needs to raise her head before she moves her hand to the first checkbox so that she can hit her target. (This is the first time she has seen this form and needs to see where she needs to go first instead of immediately jumping to the first checkbox.)
As this is a loop, you can move some animations in time from the finish to the start. For this animation, I decided to rearrange things so that it starts with the head raising instead of finishing with it. This way, the animation begins at a logical point and it feels more natural than starting with the writing right out of the gate.
Also, we need to control the viewer’s point of focus. The pen is tiny and rotation of the pen is so slight that a viewer might not notice it right away. The motion of the head (which is a large, prominent object) draws the viewer’s attention. At this point, you can start the movement of the pen.
The only problem with this animation is that darned disappearing ink. By the time she finishes filling out the form the ink has vanished and she has to start all over again. (623.7 KB)

(Freelancer) #2

thanks for the file @TYancy and all resources.
Maybe a project 180x155px is a bit small, I’m unable to see well the animation. Hype offer also a responsive layour, so, you can extend the animation as you want.

(Jonathan Deutsch) #3

Great techniques - definitely translates to very realistic animation!

If anyone is ever in San Francisco, I recommend a trip to the Walt Disney Family Museum. Aside from great info about Disney’s life, they also have the above mentioned Multiplane Camera on display.

(Trey Yancy) #4

It’s definitely very small. The original deployment was as a static image in a fly-in pane of a larger animation, with the main emphasis on the title and text.