Lab 2: Animation!
Animation is the representation of movement by discrete key frames. Your mind interprets the sequences of images as continuous.
Part I: Walk Cycle
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 your animation is
not smooth, you must have more frames. A
choppy animation with 8 frames will receive a lower score than a smooth
animation with 12 frames!
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) Resize your document to 500x500 pixels
4) 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.
5) 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.
6) 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).
7) 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.
8) 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.
9) Export Your Animation
Once you're satisfied with your animation, export an
animated GIF by going to File->Save Optimized As and choose "Images
Only (.gif)" from the Save as type drop down box. Save it as "WalkCycle.gif."
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):
Part II – Secondary Motion and Filmstrips
Here
is the point when your creativity comes in. It is important that your character
has its unique trait such as a behavior or facial expression that represents
him/her. (think that it will also represent your game
that you will create with your team soon). Here is the point when you need to
think about the secondary motion.
·
Secondary
Motion
Secondary motion describes the effects created
by primary motion. Walking, for example, may cause a person’s hair to bounce or
clothes to sway back and forth. If walking is the primary motion, then hair
bouncing and clothes swaying are both secondary motions.
Consider
secondary motion as you animate. Hair that stays straight down can ruin a walk
cycle. Other sources of secondary motion can include: head bobbing (think of a
character walking while listening to headphones), canes, jewelry, capes, and
just about anything that is not rigidly attached to the primary object.
à For this part, you will be creating one of your character’s
unique behaviors (such as throwing, running, attacking, jumping, etc). It can
be from the drawing that you did for pose.psd. You decide how many frames you
need for your character to be animated smoothly.
There are two ways to save your
animation in a usable format for your team’s programmers. One way is to save each frame as a separate
file. A cleaner method is to make filmstrips. You may choose to save a
filmstrip in multiple rows with the first X frames in row 1, the second X
frames in row 2, and so on.
à For this lab, you will produce a single row filmstrip. You must first create a new document, (frames*500)x500 px, 150 dpi. The width will be 500 multiplied by the number of frames in your walk cycle.
à Now let’s make a layer that will serve as a guide for each frame. Create a new layer called “boxes.” Select the Rectangular Marquee Tool (or just press M). Draw a small, arbitrary box on the work area. Go to Select->Transform Selection. This brings up the transformation options at the top of the screen underneath the menu bar. Enter the following options:
o
o
X: 250 px
o
o
Y: 250 px
o
o
Unselect the
Constraint Proportions button (the little chain)
o
o
W: 500 px
o
o
H: 500 px
o
o
Click the check
mark or hit enter
Now you have
a 500x500 selection in the exact position of the first frame. Fill this with a
dull color. Pick a foreground color by double-clicking the upper-left square of
the big overlapping squares in the bottom of the toolbar. Go to Edit->Fill
and use Foreground Color.
To
create the next frame guide, go to Select->Transform Selection again. If you
have accidentally cleared your selection, make a new one by dragging a
rectangle onto the work area with the Marquee Tool and then transform your
selection. Enter the following options:
o
o
X: 750 px
o
o
Y: 250 px
o
o
Unselect the
Constraint Proportions button (the little chain)
o
o
W: 500 px
o
o
H: 500 px
o
o
Click the check
mark or hit enter
Select a
background color and fill this square with it. Continue this process with the
same 2 colors for the rest of your frames.
Now you
can start moving your frames into this document. Copy your first frame from
your previous document. Go to the filmstrip document and select the Magic Wand
Tool (W). At the top under the menu bar, set its Tolerance to 1 and uncheck
anti-aliased. Now click on your first rectangle. Go to Edit->Paste Into.
This pastes the first layer directly into your selection. It also creates a
layer mask which can be seen in the Layers tab. A Layer Mask is essentially an
Alpha Channel for an individual layer. You can edit it by clicking on it in the
Layers Tab. To resume normal editing, click on the Layer preview picture in the
Layers Tab. For this lab, you can ignore the Layer Masks.
Repeat
this process until all frames have been pasted into the document.
b. Alpha Channels
Creating
an alpha channel for the filmstrip is a bit trickier with all these frames. One
easy way to create it is to hold ctrl and click on the layer preview in the
Layers Tab for the first frame. Now hold shift+ctrl and click on every other
frame’s preview. You should now have everything selected that you want to be
opaque. Select the Channels Tab, and click “Save Selection as a Channel.” This
is a little icon near the trash can that is a gray square with a white circle
inside of it. Voila! Your alpha channel has magically appeared.
Now zoom
in and carefully examine the alpha channel around each frame. You can draw on
the alpha channel as if it were a regular grayscale layer. To edit it at the
pixel level, select the Pencil Tool. It is in the same place in the toolbar as
the Brush Tool. Just click and hold on the Brush, and select Pencil from the
pop-out menu. The Pencil Tool differs from the Brush in that it has a precise
edge. There is not anti-aliasing when you make a dot. This allows you to edit a
pixel without affecting any of the surrounding pixels.
Submit through CMS the following documents:
This
lab project is due Friday, September 15th by