Objective: create a basic human walk cycle using simple shapes for body parts.
A Brief Intro to Animation and Walk Cycles
Animation is an incredibly intricate, subtle art form--one which we often take for granted. The illusion of life happens subconsciously, as our eyes and brains are unable to distinguish one split second frame from the next. This phenomenon of our brain is called the Persistence of Vision, and animation wouldn't be possible without it. Because our brains can only hold on to images for a split second longer than our eyes see them, when played in fast succession (typically 12 or 24 frames per second), these individual images appear to merge in smooth, fluid movements. The job of the animator is to observe the subtleties of real life motion in order to recreate it in their work. An excellent way to begin this process is to play DVDs frame by frame, in order to pay particular attention to individual body parts as characters perform an action.
While there are a number of ways to begin as an animator, one of the most useful and frequently applied is a Walk Cycle. Cycles are sequences of drawings that, when looped, exact a complete continual motion. Most times in cartoons when you see a character walking, you are seeing the same sequence of drawings repeated as the background slides behind them. A Walk Cycle is perhaps the most important movement a game artist can learn to animate. Even if your character is not a human, or a two-legged creature for that matter, learning to animate a walk cycle will help you to recreate the illusion of life in all arenas.
There are countless animation tutorials on the web, but below is a link which is devoted to walk cycles in particular, and has some good images to work from. Please read through the page, though, as you won't learn as much by simply copying the drawings. By following the software instructions below, and referencing this link, you will have the tools and knowhow available to create a convincing walk cycle for your game.
Important Hint: It's extremely easy to get bogged down in the details of your individual drawings. Always begin with a the general shapes, focusing on the movements alone. The details always, always, always come last. A simple drawing which moves correctly is infinitely better than beautifully rendered drawing which staggers and twitches unnaturally. For this assignment, stick to basic primitive shapes to represent body parts (ie, circular head, rectangular limbs).
http://www.idleworm.com/how/anm/02w/walk1.shtml
Introduction to ImageReady
You are already familiar with the basic functions of Photoshop, and hopefully have had time to tinker with it. You may not have known, however, that Photoshop comes bundled with ImageReady, a sister program whose sole purpose is for creating animation from your Photoshop document.
Basically a simpler version of Photoshop, ImageReady has fewer tools, but the crucial addition of a timeline in which, frame by frame, you may alter the position and opacity of individual layers. It also has a crude tweening function for create more gradual changes between your frames. PSD documents are easily bounced back and forth between ImageReady and Photoshop for editing images and testing their movements. ImageReady animations may be tested in Internet Explorer or exported as animated GIFs, SWFs, or MOVs. Animations can also be exported as image sequences, which will be particularly useful for creating animations that are easily imported to GameX.
Animating Using Photoshop and ImageReady
There are two basic methods of animating using ImageReady.
One is to make a single, unchanging layer move around the screen. This is fairly
simple, and useful for lasers, balls, or other items which will need to move,
but whose shape is essentially static. (It is important to remember that, unlike
Flash animations, changes to layers other than opacity and position will apply
to all frames). The second method, which you will be focusing the bulk of your
energy on, is to create movement by using different layers which will alternate
in fast succession. Like in a flipbook, each individual page is a separate drawing
layered overtop the next. In the case of this assignment, you will create a
separate layer in your Photoshop document for each frame of the character's
walk cycle, which you will then create a separate timeline event for in ImageReady.
Ready to Begin?
1) Create a Single Document and Fill Its Layers with Animation Frames
Open a new Photoshop document, in which you will draw your
frames using a Wacom drawing tablet, mouse, or scanned images. Do not start with the first frame and draw them sequentially! Start with the four key frames mentioned in this guide and then start drawing the in-between frames. You must draw a minimum of 8 frames. If you are going to scan frames into photoshop, drag each image
onto a single document as separate layers. To transfer a layer from one document
to the next, select the arrow tool with four-directional icon and simply click
on the layer and drag to another document before releasing.
Important: As you are drawing your
frames, remember to keep your character simple. We do not want to see detailed
drawings for this assignment. We're looking for silhouettes, essentially, built
from simple geometric shapes.
2) Take Advantage of Transparency
While working with your individual layers, it helps to compare
with others by toggling their opacity in the Layers palette.
3) Keep Organized
After you have created the necessary layers, arrange them
sequentially on your Layers palette. It may also be beneficial to rename them,
so you know what you're looking at later. You can do this by simply doubleclicking
their name in the Layers palette and retyping them.
4) Resize your document to 500x500 pixels
5) Jump to ImageReady
When you are ready to animate your layers, click the very
lowest button on your Tools palette. This will open your document into ImageReady.
6) Open the Animation Window (timeline)
Make sure that your Animation window is visible at the bottom
of the screen. If not, choose Animation from the Window drop menu.
7) Understand Your Timeline
You should see a thumbnail icon of your image labeled "1".
This is your first frame. Directly beneath the thumbnail it should read "0
sec". This is the time your individual frames will last when played in
succession. This duration is easily changed by clicking on the number and scrolling
through the available times or typing a custom duration (keep in mind that animations
may run slower in ImageReady than in their ultimate exported form).
8) Create and Edit New Frames
Create a new frame by clicking the Duplicate Current Frame
button on the Animation window. Now simply click the eye beside a layer in the
Layers palette to turn it off/on, or adjust opacity if you wish for a more gradual
change. If you've arranged your layers in sequential order, animating them is
as simple as creating new frames one by one and toggling each following layer
along the way.
9) Test Your Walk Cycle
Test your animation by clicking the play button on your Animation
window, or for a speedier playback, choose Preview from the File menu.
10) Export Your Animation
Once you're satisfied with your animation, export an animated
GIF by clicking File/Export/Original Document.
Please use CMS to turn in your animated GIF, 500x500 pixels, 150 dpi.
You should focus on the following elements (as you will be graded on them):
One Last Note:
As you're no doubt finding, animation is quite meticulous and more challenging
than most could imagine. This is barely the tip of the iceburg, and learning
to animate is a lifelong process. Even still, it is an awe inspiring medium
that is limited only by our imagination. If you have any questions regarding
the process, history, or finer techniques, please contact Brad Albright. While
nothing close to an expert, he's at least fascinated enough to happily talk
further with you about it, turn you on to lesser known animators, or give suggestions
for your work.
Happy Animating!!!
This lab project is due Monday, February 21st by 11:59pm (midnight).