IntroductionIntroduction| 00:04 | Hi, I'm Dermot O'Connor, and welcome to
Rigging a Face in Flash Professional.
| | 00:09 | This course is aimed at intermediate to
advanced users, so you should be pretty comfortable
| | 00:13 | with the basic features of Flash, like tweening,
how to make symbols, the toolbar, and navigating
| | 00:19 | the library and Properties panel.
| | 00:21 | In this course I'll show you how to
create an animated cartoon face.
| | 00:25 | In later chapters, I'll demonstrate
techniques that will allow you to rotate the head 360
| | 00:29 | degrees, to animate expressions that blend
into one another, and finally, how to articulate
| | 00:35 | the head to create greater
flexibility in your animation.
| | 00:39 | I think this is a very exciting
course, so let's get started.
| | Collapse this transcript |
| What you should know| 00:00 | In another course, Flash Professional CS5:
| | 00:03 | Character Animation, here in the
lynda.com online training library, I
| | 00:08 | demonstrated how to rig a character in
Flash and animated a dialog scene, walk
| | 00:13 | cycles, and a head turn.
| | 00:14 | This course focuses specifically on
the head and goes into much more detail.
| | 00:19 | We will see how to create the head rig
in eight different directions and how to set
| | 00:24 | it up to allow practical and
dynamic facial expressions.
| | 00:27 | If you followed the earlier course,
some of the material here will be familiar,
| | 00:31 | but this course introduces important
new concepts and techniques, giving you
| | 00:35 | great new options in your personal projects.
| | 00:38 | In order to follow this course,
you should be reasonably proficient in Flash.
| | 00:42 | You won't need any ActionScript
knowledge though, as we will be dealing entirely
| | 00:47 | with the artistic side of the program.
| | 00:49 | You will need to know about how to
create symbols and how to set their
| | 00:52 | properties, how to set them as a graphic
or a movie clip, and how to set them to
| | 00:56 | single frame, play once, or loop.
| | 00:59 | You will need to know how to
nest symbols inside other symbols.
| | 01:02 | You will need to know how
to fill areas with colors.
| | 01:06 | You need be proficient with tweening,
how to set a classic motion tween for our
| | 01:10 | symbol or a shape tween
for an object on the stage.
| | 01:13 | You will need to know how to use shape
hints to control the animation of shape tweens.
| | 01:17 | You will also need to know how to use
Ease In and Ease Out in the Properties panel.
| | 01:22 | You will have to know about the library,
how to create folders there and how to
| | 01:26 | move symbols in the library and to name them.
| | 01:28 | We will have to be comfortable
with the toolbar, how to use the Free
| | 01:32 | Transform tool, the Line tool, how
to draw shapes on the stage and how to
| | 01:36 | convert them into symbols.
| | 01:37 | You will have to know how to
duplicate symbols and how to swap symbol
| | 01:41 | instances on the stage.
| | 01:43 | Finally, you will have to know how to
navigate the Timeline and to create layers
| | 01:47 | and how to change those layers
into guide layers if you need to.
| | 01:50 | Also, you will have to be
comfortable with copying and pasting frames.
| | 01:54 | So if this describes you, if you are
pretty much ticking all these boxes, then I
| | 01:58 | think you are ready to go.
| | Collapse this transcript |
| Setting up Flash| 00:00 | First, let's take a look at Flash and set
it up so that it closely matches the way I
| | 00:04 | like to work. And if you have your own way that
you set the program up that you are comfortable
| | 00:08 | with, then please go with that, but I think
it's important that you see the way I configure
| | 00:12 | it, because there might be ways that the
program behaves given my personal preferences.
| | 00:16 | So let's just take a look at that.
| | 00:18 | Everybody has access to this.
It's the 0003 file.
| | 00:22 | This comes with a default color.
| | 00:24 | This is the palette that I
work with all the time.
| | 00:26 | It's a lot different from the usual one, so
I just like to set this up as the default
| | 00:31 | by going Save as Default,
and then just click Yes.
| | 00:35 | So now every time you open a new Flash project in
the future, you will see this instead of the old one.
| | 00:39 | If you want the old color palette back, go to
Web 216 and you will have the old familiar
| | 00:44 | back, so now you have both.
| | 00:46 | But let's go back to Load Default Colors and
now you have this nicer selection. These colors
| | 00:51 | at the top where you see these little three
color sections of green, blue, yellow, and
| | 00:55 | turquoise, and so forth,
| | 00:57 | I will use these for good purposes later on
when we begin to assign outline colors to
| | 01:01 | the different layers.
So they are not arbitrary.
| | 01:03 | These will be important.
| | 01:05 | So the next thing to do is to set up the
workspace because this workspace that we see here is
| | 01:09 | fine, but probably not the most efficient
for rigging a character, so let's click on
| | 01:13 | the Window and go to
Workspace and let's select Classic.
| | 01:19 | I find this right out of the box
| | 01:21 | is a much efficient way for me to model a
character, but we can still improve it a little bit.
| | 01:26 | So first thing is go to the toolbar and let's
drag it over a little bit, so I see two rows,
| | 01:31 | because we were losing a bit of
real estate down here on the screen.
| | 01:34 | The next thing we need to do is to open the
Library panel, so let's go to Window > Library.
| | 01:40 | Now, I would like the Library panel to be as
vertical as possible, because it's going to
| | 01:43 | fill up pretty quickly.
| | 01:45 | So let's grab this little empty gray space
here and drag until you see a vertical blue
| | 01:49 | line, and release, and now we
have a nice tall Library column.
| | 01:53 | I have given a good chunk of screen to the
Properties panel and a good chunk to the Library,
| | 01:57 | and we can then access
these swatches here and here.
| | 02:01 | Now the next thing I would like to do is to
save this layout, because during the course
| | 02:05 | of working oftentimes you might accidentally
move panels around or get lost a little bit,
| | 02:09 | So let's save this,
| | 02:11 | now that we have one that we like for ourselves.
Go back to Window > Workspace, and let's click
| | 02:16 | New Workspace. And we will call this rigging_face.
And now when you go back to Window > Workspace,
| | 02:27 | you will see you have the options of selecting
back to that. So you can toggle back and forth
| | 02:30 | from Classic or any of the other layouts that suit, you,
and you can create as many of these as you like.
| | 02:35 | The next thing to do is to adjust some of the
preference settings, because some of these
| | 02:38 | can be problematic.
| | 02:39 | So the first thing to do is to switch
Document-level Undo to Object-level Undo.
| | 02:45 | And let's click OK there.
| | 02:47 | What this means is that if you click Undo, each
symbol that you create has its own dedicated
| | 02:53 | Undo history, whereas if you have Document-
level Undo, you going to have these very wild paths back
| | 03:00 | through multiple symbols.
| | 03:02 | Your entire Undo history is
external to your symbol.
| | 03:05 | That can be quite confusing.
| | 03:06 | So Object-level Undo helps you to
keep track much, much more easily.
| | 03:10 | It's much more forgiving of mistakes I find.
| | 03:13 | The next thing to do is Contact-
sensitive Selection and Lasso tools.
| | 03:17 | Un-tick that. What this means is that you
can select a symbol by drawing a box around
| | 03:22 | the entire symbol, whereas with Contact-sensitive, you
simply have to just cover a tiny little corner of it.
| | 03:27 | I find it's too sensitive for my tastes.
| | 03:30 | You may prefer the other, but
I like to switch that off.
| | 03:33 | And finally, you don't need to do this, but I will,
because it will interfere with the recording.
| | 03:37 | I am going to click off Auto-Recovery,
but I think you should probably keep it on if
| | 03:42 | you like to have backups
of your work, so click OK.
| | 03:45 | The next thing to do will be to set some
adjustments to the Snapping settings, and oftentimes you
| | 03:50 | will find Snap Align and Snap to
Guides are selected by the program.
| | 03:54 | You don't need any of these; go up
to Snap to Objects to begin with.
| | 03:58 | Sometimes Snap to Grid, but there is no reason
to have Snap Align or Snap to Guides or Snap
| | 04:03 | to Pixels set on;
| | 04:04 | they will only interfere with your work.
| | 04:06 | Okay, so now let's adjust
the stage a little bit.
| | 04:08 | I am going to zoom back out.
| | 04:10 | Let's go to the Properties panel. Make sure
that you've set it to 640 x 480 and your Frame
| | 04:15 | rate is 30 and that way
you will match my project.
| | 04:18 | Another thing that I like to do
is to have the grid visible.
| | 04:22 | So right-click on the stage, go to Grid > Show
Grid. And your grid color may vary from mine,
| | 04:29 | but let's go to Grid and Edit the Grid now.
| | 04:31 | I will make sure that each grid unit is
20 x 20 pixels and your Color, maybe this is
| | 04:36 | a little bit too light, so let's pick
one of the darker grays. Click OK.
| | 04:41 | The reason why I do this is I like to have
just a visual cue that there is empty space,
| | 04:45 | and it's a bit like the black-and-white checker
square on Photoshop if you have a transparent
| | 04:49 | level, rather than just having
an empty, blank white screen.
| | 04:53 | It's very easy I find to get lost so, you
may like it 20 x 20 or 40 x 40, or maybe you
| | 04:58 | don't need the grid at all, but that's
why you will be seeing me with the grid.
| | 05:01 | That's something that I do deliberately.
| | 05:03 | One more recent change that
might not be familiar,
| | 05:06 | if you remember the older versions of Flash,
the Work Area setting is now called Pasteboard,
| | 05:12 | and Pasteboard is just a change in name.
| | 05:14 | This constricts that work area to what you
are working on. And if you like that then
| | 05:19 | you can activate it there or
switch it off as you need.
| | 05:22 | So now I am going to go to some
third-party extensions that I like very much.
| | 05:26 | So let's go to Firefox, or your favorite
browser, and the main site that I use for extensions
| | 05:32 | is toomonkey.com. And these are free,
easy to download and install.
| | 05:37 | So let's click on his extensions link, and
you will see a big collection of them here.
| | 05:41 | I am not going to go through many of these
because there are simply too many, but the
| | 05:45 | one that I find very useful
for me is called FrameEDIT.
| | 05:48 | So you download that. And then the next big link
that I will be using is from animator davelogan.com,
| | 05:55 | and the extension that you want
here is called Keyframe Jumper.
| | 06:00 | So we download that.
| | 06:01 | What Keyframe Jumper does is instead of just
moving forward on the timeline by one frame at
| | 06:05 | a time, it takes you back and forth to the
next or the previous keyframe, and this makes
| | 06:10 | it much, much easier if you are animating
to go from key to key rather than having to
| | 06:15 | scrub through every single
in-between frame; it's a wonderful plug-in.
| | 06:19 | If you are not sure how to
install them, it's very simple.
| | 06:22 | First of all, I suspect we are probably going
to have to switch off Flash, so let's just
| | 06:26 | go over to that. And in search field type in
Adobe Extension, and that's the Adobe Extension
| | 06:35 | Manager. Or you can usually just double-click
on the extensions that you have downloaded
| | 06:41 | to your computer. And let's
double-click on the other.
| | 06:47 | Click Accept and now we have them, so now
we can close this, and let's restart Flash.
| | 06:55 | So I will start a new empty project,
just to get rid of this area here.
| | 07:03 | To find the commands you just installed, click on
Commands on the menu bar, and there is frameEdit,
| | 07:08 | and the Keyframe extension has come in
as Next Keyframe and Previous Keyframe.
| | 07:13 | This is how they will appear onto the Commands
menu, and this is where all your commands will go.
| | 07:17 | So let's map these onto keys
for our keyboard shortcut.
| | 07:20 | That's easy to use.
| | 07:21 | So go to Edit > Keyboard Shortcuts, and you will
find them under the Commands menu. frameEdit
| | 07:30 | is the first one to apply.
| | 07:31 | We are not allowed to mess with the Adobe
standard, so first of all, we have to duplicate
| | 07:35 | this, and let's call it the rigging shortcut.
| | 07:40 | You can name it what you like. And now, any
key that I press here will be automatically
| | 07:45 | detected by the program, so I am going to pick the
bracket key, or the question mark, and hit Change.
| | 07:51 | Now the next one to map is Next Keyframe, then the
shortcut, and click on the apostrophe key. Hit Change.
| | 07:58 | Next, select Previous Keyframe. Hit the Plus key
and select the semicolon key and hit Change,
| | 08:04 | and now we click OK.
| | 08:06 | To show you what this looks like
on the graphic of the keyboard,
| | 08:09 | these are built-in shortcuts to go back 1
frame and forward 1 frame on the timeline.
| | 08:13 | You don't need to mess with them.
They are already there.
| | 08:16 | Frame edit in has now be mapped on to the
question mark. And to go back one keyframe and
| | 08:20 | forward one keyframe, you simply have to push
your fingers up and over by one and a half
| | 08:24 | keys, so it's a very quick and easy way
to toggle your way around the Timeline.
| | 08:28 | That covers us and hopefully gets
you more less onto the same page that I will
| | 08:33 | on as I proceed through
the rest of the course.
| | Collapse this transcript |
| Dos and don'ts| 00:00 | Before we go any further, I would like to
make a quick comment about the nature of making
| | 00:04 | an animated figure in Flash.
| | 00:06 | It's not like 3D where you can build a
beautiful rig and if you do it well enough, it will
| | 00:11 | be almost perfect, and it will do
everything that you need it to do.
| | 00:15 | Flash is more like making a Frankenstein monster;
you are patching together different bits and
| | 00:18 | pieces and sticking them together and trying
to trick the audience in to thinking that
| | 00:22 | you have made a really
unique character that's perfect.
| | 00:25 | And you really can do it, but just bear this
in mind before you go too much further, so
| | 00:28 | don't feel bad if weird little things happen.
It may not be your fault.
| | 00:31 | It's just something that you have to work
around, and that is what most of us have to
| | 00:35 | do most of the time.
| | 00:36 | And I would like to make some comments first as well,
before we go even further than this.
| | 00:40 | There are some dos and don'ts that are very
good to observe, and I have found this through
| | 00:43 | bitter experience.
| | 00:45 | Keep your file names short
in the project library.
| | 00:49 | Don't name things very, very long.
| | 00:51 | You want your designs to be clean; don't
overcomplicate your character design.
| | 00:55 | In this course, I have gone as complex
as I feel comfortable with in a tutorial.
| | 00:59 | You can make them more complex than in this course,
but if you are starting out and you are doing
| | 01:03 | this for the first time, try to get
the characters simple and graphic.
| | 01:08 | Keep a universal scale, by which I mean have
one size for your characters and your props
| | 01:14 | and your backgrounds if you can.
| | 01:17 | If you have different characters that are
made to different scales and you try
| | 01:20 | to move between them--let's say you want to
have a character move an object from his hand
| | 01:24 | to the hand of another character--
| | 01:25 | it will change size, so pick a universal scale
and stick with it if you can.
| | 01:29 | Consistency in the way you
work is also very important.
| | 01:33 | If you do things in the same way over and over
again, it will help you when you make a mistake.
| | 01:38 | It's very easy to make a mistake when you
get into a very fast workflow, and if you name
| | 01:43 | things consistently, you will spot
your mistakes much more quickly.
| | 01:47 | And you will see during the course of this
tutorial that there is an extremely high level
| | 01:51 | of consistency in the way we work.
| | 01:53 | Some don'ts. I avoid using uppercase when I
name the files. The reason for this is I
| | 01:57 | conserve uppercase for
when it's really important.
| | 02:00 | Using lowercase keeps your file sizes shorter,
it allows you to fit more on the screen, and
| | 02:06 | again, this will become apparent
as we work through the process.
| | 02:09 | Don't over complicate the project;
try to keep it as simple as possible.
| | 02:12 | We are going to be trying to do very
complicated things, so if your workflow, if you pipeline
| | 02:17 | is too complex, you will
just be adding more work.
| | 02:19 | When we rig the characters, I will avoid
ever flipping any symbol horizontally.
| | 02:25 | It's something that I
think a lot of people do.
| | 02:27 | I think it creates problems.
| | 02:28 | I know in the real world you have to do it.
When you are rigging the character, we try
| | 02:33 | to avoid it at all cost.
| | 02:34 | Finally, avoid grouping symbols.
| | 02:37 | I find when you group symbols that it can
be very difficult to figure out where you
| | 02:41 | are in the symbol hierarchy.
| | 02:43 | You can get lost very easily.
| | 02:45 | It really doesn't make sense
in the animation process.
| | 02:48 | It might work if you are like a static
designer of graphic art. As a character animator in
| | 02:53 | Flash or any kind of animator in Flash,
I just find that it creates many more problems
| | 02:57 | and it isn't worth it.
| | Collapse this transcript |
|
|
1. Creating the Front ViewEstablishing the directions| 00:00 | We are finally ready to begin, so let's open
the Exercise Files folder and look at the
| | 00:05 | 01_01_character image. Let's click on that.
| | 00:09 | So the way we are going to approach the figure is
to break he down into a series of directions
| | 00:14 | that we will rig, and the one to begin with,
on the far left, is what I call the A pose.
| | 00:19 | And the reason why I don't call these profile,
three-quarter side view, is because they don't
| | 00:24 | stack in a logical way in the Library panel.
| | 00:28 | If you name your different directions after
letters, for example, it's much easier to keep
| | 00:34 | control and to be able to find which direction
is where. You will very quickly become comfortable
| | 00:39 | with knowing that the A pose is the
straight-out portrait view, and the B pose would be
| | 00:44 | at the three-quarter direction,
C is profile, and so forth.
| | 00:47 | F, G, H are little more than flips of B, C,
and D and of course right now we are just
| | 00:53 | focusing on the head.
| | 00:55 | The same principle is applied
to the head as to the body.
| | 00:58 | So let's proceed from here and
take a look at the Flash file.
| | 01:02 | Click on that. In the Library panel, I have
saved a series of drawings of our character.
| | 01:07 | Let's open this up a little bit, so we can
see him a bit better. And this is the A, or
| | 01:10 | the front out, the B, C, D and so forth.
| | 01:15 | And these directions give us
our full 360-degree turnaround.
| | 01:18 | We will start rigging the character in the A,
or the front pose, because it's the easiest
| | 01:23 | to work from, and it's fairly straightforward
to repurpose the A pose into the B or the
| | 01:28 | three=quarter pose.
| | 01:30 | If you start with the three quarter or the
B pose, you will find that it's much more
| | 01:34 | difficult to walk backwards from that into
the A or the front pose, so going from A to
| | 01:38 | B is easy; going from B to
A, it's a little tricky.
| | 01:41 | So let's go from A to B.
| | 01:42 | So first things first.
| | 01:44 | Let's go to the Timeline and insert a new
symbol, and we will call it space hd space
| | 01:51 | 1 space turnaround, and make sure it's a graphic
not a movie clip or a button and just click OK.
| | 02:00 | And the next thing to do
is to access the symbol.
| | 02:02 | You won't see much on the stage. Double-click
on it in the Library panel and you will see
| | 02:06 | on the timeline that we are actually inside it now;
inside Scene 1, we are inside hd 1 turnaround.
| | 02:11 | So let's make some layers in the Timeline
to create spaces for all of these images.
| | 02:16 | I will call the bottom one nothing.
| | 02:18 | These are going to be just
placeholders for the basic images.
| | 02:21 | I am going to make a folder for
these, and just drop them in there.
| | 02:26 | And the top layer will be called labels,
and the folder will be called reference, or ref.
| | 02:34 | It doesn't look like much right now, but bear
with me. So let's just make some empty frames
| | 02:38 | over here. Click F5. And what I am going to
do is to create these poses for these slots
| | 02:43 | for the A, B, C, D, so forth. So let's hit F7.
| | 02:46 | Let's see. We will get it 1, 2, 3, frame between
and another three, and we will just keep forward,
| | 02:52 | so we have three in-between
frames between each of the keys.
| | 02:56 | Or if you want to do it quicker, simply grab
these and hold Alt+Option and drag, so
| | 03:01 | A, B, C, D, E, F, G, H, back to A, and
then we just get rid of what's left.
| | 03:08 | Now to make this a little more easier to
navigate, I am going to make some labels.
| | 03:11 | So click on the top layer of labels, and inside
the Properties panel, we will type in a. Space
| | 03:18 | a is easier because it makes
it a little easier to see.
| | 03:20 | And we will just keep doing this for the rest.
| | 03:23 | Space b. These are completely non-functional.
| | 03:25 | They are simply there for you as a visual guide.
And I am going to make some blank keyframes here.
| | 03:34 | And inside each one of these, I am
going to drop these pre-created images.
| | 03:38 | I am going to roughly line them up so
that the crosshair is between the eyes.
| | 03:44 | I am just using the arrow keys on the
keypad to move this around to where I like it.
| | 03:47 | Let's do the same thing with the B.
| | 03:49 | I am moving forward to the b frame,
and from the Library, drag him down here.
| | 03:55 | When I do this on the first pass, I don't
need to be too specific about it; we are just
| | 03:59 | getting them reasonably close.
| | 04:01 | I'll move to the d and drag d on to the stage, and
we just continue until we have them all in.
| | 04:07 | And a will be the same as the beginning, so
let's Alt+Option and drag that. And now
| | 04:13 | when you play through, you begin to have a very
rough idea about the effect they were looking for.
| | 04:19 | So let's zoom out a little bit, because we
are a little bit close and I'd like to see
| | 04:23 | him a little more full body. And again, during
the course of this tutorial we are only going
| | 04:27 | to be working on this area here.
| | 04:28 | We are not going to be working on the body,
but he is ghosted in right now, so that you
| | 04:32 | have a rough idea about how the neck is
going to align with the upper torso.
| | 04:37 | And the other thing that will really help
to make it solid is keeping the center of
| | 04:40 | mass the same. So I am going to hold down
the Shift and then push the arrow keys to
| | 04:44 | make these larger movements so the center
of mass is pretty much in the middle of his
| | 04:48 | skull, and just keep nudging.
| | 04:53 | This should already look at lot smoother.
| | 04:57 | Now, the critical thing to watch out for is that
the level of his head, the height, is the same.
| | 05:01 | It should be consistent all the way throughout,
so let's make some rulers. So go to View > Rulers,
| | 05:07 | and if you simply drag, you will see the line.
And we can switch the View > Rulers off; at
| | 05:13 | this point they're not needed.
| | 05:14 | So let's zoom in pretty close.
| | 05:16 | I am going to pick a point that we think is
really critical, and I'd say that bottom of
| | 05:20 | the eyes will be a good one. And then as we
move through, you can see how on this one,
| | 05:25 | he slipped a little bit.
| | 05:26 | Let's go back there.
| | 05:28 | So again, just use the arrow keys, with Shift
that you want to move by larger amounts.
| | 05:32 | Let's zoom out and have a look at that.
| | 05:38 | Looking better already, and you will notice on
some of these that the eyes aren't visible,
| | 05:42 | so it wasn't possible when they got to here
to use them as a guide. So what we can do
| | 05:46 | is simply move the ruler and pick a different
point, let's say the middle point of the nose,
| | 05:54 | and maybe the bottom of the hair.
| | 05:56 | I was very careful when I sketched out this
head to make sure that it was pretty exact,
| | 06:00 | so I'm ashamed to let that work go to waste.
| | 06:04 | Let's move that head down.
So I am just going to zoom out again.
| | 06:10 | Now as I scroll through, I am watching to make
sure that we don't have any horrible bumps.
| | 06:16 | This is where you really want
to take your time, get picky.
| | 06:22 | You might want to move this line up, say to
the top of the head. And I think perhaps
| | 06:27 | on this one we can move them up a little bit,
and if you are happy with that then simply
| | 06:35 | drag the line off, and that,
to me, looks pretty good.
| | 06:41 | Now for the rest of the course, I strongly
recommend, if you want to follow my work as
| | 06:45 | closely as possible, that you use the next
exercise file in your folder, and this file
| | 06:51 | will be available to everybody, even those
who don't normally have access to the project
| | 06:55 | files, because I want everybody who does this
to be following along as precisely as possible.
| | 07:00 | So you will have access to a file called 01_02,
and that will give you my fully positioned project file.
| | Collapse this transcript |
| Setting up layers for the head| 00:00 | So at this point you should open up the file
01_02 in your exercise files folder, and everybody
| | 00:07 | has access to this, even those who normally
don't have access to the full project files,
| | 00:12 | because it's important that we all start from
the very same selection on the very same file.
| | 00:16 | So, open that. And you won't see much right
now because what we have is a symbol on the
| | 00:20 | stage that's got the turnaround already
positioned in it, but those layers were guided out.
| | 00:26 | So to see that, let's go to the Library panel and double-
click on hd 1 turnaround, and here we see the head.
| | 00:33 | Now what I have done in this case is--let me
just hide these for a second, and I am going
| | 00:36 | to just show you the turnaround.
| | 00:41 | This will be familiar from the last section.
| | 00:43 | What I have done is I have created a white
layer on top of that with an opacity so that
| | 00:48 | we can fade it out a little bit, because we
are going to be working on top of this, and
| | 00:52 | sometimes it's overpowering if you're drawing lines in
vector art above that. So it's nice to have this.
| | 00:57 | I have nested these inside a folder, so we
can hide that entire folder if we want.
| | 01:02 | And on top of that we have the labels, which we named in
the previous section a, b, c, d through h, okay.
| | 01:07 | And you notice as well that I have put the
layer outline color in white, which is easily
| | 01:12 | done, just right-click, hit Properties and
you can pick whatever outline color you like.
| | 01:15 | I like to make all the Reference layers white
because it's a neutral color, and we are going
| | 01:20 | to be adding colored layers
that will define all the vectors.
| | 01:24 | So let's get rid of that, and let's make the
new folder, and we will call this one head.
| | 01:29 | And what we are going to do now is to create
a series of layers in anticipation of the
| | 01:34 | final vector art.
| | 01:36 | Normally when I do this,
I'll do it an intuitive way.
| | 01:40 | I'll create twenty layers.
| | 01:41 | I will name one hd.
I'll name one ear left, ear right.
| | 01:44 | For the purposes of doing the course, I already
pretty much know where we are going with this,
| | 01:48 | and to save time, I am going to just start
throwing them in and telling you what to call them.
| | 01:53 | But I don't want you to have the idea from
watching this that this is normally how a person would work.
| | 01:57 | It's a fluid process where you, for example,
know that the nose will go on the top level,
| | 02:01 | and that will be above the mouth for example.
| | 02:04 | So you play with it,
and it's not fixed in stone.
| | 02:07 | In any case, here we go. Top layer will be
called nose, and I am just going to run through
| | 02:11 | all of these and just type them in.
| | 02:15 | You notice I use lowercase.
| | 02:17 | I use lowercase for several reasons.
| | 02:19 | It's because it takes up less screen.
| | 02:21 | It's so hard to find screen room with Flash.
| | 02:24 | I like to save every possible pixel.
| | 02:27 | I also save uppercase for
things that really matter.
| | 02:29 | Already you can see I have used uppercase for the
right ear and the left ear and the right brow.
| | 02:35 | That way that you can use it basically as a
flag and very sparely, and trying to find
| | 02:41 | every possible way that you can to
work around the limitations of Flash.
| | 02:45 | So again, we will keep going.
| | 02:46 | The next one is eye. There are quite a
few eye layers, eye right lid. And if you have
| | 02:52 | a wheel mouse, you can scroll down.
| | 02:55 | Okay, so now we get to a point where I will
do something that looks a little bit unusual.
| | 02:59 | I'm going to make an indent of 4 spaces, 1,
2, 3, 4, and type in hair right.
| | 03:06 | Now I have already made a hair R layer here;
why am I making a second one here with an indent?
| | 03:11 | The reason why I am doing this is because
I am setting up this turnaround in such a
| | 03:14 | way that I'm already assigning layers that
will cover us so that when one of the levels
| | 03:21 | that's normally above a layer goes below that
layer, so in this case, we are going to have
| | 03:26 | hair levels that when we look at the
character from the front or behind the skull level,
| | 03:30 | but when we look at them from the other side, they will
be behind, or on top. The layer order will reverse.
| | 03:36 | And if you wanted to do this, but you've got
two hair right levels. But the nice thing
| | 03:43 | about making an indent is that it just bumps
it out, and it's like the little reminder,
| | 03:47 | just a device that lets you know, oh, hang on
a second, we are going to have a duplicate.
| | 03:51 | There is going to be not one of these, but
two, because it's very difficult with all
| | 03:54 | these layers to get lost.
| | 03:55 | It will make more sense if we proceed.
| | 04:01 | So as you can see, the same applies to the jaw
and the nose; they are going to be popping
| | 04:04 | levels later on during the course.
| | 04:07 | So the next thing that I like to do is never use
these random colors that Flash assigns to the layers.
| | 04:14 | When you got to Outline mode and you use these,
some of them can be practically invisible.
| | 04:18 | You will never see that in Outline, and that
green is going to be very hard on the eyes.
| | 04:22 | So let's go through and
assign much better colors.
| | 04:25 | So first of all, on the head layer I
have my own little shorthand that I use.
| | 04:29 | I like to use one of these colors to
symbolize the head in general, but then individually
| | 04:35 | inside, I mean, you won't ever see that.
| | 04:36 | It's simply a folder color convention, but
the nose--let's make that the darkest color.
| | 04:45 | And the other pattern that I use--and I
stress patterns and consistency a lot--
| | 04:50 | whenever I have to pick a layer outline color
for the right side of the body, I pick a green
| | 04:54 | of some kind and the left a blue.
| | 04:56 | If you want, you can of course pick something
that works for you better, but this in the
| | 05:01 | one that I have used over the
years and I am happy with it.
| | 05:03 | So I am going to pick a dark green for the
right ear and a dark blue for the left ear.
| | 05:08 | And right now you're probably
thinking, well, I don't see it.
| | 05:11 | Well, you won't, but for me, later on in
later chapters, when we start applying the lines
| | 05:15 | and start aligning this thing, it's already
built-in, because we are going to be going
| | 05:19 | into Outline mode a lot and then you'd
be able to see exactly what we're doing.
| | 05:26 | And you see where the default
palette begins to come in handy.
| | 05:28 | We are calling on the
colors of those top three rows.
| | 05:32 | Now onto the left side we will pick blue.
And again, by having an uppercase for the left
| | 05:38 | and the right, it really makes those stand out.
| | 05:40 | For a long time I used lowercase for these,
and it was very hard to read the l because
| | 05:43 | it was simply a vertical line.
| | 05:45 | And the uppercase L just
really jumps off the screen at you.
| | 05:49 | I am picking this creamy color for the mouth,
hair right, so the right side again. Let's
| | 05:55 | pick a green for that. And again, these are
patterns that will have saved me from many
| | 05:59 | mistakes, because I'll occasionally do
something on the wrong side or name it in the wrong
| | 06:02 | side and I'll say to myself, why is that
color blue if it's meant to be on the right,
| | 06:07 | getting back to the point of using systems
and patterns and consistency that will help
| | 06:12 | you in terms of catching mistakes
that could be costly later on.
| | 06:16 | For the skull, pick a really bright color,
because we won't be seeing much of the skull.
| | 06:20 | For most the time the skull will simply be
sitting where it is, so you can pick a lighter,
| | 06:24 | more demure outline color for that.
| | 06:27 | So we have finally done all the
typing and all the color work.
| | 06:30 | This is basically putting in the groundwork,
so it's important that we get this pretty close.
| | 06:34 | When you are working on your own figures,
you don't have to be as scientific as this.
| | 06:38 | You can change things as you go along.
| | 06:40 | You can cut layers, combine them, split them
apart; but if you follow this basic process,
| | 06:44 | it will help you to avoid some pitfalls.
| | 06:47 | So take a look at this and be sure that you've
checked your layers when you are typing them
| | 06:51 | out to make sure that you're matching this
as close as possible--actually it matches
| | 06:54 | exactly, and we will be ready
to go on to the next section.
| | Collapse this transcript |
| Drawing the head| 00:00 | So we've set up all of our levels,
| | 00:02 | we've colored the outlines, and we are ready--almost--
to start lining and creating the vector work.
| | 00:07 | Before we do that one, little thing to take care
of: let's double-click on the hd 1 turnaround
| | 00:13 | symbol in the Library panel and you'll see
that the Timeline just squishes in. And some
| | 00:18 | people don't have a problem with that.
| | 00:19 | They just are happy scrolling up and down.
| | 00:21 | I just can't work like that.
| | 00:23 | So luckily, there is a
simple enough way to fix that.
| | 00:25 | Let's rip off the Timeline--just drag on the
Timeline text and drag it away--and let's
| | 00:31 | drop it in there. And now notice
that the Motion Editor got lost.
| | 00:35 | I don't we think we really
need the Motion Editor for this.
| | 00:37 | We can get rid of that if you like,
or we can drag it back into that Tab.
| | 00:42 | So now we have a vertical Timeline, and we
can close it just about to where we need.
| | 00:48 | One of the virtues of having lowercase is
that we can pull this in just a little bit
| | 00:52 | more and still read everything,
and a little more room here.
| | 00:56 | I think we should probably get rid of the
Library panel, at least as a vertical stack
| | 01:00 | by itself, so let's very
carefully strike this back to here.
| | 01:05 | I am just going to drag the Library
panel and the Motion Presets here.
| | 01:12 | Let them all share the one space,
and now we can toggle between them here.
| | 01:15 | And as you can see, we've made a nice
vertical space for our line area.
| | 01:21 | And the next thing to do will be to save this.
| | 01:23 | So this is a new workspace, and let's call
this one rigging_face_vertical. And if we have
| | 01:33 | to go back to the other one with the horizontal
timeline, we can do that too, just by simply
| | 01:36 | going back to Workspace and clicking on that.
| | 01:40 | But for now this will
speed up the workflow. Okay.
| | 01:43 | So let's zoom in a little bit. And we will start
lining, so there's a couple of ways of doing it.
| | 01:53 | We could create lines.
| | 01:55 | Let's pick the skull for example,
so we will select the skull there.
| | 01:59 | I can start drawing, and you
can see it appear in here.
| | 02:04 | That's kind of distracting.
So let's pick on the Properties Tab.
| | 02:06 | We could do that, and then use the V on the
keyboard, the Selection tool, and the N on
| | 02:13 | the keyboard, the Line tool, and pull
between them to create these shapes.
| | 02:17 | But I find there is a quicker way of doing it,
and that's just to select the Rectangle tool.
| | 02:22 | That's the one we want.
| | 02:26 | I am going to just get rid of the color in the center.
And I think we can switch off Snap to Objects.
| | 02:32 | It gives us a lot more subtlety with control.
| | 02:37 | Now the big question when you are doing this,
when you are trying to match the line work
| | 02:43 | beneath is exactly where to place these lines,
because obviously the skull will go behind the hair.
| | 02:48 | We are dealing with the lines, but they are
really meant to represent objects that are
| | 02:52 | three-dimensional.
| | 02:53 | So let's give it a little bit more room.
And I am going to hold down the Alt+Opt key to
| | 02:58 | create a new point.
And something has happened here.
| | 03:02 | You see the Flash is trying to combine these
two points together, so I will be very careful
| | 03:09 | as we are doing this that
we don't lose that point.
| | 03:11 | Now it's gone, you see.
| | 03:13 | So you find me doing a lot of Ctrl+Z to undo
that kind of damage, because I like having
| | 03:18 | that level of control.
| | 03:19 | I don't like it when Flash snap these lines together.
Sometimes I will do that, and you see the point is still there.
| | 03:27 | It's fine. So that's good, and if you have to, we can
zoom in. Smooth some of these out, and we go
| | 03:36 | in a bit more precise than that. And let's
put it into Outline, and then you can see the
| | 03:41 | beauty of having our layers precolored.
With the push of a button, they can go from black
| | 03:45 | to a more gentle color. And then we can
move on to a new layer, let's say the jaw,
| | 03:50 | and again, pick the Rectangle tool. And again,
whatever color appears in there, we can just
| | 03:57 | color to that at the moment. I'm hitting Snap to
Objects so that we can exactly hit those points.
| | 04:06 | I like to not have little white gaps in
the middle so we can overlap them slightly.
| | 04:12 | Now we can switch off Snap to Objects.
| | 04:17 | The big question that you face is, how many
points do you put in to achieve these shapes?
| | 04:21 | So my philosophy is, as few as it takes, as few
as possible, because that gives you greater
| | 04:25 | flexibility later on, when you want to really
begin to play with different shapes for the jaw.
| | 04:30 | And again, sometimes I do this to make sure
that Flash hasn't taken the liberty of blending
| | 04:35 | these two lines into one big one.
| | 04:37 | Okay, that looks good.
| | 04:39 | So again, just do that little
test, and we are excellent.
| | 04:43 | So if you click on the A key for the
Subselection tool, you'll see that we have 1, 2, 3, 4,
| | 04:50 | 5 points, which is probably the fewest possible
points that we could have made that shape in.
| | 04:55 | So now that we've got that done, click that,
padlock, and let's proceed to the hair levels.
| | 05:02 | I made different layers for the hair when
it's on top of or beneath the skull for later
| | 05:06 | on when we begin to do the turnarounds.
| | 05:08 | Well, I think for this one we will do the
upper one, because this hair, from the front
| | 05:11 | view, will be on top of the skull of course.
So let's get that Rectangle tool again.
| | 05:16 | And once more, let's make it an empty box,
easier to handle. And I think we need one
| | 05:22 | more point here, so let's
hold down Alt+Opt+Drag.
| | 05:26 | It's going a little closer here. Put Snap to
Objects back on so we can precisely line
| | 05:34 | that, and then back off again, and
now we can switch out to Outline.
| | 05:40 | And the beauty of switching to
Outline is it doesn't confuse you.
| | 05:42 | You can see what levels are
done and what remains to be done.
| | 05:45 | We will do the other hair now, and again,
remove that, snap on, and snap off, and now
| | 06:00 | we can put that to outline in the padlock.
| | 06:04 | And I think we have the eyebrows next.
| | 06:06 | So the eye right brow. Again go over to that
inner color. Alt+Opt to create a new point, pull
| | 06:21 | this in to match. And with this kind of structure you
will be able to later on create different expressions.
| | 06:27 | That's the basic geometry of the
future animated scenes will be built upon.
| | 06:32 | So let's go into Outline mode
so we can see a little finer.
| | 06:36 | Okay, so again, I am trying to pull this match
the original without losing the point control.
| | 06:43 | Now I know some of you like to use the more
Illustrator-like spline controls, and I've
| | 06:49 | never been able to really
adapt to these very well.
| | 06:51 | I also find that they can be a
little tricky to use in Flash.
| | 06:55 | If you are happy with using those controls
and if they work for you, then go ahead, but
| | 07:00 | like I said, it's just been my experience that they
tend to be a little harder to keep disciplined.
| | 07:06 | So now we have the right brow down.
| | 07:08 | The left brow of course will be pretty much
like that, so let's copy that and then we
| | 07:16 | will paste it in place. Ctrl+Shift+V.
| | 07:17 | I am going to use the arrow keys to move the
copy over, and again, we are on the new layer.
| | 07:23 | Another beauty of using the Outline mode is
that you can quickly see when you have done
| | 07:27 | something on a new layer.
| | 07:28 | Let's modify that, slip it
horizontally, and just pull it into place.
| | 07:34 | I said earlier that I don't flip horizontally.
This applies to symbols.
| | 07:37 | It doesn't apply to artwork on the stage.
| | 07:40 | If you're flipping a symbol horizontally,
that's the issue that I find creates problems.
| | 07:45 | And then I think the last component for the
moment will be the hair at the top, on this
| | 07:51 | layer, and again, just to
leave the color inside.
| | 07:59 | And again, it's a question of using as few
points as possible to create the shape.
| | 08:03 | Bear in mind also, this is going to animate.
At some point you are going to want this hair
| | 08:08 | to move and to be able to do little reversals.
| | 08:11 | So you do want it maybe consider that when
you're assigning these points. And I think
| | 08:16 | in this case we have enough to make
the hair curve any number of ways.
| | 08:21 | You can add more later, but I think this is
pretty good. And let's go into Outline so that
| | 08:25 | we can see they are really sharp line.
See that little bump there? So let's make
| | 08:31 | that as little as possible.
| | 08:33 | And then just grab these different sectors
and cull them to make sure that they have
| | 08:36 | been combined into one big
wobbly line, and that's really good.
| | 08:42 | Okay, and then the neck.
| | 08:47 | And once more, bleed that color.
| | 08:49 | I think we can probably draw
the neck all the way through.
| | 08:52 | We won't be seeing much of the neck that's
behind the upper body, or behind the jaw rather.
| | 08:57 | It's nice if we can make it align with this
point of origin here where the hair converges
| | 09:03 | with the jaw and the skull.
| | 09:05 | And I think we need to hold down the Alt+Opt
key to make one more. And now we have all
| | 09:12 | the line work down for the
basic first pass of the head.
| | 09:15 | Of course we haven't done the nose or the
ears or the mouth yet, but this will be the
| | 09:19 | first stage in completing the head.
| | 09:22 | So let's start putting some color on this,
because people might be getting a little confused
| | 09:26 | by all the lines and figuring out what's on
top of what, and this is starting to look a
| | 09:30 | little confusing.
| | 09:31 | So if we click on the Swatches tab and go
to the middle red and drop down to the eighth
| | 09:39 | row above the bottom, and that
will be our basic skin color.
| | 09:43 | So now we will just start applying it.
And be sure that everything is padlocked off
| | 09:48 | so that you can freely color it.
| | 09:50 | So I am just going to apply it to
the neck, the jaw, and the skull.
| | 09:55 | And let's pick that really, really dark black for
the eyebrows, and they might be in Outline mode.
| | 10:00 | I thought so.
| | 10:01 | So again, be sure that everything
is in solid mode, not in outline.
| | 10:06 | And for the hair color, let's pick the gray
right beneath that middle blue. Using these
| | 10:10 | three colors is a really nice way to memorize
which exact hue or shade that you are using,
| | 10:15 | because it will be very easy to
get lost inside this long line.
| | 10:18 | So this is the one we are using for the hair.
| | 10:22 | That's pretty good.
| | 10:23 | Now I want to get rid of the lines.
| | 10:24 | We don't need them, so I am going to zoom
out, hit the Erase tool--and be sure that
| | 10:29 | you have Erase Line selected--and then just
erase everything. Be sure you don't miss anything.
| | 10:34 | You want to make sure that everything is gone.
And now we can zoom back in, and you will
| | 10:40 | notice that he started looking a little more
cartoon-like. The only problem is that the
| | 10:42 | neck area is exactly the same color as the
jaw, and they are blending into one another,
| | 10:46 | and we don't want that.
| | 10:47 | So probably the quickest way to do
that is to make this a different color.
| | 10:50 | We could do something simple like
make it a much darker skin tone.
| | 10:55 | That would work. That might get us into some
trouble though as we begin to rotate the character.
| | 11:00 | Remember that we are going to be looking at
this guy from three quarters in this profile
| | 11:03 | view, and that's probably going to look weird.
| | 11:06 | So instead of doing that,
we are going to apply a gradient.
| | 11:08 | So let's click on the neck area,
and we will select the swatch.
| | 11:12 | Let's go hit the Color tab and we will select
here our Radial gradient. And on the left,
| | 11:21 | click on the left color, and we will type in
in the RGB values, the following numbers:
| | 11:26 | 234, 178, and 148. And in the right side,
the following numbers: 223, 160, and 125.
| | 11:42 | Now let's click off there, so we can see,
we've already begun to do a nice job of defining
| | 11:47 | the boundary between the jaw and the neck.
| | 11:50 | And actually, if we switch off the jaw, it gives
us a better idea of what we are dealing with.
| | 11:54 | So let's--under the Free Transform tool,
| | 11:58 | you should find the Gradient Transform tool,
or hit F on the keyboard, and then click on
| | 12:03 | that area. And here you can manipulate the
device, so you can move it up if you want
| | 12:07 | a different degree of gradient.
| | 12:10 | For example, if you move within very tight,
you see it's not going to be of much use.
| | 12:13 | We can pull it out to about here I
think it might be good. Let's try that.
| | 12:21 | Great! And that still works.
| | 12:26 | So the next step I want to do is
to create the ears and the nose.
| | 12:29 | Let's do the nose, because
the nose is also a gradient.
| | 12:31 | I am going to hide all the other layers,
because I want to see this really closely.
| | 12:35 | So we're going to go on the top layer now.
And under the Rectangle tool, instead select
| | 12:44 | the Auto tool, and just
draw something pretty neat.
| | 12:49 | Let's click on that line and delete that.
| | 12:52 | And here, too, let's go reselect
everything so we see what this looks like.
| | 12:56 | It looks okay, but I do want to do something
a little nice with the gradient here too.
| | 13:02 | So let's select the Gradient Transform tool.
And using these widgets here, you can of course
| | 13:10 | change the position a little bit. And this
triangle changes the area of focus. And let's
| | 13:19 | go to the swatches again and pick the Color tab
and I am going to get some different numbers,
| | 13:24 | so I want to brighten this a little bit.
| | 13:25 | So on the left side--actually, let's pull that
about to this point, and that will be 234 as
| | 13:33 | it is, then 182, and then 149. And on
the right side, 247, 219, and 213.
| | 13:49 | And that's feeling a little too bold, so
let's--what I want to have happen is the area
| | 13:57 | on top look a little brighter. And if you get lost,
just pull it back in. This is quite subtle. Okay.
| | 14:09 | Now you might find that the area beneath here
is like a little too similar to that below,
| | 14:15 | so let's go back in, Color. And if we go to
this setting here, H, then you might be able
| | 14:24 | to pull the tone down a little bit.
| | 14:26 | When that's done, I want
to symbolize this now,
| | 14:29 | so hit F8. And let's put
the registration point,
| | 14:33 | I think here might be fine.
| | 14:34 | We'll call it nose.
| | 14:36 | It's a graphic. Click OK. And of course, Flash
puts the pivot down here, so let's fix that,
| | 14:43 | with the Free Transform tool.
| | 14:45 | Okay. So let's do the ears.
| | 14:49 | So again, the ears are a little tricky.
| | 14:50 | Let's go in a little tighter
and hide everything else.
| | 14:53 | And this is the right ear, when I say ear
right, I mean his physical right ear of course.
| | 14:57 | So let's make a new
rectangle for this, Rectangle tool.
| | 15:01 | Let me get rid of that internal color,
and we will do it in Outline.
| | 15:10 | And you can switch snap off at this point.
| | 15:13 | And let's switch back on.
| | 15:15 | I want to make that little space for the
Highlight layer. And I want the edge of the
| | 15:20 | ear to be a little brighter than the interior,
and then we have to do the line work for this
| | 15:24 | internal shape. And now I am just using
the Line tool and connecting them altogether.
| | 15:31 | Let's switch snap off again.
| | 15:35 | Snap can be too aggressive sometimes, so
occasionally, I'll just like to work without the artificial
| | 15:41 | intelligence of it trying to
click everything to one another.
| | 15:44 | That's pretty good,
| | 15:46 | thicken that a little bit. And I think
we will use the basic skin color, but first
| | 15:53 | let's go back into Outline off. And remember,
the skin color was the middle red, eighth
| | 16:00 | row. And for the Highlight on the
outer edge of the ear, let's see.
| | 16:08 | I will use this one.
| | 16:13 | And for the inner ear, I'll use this one. Okay.
| | 16:20 | So another way of getting rid of all these
nasty black lines is just double-click on
| | 16:23 | them and hit Delete.
Let's look at everything in place again.
| | 16:30 | So I want to go in on the ear, and
just make a symbol of that again.
| | 16:34 | So once again, let's hide everything.
Just make sure we have the entire ear selected,
| | 16:38 | hit F8, and this time I'd like
the pivot to go actually here.
| | 16:43 | So a little bit different on this one. I am
going to just make the pivot right in the
| | 16:46 | middle for the moment, call
this symbol ear R, and click OK.
| | 16:52 | And if you double-click, as you can see, the
pivot is not where I want this to be; nobody
| | 16:56 | is going to want to rotate the
ear from this point of view.
| | 16:59 | So we could, for example, move this to here.
The only problem with that is that if this
| | 17:03 | ever moves, you'll get into trouble.
| | 17:05 | So let's undo that.
I am going to go back in.
| | 17:08 | Now we've double-clicked on the side of the ear.
| | 17:10 | We are now inside the ear symbol itself.
And what I want to do is to move this so that
| | 17:15 | this becomes the internal point
around which the ear pivots.
| | 17:20 | Go View > Snapping > Snap to
Grid and pull that there.
| | 17:24 | Now you have a perfect internal
pivot that you will never lose.
| | 17:27 | I go back out to the head and reselect Free
Transform, and just be sure that you've got
| | 17:34 | that exactly right. And you want to make sure
that Snap to Objects is on, and there you will
| | 17:39 | feel it click, right there.
That couldn't be better!
| | 17:44 | And then the last step is
to move that to there.
| | 17:49 | Now you want to do the other ear. So rather than
redoing all of that, there is a quick way, a shortcut.
| | 17:56 | So we will click on copy that ear, paste it,
and we will make this ear function as the
| | 18:03 | left ear, by first positioning it where we
want, and now we right-click and duplicate
| | 18:11 | the symbol and make ear left.
| | 18:15 | Now we'll double-click so that we are inside
the ear, Modify > Transform > Flip Horizontal,
| | 18:22 | and again, we want to make sure that that
completely hits that spot, and it does.
| | 18:30 | Notice that that symbol has not been flipped
horizontally; the internal artwork has been
| | 18:33 | flipped horizontally, but symbol is perfect.
| | 18:37 | It's not flipped, and that will save
us many confusing problems later on.
| | 18:41 | So as of now, we have the entire first pass
of the head fully colored with the ear as
| | 18:47 | a symbol, the nose as a symbol,
and the left ear as a symbol.
| | 18:50 | The remaining layers will be, if you draw a
line around them, no blue box, so they are alive.
| | 18:55 | They can be shaped-tweened, the elements with
the blue outline we'll motion-tween, and we
| | 19:00 | are ready to move on to the next section.
| | Collapse this transcript |
| Creating the mouth| 00:00 | In this section we're going to do the mouth,
just a first, initial pass for the mouth
| | 00:04 | to set it up with its own layers
for future detailed animation.
| | 00:07 | But for the moment there is one little thing
I want to fix. When I initially laid in the
| | 00:12 | layers in the previous chapter I put the
right ear and the left ear up at the top.
| | 00:16 | They're better off if they go down here.
And if you think about it, they are going to need
| | 00:22 | these layers later on, because right now at
the right ear, for example, if you imagine the
| | 00:27 | character looking a little further
over this way, then that ear, definitely
| | 00:31 | it's going to be behind all of these guys.
| | 00:34 | And as the head turns around later on when
we begin animating and we begin moving the
| | 00:39 | head over here, then that
ear is going to be on top.
| | 00:42 | So that's why I made
these two different layers.
| | 00:44 | Let me just undo all that damage for a second.
| | 00:48 | So it's very easy when you begin doing this
to get a little bit lost with, like of what
| | 00:52 | layer should this go on?
| | 00:54 | Basically as you go, on whenever
initially it looks the best.
| | 00:56 | But don't forget, later on, you have the
complete freedom to move these things around.
| | 01:00 | In the course of making this, I've experimented
with many different layer combinations before
| | 01:04 | I found the one that did the
most with the least effort.
| | 01:07 | And so that's why what you're seeing right now
is the result of quite a bit of experimentation.
| | 01:12 | When you do this yourself, don't be off-put
if you find yourself spending maybe an hour
| | 01:18 | or two moving layers up and down to
find what works absolutely the best.
| | 01:22 | So let's go on and drop in the mouth. So I'm going to
switch to Outline, and the mouth looks pretty simple.
| | 01:28 | It's just closed mouth.
| | 01:30 | So let's go to the mouth layer.
| | 01:32 | I am going to zoom in. And let's just
make a line at the moment for the mouth.
| | 01:37 | Let's switch from Outline to Solid.
| | 01:40 | Okay, select that simple little line, hit F8,
be sure the Registration is I think that's
| | 01:46 | probably a safe enough place to put it,
and we'll call this mouth. Click OK.
| | 01:52 | Now to do the further line work for the mouth we'll do
that inside this mouth symbols. Double-click on that.
| | 01:58 | So we have our placeholder mouth symbols created,
so now let's separate it out onto some layers
| | 02:02 | because we want this ultimately to be able to
talk and act and make all kinds of expressions,
| | 02:08 | so obviously one level isn't
going to be enough to do that.
| | 02:11 | So let's just carve out, let's see, maybe
about 10 or 11 levels, something like this.
| | 02:20 | So I'm just going to name these.
The top two I'm going to reserve for Labels.
| | 02:25 | They won't actually have anything on them
but notes, so you can keep track of everything.
| | 02:30 | Beneath need, that the upper lip, we'll call
it lip upper, and below that the
| | 02:34 | lower lip, which we'll
call lip lower.
| | 02:37 | I name them like this so that you see what
they are and then where they are. This is
| | 02:40 | a much more logical way, I find, to stack
things and to name them in the library.
| | 02:45 | Next, we'll have a mask, because the mouth is
going to have teeth and a tongue and any other
| | 02:50 | inner shapes you think you might need, and
these won't obviously be able to fit inside
| | 02:55 | the shape that we're going to be
carving out, so we need to mask them.
| | 02:59 | So inside that, we're going to have the teeth
upper level and the teeth lower, then the tongue.
| | 03:08 | I made that the inner mouth, mouth inner. That will be
like the back of the throat or the mouth color.
| | 03:16 | And then beneath that, the lip, and by lip I
mean a little shaded area here that we'll
| | 03:22 | add just to give some definition.
| | 03:24 | So the final thing to do will be to--before we'd
actually line these, just let's pop some colors in.
| | 03:30 | And again for label levels
I'd like to color them white.
| | 03:32 | It kind of just flags them as something that you
don't draw anything into, apart from making notes on.
| | 03:37 | The upper lip, we'll make that dark
green, the lower lip, dark blue.
| | 03:46 | The masks I sometimes like to keep
white, or some other strangely bright color.
| | 03:52 | The upper teeth, we'll make them medium green, the
lower teeth medium blue. The tongue will be red.
| | 04:02 | Let's make a really bright red.
| | 04:05 | And the mouth inner, like the back
of the throat area, we'll make that this
| | 04:10 | subtle red color. And then the lip,
let's make that like the medium blue.
| | 04:16 | So this line here ultimately we're
going to just use as a basic reference.
| | 04:21 | So let's start drawing the
upper lip going a little tighter.
| | 04:28 | Now obviously, it's not going to be a single
line, because we want it to be able to do more
| | 04:31 | subtle things than this. And we'll make it a
rectangle as the inner shape and keep
| | 04:39 | snap on so we can match these corners.
| | 04:45 | Now snap off so we can hold down the Alt+Opt
key. Oops, and I sense that we have Snap to
| | 04:51 | Grid on, so make sure Snap to Grid is off;
otherwise, we will be snapping to invisible
| | 04:54 | grid lines. And I'm just to pull this in.
| | 04:57 | Let's go even tighter if we have to.
| | 05:05 | Don't forget that this shape that we're
creating right now, this is going to animate later on.
| | 05:09 | So keep it simple, as few points as
we can absolutely get away with.
| | 05:14 | That'll help the shape tweening to do
its work without getting too confused.
| | 05:18 | Shape Tweening is a very cool tool, but it
also has its limitations, and it doesn't like
| | 05:22 | to be overloaded. So now we have our upper
lip shape, and I'm just going to pull these
| | 05:26 | to make sure that--see,
here we lost one of them.
| | 05:28 | I don't like that.
| | 05:29 | This is going to be very,
very hard to manipulate.
| | 05:32 | So let's have a look at where that
point was before it got blended in.
| | 05:36 | So I'm kind of got you saw that, because this
is a kind of problem that emerges constantly.
| | 05:40 | I need now to re-create that point, so I find
that the easiest way to do that is to delete
| | 05:45 | the area that was in
trouble and I just rejoin.
| | 05:49 | I am going to hit Snap back on and now back
off, and now if you zoom out, we're good.
| | 06:00 | We've got control here.
We've got control there.
| | 06:02 | That's just ideal.
| | 06:04 | And let's color that area in.
| | 06:06 | We'll color it as we go.
| | 06:09 | For now, I'm just going to
make it black on the inside.
| | 06:13 | One little thing to note: be sure that Don't
Close Gaps is selected, because the last thing
| | 06:18 | you want to have happen is to have Close Large
Gaps, Medium, or Small, selected and then when
| | 06:24 | you paint you miss a bit.
That will cause horrendous problems.
| | 06:28 | So by having the Fill tool selected to Don't
Close Gaps, that means they will absolutely fill
| | 06:34 | to perfection, even if
there's a small space up there.
| | 06:37 | So now when you go in,
you see what a nice shape that is.
| | 06:44 | That's one point to control the edge of the
mouth. And very easy to do the lip lower,
| | 06:49 | it's going to be identical to the upper lip.
| | 06:52 | And the mask as well, for the close mouth,
there is no reason why it should be any bigger.
| | 06:56 | And the inner mouth, the same.
| | 06:59 | This is for the only framework this happens.
| | 07:01 | So let's color the inner mouth, and I am going
to color it this color, the intermediate red.
| | 07:08 | It doesn't matter what the
mask color is. It's a mask.
| | 07:13 | It's going to be invisible.
The next thing to do is to add some teeth.
| | 07:16 | We are not even going to see these teeth at this
point because obviously they'll be hidden
| | 07:20 | behind the closed mouth, but let's put them in
so that we have them. And this should be white,
| | 07:27 | so I'm just going to select white for that.
And let's put the teeth approximately where
| | 07:34 | we think they should go.
| | 07:39 | The upper teeth don't do a lot
of moving, but the lowers do,
| | 07:43 | so the position of the upper teeth
will probably be something like this.
| | 07:49 | We'll do the same thing for the lower.
| | 07:56 | Padlock the upper ones if
you have them in a situation that you like.
| | 08:00 | You can add more detail to these later on. For now
I'd just like to make them a very basic shape.
| | 08:04 | I also like to symbolize them now as well.
| | 08:07 | So at this point I am going to
get rid of this black line.
| | 08:11 | They're still there of course,
so let's just click on that.
| | 08:13 | The line is gone, the color is still there.
Hit F8, and let's pivot them from the top.
| | 08:19 | We'll call this teeth upper (upr), click OK.
| | 08:22 | Again, Flash for some reason
puts the pivot in the middle.
| | 08:24 | We don't want that.
So let's select the Free Transform tool.
| | 08:30 | I am going to Snap to Objects and put
that pivot exactly where we need it.
| | 08:35 | We'll do the same thing for the bottom.
| | 08:37 | Let's get rid of that black line, delete that,
select the teeth color area, hit F8, and this
| | 08:44 | time we'll put the pivot point on the bottom,
call this one teeth lower, and
| | 08:50 | Free Transform, put the
point down here, and that's done.
| | 08:56 | The last thing we need
to do is add the tongue.
| | 08:58 | So I want to see how the tongue is going to sit
in relation to roughly the rest of the mouth.
| | 09:04 | So I'm just going to outline them and padlock
it, open up the tongue layer, and let's just
| | 09:09 | make it a very simple
shape with the Oval tool.
| | 09:13 | And let's fill that with another
red color, maybe this brighter red.
| | 09:18 | Let's go to that outline.
| | 09:23 | We'll switch off Snap to
Objects so we can move it freely.
| | 09:27 | That's probably an okay place.
| | 09:29 | You can add more detail to this later on, like
little highlight layer, but for now this is fine.
| | 09:35 | I think we can pivot it
from the top or the middle.
| | 09:40 | Something that's spherical as this,
| | 09:42 | you have some flexibility. I am just going to put
up in the middle, and we'll call that tongue.
| | 09:50 | Now let's have a look at what we have here.
| | 09:53 | Oh, the mask layer should be right-clicked,
make it a mask, and then we drag our other layers
| | 10:01 | in underneath that. And we also have a
lip layer, which doesn't need this anymore.
| | 10:11 | But we do want to add just a little hint of
flesh right there. Snap on, and let's make
| | 10:27 | that, for the moment, just this light gray.
| | 10:31 | We'll change these later when we see it
in context with the rest of the face.
| | 10:36 | So that's our mouth.
| | 10:37 | I would just for the moment open it out a
little bit to here because we're going to
| | 10:42 | be adding more frames in at this point.
| | 10:44 | Let's go back out, look
at the entire head now.
| | 10:47 | There is one more piece of housekeeping to be
aware of, and let's do this right at the beginning.
| | 10:52 | Be sure that with any of the symbols that
you create, they're set to be a graphic and that
| | 10:57 | their behavior is consistently set.
| | 10:59 | At the moment, under Looping, we don't want
these to loop ever. Play Once or Single Frame,
| | 11:05 | for the moment Single Frame is better.
| | 11:08 | So just click on any symbol that you've got
and make it single-frame, and Graphic.
| | 11:15 | And if you are in doubt, just draw a box around it.
| | 11:17 | There's only four of them, so we have
them taken care of. And that's it.
| | 11:20 | That's the current pass complete.
| | 11:22 | In the next phase we'll go on and start dealing
with the eyes, and then we'll start bringing this
| | 11:25 | guy to life.
| | Collapse this transcript |
| Drawing the eyes| 00:00 | The final piece of the face is the eyes, and that's
really important of course, so let's get to it.
| | 00:05 | So let's go to Outline mode and go in close.
And we will start with the right eye; that
| | 00:09 | will be the one that use as our base.
| | 00:12 | So we go to the, let's see, we have the eye R,
ball and that will be just the white of the eye.
| | 00:19 | So be sure you have white selected as the
fill color, and I'll select the Oval tool.
| | 00:27 | And just draw the shape
as you think you need it.
| | 00:30 | Now we probably have, if we look at this in solid,
there is probably a big ugly line around it,
| | 00:35 | so we can click on that and get rid of it.
And I hope you can see this: if I click on that,
| | 00:38 | there is a shape area for the eyeball.
| | 00:40 | If you go into the Outline mode
then you can definitely see it.
| | 00:43 | Go to the Free Transform tool if
you need to skew the eye to match.
| | 00:47 | Try to avoid pulling on
of the edges of the eye.
| | 00:50 | Just use the Free Transform to get as
close as possible before you do that.
| | 00:54 | So this is not too far away. Okay.
| | 00:59 | If you do too much of this business, you can
really wreck the geometry of the thing, and
| | 01:04 | I find it's often nicer to
have a really smooth line.
| | 01:07 | If you did need a more complex shape, you are
better off using the rectangle and pulling
| | 01:11 | that into something a little more geometrical.
But for a simple cartoon guy like this, this
| | 01:16 | is by far the best approach.
| | 01:17 | I am going to use the arrow keys just to get
a little bit closer, and let's padlock that
| | 01:23 | once we are happy.
| | 01:24 | And the next will be the pupil.
| | 01:25 | I'll select that layer, again, the Oval tool.
And I am holding down the Shift key so that
| | 01:31 | we are constrained to a
perfect circle. Let's do this.
| | 01:37 | And the same thing. We have this cover to that
to that. The outline is gone, pure color.
| | 01:42 | And I want to symbolize this, because I
want to do some work on layers in here.
| | 01:46 | So making sure that the pupil is selected,
let's click F8. Be sure that the pivot is
| | 01:51 | right in the middle. Call it eye pupil.
| | 01:55 | Now let's double-click on that so that we
are inside the symbol, and let's make three
| | 01:59 | layers. And I'm just
going to clone what's here.
| | 02:04 | Alt+Drag or Option+Drag and that
automatically copies what we have.
| | 02:08 | So the bottom layer will be the outside one,
and let's make that blue, this one for now.
| | 02:14 | The middle layer, which is
currently white, let's make it smaller.
| | 02:17 | So we will hit Free Transform.
| | 02:20 | Let's make that black. And the top layer,
let's scale that in for the highlight.
| | 02:31 | And let's click Snap to Objects off so we
can move these a little more freely. Pretty
| | 02:39 | simple operation. The reason why I would do this rather than
do it all on one level is now I have the
| | 02:44 | freedom to move these around if I have a
different scene where he is looking up.
| | 02:49 | If I want to add more, then I can do it.
| | 02:51 | If I want to make him look like he is
looking this direction, I can do that.
| | 02:55 | Now these are very subtle effects, but they
are really important, and they give you a
| | 02:58 | nice little edge.
| | 03:00 | If you wanted to, you can add a gradient
along the perimeter of the blue area.
| | 03:03 | Lots of things you can do,
but for now, this is good.
| | 03:06 | And last thing, a little bit
of the housekeeping as well,
| | 03:08 | let's just name these: black, blue.
| | 03:14 | And if you're really picky like me, then
you can even make the outlines match them.
| | 03:20 | It's really nice to do this, because if you
do ever have to work in Outline mode, which
| | 03:24 | is surprising often, it makes life much easier,
because then you can kind relate the different
| | 03:29 | colored outlines to what
you're seeing on the screen.
| | 03:33 | Let's pick maybe a gray like that.
| | 03:35 | So for example, that's meaningful;
that's not going to confuse you.
| | 03:39 | If they were like lime greens or lemon
yellow, you would see nothing there.
| | 03:43 | So back to the outside, let's see if we can
duplicate that for the left eye, because there
| | 03:48 | is no reason to do the same work twice.
| | 03:50 | Now the ball will simply be flipped horizontally,
Alt+Drag or Option+Drag to the eye left ball level,
| | 03:59 | holding down the Shift+Arrow
key and moving that to the side.
| | 04:03 | Then Modify > Transform > Flip Horizontal.
| | 04:06 | Let's do the same thing for the pupil, copy that
and then paste it into the left pupil level.
| | 04:17 | There we go! So that's the eyes taken care of.
The next step will be to give him an eye blink.
| | 04:23 | This is a little trickier, and this will be
our first foray into actual animation, because
| | 04:27 | we're going to animate the eye
blink using some shape tweening.
| | Collapse this transcript |
| Animating the eye blink| 00:00 | Nothing looks weirder than
somebody who doesn't blink,
| | 00:02 | so it's time that we gave
this guy a blink to do.
| | 00:06 | So let's go and start again.
| | 00:07 | I like to favor the right side.
| | 00:08 | You can pick one or the other, but
again, whatever you do, be consistent.
| | 00:11 | So my approach is do the right side first,
then repurpose it to the left side, and that
| | 00:17 | way know what your primary
approach is going to be every time.
| | 00:20 | So in this case let's go onto the right time, and we
need to make some simple placeholder symbol--
| | 00:25 | for now, something very
similar to the eyeball itself.
| | 00:28 | So let's just click on that.
| | 00:30 | Ctrl+C to copy, paste in place here, and let's
hit F8 to make this into its own symbol, because
| | 00:37 | obviously, we don't want the animation
to happen on this external timeline.
| | 00:40 | So let's put the pivot point to that side.
| | 00:42 | I am going to call it eye right lid.
| | 00:46 | You can call it blink, but I
like to call it by what it is.
| | 00:49 | It's a lid that blinks.
| | 00:50 | So this makes more sense to me. Click there.
| | 00:53 | Let's fix the pivot.
| | 00:54 | So Free Transform tool with Snap on Snap
to Objects, and let's put that there.
| | 00:59 | It's really important that we get the eyelid
traveling very tightly with the eyeball.
| | 01:04 | Now that that's done, we can double-click to
enter the symbol, and let's make some layers.
| | 01:10 | Now this thing is just there is a
placeholder, so we can hide that.
| | 01:13 | Now let's make three more: one, two, three.
And the top layer will be the upper eyelid,
| | 01:21 | the middle layer will be the lashes, and
the bottom layer will be the lid lower.
| | 01:27 | So what we want to do now is to create a
geometry or a shape that will be as simple as possible
| | 01:33 | and easier to tween.
| | 01:35 | So what I'm going do with this actually is
go back out a little bit, because the main
| | 01:39 | point for this for me is the
point here; it's that pivot.
| | 01:42 | I'm not worried about the internal eyeball.
| | 01:43 | I am just going to move that
a little bit to the right.
| | 01:46 | Now, let's go back inside. And this is where I
am going to start the upper eyelid from.
| | 01:50 | So let's start with lid lower, and with the
Rectangle tool and again, let's get rid of
| | 01:58 | the outer line, get rid of that.
| | 02:01 | And this is going to be like the skin color,
but a little bit darker. So let's pick,
| | 02:06 | I see that this turquoise color down.
| | 02:09 | Just a dark skin color will do for now.
| | 02:12 | And I want this corner to be
absolutely spot-on that crosshair.
| | 02:16 | So let's put Snapping on for the grid,
and you can feel it go on. It's nice.
| | 02:23 | It's really nice when you feel
it really connect with that.
| | 02:27 | And then I am just going to switch off All
Snapping for the moment, and just pull this up.
| | 02:35 | I really want to get this exact,
and that means hiding the eyebrows.
| | 02:38 | So let's go back out,
click on eyebrow, hide it.
| | 02:41 | I am going to go back in here.
| | 02:45 | Once again, taking care that flash doesn't
helpfully snap away this point, because we need this
| | 02:53 | point and this point,
| | 02:55 | this point in particular, to be able to control
the animation for the blink. That's good.
| | 03:04 | Perfect. So let's make a second key.
| | 03:07 | What I am going to do, actually,
is let's make two more here.
| | 03:12 | I am not going to worry too much
about the timing right now.
| | 03:15 | This is going to be the closed eye.
This will be the open one.
| | 03:18 | So I am going to go to the closed position and drag
this down, and now let's activate Shape Tween.
| | 03:33 | Right-click on the keyframes and select
Create Shape Tween, and that's it.
| | 03:40 | That's how we will do it.
| | 03:43 | Now I didn't put this on the lid lower, but I
think this will be more like the upper eyelid.
| | 03:48 | I am not quite sure yet,
| | 03:50 | so let's just move it up there for now,
and let's put some blank frames in here.
| | 03:55 | When you are working like this say, you basically
were working on layers, and it can be confusing.
| | 04:00 | There's no way around it.
| | 04:02 | It's a little trial and error.
| | 04:03 | It's not too difficult to figure out
what is going to work and what isn't.
| | 04:06 | So what we need now is another layer that
will describe the black for the eyelashes.
| | 04:12 | So let's select that layer by clicking on
here, hold down Alt or Option, and drag this
| | 04:17 | down. And the eyelashes we want to be black,
| | 04:20 | so let's select a black fill for
that, and then let's color all these.
| | 04:25 | Now if we hide that, we see the
entire area turning black.
| | 04:32 | That's obviously not what we want,
so let's padlock that.
| | 04:35 | Now the upper eyelid will give us this
effect if we smooth this up to here.
| | 04:45 | The beauty of this method, by using two
different color layers, Flash does some things very
| | 04:50 | poorly, and one thing that it does very poorly is
shape tween these very, very thin crescent shapes.
| | 04:57 | It's much better at shape
tweening big shapes with wide areas.
| | 05:01 | So by this process, what we have done is we have
created the illusion that we shape tweened
| | 05:05 | a very narrow slice when we have done nothing
of the kind, and that also gives us really,
| | 05:10 | really nice control over the weight.
| | 05:11 | We can actually make the eyelashes
disappear completely at the top of the eye.
| | 05:15 | Then the other thing that we need to do is, well,
we can actually show some eyelashes up here.
| | 05:25 | That's great. And we want
to copy this to the end,
| | 05:30 | so select those two, hold down Alt+Drag or
Option+Drag. See the little plus sign showing
| | 05:35 | I'm copying. And the lower level here also
needs an eyelid for the bottom of the eye,
| | 05:42 | so let's do that. And again, just
double-click to get rid of that outline.
| | 05:50 | Snap on. And let's go to
outline on this, snap off.
| | 05:58 | You should be getting the idea by now that
the essential process is fairly repetitive,
| | 06:03 | even the same essential steps over and over
again. Let's get rid of this point here.
| | 06:08 | We don't need that, so that will combine it.
| | 06:12 | Snap off again. Hold down Alt+Option to pull the line
to a new point. And let's just check to make
| | 06:23 | sure that we haven't lost
control. That's great.
| | 06:27 | Hold down Alt or Option, we will drag that to
here and pull that up. And then just copy
| | 06:37 | the start frame at the end, select these keyframes,
Create Shape Tween, and now switch Outline mode
| | 06:46 | off, and there we go.
| | 06:49 | Now the one thing that you will notice with
this is that it's so fast that sometimes you
| | 06:53 | can barely see the closed state.
| | 06:55 | So one thing I like to do is to take
the closed eye and duplicate it.
| | 06:58 | It helps that closed
position to read a bit more.
| | 07:01 | You can even make three or four or
five frames, as many as you like.
| | 07:04 | That's the beauty of doing this.
| | 07:05 | You can make these eye blinks as slow
as possible or as fast as possible.
| | 07:11 | It's entirely up to you.
| | 07:13 | Once you have the shape tweening
done, you see how simple that is.
| | 07:17 | So instead of doing that, what I want to do is just to
create, for now, a really nice straightforward eye blink.
| | 07:22 | So let's put a wide-open frame on frame 1.
| | 07:24 | We will put the beginning
of the blink on frame 2.
| | 07:27 | We will put these two frames here on frames,
let's see, 6 and 7, and you can see their frame
| | 07:34 | number down here. And we will
end the blink on frame 10.
| | 07:41 | Then we'll go to a blank frame, hit F7 and
now we can remove these. And if you're really
| | 07:47 | picky, you can even get clean up that
little tweens that we don't need there.
| | 07:53 | And that's really, really nice.
| | 07:57 | Also, we can get rid of that little placeholder
that we created, if you remember, at the beginning.
| | 08:03 | We don't need that now.
| | 08:06 | To finish it off, we will just color the layers
too, so that if you ever have to look at this
| | 08:16 | in Outline mode you're all set.
| | 08:22 | Now when we go back out,
let's put the eyebrow back on.
| | 08:30 | That's beautiful.
| | 08:34 | Then one last step remains,
luckily not too difficult.
| | 08:36 | We will duplicate this for the
other side. Ctrl+C, Ctrl+Shift+V.
| | 08:42 | Now a lot of people at this point would simply take
this eye blink and flip the symbol horizontally.
| | 08:49 | Again, don't do that.
| | 08:51 | Much better to right-click on this,
duplicate the symbol, make it eye left lid, OK.
| | 09:00 | We go into that symbol.
| | 09:01 | Now if you obviously, it you
play it, it's the wrong side.
| | 09:04 | So what we want to do is to select all these
frames and flip them horizontally. Not a fun
| | 09:08 | thing to do one by one, but fortunately,
we can do it in bulk. Down here
| | 09:13 | we can edit multiple frames and drag the
markers so that they cover everything.
| | 09:22 | Modify > Transform > Flip Horizontal.
| | 09:27 | We didn't see much happen there, but they
flipped the other way around, so we can actually
| | 09:32 | go to Outline mode; it'll help
to position them properly.
| | 09:36 | And that looked good.
| | 09:40 | So let's switch this off.
| | 09:43 | So we see just single frames again, and there
we go. No symbol flipping occurred, and we
| | 09:50 | still get the same result. And we maybe had
to add a few more seconds of work editing
| | 09:55 | multiple frames rather than flipping one symbol,
but you will understand later on why this
| | 10:00 | is really, really important. And last thing to do
is right now these symbol are set to Loop.
| | 10:06 | That's going to look really weird.
| | 10:07 | So for now I will just set them back to Single
Frame, and we are done with the eye blink.
| | 10:14 | In the next chapter, we will move on to the
mouth and look at bring him into life by making him speak.
| | Collapse this transcript |
|
|
2. Mouth and DialogueCreating happy mouth dialogue shapes, part one| 00:00 | Before we start doing the dialog mouth shapes,
just have a quick overview of why we are using
| | 00:05 | these particular shapes
and where they came from.
| | 00:07 | If you've watched Disney movies and feature
animated films, then you know that there's
| | 00:11 | all kinds of amazing mouth shapes
that can be done to create dialog.
| | 00:15 | In Flash of course we are not doing it in that
style; we are trying to tween between
| | 00:19 | different shapes,
| | 00:20 | so there are compromises that we can make.
But there is also a more simplified way of
| | 00:24 | doing dialog and that's the kind of TV style
that you would have seen in the '60s, the Fred
| | 00:28 | Flintstone or Scooby Doo style, and this usually
involves six static mouth shapes, going from
| | 00:34 | closed to what you see here as the D
mouth to the ooh mouth on the far right.
| | 00:39 | And you can make any kind of dialog you want
with these six shapes, believe it or not.
| | 00:43 | So what we'll do in Flash is we are going to
take this basic style and really develop
| | 00:48 | on it and expand on it.
| | 00:50 | We are going to be able to blend our tween
between any of these six shapes, and that gives
| | 00:55 | you all kinds of intermediate dialog shapes.
And you can even make custom mouth shapes
| | 00:59 | that are different from these, if you want to,
using the same principles that we are going
| | 01:03 | to cover here. In later chapters we will go
pretty wild with some of these custom mouth
| | 01:08 | shapes, so that we try to begin to approach
some of the effects that are feature animator
| | 01:12 | or a 3D animator might
have at their disposal.
| | 01:15 | Again, it's Flash; it's flat, it's 2D.
| | 01:17 | So it's a little different, but if you follow
along, I think you will be surprised by some
| | 01:21 | of the effects that we can
wring out of this thing.
| | 01:23 | So let me close this basic demonstration,
and I'm just going to reopen the old one, and I'll
| | 01:31 | switch my window layout
back to the vertical.
| | 01:35 | So now we are inside so
you know where we are.
| | 01:37 | We are inside of our heads, inside the mouth.
And what I have done is I've added a layer
| | 01:43 | here, which has some of the B mouth, which
will be the E sound; and the D mouth, which
| | 01:51 | is the wide-open mouth; and the F
mouth, which creates the ooh sounds.
| | 01:55 | These are letters A through F,
do not correspond to the phonetics.
| | 01:58 | So the A mouth, for example, which is the
starting point, that could be the mouth we would use for the
| | 02:03 | B or the meh sound, the closed shapes, and
the D mouth for a shout or a yell, and this
| | 02:09 | will be any ooh sound, phonemes basically.
| | 02:11 | So let's get going.
First things first.
| | 02:15 | Let's just extend the timeline out and hit F5
to match that, and let's make some labels.
| | 02:20 | We are going to start with a happy mouth,
| | 02:22 | so let's make a label note here called happy.
Put a space, happy. And here at the intervals
| | 02:30 | of about three frames, we will have
the A mouth and the B and so forth.
| | 02:34 | So I am just going to select these, hold down
Alt+Drag or Option+Drag to create just the notes.
| | 02:42 | This will help us with positioning.
| | 02:44 | So the first mouth in the label will be A,
the next will be B, then C, and so forth,
| | 02:53 | and then back to A.
| | 02:56 | So since A will be the beginning and
the end, let's hit F6 to do that.
| | 03:00 | We will hit an F7 there and padlock the
reference layer, maybe put it in Outline, hide it for
| | 03:07 | the moment. So the way I like to
approach this is after the A mouth is done--
| | 03:12 | I have noticed something looking at it
here, the lip is a little bit off center.
| | 03:16 | Not the end of the world, but let's select
that, hold down the Shift and the arrow key,
| | 03:20 | and push it back a little bit.
| | 03:21 | You can always be looking for
things to fix and tweak and improve.
| | 03:24 | So let's do the D mouth first.
| | 03:25 | I like to go from the closed
mouth to the open mouth.
| | 03:28 | Now bear in mind that we need these to be able to
shape tween and motion tween into one another,
| | 03:33 | so this can be a tricky, but let's
see if we can make it happen.
| | 03:36 | So let's start with just a mouth inner
layer and hit a keyframe here, F6.
| | 03:40 | I am going to switch the little preview sketch
that I have done on, and now let's select the
| | 03:47 | layer for the mouth inner shape and use the
Free Transform tool to push it in as close
| | 03:54 | as we can get just to the edges.
| | 03:56 | I'd like to minimize the amount of
pushing of actual points around,
| | 03:59 | so that's one way of getting
some of it taken care on.
| | 04:02 | Next, I am just going to, without losing or
accidentally blending these points together,
| | 04:10 | we can be pretty bold with it.
| | 04:12 | Now that looks weird there.
| | 04:14 | We don't want that little bump.
It's going to look really bad.
| | 04:16 | So I think we can simplify this,
maybe not do that curve there.
| | 04:21 | We really do want this to be
consistent on both sides.
| | 04:24 | Now, you don't have to regard the
sketch beneath as clad in iron.
| | 04:29 | I mean I'm taking liberties with it.
| | 04:31 | I am trying to get as close as I can
though with as few points as possible.
| | 04:37 | Oops, see, what's happened here?
| | 04:38 | They have all disappeared,
and now it's going to mush.
| | 04:41 | So let's hit undo for a little bit.
| | 04:46 | Let's hide that layer for a second.
| | 04:47 | Okay. And I can move these independently,
so that's good.
| | 04:54 | Now the test: select these, right-click, and Shape
Tween, and see if that works, and that does.
| | 05:02 | Now we need to finesse the upper lip.
| | 05:06 | Not too bad. And notice that
no shape hints are needed.
| | 05:09 | It's very important that we do
this without using shape hits.
| | 05:12 | This system, if you have to use shape hints
for all of the transitions it will be a nightmare.
| | 05:17 | So you really need this to be stable.
| | 05:19 | Unfortunately, if you use shapes that have
a not too high number of points, you can often
| | 05:24 | get it to work, and in this case one, two,
three, four, five, six, points total.
| | 05:28 | So you might find you to compromise on the
kinds of shapes that you can get away with.
| | 05:33 | Sometimes you can get away
with much larger ones.
| | 05:35 | It just depends from design to design, and
it's just something that you're going to have
| | 05:38 | to experiment with to see if your version of Flash
or your design will support it, but this will.
| | 05:44 | So let's padlock that.
| | 05:45 | Once you get something working like this, just
padlock it. And the beauty of this particular
| | 05:48 | system is that the inner mouth and the mask will
be the same, and we can actually cannibalize
| | 05:55 | some of this work to generate the
upper lip and the lower lip. So let's just copy.
| | 06:00 | I am holding down Alt or Option and dragging
these frames just to duplicate them up here.
| | 06:04 | We are going to keep the mouth inner open
with this Outline mode on, and let's go to
| | 06:09 | the upper lip. And if you remember,
we colored this black originally.
| | 06:14 | So let's gray color that so
we can tell them apart.
| | 06:20 | So this is the upper lip, and obviously we
don't want the upper lip to be all the way
| | 06:24 | down to the bottom.
| | 06:25 | We just want it to track to here. And it
helps if you click on the Subselection tool
| | 06:31 | to make sure that these little
points line up from side to side.
| | 06:33 | You have to move that one over a bit,
and now let's see if that obeys.
| | 06:40 | That is really nice.
| | 06:41 | Padlock that so you don't accidentally change
it later on, and let's switch it to outline
| | 06:46 | so we can see exactly what
we are working on beneath.
| | 06:48 | This is the lip lower and again I
switched this back to black.
| | 06:51 | It happens often that you just accidentally
override one colored layer with another, and
| | 06:56 | this is the opposite.
| | 06:58 | This lip will be pulled down to here. And again,
hit the Subselection tool or A on the keyboard
| | 07:04 | and try to get these two
points to line up on each side
| | 07:07 | so you get as consistent
a tween as possible.
| | 07:10 | There is a little bit of
weirdness on the right side.
| | 07:15 | You see, about here it's
getting a little too thin.
| | 07:18 | So let me take another look at that.
| | 07:22 | So the problem might be on the closed mouth.
| | 07:26 | See, the two points are
slightly different here,
| | 07:30 | so let's go in a bit tighter
and see if we can tweak that.
| | 07:33 | Let's pull it over.
| | 07:36 | You can see what that looks like.
| | 07:41 | It's a little bit better, but let's see
if I can pull it a little to the right.
| | 07:49 | To see it, let's just do that.
| | 08:01 | Any change that we make, don't forget, to the
first two shapes here, we've got to copy that
| | 08:07 | to there and then right-click and remove the
tween, just to do a little bit of housekeeping.
| | 08:12 | You don't want things getting too weedy.
| | 08:15 | So that gives us the upper lip and the lower
lip. The mask is set, the inner mouth should
| | 08:19 | be set, I think, too.
| | 08:23 | The next thing to take care for is the teeth,
and these are pretty easy because they're
| | 08:27 | motion tweened.
| | 08:28 | So let's just hit F6 to make some keyframes.
| | 08:31 | Let's right-click to go
Create Classic Tween.
| | 08:33 | I do not use the newer Motion Tween.
| | 08:36 | I always use the Classic Tween.
| | 08:38 | The modern version simply doesn't
work with this particular style.
| | 08:41 | It will just cause problems.
| | 08:43 | So let's go to the D mouth.
| | 08:44 | We will do one of these at a time.
| | 08:48 | Bring those teeth down a little bit, and the
teeth lower will really move down on the open
| | 08:53 | mouth down to here, and the tongue also.
| | 08:57 | Now you will notice straightaway, now, there's
no masking activated as we animate with these,
| | 09:03 | so you have to tolerate this ugly spill-out, but there
are things that we can do to really improve this.
| | 09:08 | The teeth seem to be a
little too big for the mouth.
| | 09:12 | So things that we can do are, pull them in.
| | 09:17 | We can also stretch them up, and there's the
virtue of having the pivots placed so carefully it
| | 09:22 | really makes this easier.
| | 09:24 | I think we can move the lower teeth up just a
little bit, and we can also go in and change
| | 09:32 | these internal shapes if you think there's no
other way of doing it, which is the beauty
| | 09:37 | of having these as a symbol. Okay.
| | 09:41 | So let's padlock that.
| | 09:43 | Now one last thing: the lip. Now let's hit
F6 here and the Shift and Arrow key until
| | 09:48 | the lip shape comes down. Select those frames,
right-click, and Create Shape Tween, and now
| | 09:58 | I will just pull that down a little bit.
| | 10:01 | So it's not just a static shape that moving.
That's actually following the curve. That's great.
| | 10:06 | Let's just padlock everything, just to
keep it safe from any further error.
| | 10:12 | And there we have our basic
open and closed mouth.
| | 10:15 | No shape hints used anywhere.
| | 10:17 | So with the open D mouth taken care, of it's
time to move on to the F mouth, which will
| | 10:21 | give us the ooh sound, and
we'll do that in the next movie.
| | Collapse this transcript |
| Creating happy mouth dialogue shapes, part two| 00:00 | So we've got the d-mouth done, which is really nice,
and that's a pretty cool shape-tweened action.
| | 00:05 | So it's time to do the next of the big frames
of the dialog, and that's the ooh mouth when
| | 00:10 | they really punch it in to a little tiny O
shape. And with all kinds of dialogue sounds
| | 00:16 | and effects we can get out of that.
| | 00:17 | So let's hide everything except
the mouth inner, and zoom in.
| | 00:23 | So let's make a keyframe here.
| | 00:25 | Select the column and go F6. And again, we'll
use the Free Transform tool to pull this in
| | 00:33 | as close as we can. And as you can
see, we can get this really close.
| | 00:37 | It's much more accurate to use this to
at least do the big broad movements.
| | 00:42 | Now let's see if that works at
all before I go any further.
| | 00:45 | And it is; it seems to be
tweening on both sides.
| | 00:49 | That's really great.
| | 00:51 | If you find it doesn't work for you, essentially,
it's a question of pushing the points around.
| | 00:57 | What I do is I have problems with this. I'll
go frame by frame and find out at what point
| | 01:03 | do I move it in the break?
| | 01:04 | So for example, I'm going to pull that down
and move left and right, and as you can see,
| | 01:08 | it's still working.
| | 01:10 | Same on the other side.
| | 01:11 | Let's pull that down, forward and back
one frame, and that's still working fine.
| | 01:17 | Let's go in even closer.
| | 01:18 | I'm going to pull this one in to try to match
the rough sketch a little better, and I think
| | 01:23 | we're still fine.
| | 01:25 | So that's how I work, and if something starts
to go haywire, then I just Ctrl+Z and undo,
| | 01:30 | until I go back and find what broke.
| | 01:33 | So I'm sure at some point in this process
something will go crazy on us and I'll have
| | 01:37 | to have to show you exactly what's involved.
| | 01:40 | I think the shape tweening changes
from version to version of Flash.
| | 01:44 | They seem to be--very hard to tell of course,
but it does seem to be little better in the
| | 01:48 | latest version.
| | 01:49 | But I also use the Macromedia version very
effectively, so don't rule it out just because
| | 01:54 | you might not have CS6.
| | 01:56 | So we have that shape taken care of.
Let's hold down the Alt or Option key and drag out
| | 02:00 | to the mask layer, and let's do
the same thing for these two.
| | 02:06 | So we have the lip upper. And again, don't
forget we have to color that black, and the
| | 02:12 | lower one, too, while we're doing that.
| | 02:15 | Okay, so let's look at the mouth inner
shape, and then we have the lip upper.
| | 02:21 | I can even put that in Outline mode. And as
you can see, it needs to be pulled up here.
| | 02:29 | And I noticed that one of our points has being
subsumed, so let's hold the Subselection tool
| | 02:34 | down and click on--this has now been lost,
| | 02:38 | so let's re-create it.
| | 02:41 | Draw a box around the area and delete it, and
with the Snap on, we will re-create that.
| | 02:47 | A little tedious two-step that we have to do,
and now we have it back, because we have
| | 02:53 | to have that fine level of control.
| | 02:55 | We've actually lost it on
the outer side as well.
| | 02:57 | It might not matter;
let's just see what this looks like.
| | 03:00 | Now it seems to be working.
| | 03:04 | So I'm going to leave it for now.
| | 03:06 | Repeat the process for the bottom.
Opposite process, now we'll pull this down.
| | 03:10 | Again, I've lost control of the
points here, but this might work.
| | 03:15 | And again, we can almost grab them back by
the same trick as we used before, these points
| | 03:19 | here and here. One way of doing it,
| | 03:22 | I'll draw a line across, use
the eyedropper, fill that.
| | 03:27 | Get rid of the line, get rid
of this, get rid of that.
| | 03:33 | And then just be sure that, yeah, we have that
point back and something strange happening there.
| | 03:40 | Okay. This is an utterly typical example of
the kind of things that you have to deal with
| | 03:46 | using this technique.
| | 03:47 | It's a minor annoyance.
| | 03:49 | Well worth the reward
once you get it working.
| | 03:51 | So now we have the lips and
the inner mouth and the mask.
| | 03:59 | Let's see what it looks like
all together. Pretty good!
| | 04:05 | So just to fix the teeth on this
one, they should be down lower.
| | 04:13 | I'll put the mask into Outline so we can see
them. And the tongue probably should be a
| | 04:18 | little bit lower
| | 04:19 | so we can see it hint of
the back of the mouth.
| | 04:21 | Let's padlock that, and let's zoom out.
| | 04:25 | That is great. And I'm not seeing any
kind of shimmering or weirdness.
| | 04:32 | So the next thing to do is very
simple. To do the rest of the mouths,
| | 04:35 | they are little more than glorified in-betweens. So I
could pick, say, this frame here for the e-mouth.
| | 04:39 | Let's move it there.
| | 04:41 | I don't use a direct in-between.
| | 04:43 | I like to move it one over, because that way you got
a little more texture, a little more variety.
| | 04:47 | Something strange is happening here.
| | 04:48 | This is starting to break,
so we have to fix that.
| | 04:51 | The next thing is the c-mouth, which is
this kind of halfway open, so let's pick here
| | 04:56 | and then drag these keyframes for the c. And
the b-mouth would be I think something like
| | 05:01 | this might be good,
| | 05:02 | so let's pick that, and let's see
if these all behave themselves.
| | 05:06 | They pretty much do, apart from this transition
here into the e. So I'm going to go in really
| | 05:11 | close and have a look. And I am actually glad
that happened so that you can see the kind
| | 05:15 | of tactics that we have at our
disposal to take care of it.
| | 05:18 | So let's look at each level by
itself. The mouth behaves,
| | 05:21 | so I think the culprit is one of
these two, so it would have to be.
| | 05:25 | First of all, we'll find out how many points
are on here, and what's happened is when we
| | 05:30 | created the e-mouth, artificially, the tweening
wasn't exact and we ended up generating these
| | 05:35 | additional points.
| | 05:37 | So what I'm going to do to correct that is
make my own. Use this as reference, but I'm
| | 05:41 | going to take to the d-mouth, hold down the
Alt or Option key, and drag it to here, and
| | 05:47 | I'm going to position it over.
| | 05:49 | Now this will have perfect geometry. See,
it's got 1, 2, 3, 4, 5, 6 points, whereas the
| | 05:54 | e-mouth, which we have created
by the computer, is a mess.
| | 05:58 | So let's grab this and Free
Transform, and again, just pull it in.
| | 06:06 | That's pretty close.
| | 06:07 | Now let's go in really tight.
| | 06:10 | Make sure Snap is on because we
need to nail these corners.
| | 06:15 | No room for error there.
| | 06:18 | And then the rest simply is
about pushing and nudging. Okay.
| | 06:23 | So once you've got it reasonably close,
click it and drag it and drop it down, and let's
| | 06:28 | see if it behaves, and it does.
| | 06:32 | And that's how you deal
with disobedient tweens.
| | 06:35 | So that should be pretty clean.
| | 06:38 | Let's check the one above.
And the upper lip was fine,
| | 06:41 | so we only had to do it once.
| | 06:44 | The lip needs a little bit of help.
Oh, and a little bit of weirdness.
| | 06:57 | I think I forgot to position the lower lip.
| | 07:00 | I always forgot that.
| | 07:02 | So let's curl that up so it matches the ooh.
| | 07:05 | Now I'm noticing some little weirdness
here where the mask is bleeding out.
| | 07:10 | So we can fix that by correcting the mask.
| | 07:13 | Let's hide the teeth. And I think the
simplest thing to do is pull the mask layer in.
| | 07:20 | It's also the inner mouth too, I think.
| | 07:22 | Yeah, it's the mouth layer.
| | 07:32 | So now we have our front-on happy mouth,
and from this we can extrapolate several other
| | 07:36 | kinds of mouth shapes--the sad mouth, and
the neutral mouth--and we'll do that in the next movie.
| | Collapse this transcript |
| Creating mad or sad mouth dialogue shapes| 00:00 | Now that we've done the happy mouth,
let's move on and do the angry sad mouth.
| | 00:04 | So let's click inside until we
get into the mouth symbol.
| | 00:07 | And what I want to do is add
more frames to the timeline,
| | 00:09 | so let's switch the Workspace layer to
something a little more user-friendly.
| | 00:12 | I'll go to Window > Workspace > rigging face,
and that's our horizontal layer. Or you can
| | 00:18 | manually move your shapes around if
you want, but that's quicker for me.
| | 00:22 | I'm now going to select that little reference
layer and get rid of that, to save some room.
| | 00:25 | We don't need that anymore.
| | 00:27 | So the next thing to do is to select all the
frames on the timeline, hold down Alt or Option
| | 00:31 | and drag so we copy them.
| | 00:33 | Now we have us an
identical duplicate over here.
| | 00:36 | Click on the happy emotions label,
and let's just rename that mad/sad.
| | 00:42 | These mouth shapes will actually
work for both of these states.
| | 00:45 | And then the next thing to do, I think we
should probably--it's good procedure to
| | 00:51 | clear keyframes for the b-mouth and the c-mouth
and for the e-mouth, and let's just work with
| | 00:57 | our three most important ones:
the a, the d, and the f.
| | 01:00 | And the next thing to do is
let's hide everything.
| | 01:02 | We're just going to work with the inner mouth
layer, un-padlock that; the mask layer, un-padlock
| | 01:08 | that and unhide it; and
lip upper and lip lower.
| | 01:12 | So let's go to the a-mouth first and just
select everything, and the padlock layers
| | 01:16 | won't be selected of course.
| | 01:18 | Let's hit Free Transform, and sometimes with
these very long thin selections it can be
| | 01:23 | very hard to find the controller,
| | 01:25 | so you might have to go in a little bit tighter.
Hold down the Shift key and rotate and you
| | 01:30 | see when Shift is held down, it moves
in 45-degree increments, and then release.
| | 01:35 | Do the same thing for the d-mouth, and the
same thing for the f-mouth. And let's have
| | 01:42 | a look at that.
| | 01:46 | I'm going to leave the happy mouth.
| | 01:47 | I'm not going to mess with that, because I want
to see for the moment that we can actually
| | 01:51 | blend back into the happy mouth
as well, which is nice. Great!
| | 01:55 | So the next thing to do, let's padlock them
because they are looking great, and let's
| | 02:00 | look at the teeth upper,
teeth lower, and the tongue.
| | 02:05 | You would almost certainly have to
play with, or adjust, the teeth.
| | 02:08 | So let's un-padlock all of these guys and
hide the mask, because it's only getting in
| | 02:13 | our way at the moment.
| | 02:14 | I'm going to move the lower teeth down a
little bit and just spread them out slightly.
| | 02:18 | Move the tongue so it sits
in there a little better.
| | 02:20 | I don't move the upper teeth too much,
because it's supposed to be fixed to the skull.
| | 02:24 | The lower jaw moves far more
than your upper teeth do.
| | 02:27 | So that looks good.
And I think I'll leave this alone.
| | 02:29 | I think the ooh mouth is pretty much the same for
the happy, so there is no need to move them.
| | 02:34 | So let's padlock them back up and
have a look then. Looking great!
| | 02:41 | So let's check the lower lip,
see if that has been altered.
| | 02:47 | And I think the happy ooh mouth is here, the
angry and sad is there, and I think maybe
| | 02:53 | let's just nudge the lower lip
a little bit more that way.
| | 02:56 | And we're great!
| | 02:59 | So the next thing to do is just make the e-mouth.
And rather, again, than using the halfway one,
| | 03:03 | which looks a little bit bland,
let's pick something a little closer to the f.
| | 03:06 | You could go really close like that.
| | 03:10 | And I think for this one I use
something closer to here.
| | 03:14 | Let's match there.
| | 03:14 | Whatever we did on the first section I like to
keep it fairly consistent with the second.
| | 03:20 | And the c-mouth, I usually
like something halfway out.
| | 03:23 | Let's move that to there. And the b-
mouth should be fairly close.
| | 03:29 | If you want something even finer, you can
temporarily go into here, hit F5, and it gives you a much
| | 03:35 | wider range of secondary mouth shapes to choose
from. So maybe you like something like this,
| | 03:43 | with a little slight gap between the teeth.
Pull that back and then just remove these
| | 03:51 | frames to get back to the right timing.
| | 03:55 | Now I'm seeing something weird
happen, as often does.
| | 03:58 | When you create these secondary keyframes,
Flash then has to take its best guess of course,
| | 04:04 | what that shape should be, sometimes
it adds points that aren't needed.
| | 04:07 | And if we go really close on the upper lip,
I'll show you exactly--let's see what happened.
| | 04:19 | Something else happened, too, when I inverted
those shapes: the upper lip became the lower
| | 04:23 | lip. And let me see this in Outline.
| | 04:25 | As you can see, I used the green outline for
the upper lip and the blue for the lower,
| | 04:30 | and then when we rotated them
180 degrees, things were worse.
| | 04:33 | So let's fix that first, because I like
things to be completely consistent.
| | 04:37 | So I'm going to make a temporary layer above
and then copy the lower layer back on top
| | 04:43 | and drop them back down again.
| | 04:46 | And now when we move through, as you
can see, green on top, blue on bottom.
| | 04:53 | You begin to see the virtue of having a
consistent outline policy with your colors.
| | 04:58 | Now, let's get back to fixing this
weird little glitch on the e-mouth.
| | 05:01 | And I caught that mistake
because of the outline consistency.
| | 05:06 | So again, we need to make a temporary layer
on top, and let's just make a little empty
| | 05:11 | placeholder for that.
| | 05:12 | I hit F7, go to the d-mouth. Or actually the
other thing we can do is simply draw it from
| | 05:17 | scratch; it might be easier.
| | 05:18 | Let's go to the Rectangle tool.
| | 05:20 | Let's draw a box, and let's
get rid of the outline.
| | 05:24 | As long as the box is black, it can be the
same color, and then just with Snap to Objects
| | 05:31 | on, drag your corners to there and there, and
hold down Alt or Option so that we create
| | 05:37 | new points on the lower area.
| | 05:39 | And I have switched Snap to Objects off because
I really want to have a much finer level of
| | 05:45 | control over this.
| | 05:47 | Let me switch the outline color to black,
so you can see it a little better.
| | 05:54 | It's very important to get the shape tween
to work right, that each of your frames has
| | 05:58 | the same number of points.
| | 06:00 | If Flash has to tween between a shape that
has six points and one that has seven, eight,
| | 06:07 | or nine, you really can't
expect it to be totally accurate.
| | 06:10 | So this is why sometimes you have
to do these occasional redraws.
| | 06:14 | And I think we--let's padlock the green, so
that we actually are selecting.
| | 06:18 | I am using the Subselection tool to
check that these points are fairly close.
| | 06:23 | Let's look at the layer beneath.
| | 06:26 | As you can see, on the green layer, the one
that Flash made automatically, there's far
| | 06:30 | too many points.
| | 06:30 | That's why the tween was
going berserk on us.
| | 06:34 | So I think let's just take the upper level,
the corrected one, and drop it down, and that
| | 06:42 | will replace the one beneath.
| | 06:43 | Right-click to create a shape tween.
| | 06:45 | Let's just pull that in a
little bit and see if that works.
| | 06:51 | And there we go!
That bizarre effect seems to be gone.
| | 06:56 | So I'm just going to unhide
everything, and there we go.
| | 07:03 | With this mouth, as you can see, with
these eyes looks more sad or concerned.
| | 07:07 | To pull the eyebrows down into a V
shape would create an angry mouth,
| | 07:13 | so it's one way for getting two for one.
| | 07:17 | And the last thing we need to do is I like
the mad or sad mouths to begin and end with
| | 07:22 | the angry or sad closed mouth.
| | 07:25 | So let's select the close mouth in the angry sad
state, hold down Alt or Option, and drag to here.
| | 07:31 | And then more housekeeping.
| | 07:32 | Let's just remove those tweens so that we've a
solid untweened buffer between each of these.
| | 07:37 | You could switch on
tweening here if you like.
| | 07:39 | I like to have this gap here;
it's easier for me to read.
| | 07:42 | So, there we go.
| | 07:44 | Now as you can see, notice this, that the
keyframes at the end of the happy mouth have a black
| | 07:50 | line between them, and these don't. And this
really, really puzzled me when I saw it.
| | 07:54 | This seems to be a recent behavior of Flash: when you
switch tweening off, it pulls the line away.
| | 08:02 | Now this can be worrying, and it was worrying to me
when I saw it, because this has a specific meaning.
| | 08:07 | Now I'm going to open up, in your exercise files
folder there's a project called 02_03_sync,
| | 08:12 | so let's open that.
| | 08:15 | I'll sync test.
| | 08:16 | Let me show you what this means,
if you're not familiar with it.
| | 08:19 | If you're familiar with it, then you probably
don't need to be watching this, but if you're
| | 08:22 | not, this is worth seeing.
| | 08:23 | I made a symbol with nine frames in it, from 1
through 9, numbered 1 through 9 graphically,
| | 08:29 | and with this syncing effect, when you select
motion tweening and you click on the area,
| | 08:36 | in the Properties panel you
can switch syncing on or off.
| | 08:39 | What syncing means is that all of the keyframes
following the sync don't have a line separating
| | 08:44 | the keys, and this means if you click on the
first key and tell it to Single Frame, all
| | 08:51 | of the ones that follow will obey that. And this
final one doesn't because it's not synced.
| | 08:55 | You see there's a black line separating it.
| | 08:57 | So when I saw this happen on the dialog,
I thought, oh no, there is no way to--
| | 09:01 | there is some way that syncing has been activated
and that's going to mess me up, because I like
| | 09:06 | to have the fine control.
| | 09:07 | I like to be able to set the
individual properties of all the keyframes.
| | 09:10 | And so what happens with this was, I obviously
tried to remove the tween, and it's something
| | 09:16 | that you often have to do.
| | 09:17 | You have to switch tweening off,
if you want to hold an object.
| | 09:21 | And in this case, I can still set this to, for
example, Single Frame and the frame that
| | 09:27 | follows, I can make it Play Once.
| | 09:28 | I can make it play from frame 3.
| | 09:30 | There is no follow on from that.
| | 09:31 | So essentially you will see this
happen. Don't be freaked out by it.
| | 09:35 | If you add another frame, it will be
automatically selected with its own controller, and it's
| | 09:39 | not going to mess you up.
| | 09:40 | It's just, visually, for those of us who are
familiar with older versions of Flash, it
| | 09:44 | might throw you for a little bit.
| | 09:45 | I don't see any reason to panic about it,
and I've included this exercise file if you
| | 09:49 | want to play with this for yourself and
see if there's any potential trouble.
| | 09:53 | I haven't been able to see
anything that's an issue with it.
| | 09:56 | So as I said, just proceed and be aware that
you're going to see this, but it's not going
| | 10:01 | to affect your workflow.
| | 10:02 | So with that done, I think we're ready to
move on to do the neutral mouth by look.
| | Collapse this transcript |
| Creating neutral mouth dialogue shapes| 00:00 | Let's do one more mouth shape, just to be really
thorough and this will be kind of a neutral shape.
| | 00:05 | It doesn't have any particular
emotional condition to it.
| | 00:09 | So, same process as before, to begin with.
| | 00:11 | Let's select the happy mouth, hold down the
Alt or Option key, and drag those frames to
| | 00:16 | the right of the timeline. And let's rename
the happy label to neutral. And I am going
| | 00:22 | to delete the b and the c mouths.
| | 00:25 | Let's right-click and clear those keyframes.
| | 00:28 | I am going to keep the d, the e, and the fs.
| | 00:31 | So first, let's just work with the inner
mouth, and let's go in a little close.
| | 00:36 | I will just padlock it off, grab the
the corner, and just pull it down.
| | 00:42 | We don't want him to look angry,
so this has to be carefully done.
| | 00:46 | I am going to temporarily move that
point up so the lines don't cross over.
| | 00:52 | Let's move that.
| | 00:54 | He is looking a little bit
like he might be upset.
| | 00:58 | We don't want that.
| | 00:59 | Again, pull these corners up just a little.
| | 01:01 | That's better, bland.
| | 01:03 | And again, I like to check to make sure
that we haven't accidentally merged. Ah!
| | 01:09 | There, we did.
| | 01:10 | So click on A or the Subselection tool, and
let's find the trouble spot. And I am going
| | 01:17 | to just remove that, go in really close.
| | 01:22 | This is the one thing I wish I didn't have to do.
It really gets tedious and that feels unnecessary.
| | 01:30 | I wish the program didn't--
and it has done it again.
| | 01:33 | It would be very nice if I just didn't do this,
but it does, so we just have to deal with it.
| | 01:38 | So okay, I think that--there we go!
| | 01:41 | And let's scrub forward a little bit,
and same thing for the open mouth.
| | 01:48 | Take those points and just pull them
down. And always test as you go.
| | 01:55 | Always do this, as you do each key, before
you go too deeply into it. I get into the
| | 01:59 | habit when I do this of going back and forward,
like one frame, two frame, to make sure I
| | 02:02 | haven't caused any strange
tweening glitches to appear.
| | 02:07 | Pull the corners down on
the e, same on the f.
| | 02:12 | I am not going to worry
about the end just yet.
| | 02:14 | Let's keep that the way it is. Okay.
| | 02:17 | Let's lock that, and now that this is working, don't
forget that the mask will be the same as that.
| | 02:23 | So the first thing we can do is select these
frames, hold down the Alt or Option key, and
| | 02:29 | drag them up to the mask layer.
| | 02:31 | And if you feel like you are getting lost--
sometimes I find it hard to read across all
| | 02:36 | these little dots--just move
these a little further over.
| | 02:39 | That makes life easier.
| | 02:40 | Okay, then let's be sure we're padlocked, and
let's go to the upper lip, go to outline, and
| | 02:47 | we simply repeat this. Making sure
that the Snap to Object is on,
| | 02:51 | we'll just drop that down.
| | 02:53 | Again, the same issue will hit us here.
| | 02:56 | The other thing that we could do is simply
copy the mask layer to the upper lip and
| | 03:00 | color it black, but I think this will be okay.
Padlock that, same with the lower lip, again,
| | 03:07 | working in outline, and let's move to the d.
| | 03:11 | And I find it helpful just to work on one
at a time, so hide the other if you think
| | 03:14 | it's becoming visually confusing, like that.
Then let's do the upper, and let's see if I
| | 03:22 | got too low. The danger is that these
lines at this point cross and get too thin.
| | 03:26 | So I am going to pull that out, pull
that in, and then move that back up.
| | 03:31 | So now as you have to do these little double
steps to work around balancing this other
| | 03:35 | line. And I just continue
through the rest of these.
| | 03:40 | I think we have to fix some of the blues.
| | 03:51 | Hide the green layer.
| | 03:59 | Okay, so now let's switch them back to black
so we can really see what's going on here.
| | 04:04 | And I am moving through it frame by frame.
| | 04:10 | You will see these little
areas through the course.
| | 04:12 | If I were doing this for a full production,
I would spend a lot of time going in and really
| | 04:17 | fine-tuning these lines.
| | 04:19 | So don't feel like because you see shapes
like these, these little bumps, believe me,
| | 04:23 | they can be ironed out.
| | 04:25 | It's just a question of putting in a
little bit of polishing on them.
| | 04:29 | But even so, if you look at this in real time,
it moves past so quickly that even those little
| | 04:34 | bumps that need them go right pass the eye.
| | 04:37 | Okay, so then I think we have pretty much
everything taken care of here, apart from the teeth.
| | 04:42 | Let's check them.
| | 04:44 | They're looking pretty good.
| | 04:49 | I will put the mask on.
| | 04:52 | I am happy with that.
| | 04:54 | So the next thing will be just to make the
secondary keyframes for the c mouth. And I
| | 04:58 | will pick the middle point between the a and
the d, hit F6 to make those keys, drag it
| | 05:02 | over. And I am going to pick something very
close to the closed mouth and hit F6 to make
| | 05:08 | those keys and drag that over.
| | 05:11 | And these are the ones that you have to watch
very carefully to make sure that no little
| | 05:14 | errors or additional points were created.
| | 05:17 | And we're good!
| | 05:19 | And now I am going to select the a mouth frames,
hold down Alt or Option, and drag them, so
| | 05:24 | we begin and end with the neutral mouth.
| | 05:26 | Then right-click and remove the tweens.
| | 05:28 | And again, we have the same issue with what
looks like a synced keyframe here and here.
| | 05:33 | As I said in the previous movie,
don't worry about that.
| | 05:35 | In older versions of Flash, this would have
really bothered me, but now, if I were to
| | 05:38 | make new keyframes here, they would
not be synced to that automatically,
| | 05:42 | so that's not really going to affect you.
| | 05:45 | So now we have three sets, and a quick
demonstration of how you would be able to utilize these
| | 05:51 | for a dialogue scene.
| | 05:52 | These should be fairly interchangeable.
| | 05:54 | So for example, let's select the c happy
mouth, Alt or Option and drag it over here.
| | 05:59 | And when I select and copy these, I always
select the label as well so I can see what
| | 06:03 | shape I am dealing with.
| | 06:04 | So I am just going to randomly select
different mouth shapes from the timeline, from each
| | 06:09 | of these three states.
| | 06:13 | And this is a great way to test as well; you
should drag as many of these as possible to see.
| | 06:17 | You may have some transitions that
simply are insoluble; it could happen.
| | 06:22 | But if your geometry has been fairly stable and
if it's been behaving for you up to this point,
| | 06:26 | then it really should be pretty good. As you can
see, here is our experimental line of dialogue.
| | 06:33 | And the beauty of this, so much better using
static shapes, this gives you so much power.
| | 06:39 | It's the closest thing that I think Flash will
ever come to blend shapes in 3D, and you're
| | 06:43 | only limited by the number of
proceeding mouth shapes that you've got.
| | 06:48 | And you can add customs as well;
we'll be doing that later.
| | 06:50 | But for now, these three clusters of three
different dialogue scenes, they will give
| | 06:55 | you a phenomenal amount of control, especially if
somebody does a long drawn-out, like, "woo-hoo!"
| | 07:01 | then you would simply pick that woo-hoo
| | 07:03 | into here, the f to there, and you could make
that for 400 frames long if you wanted to.
| | 07:08 | So you could even do things
by moving the teeth around.
| | 07:11 | The teeth don't have to be, for
example, in these positions.
| | 07:14 | If you had a Clint-Eastwood-style line of
dialogue, there is no reason why you couldn't
| | 07:19 | stretch these down and have the guy talk
through grinded teeth, like a cowboy or something.
| | 07:27 | So again, just to raise your ideas about what
this system is capable of, it's very flexible.
| | 07:33 | So with that, we're going to move
on and do some unique mouth shapes.
| | Collapse this transcript |
| Building unique mouth shapes| 00:00 | Now that we have three standard
sets of dialogue mouth shapes,
| | 00:04 | let's do something that's a little more
interesting and dramatic, because obviously you want to
| | 00:07 | have something that's not just conversational, like these,
although these were cover you for most purposes.
| | 00:14 | So I have created, in this project file 02_05,
three new unique mouth shapes that are really
| | 00:19 | wide open, kind of gritted teeth, like grr and
like a huh, like he is really, really dumb.
| | 00:26 | So let's see how we would
proceed about rigging these.
| | 00:29 | Now, I have set up some placeholders here.
| | 00:31 | We've got on frame 64, the basic starting
happy mouth on frame 1; on frame 70, the
| | 00:39 | jubilant mouth; on frame 76, the furious; and
on frame 82, the puzzled, and then we will
| | 00:47 | go back to the basic happy mouth.
| | 00:49 | So let's just select the a-mouth from the
happy set. And I will Option+Drag it to here,
| | 00:57 | and let's just copy it to all of these.
| | 01:02 | And the other thing, let's just set tweening
on for all of these as well: Create Shape
| | 01:07 | Tween, Create Classic Tween, and Create Shape
Tween. And the other thing that you will notice
| | 01:13 | is that the reference, we're going to
be drawing over this big black thing.
| | 01:16 | It's probably too dark, so let's
just lighten it up a little bit.
| | 01:18 | I am going to pick this gray here and copy
it again, just to make all of these mouth
| | 01:26 | shapes light gray, and then padlock that, and
then we'll be able to see what we're doing
| | 01:30 | over it, so it's nicely faded out.
| | 01:32 | So once again, I like to work, usually when I
am doing dialogue like this, is is to work
| | 01:35 | with the mouth inner, because it's
kind of the big outline form.
| | 01:39 | It's the first thing that
you're really going to see.
| | 01:41 | So let's magnify and zoom in,
get as close as we can.
| | 01:45 | For the purposes of this course and for most of
the work that I do, I like to use a geometry
| | 01:49 | shape with 6 points.
| | 01:50 | As you can see here, as I begin to pull it
apart, we have a pretty basic shape. Oops!
| | 01:55 | We lost one of them.
| | 01:56 | Let's come back.
| | 01:58 | And let's switch off Snap because it is
kind of getting in the way a little bit.
| | 02:02 | So you could create a new
hexagon and work from that.
| | 02:06 | I find it just as quick sometimes just
to work with the existing shape here.
| | 02:10 | And also, you can go back and
forward frame by frame as you work.
| | 02:13 | If you ever find you're having shape tweening
misbehaving, this is a great thing to do.
| | 02:18 | Move one point at a time, go
back or go forward, still good.
| | 02:22 | If you pull these midpoints,
nothing will happen of course.
| | 02:24 | The danger happens when
you pull the corners.
| | 02:27 | So we're still fine, and there we go!
| | 02:30 | So there are a couple of ways. You could perfect
each one vertically or you can just keep going
| | 02:35 | to the next shape and pull that
and do them one at a time.
| | 02:39 | I like to work vertically. I like to take on one
shape, working, and then move on to the next one.
| | 02:44 | So let's padlock that, and then I am going to
just move the timeline over so I can see
| | 02:49 | what level I am working on more easily.
| | 02:50 | So let's hold down this key.
| | 02:52 | Alt or Option and Drag to the mask level, to
copy that. And let us have a look
| | 02:58 | at the mouth inner and solid color, because
now we're going to move on to the lips.
| | 03:04 | I think the easiest way to do the lips is
simply to copy the mouth inner to each of
| | 03:10 | these, and let's just do
with the upper one now.
| | 03:14 | I am on the lip upper.
Let's make it black.
| | 03:16 | And all we have to do is pull
these shapes up to match.
| | 03:21 | By copying the mouth inner and duplicating it,
half of the work is done for us; we don't
| | 03:25 | have to worry about aligning to there.
| | 03:29 | And don't forget to test.
| | 03:30 | We move back. Ah! And we're seeing some strange
lines crossing over here.
| | 03:37 | So let's see if we can
fix that, and it's gone.
| | 03:42 | It is just simply a question of taking the
point and pulling it slightly to the right.
| | 03:45 | I won't lie to you, sometimes you have to
spend a bit of time doing this. Sometimes
| | 03:49 | I will just delete an entire layer and start
it over again or redraw a different point
| | 03:53 | or try a different geometry.
| | 03:56 | The reason why it's worth doing is once you
get it, it's really, really good to have.
| | 03:59 | And let's do the same thing
now for the bottom layer.
| | 04:02 | Let's hide the upper lip,
change the bottom layer to black.
| | 04:05 | Let's zoom out a little bit,
and let's pull this down.
| | 04:14 | And you'll see me toggling back
and forth in the timeline.
| | 04:17 | And the same thing is happening again.
| | 04:20 | That's really irritating.
| | 04:22 | So let's go in and see if we can fix that.
| | 04:26 | It's been moving this maybe
left or right, up or down.
| | 04:32 | It's not the end of the world.
| | 04:33 | I am dubious as to if it gets to a certain
point, if you would even notice it, once you're
| | 04:38 | playing this at 30 frames a second, but
obviously we like to get this as clean as possible.
| | 04:43 | So let's move that to here, so we
can really see what's going on.
| | 04:48 | I've also want to click on the
Subselection tool to see where our points are.
| | 04:52 | Maybe they're just not aligning quite right.
| | 04:53 | Let's move that up.
| | 04:56 | And let's zoom out a bit, see if that works.
| | 05:01 | That's much better.
| | 05:03 | So that's the process for dealing with those
little strange crossovers. Move that line
| | 05:08 | down, and we have that fixed.
| | 05:11 | That wasn't too bad.
| | 05:13 | And then the next step is the easy part, is to
just change the teeth to match the reference.
| | 05:20 | So let's switch off everything.
| | 05:21 | Now, sometimes I get lost with all the levels, so
I will switch everything off, except--okay,
| | 05:24 | I need the reference layer.
| | 05:26 | But I am on the teeth upper, let's go into
Outline, and maybe let's keep the mouth inner
| | 05:33 | level, so we can see exactly where we are with
the vectors, and then use the Free Transform
| | 05:37 | tool, the arrow keys to nudge the teeth.
Same thing with the bottom teeth. Let's switch them on,
| | 05:45 | put them into outline.
| | 05:46 | I am using Shift and the numeric
keys to move in big increments.
| | 05:53 | Switch on the tongue layer.
Let's bring that down, great!
| | 05:57 | And padlock them. Now we have a really nice
transition into a really exuberant, jubilant yell.
| | 06:08 | And then the last thing
to do is the lip layer.
| | 06:10 | Let's pick that on.
| | 06:11 | You see by clicking on at the bounding box
you can see roughly where it is, so let's
| | 06:14 | drag that down. Subselection
tool. And that works great!
| | 06:22 | So that's the first one.
| | 06:24 | As you can see, it didn't take too long.
| | 06:25 | The only annoyance plus fixing
the lips for that little glitch.
| | 06:28 | Let's go on and do the furious mouth
and see if it will be as painless.
| | 06:32 | So we'll try the mouth inner. And again,
make sure we are on the right layer.
| | 06:38 | Let's see it in full color. It looks good!
| | 06:43 | There is no little weirdness around the corners
of the mouth. Everything is solid. And let's
| | 06:48 | quickly check the--we've
lost one of our points.
| | 06:50 | It happens sometimes.
| | 06:51 | It's not the end of the world for something
like this, but I'd like to get it back, just
| | 06:55 | to be picky. Let's put Snap back on.
| | 06:59 | See, there it works now.
| | 07:05 | So I can pull this point and the edge is still
there. Same here, same there, same there.
| | 07:12 | So, we still have our original
level of control over this.
| | 07:15 | Let's padlock that.
| | 07:16 | Don't forget to copy that to
the mask, which is identical.
| | 07:19 | We'll also copy that to the lip lower and the lip
upper, and let's color these both black.
| | 07:25 | Okay, hide everything again. Let's look at the
mouth inner level and just the lip upper,
| | 07:34 | and now just start to pull
the corners up a little.
| | 07:42 | Hmm, it looks like something happened.
I didn't test this,
| | 07:46 | but something was happening when we moved from
the jubilant mouth into the furious mouth;
| | 07:51 | it's not quite tweening right.
| | 07:53 | So this is a point where we could consider, I
think, adding a hint. But again, if we do
| | 07:57 | decide to add hints to these, then they have
to be added to any future transitions, and
| | 08:02 | I'd rather not do that.
| | 08:03 | So let's see if we can go
back and tweak this somehow.
| | 08:07 | I'll click at the reference layer.
| | 08:10 | It might be necessary to play with the shape of this
mouth, and maybe pull the corner up slightly.
| | 08:22 | The corner here is at this point, and
Flash is doing. Ah! There we see.
| | 08:26 | There's one point too many.
| | 08:28 | That's why it's getting out of control.
| | 08:29 | Again, I am glad this happened, because you
will face this if you do decide to use this
| | 08:34 | method in your work; there's no escaping it.
| | 08:37 | These little glitches happen,
and here's how you cure them.
| | 08:40 | Let's hit Subselection again, and
now we're back to 6 points. Phew!
| | 08:45 | So let's click on that. Alt or Option,
don't forget we need to repeat the process.
| | 08:53 | Copy it to all the levels that
we will be building this on.
| | 08:57 | So we've copied the mouth inner
level that tweens property now.
| | 08:59 | Let's back to the mask and
lip lower and lip upper.
| | 09:02 | So I am going to go to the lip upper, make
it black; lip lower, make it black. Okay.
| | 09:11 | Now, with the mouth inner on and lip
upper on, we can get back to fixing this.
| | 09:15 | Let's pull these points up.
| | 09:19 | We will switch off Snap to Objects
if you want to go really fine.
| | 09:24 | That's beautiful. Padlock that,
hide it, and add the lower lip.
| | 09:31 | Now we're getting across over here, and this
is something that you could spend some time
| | 09:36 | nudging with, trying to
purge that artifact from it.
| | 09:40 | But I have to be honest, some of these go by
your eyes so quickly and you're going to
| | 09:44 | be looking at them at about, something like
this size, unless it's like a super, super
| | 09:50 | close-up, let's play this at 30
FPS and see if you can see it.
| | 09:53 | It is so fast, not even teeth on there.
| | 09:57 | You can barely notice it.
| | 09:58 | So for this purpose I am going to a slide.
| | 10:01 | I mean, I don't know to what extent you think
that it will be worth your while spending
| | 10:05 | half an hour trying to get that
little crossover to go away.
| | 10:10 | But it certainly is possible. It's just a
question of playing with these shapes and
| | 10:14 | making little compromises, perhaps with the design.
You can see that that actually made it worse.
| | 10:19 | So basically, the point of the process here is
to make a change, go forward a frame, back
| | 10:24 | a frame, make another change. Don't make
20 changes and then go back or forward.
| | 10:28 | But that's more or less covering the shape
of the mouth, and it's moving by pretty quick,
| | 10:32 | so let's just leave it for now, and I
am going to drop in the teeth.
| | 10:35 | Let's hide everything now except the reference
layer, the mouth inner in outline mode, and
| | 10:41 | drop in the teeth, put
them in outline as well.
| | 10:44 | I said at the beginning of this course that
working in Flash is a bit like making a Frankenstein
| | 10:51 | monster, and this is exactly
the kind of thing I meant.
| | 10:54 | You're constantly dealing with slightly glitchy
behavior, and it's a balancing act to try to
| | 10:59 | get the best value out of the program that
you can in a reasonable amount of time.
| | 11:03 | So the last little correction to
make here will be on the lower lip.
| | 11:09 | Let's see if that works.
| | 11:13 | Let's hide the Reference.
| | 11:14 | And actually, I will pull
the lip up a little bit.
| | 11:22 | So now we have a neutral mouth that moves
into jubilant, into an angry position. Notice
| | 11:27 | you can see that little lip, the area here,
| | 11:30 | it's kind of hard to see. And I will leave you
to do the puzzle, appropriately enough, as an exercise,
| | 11:37 | and that's this shape here.
| | 11:38 | I hope you can manage that
without too much brain bending.
| | 11:42 | But again, I stress, be patient.
| | 11:44 | You will find you'll probably have to make
a couple of passes at this. Don't give up.
| | 11:48 | If you do it once and it
doesn't quick work, stick at it.
| | 11:50 | I tried this first many years ago
and I gave up on my first attempt.
| | 11:54 | I just got discouraged.
| | 11:55 | And by the time I got back into it,
three years later, I realized, oh!
| | 11:59 | If only I had stayed with it for another couple
of hours or a day or two, I really would have
| | 12:02 | gotten so much more
value out of the program.
| | 12:05 | So don't be afraid to experiment and to try
different approaches to get the effect that
| | 12:08 | you're looking for.
| | Collapse this transcript |
|
|
3. Facial ActingCreating jubilant expressions| 00:00 | Moving on from the previous chapter where we
did a lot of work on the mouth, and where
| | 00:03 | we created all these dialog actions and custom
mouth shapes, now it's time to turn to face
| | 00:08 | and to see how we can adjust the face to match
those mouths so that they all work together
| | 00:13 | in synchronicity. So I've done a little a
bit of housecleaning in the library just to
| | 00:18 | clean things up, because as the project grows,
you have to, obviously, keep on top of your
| | 00:22 | symbols and how they're named and so forth.
So what I have done, I took the mouth symbol,
| | 00:27 | which is previously called mouth, and renamed
with space mt A. The reason why I put a space
| | 00:31 | in at the beginning is so that all of these
symbols go on top of the folders where I store
| | 00:35 | all the reference images and all the
secondary symbols. And I put the head symbols at the
| | 00:41 | top, as well as the mouth symbols, because I
regard the mouth symbols as almost as important
| | 00:46 | as the head, and I don't want them getting
lost inside the hd Folder. If I was doing
| | 00:50 | a body, I would call it bd, and I'd put the
body bits in there. So here are the other
| | 00:55 | symbols for the different parts of the head,
the nose, teeth, et cetera, and the mouth.
| | 01:02 | I call it mt A because A of course is the
front view, the portrait view. And I've taken
| | 01:07 | the hd 1 turnaround symbol. I duplicated it, so
we right-clicked and duplicated, and created
| | 01:14 | the hd 2 Facial acting scene, and this is
the scene in which the symbol in which we
| | 01:20 | will create all of the facial work. So lets
double-click on that. And what I've done is
| | 01:25 | I went inside the mouth symbol, took the
emotions label level, copied those frames, and then
| | 01:33 | pasted those frames inside the hd 2 Facial
acting scene. And if you scrub along, you'll
| | 01:41 | see that here we have labels that will help us
time and synchronized the mouth with these.
| | 01:48 | So that's pretty much where we are. On top of
that, if you scroll down to the bottom--let's
| | 01:51 | collapse the head folder for a second and
hide that. And at the very bottom level, I've
| | 01:57 | put some reference images, and what we have--let
me zoom out, so you can see all of these pretty
| | 02:03 | much in full. We have the jubilant face, the
furious face. As you can see, I've pushed
| | 02:12 | the expression on the eyebrows so you can
see a good strong contrast from one to the
| | 02:16 | other. So okay, let's open up the head folder
. And as you can see, too, we kind of having
| | 02:23 | to scroll up and down at lot, and I really
don't like doing that, so let's adjust our
| | 02:26 | workspace back to the, I think the Vertical
will work much better than this. And I am
| | 02:32 | going to move it forward just a little bit
and try to squeeze these so that we get as
| | 02:37 | much real estate as we can. And we're going
to be working almost entirely within--well,
| | 02:45 | entirely within this area here. You can see
beneath the head as I scrub through, the reference
| | 02:51 | images are flickering through. So let's click on
the mouth and get that mouth in the Properties
| | 02:57 | panel to play once. And you can see that the
timing matches one to one. You'll see it more
| | 03:05 | clearly if I hide all the layers except the
mouth, and if we see the reference beneath.
| | 03:16 | Okay, so the next step is to set up keyframes
on the head level, so select these and hit
| | 03:28 | F6. And pretty much not everything, but most
of these layers are going to be animating,
| | 03:33 | in particular the eyebrows, the nose, and
let's look at the face by itself again, or
| | 03:38 | the reference I mean. So the jaw certainly
will be moving; the mouth will be moving,
| | 03:42 | or motion tweening; the nose would be moving;
but maybe lot of these won't, so let's just
| | 03:46 | go through one at a time. We need the jaw.
Let's make that, I believe he is a Shape Tween,
| | 03:55 | the mouth, the Motion Tween, Classic Tween
that is. You will see the eyeball will Shape
| | 04:03 | Tween. The pupil will Motion Tween. The eyelid
will Classic Tween. When I say Motion Tween
| | 04:11 | I mean Classic Motion Tween, which comes up
as Create Classic Tween. The brow will Shape
| | 04:17 | Tween, and whether or not it Shapes or Motions,
if its a symbol, it will Motion Tween. If
| | 04:22 | it's a shape, it will Shape Tween. And you
can tell by something click on it. If you
| | 04:25 | can see a blue outline, it's a Motion Tween.
And I think the nose as well, the nose will
| | 04:31 | also, so let's set that up. Okay, so once
again, lets switch things off and let's work
| | 04:38 | with just the things that we need to work
with. So the first thing, well the big one,
| | 04:42 | I guess, the jaw. And you might find out
that the outline color is a little washed out.
| | 04:46 | So let's change it. You're not stuck with
what I've got here. Let's use a slightly darker
| | 04:51 | one, and we will try to get the jaw as close
as we can to that shape, so I am going to
| | 04:57 | use the Free Transform tool rather than just
pushing and pulling points from it from the
| | 05:02 | get-go. There is also a Distortion tool. Let's
see if it will allow us to use that. So I'm
| | 05:08 | clicking Distort in the toolbar. As you can
see, I'm changing the actual shape, not just
| | 05:18 | scaling or skewing. And again, go back. And I'm
seeing some artifacts here, so it's possible
| | 05:25 | that some rogue points have been added. I
believe they have. There, and let's compare
| | 05:33 | it to the first one. We should only have
five points and somewhere along the line we've
| | 05:39 | been given extra ones. So let's get rid of
them. Let's hide the reference layer for now
| | 05:45 | and let's put to snap it back on. Usually
you can get rid of this by doing this. So
| | 05:55 | I'm going to use Selection tool again. It's
also possible to delete these by doing this,
| | 06:00 | but the problem I found with doing that is
sometimes it can cause issues. I am going
| | 06:04 | to try it now and see if it works. We are
still having a problem here. So what I will
| | 06:09 | do to get this to work is copy that and paste
it into an empty keyframe directly above the
| | 06:16 | original. And I am going to do what I kind of
tried to avoid during the first time around,
| | 06:20 | and I'm just simply going to directly pull
the points. Sometimes one method will work;
| | 06:27 | sometimes another method will work, so in
this case I'm going to give up on one and
| | 06:31 | try another. So let's take that keyframe and
drag it down, right-click, and reselect Shape
| | 06:38 | Tween, and let's see if this works, and this
one does. Again, this is like using any approach
| | 06:44 | that will work. There isn't going to be one
that works for you all the time, but there's
| | 06:49 | a sufficient number of different methods and
workarounds that I think you can probably
| | 06:53 | do many, many things you can think could be
impossible. So let's select the reference
| | 06:58 | layer back on and look at the mouth. And the
beauty of the mouth, because it's nested as
| | 07:03 | a symbol, you could really push this. You
could you rotate it and move it into all kinds
| | 07:08 | of wonderful positions. But right now we'll
keep it where it is. And we have the--let's
| | 07:13 | see. Let's do the brows; they're kind of fun.
So I will activate the left brow and the right
| | 07:18 | brow. Let's grab them and move them close
to where they want to be. And again, let's
| | 07:33 | pull the points without kind of crossing over
the lines and messing everything up. Let's
| | 07:37 | switch the Snap to Objects off for finer control
here. And again, once you make a few changes,
| | 07:43 | be sure to do a test. Well, this is where I
like to activate the tweens before I begin
| | 07:47 | to work, because I can actually test the
health of the tweening process as I'm working. If
| | 07:55 | you were ever a traditional animator, this
is more like flipping paper than computer
| | 08:00 | animation. Okay, that's, the eyebrows are
nice. Let's do--anytime, too, I tie something
| | 08:08 | down that like, I padlock it, and it's a nice
way of seeing your progress as well: done,
| | 08:12 | done and done. The next thing will be I think
the nose. Let's look at an outline and compare.
| | 08:21 | Maybe we can push it up just a little bit,
padlock that, and I think the lower lip down
| | 08:26 | here. Well, that's inside the mouth symbol; I
don't need to worry about that. So the next
| | 08:30 | thing would be the eyes. And we have three
layers that constitute the right eye for example.
| | 08:36 | Now for this, I like to just switch off the
pupil. And it's very important, I can't stress
| | 08:41 | enough, that you move the invisible eyelid
which contains the eye blink and the ball
| | 08:47 | together. Don't let them drift apart,
because they are designed to work as a pair. If I
| | 08:51 | double-click it to go inside the eye blink,
we have this guy. Let's go back out again.
| | 08:57 | We got lost here, easy to do. Let's go back
into the library, double-click on the facial
| | 09:02 | acting symbol. So like I was saying--and let's
just look forward to the point that we were
| | 09:10 | at--we want these two to go together. So if
you have padlocked everything around them,
| | 09:14 | you can just simply select them with a
vertical click, and you know that all you have got
| | 09:19 | to worry about now are those two. So when
you adjust these, when you play with these,
| | 09:23 | then any operation that you perform on it
has to happen equally to both; otherwise,
| | 09:27 | the eye blinks will slide out and you will
see areas of white above and below the eyelid
| | 09:32 | level. And you really, really don't want to
have that happen. So by doing it like this,
| | 09:39 | the eye blink is distorted to match
perfectly with the eyeball area. And the pupil is a
| | 09:46 | separate thing. Don't operate on that because
you want to keep that nice and round; just
| | 09:50 | move it by itself. Once done, lock them. Now
repeat the identical process for the right.
| | 09:59 | Again I also like to do this in outline. And
if you draw a bounding box to select them,
| | 10:04 | just be sure that everything else is padlocked.
If you have another layer that's not padlocked,
| | 10:08 | you can often accidentally select the background
skin color. And probably safest way to select
| | 10:13 | these will be just by a little vertical line
on the timeline. And here, just be sure that
| | 10:19 | you're matching the other eye. It doesn't
have to be identical of course--faces are
| | 10:23 | not property symmetrical--but you would like
the blink to at least at the start height.
| | 10:29 | That's not too bad. We've got the pupil, and
just drag the pupil by itself into place,
| | 10:40 | and now let's look at the whole thing in full
color. We can probably switch off the padlocks.
| | 10:47 | And there we have a nice little wow expression
. The eye blinks are then built-in so if you
| | 10:52 | want to see what they're going to look like,
just double-click on them. If you feel that
| | 11:00 | with all the skewing that the blink has become a
little too, two sloped to this direction--that
| | 11:05 | looks a little bit unnatural--then obviously
we can duplicate this and change it to pull
| | 11:10 | it down. We won't do that at the moment, but
an eye blink symbol can be duplicated and
| | 11:14 | modified as needed. And because you have one
for the left eye and one for the right eye,
| | 11:18 | later on, as we do turns and three-quarter
views, it will be very easy to manipulate
| | 11:22 | each one separately. Okay, so that's the first
expression taken care of, and with that, let's
| | 11:31 | just move out again. Make sure that he jaw is
working, everything is working. With that,
| | 11:36 | we can proceed to the next one, and I'll show
you how we can test the tweening to make sure
| | 11:42 | that we can remain consistent between more
than one transition from the happy mouth to
| | 11:46 | the jubilant mouth.
| | Collapse this transcript |
| Creating furious expressions| 00:00 | So, we've begun the process of
bringing the face to life.
| | 00:05 | Let's go through this just a few
frames at a time to see where we are.
| | 00:07 | So you've got the mouth tweening into the
wide-open happy expression, and the eyebrows
| | 00:12 | are moving accordingly.
| | 00:14 | And the next thing we want to do is to take
the mouth, which is currently moving, and we
| | 00:18 | have the face moving into a more furious--
| | 00:20 | I want this to be angry, not concerned.
| | 00:22 | And if you look at our reference image on
the bottom layer, now you can see that the
| | 00:26 | eyebrows are coming down into a
really like mean expression.
| | 00:30 | So let's see if we can do that, because right
now the face is in the default happy position
| | 00:35 | or pose. It doesn't really match;
it doesn't go well with the mouth.
| | 00:38 | So again, let's zoom in.
And switch everything off.
| | 00:42 | Let's just work with the eyebrows for the
moment. And they're not too far away from where I
| | 00:46 | want them to be,
| | 00:47 | but we are going to really
see if we can twist them.
| | 00:54 | And again, go through frame by frame when you
are doing something really big like this,
| | 00:56 | to make sure that nothing breaks.
| | 00:58 | And as I go back and forward and toggling, you can
see that the shape tweening is holding up.
| | 01:05 | The second the shape tweening starts to spin
or do anything weird, then stop and go back
| | 01:09 | and head undo and try something else.
| | 01:15 | That's pretty much as I wanted.
| | 01:18 | Shape tweening is great fun when it
behaves itself, when it works like this.
| | 01:23 | If it doesn't, if it spins, usually it's because
one of your points has moved too forward to
| | 01:28 | the left or the right.
| | 01:30 | Let's go into outline, and we are
working on the green one now.
| | 01:40 | And next will be the nose. It helps to
do that in outline as well. Oops!
| | 01:45 | Back to the furious face. I am
going to scrunch this one up.
| | 01:50 | And let's also scrunch up
the volume a little bit.
| | 01:52 | Now, if you're going to do this, like move
the nose up a little, then don't forget
| | 01:56 | to widen it also. And now
we will do the eyes.
| | 02:02 | So, padlock all the layers that we're happy
with, and the layers that we are going to be
| | 02:06 | moving now are the right eye, the
right eyelid, and the right eyeball.
| | 02:12 | And remember from the previous movie, that
you need to move these together so that the
| | 02:16 | eye blink always matches the area
covered by the eyeball. There we go!
| | 02:23 | Padlock those, and now do
the pupil by itself.
| | 02:25 | It's pretty close to where we want it. Same
process for the left eye, and always easiest
| | 02:34 | in Outline mode.
| | 02:35 | Now, to see exactly where it's going to be,
let's put the left eyebrow into outline as
| | 02:40 | well. And I am going to select. And again,
don't forget, it helps if this point here is
| | 02:50 | on the same line or
latitude as the other one.
| | 02:55 | Okay, that's good. Padlock those.
And I think the eye is very close.
| | 03:09 | Okay, now I am just going to show everything,
and let's hide the reference layer, and see
| | 03:18 | what this looks like.
| | 03:20 | So now you have an idea of how we go from our
starting pose, which is happy, to our wide-
| | 03:27 | up jubilant, to angry.
| | 03:30 | And let's just test by unhiding the reference
layer, and let's hide the head layer, and
| | 03:37 | now we can toggle, oh!
I forgot the jaw.
| | 03:39 | I thought there was something.
| | 03:41 | So, let's just look at the jaw layer. And I am
going to pull these points, scrunch it up.
| | 03:47 | And I am pulling these lines in so I can target
the exact point that I want for the edge. Oops!
| | 03:59 | Something broke there, so you see
it's going a little bit spinny.
| | 04:02 | So I am going to hit undo a few times.
| | 04:06 | You see, it happened around here.
| | 04:11 | That's still okay.
| | 04:14 | So what I am going to do now, I am going to
change one thing very slowly at a time, and
| | 04:18 | that will be fine.
| | 04:22 | It's still working. That's good!
| | 04:25 | So I think instead of moving that
point any further, let's do that.
| | 04:29 | That's exactly how you deal with a spin
without having to deal with a shape hint, which
| | 04:33 | we do try to avoid.
| | 04:35 | We will apply shape hints in the later chapter,
but for most of these morphed mouth shapes
| | 04:40 | and morphed faces, or tweened rather, it's
really important to try to avoid shape hints,
| | 04:45 | just for simplicity.
| | 04:46 | I like to be able to freely copy between
one of these expressions into another.
| | 04:50 | So, with that done,
| | 04:53 | let's hide the reference
layer, unhide the rest.
| | 04:57 | There are other things you could do.
| | 05:02 | I mean you can always, for example,
bring the hair down a little bit.
| | 05:12 | If you wanted to try to look like it's maybe
sweaty, and it's tracking his forehead down
| | 05:17 | a little, maybe pull in the volume a little.
Lots of things that you can do to try to add
| | 05:26 | as much life as possible.
| | 05:27 | So, there we have it!
| | 05:28 | I am going to leave the puzzle
face for you as an exercise.
| | 05:32 | So essentially, what you would be trying to do
is to match this expression from this face.
| | 05:38 | So, in Outline mode, as you can see, maybe be
trying to move the eyebrow into this up
| | 05:42 | position, and the other eyebrow into that
position, and stretching the right eye, the
| | 05:47 | green eye, into this wide-open point that's
up here. And it's a fairly straightforward
| | 05:52 | exercise I think. I don't think you'll have too
many problems with it.
| | 05:55 | So, in the next section, we will move on and
add some creases and extra layers to this
| | 06:02 | that will really finish it off.
| | Collapse this transcript |
| Fine-tuning expressions| 00:00 | Now that we have the face acting and the
mouth articulated, let's go and see if we can add
| | 00:06 | some extra details that really polish it off.
| | 00:08 | So if we double-click on the facial acting
symbol so we are in the right place, being
| | 00:13 | careful to never go into
the turnaround by mistake,
| | 00:17 | we have the three extra expressions--jubilant,
furious, and puzzled--working into and out
| | 00:22 | of our basic happy.
| | 00:23 | So lets take a look at the reference images
for a moment. And as you can see, there are crease
| | 00:29 | lines at the edge of the
mouse and underneath the eyes.
| | 00:32 | These really will help to give us the
feeling of like a fleshy mass rather than just a bunch
| | 00:37 | of vector lines moving around the place.
| | 00:39 | Okay, so let's go back and
have a look at the color again.
| | 00:43 | So what we need to do is to add these lines,
and if we are going to add lines, I like to
| | 00:47 | know where additions are.
| | 00:49 | For example, these additions are
going to be in the turnaround symbol.
| | 00:53 | This symbol simply doesn't need them.
| | 00:55 | They are only going to exist, for the most
part, in the Facial acting symbol or comp.
| | 00:59 | So let's go in there and see how we should add these
in such a way that we know there they've extra.
| | 01:04 | They are unique.
| | 01:05 | So I think the best place to put them would
be maybe 4 layers beneath the hair top level.
| | 01:11 | And in order to identify them as additional
layers, let's give them uppercase names, and
| | 01:16 | I reserve upper case as a flag, basically, as
a little red light letting me know this is
| | 01:21 | something that I have
added for a special purpose.
| | 01:24 | So the top layer is called MOUTH R; beneath that,
MOUTH L; beneath that, CHEEK R; and beneath that, CHEEK L.
| | 01:38 | And let's color the outlines medium green,
medium blue, dark green, and dark blue, and
| | 01:57 | let's put in some F7 for blank keyframes.
| | 02:01 | Great. So lets start drawing.
| | 02:03 | Quickest way to do this is going to outline
mode, padlock everything except the layer
| | 02:07 | we want to work on, and go to the jubilant.
| | 02:11 | Zoom in, and let's just draw with the Line tool.
And let's put Snap on, Snap to Objects.
| | 02:23 | I think we can color this, the probably
gray area can be okay. It wasn't closed.
| | 02:31 | Let's close the edge and fill, and I'll double-click
on that line to get rid of it, and there we go.
| | 02:40 | I'll do the same thing on the other
side, and that we'll be the MOUTH L.
| | 02:46 | I have got a pink color, paint
that in, and we can get rid of those lines.
| | 02:56 | And we'll do the same thing now for the CHEEK R.
| | 03:01 | This will be a slightly different in that it has
to have two separate areas. The first will
| | 03:04 | be the dark line, and that will define
the actual line that you see here.
| | 03:10 | But we also need to hide the
white of the eye, this area here.
| | 03:16 | So let's expand that to this point.
| | 03:20 | That should do it. And let's color that in,
again, with the dark here and fleshy color
| | 03:30 | which I want to put in here to hide the eye.
| | 03:33 | Let's unpadlock everything and
we'll sample that with the eyedropper.
| | 03:37 | There is our skin color and
then we will paint it in there.
| | 03:40 | And now we've that area masked out--well, not
masked out, but covered up. And now I want
| | 03:51 | to duplicate this to cover this side, so
that's just Alt, Option, and drag, Shift with the
| | 03:57 | Arrow keys, Modify > Transform >
Flip Horizontal. There we go.
| | 04:05 | Let's zoom out. Now, as you can see, they pop
in, and we need to go a little more naturalistic
| | 04:15 | than that. Actually, now that I look at it, I think these
creases will be better served if they were a little
| | 04:21 | closer to the edge of the mouth.
| | 04:24 | Okay, so let's copy these, Alt, Option, drag,
go in tight, and we can click. Actually, let's
| | 04:35 | padlock everything again except these four layers and
just drag the crease to where you want it to be.
| | 04:45 | Now let's activate shape tweening
so we can test this as we go.
| | 04:51 | And already you're seeing a flicker right there,
which is just good.
| | 04:55 | I am glad you are, because you see the one on
the left, the right eye, his physical right
| | 04:58 | eye, is working fine even without moving. The
one on the left is actually misbehaving even
| | 05:03 | though it's not moving or
changing or doing anything differently.
| | 05:06 | This is the mystery of shape tweening, so I'll
show you how in each case we can handle this.
| | 05:12 | So first things first.
| | 05:14 | We don't need these creases to be visible on
the standard beginning, so let's hide them.
| | 05:19 | And how we'll do that is we will
simply paint them with skin color.
| | 05:24 | And now they'll fade in, so that's now
it taken care off. Let's hide them.
| | 05:30 | Now let's go in very close to this eye and
on the beginning, this is the CHEEK R level,
| | 05:36 | let's pull it down a little and in. And let's
do this in outline so we can really having
| | 05:41 | much closer look at what's happening. And what
I want to do is to have this completely away
| | 05:46 | from the eye so it's not visible
at all in the standard position.
| | 05:52 | We'll take care of the color in a moment.
We'll do the same thing on the blue eye.
| | 05:58 | Okay, let's see. And suddenly,
it seems to be behaving again.
| | 06:06 | I have no idea why and then I
don't think anybody will.
| | 06:10 | Some things work in shape tweening; some things
don't, and a lot of times you are simply playing
| | 06:13 | with different combinations.
| | 06:15 | I wish it was more stable than this,
but these are just the vagaries of the thing.
| | 06:20 | Right, so now the question
is, how do we hide this?
| | 06:24 | If I color it with the skin color, then that
will turn this into one big shape and the shape
| | 06:29 | tweening will become unstable.
| | 06:30 | So we need to keep this as a
completely separate area.
| | 06:33 | So the best way, I think, to do this is to make
it that color that's extremely close to this
| | 06:39 | color but just slightly
different by the tiniest of amounts.
| | 06:42 | So be sure we have this color activated, hit
Escape so it's deselect, and then let's go
| | 06:48 | into the fill and select this
widget here so we can play with it.
| | 06:54 | And on this side, just move it down slightly
enough, just to change these numbers by 1 or
| | 06:59 | 2. Click OK and now we fill that area.
| | 07:03 | They look the same, but they are not.
| | 07:06 | You can see we have two
completely different colors there.
| | 07:09 | They are not completely different,
but the human eye will never detect that.
| | 07:12 | We'll do the same thing on the other side,
and now everything fades in. And let's unhide
| | 07:20 | the creases here.
| | 07:23 | This is the trickiest part of the whole
procedure are the fade-ins and the fade-outs.
| | 07:28 | I say tricky; it's still pretty minor.
| | 07:30 | It's so worth to see these appear and then
disappear into the relaxed state. So that's that.
| | 07:36 | Now the one thing I want to draw your attention to is
the glitch that we saw earlier on the left cheek.
| | 07:42 | If that persists and you simply can't deal
with it, then the other solution is to split
| | 07:48 | both of these areas onto their own layer.
| | 07:51 | I tried to keep them on the one layer
for simplicity's sake, but at some point if
| | 07:55 | I hit the wall where it simply won't do what
I want it to do, then that's the solution,
| | 08:00 | to separate the light from the dark.
| | 08:02 | So with that, we will proceed and do one more
of these. And I think if we take these, Alt,
| | 08:11 | Option, from the very first
frame. Actually, no, it's not.
| | 08:14 | I'll take the second and drag them to here.
And let's padlock everything again, just to
| | 08:20 | be on the safe side, because it's so easy to
accidentally modify or select something else.
| | 08:27 | And let's create a shape tween so we
can scrub through, and there is that clear
| | 08:35 | glitch again. And let's get Snap off so
I can have a finer control over this.
| | 08:46 | With these ones, I find it's very easy for
this guy to spin around 360 degrees if you move
| | 08:51 | the corners too much.
| | 08:52 | So there is a kind of a limitation as to how
aggressive you can be with moving the edges of the mouth.
| | 08:59 | You'll find your own
limitations with that. The CHEEK R now.
| | 09:05 | I need to have look at what the reference
was. Yeah, the reference on this, the crease, was
| | 09:10 | going down this way.
So let's do that.
| | 09:16 | Super. And on the other side, the crease is
moving a little over that way. And here we
| | 09:26 | see the little wonkiness.
| | 09:27 | So what I am going to do, so you can see the
process, I am just going to split this myself.
| | 09:31 | So right now it's CHEEK Left, so let's make a new
layer, put it below. CHEEK L skin we'll call it.
| | 09:43 | Let's bring this out a little bit. And the
quickest way to do this is simply to select
| | 09:49 | all of the upper layer and just duplicate it, Alt,
Option and drag. And to be thorough about this,
| | 09:55 | let's just look at this
layer completely by itself.
| | 09:58 | In Outline, I want to get rid of the upper
layer completely, so that we're just leaving
| | 10:05 | yourselves with the skin tone. And on the
layer above that, we will do the opposite,
| | 10:12 | so that we're just left with the line.
And now if you look at it in outline, perfect.
| | 10:25 | So sometimes that's just a
sacrifice that generates one extra layer.
| | 10:29 | I like to keep the layer as few as possible,
for obvious reasons. We're already filling
| | 10:32 | half the screen, most of the screen here,
but sometimes it's just not worth the time
| | 10:36 | to mess with it any more than that. And you
can see already from this transition to this
| | 10:41 | one, it looks really great.
| | 10:44 | You really feel like he has
cheeks and muscle mass there.
| | 10:48 | So the other thing I'd do, be sure
that we end on the same thing too.
| | 10:51 | So let's just copy the beginning to the end,
| | 10:54 | this one as well, and
switch off Shape Tweening here.
| | 11:01 | And I'll leave it to you as an exercise to
add your own creases wherever you think you
| | 11:05 | can get away with, and I think you will find
there might be issues with some of the creases
| | 11:09 | around the mouth if you push them too hard.
| | 11:12 | Do it; push too hard. Find out how far
you can get with this before it spins.
| | 11:16 | You'll see pretty quickly
what the constraints are.
| | 11:19 | It's good to know what the programs breaking
point is so that you know not to exceed it
| | 11:23 | when you begin laying out these
kinds effects with characters.
| | 11:26 | So with that done, I think we're ready to proceed
to the next chapter, in which we will articulate
| | 11:31 | and pivot the head to give it even
more flexibility and natural quality.
| | Collapse this transcript |
|
|
4. Rotating the HeadClock rotation demonstration| 00:00 | In this chapter, I'll demonstrate a
technique for really loosening up the head
| | 00:05 | of the character, because the last
thing you really want is to have them in the
| | 00:08 | same static direction over and over again.
| | 00:10 | So you'll find yourself tilting their
head up, tilting it down, moving it left,
| | 00:14 | a little bit right, and making it very tedious.
| | 00:18 | So why not put all the tedium and all
the strain in one place, and then you'll
| | 00:23 | be able to get it over with.
| | 00:25 | So what we're going to do is to
create a comp or a symbol that contains all
| | 00:29 | of the angles and directions you'll
need in one place, and then you'd be
| | 00:34 | able to play with it.
| | 00:35 | Now to demonstrate that, I use what
I call the clock system, and that is
| | 00:39 | starting from the A pose which is
looking directly out at the viewer, we have
| | 00:42 | the head tilted up into the 12 o'clock
position over to the 1 o'clock, 2, 3, and
| | 00:48 | so forth, all the way through.
| | 00:50 | Let's take a look what that looks like.
| | 00:51 | Now when you look at this,
you're looking at it in place.
| | 00:55 | You can see, okay, it's not 3D, and
this is of course a tutorial, so this has
| | 01:00 | not been pushed anywhere near as far
as it could be pushed, and how realistic
| | 01:05 | and how nuanced this is really boils
down to how many hours you want to put
| | 01:09 | into doing it, and how much animation you
think you're going to need from a given character.
| | 01:13 | To give you an idea about how I would
implement this in a single scene, here
| | 01:17 | is a simple head turn.
| | 01:19 | This was done simply by pulling in one
of these, one of these, and so forth, and
| | 01:26 | then simply dragging and dropping
those frames over to here, as is needed from
| | 01:30 | point to point, correcting an
occasional shape hint which I flagged here with
| | 01:34 | these little red flags.
| | 01:36 | And the end result is a head turn. This
head turn took me about two minutes to do.
| | 01:41 | Now had you asked me to do a head
turn of a character from scratch, I
| | 01:45 | guarantee you it would take the fastest Flash
animator substantially longer than 2 minutes,
| | 01:50 | and the beauty of this system is that
all of these angles more or less will work
| | 01:55 | with any of the others.
| | 01:57 | Now there are issues, as you can see,
red flags indicate shape hints. There is
| | 02:01 | no way around it with
something as aggressive as this,
| | 02:04 | but again, this is a very, very
small sacrifice to pay for this level of
| | 02:08 | fluidity, and of course, this
animation don't forget is nested.
| | 02:11 | So in an external clip you can move the
head even more on top of this to get a
| | 02:15 | really, really lifelike animated
performance from the character.
| | 02:19 | So that's what we're going to be
dealing with in the subsequent movies.
| | Collapse this transcript |
| Creating the twelve-o'clock pose| 00:00 | Before we go any further, let's set up
our interface so that we have the most
| | 00:04 | possible real estate available, because
obviously the timeline is getting pretty
| | 00:08 | big now and we need to have as much of
the timeline visible as possible for this
| | 00:12 | to be doable; quick walk-through as well.
| | 00:13 | I've set up this project so that the
clock reference is all in place for
| | 00:18 | this head turnaround.
| | 00:19 | I'll show you that too.
| | 00:20 | Right now as you can see,
we're really cramped here.
| | 00:22 | Let's set this up a little
better, I'm going to rip this.
| | 00:25 | Let's grab the top of this
gray area here, pop that back.
| | 00:28 | I'm going to grab the Library and
Motion Presets and just dock them into there.
| | 00:33 | And this little arrow on the top right,
we'll collapse that, and I think I
| | 00:38 | would like the Timeline to be vertical,
and let's stretch it out, so that we
| | 00:46 | see the entire Timeline.
| | 00:48 | You may have a bigger monitor than me
or a higher resolution, in which case you
| | 00:52 | will have a little more legroom.
| | 00:54 | Okay, so there we go!
| | 00:56 | Now if you want to access the
Properties panel, you can do so by clicking here,
| | 01:00 | and the same with the Library panel,
| | 01:03 | but it's nice just to get them out of the way,
we won't need them that much. So let's do this.
| | 01:09 | So I think this is looking pretty good.
| | 01:11 | So let's save this. I like this setup.
| | 01:14 | Go Workspace > New Workspace, and
let's call this rigging_face_pivotclock.
| | 01:22 | Let's do that, as long as
we know what it is, okay.
| | 01:26 | So as you can see, I've created a
series of labels and they are separated I
| | 01:30 | think about yes, one, two, three frames apart.
| | 01:32 | And the nice thing about this is it
gives you an in-between frame that's exactly
| | 01:36 | halfway between the two
keys and one on either side.
| | 01:39 | So it splits up nicely into halves and quarters.
| | 01:42 | So this is the process;
| | 01:43 | 12, 1, 2, 3, so forth.
| | 01:46 | Beginning under the A head which
is identical to the hd 1 turnaround.
| | 01:51 | This is all happening inside a new
symbol called hd 3 clock with a space at
| | 01:56 | the beginning as well.
| | 01:57 | So what you want to do if you don't
have access to the exercise files is take
| | 02:01 | the hd 1 turnaround, duplicate that
symbol to create hd 3 clock, and then you
| | 02:09 | would be able to construct
it to look just like this.
| | 02:11 | Again, with a three in-between
frame gap between all the key poses.
| | 02:16 | Okay, and the very rough reference
artwork, you don't really need too high a
| | 02:23 | resolution for this.
| | 02:24 | The clock image--I'm going to
zoom in on that for the moment,
| | 02:28 | is basically based on the position of
the nose roughly. It doesn't have to be
| | 02:35 | exact, it's a rough guide, and it shows
you the direction that we will be moving
| | 02:40 | the nose into, roughly
around the 12, 1, 2, and so forth.
| | 02:43 | That's the range of motion that we want.
| | 02:45 | And what I did was I created very
rough sketches, let me play through.
| | 02:52 | You'll notice that there's two of them
are pretty clean, and that's this one,
| | 02:57 | the 3 o'clock, which is
identical to one of our turnaround poses.
| | 03:01 | So essentially, what we're going to do
is, as part of our rotation around in a
| | 03:07 | complete circle, we're going to
hit the three-quarters position.
| | 03:10 | This will function for both.
| | 03:11 | So it's a bit of a freebie.
| | 03:13 | I'm going to hit it
again on the other side here.
| | 03:16 | And so, if we spin around slowly,
| | 03:19 | we go up to 12, 1 o'clock, 2 o'clock, 3
o'clock, 4, 5, 6, 7, 8, 9 o'clock which
| | 03:29 | will be the H position of our
turnaround; 9, 10, 11, and 12.
| | 03:33 | That's it!
| | 03:34 | Notice how rough these are.
| | 03:35 | I really did not need to have
anything more than a very crude outline.
| | 03:38 | You don't need to be a
master draftsman to do this.
| | 03:41 | And I put a layer of white on top here,
so that the reference image is the clock,
| | 03:46 | and the sketches for the
face are faded out a little bit.
| | 03:50 | Now that done, let's take
this from the beginning.
| | 03:53 | So we have the A pose at the beginning
which we're going to work into at the end.
| | 03:59 | So let's put a keyframe in, F6
at the end, just pretty easy.
| | 04:05 | I'm going to create the 12 o'clock
position here, right under the 12 o'clock label.
| | 04:13 | And once again we have the issue of
where to begin, and what's the easiest
| | 04:16 | place to start with this.
| | 04:18 | I think--let's find that the components
are probably aren't going to move first,
| | 04:22 | and the skull clearly is
pretty much in place. That's locked in.
| | 04:27 | The neck might not move very much at all.
| | 04:30 | So let's padlock as we go.
| | 04:33 | Now let's find something that does move.
| | 04:35 | Although the nose bear in mind will be
on different levels for later scenes, so
| | 04:39 | we don't have to worry about these.
| | 04:40 | And anything that's got an empty level,
we don't have to worry about them either.
| | 04:45 | And as you can see, as we go up it
becomes a little clearer as to just exactly what
| | 04:49 | levels we have to focus on.
| | 04:51 | So at the top we have the nose.
| | 04:53 | Let's move that up, Shift and the arrow keys.
| | 04:58 | Let's padlock that, put it to Outline,
and we can take the eyes for example
| | 05:05 | of one side.
| | 05:07 | Let's put them into Outline as well,
otherwise they are quite hard to see.
| | 05:10 | I'm going to select those
layers and move them all up together.
| | 05:13 | You'll see the difference between how
crude my sketches are. They really are
| | 05:17 | meant to be the very almost basic of guides.
| | 05:21 | I wouldn't expect anybody to be able
to draw anything more than a very rough
| | 05:25 | outline sketch for this.
| | 05:29 | We'll select the left eye.
| | 05:31 | Let's put them into Outline as well.
| | 05:33 | Bring them up to match.
| | 05:35 | You can be quite rough on this on your first
pass, don't feel like it has to be perfect.
| | 05:39 | You'll probably have to do this a few
times before you can really visualize it.
| | 05:43 | The mouth is done, let's outline that, and
let's padlock all of these as well as we go;
| | 05:47 | the jaw, and let's see him in Outline as well.
| | 05:52 | I think if the character is looking up
from here to here, then that jaw should
| | 05:58 | be moving up as well.
| | 06:00 | So I'm going to hit the Free Transform tool,
rather than messing with the individual points.
| | 06:06 | I think we would--might
break something if we did that.
| | 06:09 | The other thing I would like to do to
really sell the idea that we are looking
| | 06:14 | up at the the jaw is widening it up a
little bit at the base so that we do get a
| | 06:20 | sense that the direction is
changing, and let's padlock that.
| | 06:25 | The right side of the hair will be
tilted down just a little bit, and the
| | 06:33 | left side, same thing. Padlock that.
| | 06:43 | The ear, the right, and the left, I
think these would move down a little bit
| | 06:46 | relative to the head, and that will
sell the idea of the head tilting back.
| | 06:52 | You'll notice too that suggests that the
hair should probably also be moving down a
| | 06:57 | little bit at this point.
| | 06:58 | So let's unlock that.
| | 07:04 | Now I think we can lock them again.
| | 07:08 | The hair top, there is nothing on there, so
that we only have the hair, upper layer left here.
| | 07:14 | Put that in the outline.
| | 07:16 | I think if we go to Free Transform tool we
can probably scrunch that up a little bit.
| | 07:24 | That maybe too subtle, but we'll find
out when we activate the tweens.
| | 07:28 | Now we can switch off the reference,
and unpadlock because I want to see. If when
| | 07:36 | we click on each of these layers, we
have the choice of either making it a
| | 07:38 | Motion Tween or a Shape Tween.
| | 07:40 | By clicking on this, if you see a blue
box around your artwork, then you know
| | 07:43 | it's a symbol, and that
needs to be Classic Motion Tween.
| | 07:48 | Let's make them all color, it's nicer.
| | 07:51 | Now the hair top, that will be a Shape
Tween because it's dotted, and so forth.
| | 07:56 | So I'm just going to go through,
and assign the right one for each.
| | 08:01 | If it's not a shape, the
Shape Tween will be shaded out.
| | 08:03 | So it makes a bit easier
to select the right one.
| | 08:06 | So now we have a pre-created,
a nice little head tilt.
| | 08:10 | There is a little bit of
a problem here at the ear.
| | 08:17 | I'm going to go in and see what that is.
| | 08:18 | Go into Outline. I think it's just
a layering issue with the hair.
| | 08:24 | So I'm going to pull that to here, maybe
that will fix it, and something similar
| | 08:32 | here, and a slight little gap
there on the hair, bring it down.
| | 08:38 | Excellent! I'm very happy with that.
| | 08:43 | So that will be our first of the 12
positions, and let's duplicate it.
| | 08:46 | We're going to go around
the clock and back into it.
| | 08:49 | So let's make a keyframe here, and
then just simply apply the correct tweens
| | 08:54 | on the reverse side.
| | 08:55 | Okay, so in the next section,
we'll proceed to do the 6 o'clock.
| | Collapse this transcript |
| Creating the six-o'clock pose| 00:00 | Now that we've done the up
position, let's do the down position.
| | 00:03 | It's the most logical next one because
obviously it's very scary when you see,
| | 00:06 | there is a lot of numbers there.
| | 00:08 | So let's copy the start pose and work
from that, and Alt+Option+Drag that to the
| | 00:16 | 6 o'clock position, and I
will zoom in a little tighter.
| | 00:21 | And just be sure if you've gotten lost,
don't forget your Library panel
| | 00:25 | and Properties panel are here,
and we are in the hd 3 clock symbol.
| | 00:31 | So let's switch off this for the
moment and then look at our reference.
| | 00:34 | This is what we are trying to achieve.
| | 00:36 | So let's go to Outline mode.
| | 00:39 | What we will do is hide everything,
go through this piece by piece, and just
| | 00:43 | simply be procedural and find the layers that
don't need any work and we'll just padlock them.
| | 00:49 | Okay, and let's start at the--I think as
in the previous one, the skull doesn't move.
| | 00:55 | So let's reveal the skull, so we can see
relative to that what we are doing, and
| | 00:59 | lock that, and the nose will
be the first thing to work on.
| | 01:02 | So let's just move the nose down to
match the reference roughly and lock it.
| | 01:07 | And then the next thing, I am just
going to reveal all of the eye layers, and
| | 01:13 | select all of them, just drag
them down, pretty good, lock that.
| | 01:20 | Next, the mouth, lock that.
| | 01:25 | I will leave the jaw for the moment.
| | 01:29 | Actually, no let's do the jaw next.
| | 01:31 | The jaws are a little bit tricky
because we are moving from different
| | 01:34 | transitions from the straightforward
straight out position, we are looking
| | 01:37 | directly at them to looking up, and then
we see kind of the thick jaw effect here.
| | 01:43 | If he is looking down, his chin is
moving a little bit away from him, so we do
| | 01:47 | want to taper it in so
we get a nicer transition.
| | 01:49 | So I am going to use the Free Transform
tool and just pull it in a little bit,
| | 01:54 | not by much because he still has a huge jaw.
| | 01:56 | So let's grab that and where
is that point? Right there.
| | 01:59 | So I'll pull that in just a little bit.
| | 02:02 | And you see how I pull a line in and then
undo just to find out where the anchor
| | 02:06 | is. Same here. There we
are, just by a few pixels.
| | 02:12 | Pull in too many, and this chin will
look very off-model and very strange.
| | 02:16 | So now if we go from and color from this
to this, to that, they all look pretty human.
| | 02:25 | Great! So back to Outline mode so we can see
precisely where we are. Let's lock that
| | 02:30 | jaw now and let's try the hair.
| | 02:33 | Now on this one his head
is tilting down towards us.
| | 02:37 | You really have to imagine exactly
what this character or shape is doing in
| | 02:41 | imaginary space, and in that case, we are
going to see more of his hair, not less of it.
| | 02:47 | So let's pull the fringe down a bit,
and again, it comes down to what you think
| | 02:51 | we can get away with.
| | 02:52 | So if you think you can pull this a
bit further to get the strongest possible
| | 02:54 | transition, then let's do that, and
then we try to match, let's lock that, then
| | 03:00 | we move to the right side.
| | 03:01 | And I like these points to match, so
Snap to Objects on, pull the fringe down,
| | 03:09 | and switch it off now.
| | 03:15 | So that's good!
| | 03:16 | Snap that, and now we will do the ears.
| | 03:21 | Now remember when we went from the
front on view to the head tilting back the
| | 03:25 | ears move down relative to the nose. As
the front of the head moves forward and
| | 03:29 | up, the ears do the opposite, and they move
lower down relative to the front of the face.
| | 03:34 | The opposite would happen now.
| | 03:35 | So as the head moves down, the nose
moves down, the ears should move up.
| | 03:43 | Shift and arrow-click to move
them up by a good size unit.
| | 03:46 | So now, when we move from here, to here, to
here, we've got all around good transitions.
| | 03:53 | So I'll padlock those and I think we have
the neck left. I think the neck probably
| | 03:57 | doesn't do anything.
| | 03:59 | Let's keep that static.
| | 04:01 | That leaves the hair for the top of the head,
and I am going to pull that down a little further.
| | 04:09 | Let's give that some decent amount of
room to travel, skew just a little bit.
| | 04:15 | Let's zoom out, and now let's have a look.
| | 04:17 | We will switch off the
reference level, and we'll put color on.
| | 04:21 | And now, as you go from keyframe to
keyframe, to keyframe, to the end, we have
| | 04:29 | to check to make sure we are not losing volume.
| | 04:31 | That will be my major fear for the jaw
that if we are tapering that chin too
| | 04:35 | much, it might look a little weird.
| | 04:37 | I think we are going to get away with it.
| | 04:39 | Let's just pull it out just slightly.
| | 04:45 | I'd still like to see the tip of
the chin move in just a little bit.
| | 04:53 | Let me just up the view.
| | 04:55 | That's very touch and go,
but I think that will work.
| | 05:01 | Now the next frames that we will work on
will be the 3 o'clock and the 9 o'clock.
| | 05:05 | For now, don't activate anymore
motion tweens or shape tweens.
| | 05:08 | It's best if we just block in the main
four sections of the compass which is of
| | 05:14 | course 12 o'clock, 6, 3, and 9.
| | 05:16 | So in the next movie, we'll do 3 o'clock.
| | Collapse this transcript |
| Creating the three-o'clock pose| 00:00 | So now it's onto one of the most
important of the clock positions, and that's
| | 00:04 | the 3 o'clock, or basically it's just the
normal three-quarter speaking position,
| | 00:07 | which you will use a lot of.
| | 00:10 | You'll probably use the 3 o'clock
position or the B position from the turnaround
| | 00:14 | much more than any of the others,
so let's get working on that.
| | 00:17 | And the best way to start will be to
take our regular A pose and Alt+Option+drag
| | 00:23 | it to the 3 o'clock position.
| | 00:26 | It's not that difficult from the A pose
into the B. That's why I like to start
| | 00:30 | rigging from the A pose;
| | 00:32 | all of our start positions begin
here and basically work from here.
| | 00:37 | If you were to begin in the B pose,
it would be much harder to work back
| | 00:40 | into the A pose, I find.
| | 00:42 | So let's switch off everything for a
moment and have a look at where we're going.
| | 00:48 | So this is where we want to be.
| | 00:51 | We'll just basically unhide and padlock
every layer, again, that needs no work;
| | 00:56 | all the empty ones, and let's go to
the skull, put it into Outline and start
| | 01:04 | using Free Transform to tease the
skull into the space that we need it to be.
| | 01:10 | I think you need a bit more head
up there, so let's move that up.
| | 01:14 | We don't want to see hair,
okay, let's move that.
| | 01:22 | And next, I think that this time the
jaw will be a good one to do, because it's
| | 01:27 | going to have to line up
very carefully with that.
| | 01:30 | So we'll select the tool, Snap
to Objects, and drag that to here.
| | 01:36 | And notice now that because we're
beginning to rotate the shape, the jaw line
| | 01:41 | which at the moment connects to the
ear here, we'll now have to do so here.
| | 01:46 | We're dealing with a three-dimensional
mass even though the actual artwork
| | 01:49 | itself is flat and two-dimensional.
| | 01:52 | So I use the Free Transform tool to
skew that into there and let's realign
| | 01:56 | the jaw with the head.
| | 02:00 | And then let's see if we can
coax the rest of this into place.
| | 02:05 | You'll notice this time I'm not
worrying about tweening quite so much, because
| | 02:11 | for this section I think it's
inevitable that we have to use Shape Hints, so I
| | 02:15 | expect any errors in shape tweening to
be dealt with through Shape Hints, so
| | 02:20 | we'll just deal with them
as they come along later on.
| | 02:24 | So let's Padlock anything that we're happy with.
| | 02:29 | I think the right ear would be good to
look at now, and I suspect here's our
| | 02:36 | first layer issue, because in the A
pose the ear is beneath the jaw; it's
| | 02:43 | beneath everything pretty much,
whereas here it's clearly on top.
| | 02:48 | It's on top of the neck,
it's on top of that hair;
| | 02:51 | it's on top of the skull, for example.
| | 02:54 | So this is a point where
we have to change layers.
| | 03:02 | So as you can see, I've already
constructed an upper level for the ear, so I'm
| | 03:06 | going to copy that, actually I'll Alt+Option+drag,
and from this point on there will be no
| | 03:16 | reason to have the ear on that level.
| | 03:18 | In fact, it will probably need to be moved
off earlier, but for now we'll just do that.
| | 03:23 | And this is the one part of this
process that you might find confusing, but you
| | 03:27 | will get used to it pretty quickly.
| | 03:29 | It's just unavoidable that there's
going to be points in the head turn where an
| | 03:33 | object like an ear or part of
the hair will simply change levels.
| | 03:37 | It comes with the territory of doing
any kind of dynamic animation in Flash.
| | 03:41 | And the other thing to watch out for
is that the ear is getting bigger as
| | 03:45 | it moves towards us.
| | 03:46 | So let's use Free Transform and scale it.
| | 03:49 | But this is the point to do it. Do it
right here, because that way when we do
| | 03:53 | apply in betweens later on, the
scaling will be taken care of by the computer
| | 03:57 | for the most part, rather than
us having to eyeball each time.
| | 04:00 | And notice also that the left ear by
this point is gone. It's invisible. It's
| | 04:08 | behind the head, so I think we could
probably dispense with the left ear. We'll
| | 04:16 | worry about the precise drop-off
point later, and I think let's padlock
| | 04:22 | everything that we have worked on.
| | 04:23 | And next will be the nose.
That was easy. Padlock that.
| | 04:32 | I'm just going to outline everything
that's done as well, and I can see that
| | 04:40 | flagged something for me here.
| | 04:41 | There were two ears of course on
the upper level and the lower level.
| | 04:45 | So what I'm going to do is get rid of
the lower ear. I don't think we need that
| | 04:50 | either. Let's just get rid of that.
| | 04:54 | Don't expect the first pass to be
the absolute first pass of perfection.
| | 04:58 | It's not going to be.
| | 04:59 | This is a dynamic process where
you are thinking almost out loud.
| | 05:03 | Even though I've already done this
course myself a couple of times in the
| | 05:06 | course of making this, every time you do it,
you still have to think everything through.
| | 05:10 | Is this going to be on top?
| | 05:11 | Is this going to be on the bottom?
| | 05:13 | If you're used to working with
layers like in Photoshop, this will be
| | 05:15 | more familiar to you.
| | 05:16 | If you haven't worked in layers
before, if you've only worked in 3D, for
| | 05:19 | example, you might find
this a little bit of a jolt.
| | 05:22 | My only advice is to stick with it and
you'll get used to it, your brain will adapt.
| | 05:26 | I won't lie and say you'll ever be
comfortable with it, but it is the nature of
| | 05:31 | the program, and even with a simple
animation, this is going to occur.
| | 05:36 | So I've just moved to hair top layer over,
that was a simple transition, and now
| | 05:40 | we have the eyes, and again,
let's just move them in bulk.
| | 05:46 | We'll fine-tune them later.
| | 05:47 | I'm just going to drop them down.
| | 05:50 | Obviously they should be slightly in
perspective, but I just want to get them in place first.
| | 05:55 | I'll do the mouth.
| | 05:58 | Same there, that should
also be tilted a little bit.
| | 06:00 | And hair left, this will be interesting.
| | 06:06 | Now as you can see, as the head
turns, the hair really drastically changes shape.
| | 06:12 | So let's go into Outline
so we can really see this.
| | 06:15 | I'm just going to pull it to match that,
| | 06:24 | and let's see if we can nudge that
hairline over a little bit too, so that it
| | 06:32 | follows the imaginary
centerline down the forehead.
| | 06:34 | I think that will be a
crisper way of doing this.
| | 06:40 | Okay, lock that, and then
we'll do the left side,
| | 06:42 | and the left side is also doing one
of these terrifying changes of layer.
| | 06:48 | So that's just the first time--we'll just worry about getting
the shape and we'll worry about the layers later.
| | 06:54 | Let's put Snap to Objects on.
| | 07:00 | Now it's off, because once we get
these two points connected, we're good.
| | 07:03 | I think something like that will be very usable.
| | 07:11 | And you might even be able to keep it
on this layer up to this point here.
| | 07:14 | I like to keep the layers on until the
last possible moment and then change them.
| | 07:20 | Let's go in really close and get this
totally nailed, and you'll notice too I put
| | 07:25 | Snap on, and now it's off again.
| | 07:27 | I like to keep these points
precisely connected as we can get away with.
| | 07:34 | That's that, and there, and the neck.
| | 07:39 | The neck needs a little bit of
adjustment on this one, so let's pull that down,
| | 07:47 | pull this in, just matching
that very nice reference image.
| | 07:52 | Okay, so let's color it
and see what it looks like. Getting there.
| | 08:00 | So there's our sketch.
| | 08:01 | There is the color.
| | 08:04 | It's looking really close.
| | 08:06 | Like I said earlier, let's fine-tune the eyes.
| | 08:08 | The eyes are so important.
| | 08:10 | So padlock everything except the eyes,
and let's put everything in Outline, and
| | 08:16 | you can see where the blue eye is
drifting a little bit, so let's fix that.
| | 08:21 | So again, I'm going to padlock all
of these except the ball and the lid.
| | 08:25 | Always remember that the eyeball
and the eyelid should travel together. Done.
| | 08:32 | And now we'll do the pupil, move that.
| | 08:35 | And at this point, the pupil
itself can begin to skew a little bit.
| | 08:40 | It's going slightly in perspective.
| | 08:41 | Okay, padlock that.
| | 08:44 | Now we'll do the same thing to the right
eye. The right eye doesn't need so much
| | 08:46 | of this treatment because it's closer to us,
| | 08:48 | so let's select the eyeball and the
eyelid, and the pupil definitely needs to be
| | 08:55 | moved over a little.
| | 08:56 | And we're talking about very subtle--you
don't really need to do anything too
| | 09:02 | major here, but that's pretty good.
| | 09:04 | And then the big one of course
is the left or the blue brow.
| | 09:11 | I think we might just
make a slight tweak to that.
| | 09:16 | Okay, and the mouth as well might need
a little bit, because it's starting to
| | 09:23 | rotate away from us.
| | 09:24 | And if you hold down the Alt+Option key,
you can drag from one end, that also helps.
| | 09:28 | And you might be even slightly rotate or
scale--I don't like to rotate too
| | 09:32 | much because sometimes
that can create jaggy motion
| | 09:35 | when you tween, but skewing
is I think a little bit safer.
| | 09:40 | Okay, so now when we toggle between
this and the reference, we are good.
| | 09:49 | And the beauty of this is that it's
very easy to tween the A and the 3 or the
| | 09:55 | B. It will be smooth.
| | 09:57 | Well, we're not doing that just yet,
because we're still in the process of
| | 10:01 | creating the entire clock system, but
now we'll go on and make the exact mirror
| | 10:05 | image of the 3 o'clock, which is the 9 o'clock.
| | 10:08 | Because it's an exact mirror image,
there's a couple of different little tricks
| | 10:12 | that we can use to get
that really done precisely.
| | 10:14 | So we'll do that in the next movie.
| | Collapse this transcript |
| Creating the nine-o'clock pose| 00:00 | In the previous movie, we created the 3
o'clock position, or another way of describing it
| | 00:05 | is the three-quarter view;
looking to the right of the monitor.
| | 00:07 | This time we are going to do the 9 o'clock,
or the head turning to look at the left side,
| | 00:12 | and we want this to be really as close as
we can to have a mirror image of the other.
| | 00:16 | So there's obviously a simple approach we
can take to doing this pretty accurately.
| | 00:20 | So I am just going to make a new layer, put a
blank keyframe here, and select the entire
| | 00:27 | stack of images for the head in the 3 o'clock
position, Ctrl+C, and then in the single frame
| | 00:35 | of the 9 o'clock in the blank keyframe, Ctrl+Shift+V. Let's
switch to outline so you can really see what's going on here.
| | 00:44 | Then Modify > Transform > Flip Horizontal,
and let's hide the head layer for the moment.
| | 00:50 | And as you can see, now we can position this
to match precisely our reference artwork,
| | 00:57 | and that just happens to
be in the right place.
| | 00:59 | If it wasn't, if you did it differently and
it came out differently, you just reposition
| | 01:02 | it to match that, and there you go! So what
we're not going to do is to flip anything
| | 01:06 | horizontally, this is purely for reference.
| | 01:09 | So let's padlock that so we don't mess
with it any further than we have to.
| | 01:12 | I am just going to drag it down into the
Reference folder to get it out of the way, and now we
| | 01:17 | can begin to one by one go
thorough our layers and to line them up.
| | 01:21 | Let's work from our end state or our start
state, so let's get the final frame, hold
| | 01:27 | Alt+Option and drag to our 9 o'clock position, and
then we'll find that a much faster way to do this.
| | 01:38 | So there is the nose.
| | 01:40 | As we do each one, we get them finished.
| | 01:42 | Let's just switch them to
outline and padlock them.
| | 01:46 | Now the ear left, this is his physical left
here, not the screen left or screen right,
| | 01:50 | but his physical left ear.
| | 01:53 | That's now going to be on the top.
| | 01:54 | So whatever artwork we have for the left ear,
that's here, that should go from whatever
| | 01:58 | layer it's on, and I am going to Ctrl+C, Ctrl+X,
and I am going to bump that up to here and
| | 02:05 | then paste it there.
| | 02:06 | I can just go Ctrl+V and then drag it, and
let's use the Selection tool, Snap to Objects,
| | 02:14 | drag it into place.
| | 02:17 | And now I am going to use the Free Transform tool,
and you can feel it, it's very satisfying
| | 02:21 | when you feel that's really snapping up the
right size, there we go! Let's go to outline
| | 02:26 | for those two layers and padlock them.
| | 02:30 | And the next layer will be the top of the
hair, so let's flip this horizontally. My
| | 02:38 | injunction against flipping horizontally does not
apply to shapes. It's strictly applying to symbols.
| | 02:45 | The eyes are next.
| | 02:47 | So let's go and type for this.
| | 02:51 | A big stack. The hidden layers and locked layers
won't move, so we can go a little bit more
| | 02:57 | aggressive with them.
| | 02:59 | And this time let's go in and get these from the
beginning, because we have the reference image beneath.
| | 03:04 | So I am going to just select the eyebrow for the
right eye, and Snap to Objects, click, same here.
| | 03:25 | So the next thing we want to do is to be very
careful, so I am going to padlock everything.
| | 03:27 | I just want to move the right lid and the
right ball, and let's hit Free Transform or
| | 03:36 | Q on the keyboard; the eye
right lid, and the eye right ball.
| | 03:44 | There is the little symbol for the right eyelid,
and here's the symbol for the ball or the
| | 03:51 | artwork for it rather.
| | 03:53 | And if I select these, now I am seeing the little
cross, and let's use the arrow keys to cut that.
| | 04:01 | It doesn't have to be 100% accurate, but
that's as close as we need to worry about.
| | 04:05 | Now I am going to move the pupil.
| | 04:07 | Let's change in the layers that are padlocked,
and if I hold down the Alt+Option key, I can
| | 04:14 | again drag from one side,
and get this pretty close.
| | 04:22 | And on the left eye or the blue eye, the pupil
needs to be brought in a little bit to here.
| | 04:29 | I am going to hold down the Alt+Option key
just to pull from one direction, and I am
| | 04:35 | not sure if--but yeah, I think we
should probably just be a bit picky.
| | 04:40 | Okay, let's move that,
Free Transform, Alt+Option.
| | 04:49 | There we go! You see how close we are working.
| | 04:54 | Any slight drifts like this are
not really going to matter at all.
| | 04:58 | Okay, so it's done. Let's padlock these, the
mouth, and I am going to skew that slightly,
| | 05:10 | Alt+Option, Free Transform, and skew again.
Great! This time, let's do the skull first,
| | 05:20 | that was the order that I worked on on the other
side, and make sure Snap to Object is on, then off
| | 05:32 | once you get the point connected.
| | 05:38 | Okay, that will do for now
and don't forget, padlock it.
| | 05:43 | Next, the jaw. So we'll take that to outline
as well, Snap to Objects are on, so we can
| | 05:50 | get that point here really precise, and actually I
think we need to move the edge over this way.
| | 05:59 | Back to Selection tool, Snap to Objects on
again, and just make sure that this hasn't
| | 06:03 | drifted even by a pixel.
| | 06:05 | Okay, so now match the opposite, and again,
I am switching Snap to Objects on and off
| | 06:16 | all the time, so there is no
reason for me to call it out.
| | 06:19 | You build up your own muscle memory with this
process depending on your level of comfort
| | 06:23 | with the Snap tool, but it's just something
that you almost begin to do without thinking.
| | 06:32 | Okay, that's done here.
| | 06:36 | And the hair for the right side is on this
side, it's disappearing, and we probably want
| | 06:48 | to again have the midpoint
track down the center of the forehead.
| | 06:53 | Again, notice how it's easier to keep your
place in three-dimensional space with the
| | 06:57 | consistent color of green on one side and
blue on the other, and I picked random colors
| | 07:02 | or arbitrary colors.
| | 07:04 | This part of the process
will be very, very confusing.
| | 07:06 | It's never going to be not confusing, but this is
one way at least of minimizing some of that.
| | 07:15 | So again, I am snapping to fix to those
points there, and I think I like to keep Snap on,
| | 07:20 | so I can help to really keep this as close as I can
possibly do to the opposite on the other side.
| | 07:28 | Done! No need for these, they are empty.
| | 07:33 | The ear right, well there is no ear right
on this one, so let's just get rid of that.
| | 07:38 | There is no ear left, it's an empty layer.
| | 07:43 | The hair on the top is empty, the
neck is the last one that we need.
| | 07:49 | So let's make sure Snap is on for this, and
let's go to outline so we can see what we
| | 07:55 | are doing, and switch it off now.
| | 08:00 | Okay, and that's it! So now we have the 9
o'clock, or the H position, which you can see
| | 08:12 | labeled on the original reference art.
| | 08:15 | So now we have our A pose, our three-quarters
facing right, our three-quarters facing left,
| | 08:21 | we have him looking down, we have him
looking up; some tweens already in place where we
| | 08:26 | can get away with them.
| | 08:28 | The final step in the process is to start
dropping in the intermediate positions; the
| | 08:33 | 1 o'clock and the 2 o'clock
between the 12 and the 3.
| | 08:37 | To give you a quick idea about what this will
look like even without some of the ones that
| | 08:41 | are already here, if I delete this, you
can see some things need to be fixed.
| | 08:46 | That will give you an idea about the range
of motion that the final effect is going to
| | 08:50 | have, even in this state with the options of
needed shape hints and some layers popping,
| | 08:55 | I think you can get the idea of
why this is really worth doing.
| | 08:59 | So I will put them back in.
| | 09:00 | I am very happy I think
with what we have so far.
| | 09:04 | Let's just get rid of the Reference layer.
| | 09:06 | We don't need that anymore. Keep things clean.
| | 09:10 | And one last little check, looks good.
| | 09:15 | One little detail I might want to tweak on the hair
and we give it a bit of a better edge up there.
| | 09:24 | That's good to go! So let's save this out and
in the next section we will move on to deal
| | 09:30 | with some of these intermediate
positions and soften out the arcs on them.
| | Collapse this transcript |
| Creating the remaining poses| 00:00 | So now it's time to make the motion between
the four compass points that we've finished
| | 00:05 | complete and fluid.
| | 00:06 | So during the course of rigging the different
angles, we've been moving some of the ears.
| | 00:10 | This ear has been moved up to its own level,
and we moved the left ear onto its own level
| | 00:14 | above the normal ones,
| | 00:15 | but they are not going to tween
properly if we keep them up there.
| | 00:18 | So just as a temporary measure, I'm just going
to ignore where they should be and just put
| | 00:22 | them where they are best suited for a smooth
tween, and I'm going to just put up another
| | 00:26 | blank in there to keep it nice and tidy.
| | 00:29 | Same thing for the left ear, bring
that down to here, same up there.
| | 00:33 | And I'm also going to help make the motion
continuous, I'm going to add an ear.
| | 00:37 | Let's look at this in outline. There is no
left ear on this frame, so let's add one in,
| | 00:40 | just as a little placeholder.
| | 00:42 | I'm just going to very
quickly slide it behind the head.
| | 00:46 | Same thing for the right
ear here, close enough.
| | 00:51 | And now let's activate
tweens for all these layers.
| | 00:57 | So if the layer is already green, then it's a Shape
Tween, if they are blue, it's a Classic Tween.
| | 01:02 | This will give us a very rough idea about what
the final animation is going to look like.
| | 01:06 | Okay, let's hide the reference for the moment
and then activate color, and in general in
| | 01:13 | broad strokes it's working. There is some
sliding going around and that's because shape
| | 01:16 | tweening has been asked to do too much.
| | 01:18 | So we can fix that luckily enough.
| | 01:21 | And a two-step, three-step process, and it's
going to involve making shape hints, and
| | 01:26 | I'll make this as painless as possible.
| | 01:28 | So let's go down to the neck.
That's the big culprit.
| | 01:30 | Switch off everything except the neck layer
and you'll be able to see what's going on,
| | 01:33 | on several of these keys.
| | 01:35 | So let's add some hints, and a lot of people
don't like to use hints because they just
| | 01:39 | don't realize how powerful they are.
| | 01:41 | They are pretty cool.
| | 01:42 | The one warning I'm going to give you
is that they can be prone to crashing.
| | 01:47 | Sometimes you'll create combos that just
freak out the program and it will crash.
| | 01:51 | So before you embark on applying a
bunch of shape hints, backup your file.
| | 01:56 | So let's add a few, and we'll make sure that
Snap is on because we really want them to--
| | 02:01 | I think they might even work without snapping.
I think they snap by themselves. Yes they do.
| | 02:05 | So let's add a few more.
| | 02:10 | I know this one is going to need about four
to really lock it down, and we'll go to the
| | 02:14 | next key, and we'll just apply
the same points; a, b, c, d.
| | 02:23 | That's it, that's what we do.
| | 02:25 | Every time, and here is a trick I had recently
developed, actually in the course of building
| | 02:29 | this course, I knew it was going to be confusing
with some of these transitions having shape
| | 02:34 | hints and some not having shape hints, and
I wanted a way to make it obvious that we
| | 02:38 | actually had hints on a given frame.
| | 02:41 | So open up the Properties panel, and in the
Label, type in an empty space. Just space,
| | 02:48 | that's all, hit Enter, and then
you'll see a little red flag appear.
| | 02:53 | And I advice you use this to signify every time
you've applied shape hints directly to that frame.
| | 02:59 | Don't put a flag on this frame. This is where
they end, but this is where they actually begin.
| | 03:04 | As long as you're consistent with this, you will find
that they are very helpful, because it flags trouble spots.
| | 03:09 | So basically we proceed with the same process,
with any other layer that has a problem.
| | 03:15 | I'm just going to focus
right now on this section here.
| | 03:18 | I'm going to ignore the rest.
| | 03:19 | This will be too much to
deal with at the moment there.
| | 03:22 | So let's look very carefully for any other
problems. I can see one right off the top
| | 03:25 | and that's his hair.
| | 03:29 | I'm going to hide everything except that. Oops!
And there you can see something bizzaro happening.
| | 03:45 | So let's add some to that.
| | 03:47 | And again, before I even start, let's just
put the--I am going to put the little space
| | 03:55 | on the Label, sometimes it's so easy
to forget, and let's add some hints.
| | 04:01 | Let's throw some down at random.
| | 04:03 | Ctrl+Shift+H to add the Hint.
| | 04:13 | So in this case, the hints worked first time,
and often they don't, and many times you'll
| | 04:17 | find yourself having to move the E
into the D spot, or the D back again.
| | 04:23 | And it can feel like you're
never going to get it right.
| | 04:26 | So treat them all as potential Rubik's cubes.
Some of them can really be doozies, so I've spent
| | 04:30 | up to 10 or 15 minutes on some of these,
| | 04:32 | but it's always great when
you get it right the first time.
| | 04:35 | And I wish I could tell you there was a formula.
We may end up falling over some more later
| | 04:38 | on in the course as we go on, that maybe take
a little more work than that, but that was
| | 04:42 | almost way too easy.
| | 04:44 | So I'm going to move out for a bit.
| | 04:46 | So now we have the 12 o'clock
tweening into the 3 o'clock.
| | 04:53 | And let's look at it in outline and you'll
see the ears as well, because some of these
| | 04:57 | obviously are on layers that we can't see,
and there is some nice stuff going on, in
| | 05:00 | particular the hair here, which seems to be
wrapping around the head in a very real manner.
| | 05:05 | Now the next thing I want to do is to
establish the 1 o'clock and the 2 o'clock positions,
| | 05:11 | and right now what we have is
a kind of a diamond pattern.
| | 05:14 | Flash creates directly straight paths or in-
betweens between keys. It doesn't make curved arcs, at
| | 05:19 | least not in this Classic Tween mode.
| | 05:22 | So what we have to do is manually create the arc
in between stacks, the frames for these slots.
| | 05:28 | So in order to do that, let's
be a little more thorough.
| | 05:31 | So I'm going to make a new layer and use some old-
fashioned traditional animation techniques for this.
| | 05:38 | So on this top layer, select the Brush tool,
pick a really bright color like red, and just
| | 05:43 | make a little mark for the tip of the nose. Pick a
point, tip of the nose is good, that's consistent.
| | 05:49 | And we are at the 12 o'clock position, go
to the 3 o'clock position, draw a little x,
| | 05:56 | 6 o'clock and 9 o'clock.
| | 06:04 | And right now this
describes a very flat diamond.
| | 06:08 | Now what we also have, I'm going to move
our reference folder just below this.
| | 06:12 | What we also have in here is a little
graphic I've created to help us try to get a nice
| | 06:16 | little arc pattern going.
| | 06:18 | Unpadlock that, so I can select it.
| | 06:20 | Now what we want to do is just nudge this thing,
and use the Free Transform to stretch it out.
| | 06:27 | It gets a little bit off center. It looks like
our original setup wasn't quite as geometrically
| | 06:34 | perfect as I would have liked, but it's close.
| | 06:36 | There is a little bit of offset on this side,
but I think we can pretty much follow this
| | 06:40 | path for the nose. So let's padlock that, and
now we can get rid of our Layer 2 up there,
| | 06:44 | we don't need that anymore.
| | 06:46 | So now when I establish the keys for the 1
o'clock position, it tells us where to put
| | 06:51 | the tip of the nose up here, and that
will give a really nice curvy action on it.
| | 06:56 | So let's padlock all the layers except the
ones that we are going to move, the nose and
| | 07:04 | the eyes, and the mouth.
| | 07:06 | So now we can just select those pretty confidently,
even drag them down here if we want, and then
| | 07:11 | move them until the tip of
the nose falls directly here.
| | 07:19 | Done! That's relatively painless.
| | 07:25 | And we're seeing a little
bit of flashing again.
| | 07:30 | Now what's happened there is that when we
created these shape hints and we made this
| | 07:36 | artificial key we'll call it, because Flash made
this. We didn't. The hints are out of order.
| | 07:41 | So let's go, Ctrl+Shift+H and fix them.
| | 07:45 | So I'm going to right-click to remove the new
hint that's just being generated, go forward
| | 07:49 | one and reposition these,
| | 07:51 | and that should be easy
enough to see where they are.
| | 07:54 | Again, I'll remind you always backup your project
before you go applying too many of these hints.
| | 08:01 | And it looks like we don't need any
hints for the next chunk, that's good.
| | 08:04 | And the neck also, remember it has a little
red flag, so the same thing will apply to
| | 08:09 | him. So any of these might have fallen
out of position, and now they are good.
| | 08:17 | Always watch the corners on these in case any
little extra lines or bumps start appearing,
| | 08:22 | but I think that's pretty clean.
| | 08:26 | Switch off the padlock there.
| | 08:29 | So right now I'm just
looking at this section here.
| | 08:31 | It's looking very stable.
| | 08:33 | Now we're seeing a little bit of Flash on
the next one, so I can see the neck needs
| | 08:36 | more hints for the next leg.
| | 08:38 | So let's switch off everything except the
neck, and we're going to add more hints to
| | 08:42 | get us to the next little bump.
| | 08:44 | So go to Properties, put a space in the Label
field, so we could again flag it for ourselves,
| | 08:50 | so that we don't forget there are hints
going on here, and Ctrl+Shift+H four times.
| | 08:55 | And once again, we apply them.
| | 09:03 | Go to the next key, and now let's move through
that and see if it's--it looks stable to me.
| | 09:13 | We were seeing flashing again but only in
this selection, but from here to here where
| | 09:17 | the hints are operating, we're good.
| | 09:19 | So I'm going to keyframe this
stack, and don't forget our clock.
| | 09:25 | So let's padlock this entire layer.
| | 09:28 | Unpadlock the bits that we want to move,
the nose, the eyes, and the mouth.
| | 09:34 | Let's select them all and we want them to
go right there. I'm going pretty close.
| | 09:43 | Just to follow that arc guide.
| | 09:46 | This is better I find than eyeballing it.
| | 09:48 | When you eyeball on this--I think
something has gotten broken there.
| | 09:53 | I wonder what that is.
| | 09:56 | Hopefully--I see what it is.
| | 09:57 | It's actually the one on the clock,
so we don't have to worry about that.
| | 10:01 | I thought for a moment that a little
chunk of my eyebrow had broken off.
| | 10:05 | Now let's go through again and see if any
of the shape hints need, and again, I told
| | 10:09 | you it was a two-step or a three-step process, so we
have to go back in and correct any of these flashes.
| | 10:22 | And there we go.
| | 10:24 | And I think--see here, there is a little--I'm
going to go in close so you can see this.
| | 10:27 | This is the thing to watch out for.
| | 10:29 | It means something somewhere has generated
too many points, so it may be just that we
| | 10:33 | need to add more hints here.
| | 10:36 | But before we do that, I'm going to test this
by using the Subselection tool, and now what
| | 10:40 | we have is a culprit.
| | 10:42 | Every time Flash creates a keyframe between
two shape tweened objects, there is a danger
| | 10:47 | that it will over compensate and
create things where you don't want them.
| | 10:50 | So what I'm going to do instead of adding yet
more hints I'm going to just clean that up.
| | 10:55 | So let's pick one of the earlier pure shapes
and Ctrl+Copy that, Ctrl+Shift+V to pop it
| | 11:03 | in, and I'm going to go to
Outline mode so we can see it.
| | 11:06 | Use a Selection tool, Snap
on, and just re-create it.
| | 11:10 | Pretty simple. That's such a
simple shape, it only takes a moment.
| | 11:13 | I'd rather do this and have
objects with additional hints on them.
| | 11:17 | I can just click it and drag down here,
| | 11:20 | reapply, Create Shape Tween, and
fingers-crossed. We're good.
| | 11:26 | No need for a hint.
| | 11:28 | We could apply the same
methodology to the previous one.
| | 11:31 | It's possible that this
actually had those two.
| | 11:34 | Let's just go ahead and clean that up as well.
| | 11:37 | It's a matter of your personal preference.
If you prefer to have more hints, but like
| | 11:41 | I said, I just think it's cleaner to not
have the things if you don't need them.
| | 11:45 | What I'll do is drop that down to here,
right-click, Create Shape Tween.
| | 11:53 | Oops! Something broke somewhere.
| | 11:58 | So let me just add them back in again here.
| | 12:02 | Now for many of the sections of this course,
I'm not going to be doing this, because it
| | 12:05 | would simply take too long.
| | 12:07 | But it's a good process to keep in mind for
yourself, because obviously the fewer points
| | 12:11 | the more stable overall you are going to be.
| | 12:13 | And obviously don't forget to--you need to
reapply the little label just as a reminder;
| | 12:18 | shape hints are here, and that's your map.
| | 12:21 | So let's have a look at the overall section,
and apart from the ears going onto the wrong
| | 12:32 | level, which is temporary, I
think it's looking good.
| | 12:35 | It doesn't look like it's
moving in a clunky straight line.
| | 12:38 | So that's it. That's the
process that you follow.
| | 12:41 | It's the same process, identical for
the rest of this to create these.
| | 12:46 | And you don't forget you have your clock which
will help to construct the positions of the face.
| | 12:53 | And as long as there's no flipping of symbols
horizontally, and there is absolutely no reason
| | 12:56 | why you would, then this entire section can
be done to match the quality that you see
| | 13:02 | from here to here.
| | 13:04 | I will leave the remaining
sections for you to do as an exercise.
| | 13:07 | In the next movie, I will cover the layering
issues and how we deal with the fact that
| | 13:12 | the ears move from the top of the head
to the bottom of the head and back again.
| | Collapse this transcript |
| Fine-tuning the head rotation| 00:00 | Now that we have the clock rotation for the
head completed, let's see about fixing things.
| | 00:06 | Like what happens if you notice something
that catches your eye, or you think, oh I
| | 00:08 | think I can do better than that; it can be
really intimidating. I know it frightens a
| | 00:12 | lot of people when they see these massive
columns of keyframes. Where do you begin?
| | 00:16 | Well, we've set this up in such a way and
so cleanly that it really makes it possible
| | 00:21 | to go in and alter things and improve them.
| | 00:23 | So here's the basic head rotation,
and I've noticed a couple of things.
| | 00:28 | First of all, this layer down here is no
point, Layer 3, let's get rid of that.
| | 00:31 | So we're clean again.
| | 00:33 | So rotate through this, the neck is moving,
it really shouldn't and most of these heads I
| | 00:37 | would intend to happen from
one static neck position.
| | 00:42 | So let's simply keep the first frame,
select everything that follows and delete them.
| | 00:50 | And if you scrub through now you will notice
some points where maybe things stick out,
| | 00:54 | like right here the skin is on
top of the hair, that's not good.
| | 00:57 | So let's correct that, and we correct that
by basically following the original workflow
| | 01:02 | that we used to do the previous keyframes.
| | 01:05 | So hit F6 at the end so that our
Timeline symbol ends where it begins.
| | 01:10 | And the first frame that we did next was the
12 o'clock up position, so hit F6 to keyframe
| | 01:15 | that, and again, here at the other end.
| | 01:18 | And the next frame that we did was a 6 o'clock,
so F6 here, and then the 3 o'clock, and this
| | 01:24 | is where the first problem is visible.
| | 01:26 | So let's hit F6 to keyframe that.
| | 01:28 | Make sure it's not padlocked.
| | 01:30 | Switch off Snap to Objects and grab
that point and pull it in, that's it.
| | 01:36 | Let's go to the 9 o'clock.
| | 01:38 | That's the next one that we worked on.
| | 01:40 | And oops! And notice that I'm not moving
these points at the bottom, I'm just moving the
| | 01:46 | curve, and occasionally
the upper lines up here.
| | 01:49 | And let's just padlock all these upper layers
just to be on the safe side, and you might
| | 01:57 | want to fine-tune these curves, just not to let too
much air open between the hair and the neck.
| | 02:02 | And then we simply go through the rest of
the in-betweens and just select them, the
| | 02:07 | curves where you think
it's too thick or too thin.
| | 02:11 | Watching out for little
points that's stick out.
| | 02:15 | Too much there. Great, that's it.
| | 02:17 | That was a simple one.
| | 02:19 | Let me show you another one that's catching
my eye, and that's the upper hair here which
| | 02:23 | is great for the first half,
it's moving fine here,
| | 02:28 | but then when we create the 9 o'clock position it moves
too far to that side, so that has to be corrected.
| | 02:35 | So how do we do that? And
again, so many keyframes here.
| | 02:39 | Let's go to the hair top level and we're going to
delete the 7 o'clock and the 8 o'clock position.
| | 02:46 | Actually I think the quickest way of doing
this rather than deleting these, remember
| | 02:49 | these little red flags telling that
there are shape hints on this level?
| | 02:54 | So there may be shape hinting issues that
will popup, but we know they are there.
| | 02:57 | So let's just go to the 9 o'clock position,
and in this case I'm going to hold down the
| | 03:01 | Shift key and the Right Arrow key and click it
one, two, three, four times. Let's try four,
| | 03:10 | and on the in-between frame beside it once,
and then on the keyframe on the other side,
| | 03:18 | let's move that over once
and let's see how that looks.
| | 03:20 | Now you're going to see spinning happen but I
am really more worried about the mass
| | 03:23 | of that hair, and does the overall position of it
look right, and I think it's looking better.
| | 03:30 | So let's fix the shape hints and we'll have a
better idea, Ctrl+Shift+H and remove any extra
| | 03:36 | hints that are added when
we add that shape hint.
| | 03:38 | And then fix these.
| | 03:42 | Oops! It's really annoying when Flash is supersensitive
about selecting things and selects the wrong object for you.
| | 03:51 | Go to the next frame.
| | 03:56 | And we were selecting two A's and two C's
because of course, the shape hints from the
| | 04:00 | previous keyframe are
also in need of adjusting.
| | 04:04 | So we have the shape hints that start here
and end here, and the shape hints start here
| | 04:08 | and end here, that's why you're seeing two
sets, and this is hopefully the last one.
| | 04:21 | Okay, now let's look at that.
| | 04:27 | I'm going to go through this frame-by-
frame to make sure there's no weirdness.
| | 04:33 | I think we're getting away with it.
| | 04:39 | Okay, the next step is one more level of
complexity up and that's to change the eyes.
| | 04:44 | If you look at the eyes, if you remember when
we built the eyes, we didn't really do anything
| | 04:48 | exotic with the shape of the eyes.
| | 04:50 | They look a little bit flat, so let's break that
apart and do something more interesting with them.
| | 04:55 | So I'm going to unpadlock all of the eye layers
and then just delete the secondary keys, the
| | 05:00 | one and the two, and also
the nose for this as well.
| | 05:07 | Because I want the nose and the eyes to
travel together, they are kind of the unit.
| | 05:12 | Okay, so now we go to the first of the big moves,
the 12 o'clock position when he is looking up.
| | 05:20 | Let's go in a little close on that.
| | 05:24 | And maybe we can move that
nose up a little bit more.
| | 05:26 | Let's unpadlock the nose, move it up,
and the same thing with the eyebrow.
| | 05:30 | Just select both of the eyebrows.
| | 05:31 | I'm holding down the
Shift key and the Arrow key.
| | 05:34 | Move it up let's say one, two or three clicks.
| | 05:38 | And let's go in a little tighter, and I'm
going to use the Free Transform tool on this
| | 05:42 | and just skew that shape down a little, so
there is a slight change of geometry on it.
| | 05:49 | Let's see what that looks like.
| | 05:51 | Now as you can see by having the skin space
opening up between the eye and the bottom
| | 05:56 | side of the eyebrow, it really helps to sell
the idea that there is a big change in the
| | 06:02 | model, so that's excellent.
| | 06:04 | And don't forget to copy, Alt+Option+drag the
adjusted keyframes from the first 12 o'clock
| | 06:12 | position to the second.
| | 06:14 | Now let's go to the 6 o'clock
and that's the exact opposite.
| | 06:17 | I want to push that nose down a bit
further on this, and the eyebrows also.
| | 06:21 | Let's bring them down a bit.
| | 06:23 | And if you look at the eyebrows in outline
you can really so far before the white of
| | 06:27 | the eyeball begins to bulge into it.
| | 06:29 | But I'm also going to move
the pupils down as well.
| | 06:36 | And if you wanted to you could go in and adjust the
curve or the lines of the eyebrows as well.
| | 06:43 | But I think you get the general idea, and
I think we can leave the--yeah, I want to
| | 06:48 | keep the three quarters position pretty close
to what it already is, because that's also
| | 06:52 | going to work as the three-quarter
view in the main turnaround.
| | 06:55 | So let's not touch that.
| | 06:56 | Great! So this will make a big difference.
| | 06:59 | Let's click on the clock and that will help us
to correct the curve, the arc motion, because
| | 07:06 | what's going to happen now if you move,
things are going to look really weird.
| | 07:09 | See how the mouth is sliding off to one side?
That's because there is no arcs happening
| | 07:13 | here, and we've created arced movements for the
1 o'clock and the 2 o'clock positions before.
| | 07:17 | So we have to re-add them.
| | 07:19 | Basically copy the
original workflow to the T.
| | 07:22 | So let's keyframe these and
reactivate the clock symbol.
| | 07:28 | Let's go in a little bit tighter, select that
vertical stack, again, making sure that everything
| | 07:33 | that we are not working on is padlocked, so
we can grab just the troublesome area, and
| | 07:38 | let's drop it with the top of the nose over
that intersection here where the red line
| | 07:42 | meets the ellipse, and now the
arcs have been fixed for that.
| | 07:46 | And we repeat this process
for everything that follows.
| | 07:50 | And again, don't be afraid to
pull the entire thing out.
| | 07:52 | Again, that's great to test it,
you see right, I've got everything.
| | 07:55 | Pull it into the 2 o'clock.
| | 08:01 | We simply go through to the four and just
follow through for all the other positions.
| | 08:07 | Okay, so now we've done
them all, so let's test that.
| | 08:11 | See if it looks good.
| | 08:17 | I'm certainly feeling a much
stronger sense of movement on the face.
| | 08:21 | Let me show you one last little trick that will
help you with arcs, and this is very quick.
| | 08:25 | I'm going to make a new layer right at the
top, get it completely out of the way so it
| | 08:29 | doesn't confuse you.
| | 08:31 | Let's say you want to plot an arc.
| | 08:32 | This is an old trick that we did back in the
hand-drawn animation days, and let's say you
| | 08:36 | feel that something isn't quite
right and you cannot figure it out.
| | 08:40 | Let's pick a really bright color like a red.
| | 08:42 | Select the Brush tool and pick a decent sized
brush, a round one, maybe this size, and I'm
| | 08:48 | going to just pick a point, a
smaller point than that, maybe here.
| | 08:52 | On this one layer on top, padlock everything
else so you don't draw on them by mistake.
| | 08:56 | On this one layer on top, we're going to pick for
example, let's say the point of the hair here,
| | 09:00 | and then I'm just going to go through to the next
keyframe, the next one, and just keep plotting that.
| | 09:11 | And you can even write notes on these like
what frame that is, make a smaller one, maybe
| | 09:16 | that's 9 so you can keep
track of it; 8, 7, 6 and so forth.
| | 09:22 | Now I don't expect this to appear at the top
to be the most elegant arc ever seen. That
| | 09:29 | gives you an idea of the kind
of lines that we're following.
| | 09:34 | So what you can do then if you want to give
yourself a little guide is nudge these into
| | 09:39 | a more pleasing elliptical pattern.
| | 09:42 | And I think the number, that one the start one,
we can't do much with, so that's the 12.
| | 09:47 | I'm not going to worry about this one.
| | 09:50 | So let's worry about it from the 12
o'clock position to one, and so forth.
| | 09:54 | And you get the idea.
| | 09:55 | Now we can actually give
ourselves a little guide.
| | 09:58 | It's looking much more like an elliptical arc.
| | 10:04 | Padlock that and what I would do would
be to go back into the hair level.
| | 10:09 | Let's go in really close on this.
| | 10:12 | Maybe put that into outline, it
makes a little bit easier to see.
| | 10:16 | And then just pick that point and we can
nudge it up, maybe bring that down a bit.
| | 10:23 | That will get a smoother curve.
| | 10:27 | And back in the days when we used to--some
people still do--and we used to do this by
| | 10:30 | hand with pencil and paper.
| | 10:32 | You'd see the animator's keyframes would
have like hundreds of these little arc charts;
| | 10:37 | one for the nose, one for the tail, one
for the feet. They would be everywhere,
| | 10:42 | and it worked then and it will work now.
| | 10:45 | It may look a little old-
fashioned but it's very effective.
| | 10:49 | And don't forget if you make a change to the 12,
then it should be the same on the other side.
| | 10:53 | So it's probably easier just to hit Alt+
Option and drag the 12 from there to there.
| | 10:59 | Let's see what that looks like.
| | 11:00 | Hopefully it hasn't messed up any shape
hints, so we may have to fix a few of them.
| | 11:05 | Certainly feeling a little bit smoother, and
you can do that with any point on here; the
| | 11:09 | point of the eyebrow, the point of the mouth,
and if you're spending a lot of time to do
| | 11:14 | this, you will really feel the quality, and
you're going to be using this rig a lot.
| | 11:18 | So it really is in your best interests to
spend a good amount of time doing this to
| | 11:23 | make these motions as curved
and as natural as possible.
| | 11:26 | So there is no fast way of doing this, but
you only have to do this once, and once you
| | 11:31 | have it done, you have it done
for all of your future scenes.
| | 11:34 | So whether or not you actually follow these
methods, well it really depends, if you are
| | 11:38 | going to animate a character for ten
seconds, maybe it's not worth your while.
| | 11:42 | If you're going to animate a character for
seven or eight minutes, yes it will be.
| | 11:47 | So with that, I think we're ready to move on
and to correct the little layering issues
| | 11:52 | with the ears.
| | Collapse this transcript |
| Fixing layering issues| 00:00 | One last thing remains before we can really
sign off on this head clock rig, and that
| | 00:05 | is the leveling problem with the ears.
| | 00:08 | It's not really a problem, it's just
a puzzle that we left for the last.
| | 00:12 | It's the kind of thing that you really want
to leave to the end I find, because it does
| | 00:15 | mess up these beautiful smooth layers.
| | 00:17 | So what I'm going to do is hide the left ear,
and just focus on the right here, and let's
| | 00:23 | unpadlock both ear levels.
| | 00:25 | And I'm just going to select the ear frames, and hold
down the Alt+Option key, and drag them to the top.
| | 00:32 | So now we have two identical ear
levels, so now it's always on top.
| | 00:36 | Well, we know that the ear probably shouldn't
be on certain frames, and you can see a little
| | 00:42 | bit of a slight problem I'm noticing.
| | 00:44 | It might be hard for you to see on your screen,
but the darker neck color is slicing in here.
| | 00:52 | It's a good spot too where we can double-click
on the ear symbol, go in, and just pull the
| | 00:57 | color down a bit more; not too far, just curve
it just a little bit like that, and that solves
| | 01:05 | that little problem rather than
having to reposition everything.
| | 01:08 | Keep going! Okay, here is the problem.
| | 01:14 | This frame has no business being there.
| | 01:15 | So let's just click on that, and grab it,
and that identifies the exact frame.
| | 01:19 | Let's Ctrl+X or Delete to get rid of that.
| | 01:21 | Go to the next one, hit Delete, the next
one, hit Delete, and just keep going.
| | 01:26 | Every time you see weirdness, just
delete it, and then we're back to here.
| | 01:32 | And that's it! So the second step of
this process is very straightforward.
| | 01:38 | Let's go to the lower ear level, and
delete the ones that are not needed.
| | 01:42 | So these are the ones that we need,
meaning, we don't need this.
| | 01:46 | Let's get rid of that, hit Delete.
| | 01:49 | Now you don't need to have two ears.
| | 01:51 | If you have two identical levels and you decide to
move one, you'll see the other one beneath it.
| | 01:55 | It will drive you crazy.
| | 01:56 | So let's not do that.
| | 02:00 | And then here, you'll have a duplicate of this,
so these two should always look the same.
| | 02:06 | If you make one adjustment to the top layer,
it should be modeled on the bottom one, but
| | 02:09 | it only happens for this one frame.
| | 02:12 | Think of this like a relay race where this
level does the race up to this point, and
| | 02:16 | then it hands off the symbol to this
layer, and then it keeps going down here.
| | 02:20 | And as you can see, we have the top layer here,
so we don't need any ear symbol on this level.
| | 02:25 | So delete that, and here is the handoff again.
| | 02:28 | So let's just put it, F7 there, and now we
test that in color and see if it works.
| | 02:35 | Really nice! So there are some subtleties
that we might want to add as the ear twists
| | 02:40 | around and zips behind the head, possibly we
might want to change the geometry a little bit.
| | 02:46 | So what if you wanted to show it sliding
around? Well, don't forget, you have to do
| | 02:51 | the very same thing down here.
| | 02:53 | So to do that, rather than redo the same
thing down here, you might not get it to match.
| | 02:58 | Let's just select this symbol, hold down the
Alt+Option key, and drag it to there, and
| | 03:02 | then they do match.
| | 03:04 | And that might soften
that transition somewhat.
| | 03:09 | There we go! It's pretty neat.
| | 03:13 | It's a much softer turn now.
| | 03:16 | So all these little tricks are things that
you can do to trick the eye, and now we do
| | 03:21 | the same thing, padlock the right ear,
and we'll do the same thing with the left.
| | 03:25 | So I'm going to select the ear left level,
hold down the Alt+Option key and just duplicate
| | 03:30 | that at the top, and the process would be
identical, but obviously with a different
| | 03:34 | layering order as the head turns.
| | 03:36 | So let's go into the up position, and at this point,
definitely we don't need an ear there, or here.
| | 03:50 | So something weird happens there--oh yes,
because this ear needs to be not held,
| | 03:56 | so we get a blank frame there as it pops off.
| | 03:59 | That's looking pretty good.
| | 04:01 | And again, the same thing here, we might want
to press this ear left, begins to move around
| | 04:06 | the side of the head.
| | 04:07 | It might be a good idea
to--let's go into Outline.
| | 04:11 | Let's squish the symbol a little bit so we
feel like it's exactly turning, and you probably
| | 04:17 | have to turn that quite a bit. Let's do this.
| | 04:23 | And obviously, for the rest of these,
it's completely hidden behind the head.
| | 04:27 | Even though you can see it, if you are picky
about this then you might want to just keep
| | 04:30 | them flattened a bit.
| | 04:32 | So when that begins to appear around the other
side, we have that same nice squish on the ear.
| | 04:39 | Okay, let's look at these again, in color.
| | 04:44 | That's beautiful! So again, we have the ear
right which is an exact opposite of the upper
| | 04:50 | ear right level and then the ear--the ear
left has one last thing to do that some of
| | 04:55 | these symbols aren't needed.
| | 04:57 | We have duplicates here of course.
| | 04:58 | So let's get rid of these.
| | 05:02 | We don't need this one, because again, were
you to move the upper ear left for any reason,
| | 05:07 | you would see the other one beneath it.
| | 05:08 | It can be very annoying, so get rid of that, and
we'll need this one here to carry on from here.
| | 05:15 | So we see the ear on the top level
from here to here, then it pops off.
| | 05:19 | And right now what I'm doing is looking at
this level, and my eye is jumping down to
| | 05:23 | this level, and then I'm
comparing them from one to the other.
| | 05:28 | I think we probably have unnecessary frames
somewhere here, say we have a duplicate ear level.
| | 05:34 | So let's again, go back down to the ear left,
put a blank keyframe there where the handoff
| | 05:39 | happens, and delete all the duplicates.
| | 05:47 | If you're in doubt, grab the upper ear level
very quickly, and bring it down, and then
| | 05:51 | you can see what's happening.
| | 05:52 | You can see the layer change and you have
ears all the way through. Let's undo that.
| | 05:57 | So we put it back to its normal place.
| | 05:59 | Do the same thing with the ear right level, and you
can see the same thing. Quite elegant; move that back.
| | 06:08 | And you notice how I made a little indent
that helps us to identify little four empty
| | 06:13 | spaces, identify the fact that these levels
down here are responsible for shifting a level
| | 06:19 | like as in the ear and the hair.
| | 06:21 | Let's go up to the ear right and add them in here
too; one, two, three, four; one, two, three, four.
| | 06:27 | It will really help you when you're scanning
back and forth, and you're going from this
| | 06:31 | level to that level.
| | 06:33 | It makes it slightly easier for
your eye to follow that jump.
| | 06:36 | So you can might even want a different indent
pattern for the hair, maybe two, two less.
| | 06:41 | These are the kind of little mental tricks
that I use when I'm trying to make this timeline
| | 06:45 | a little more user-friendly, a little easier
for my brain to follow, because yes, it is
| | 06:51 | obviously a lot of work for your mind to do when
you are shuffling between all these different
| | 06:55 | things and stacks, that it
becomes like a huge blob of text.
| | 06:58 | So these techniques I find they work really well
for me. You may have your own or different ones,
| | 07:02 | but by all means, feel free to experiment,
and concoct ones that work for you. So
| | 07:08 | I think we are now ready to sign off on the
clock rig; one last pass through with the
| | 07:14 | whole thing to make sure there is
nothing else that needs to be fixed.
| | 07:16 | Now you notice too that there's some slight little
imperfections, to put it mildly, and there's a
| | 07:20 | lot of things that you can fix in here,
| | 07:22 | but when we begin to animate with this later
on, you'll find that the system is actually
| | 07:25 | really, really forgiving.
| | 07:27 | And what you're seeing right now is not a
performance that you would ever do in an animated
| | 07:31 | scene. You would have a much broader range
of motion, and that will be more apparent
| | 07:35 | in the later chapter.
| | 07:36 | So with that, we're ready to move on to the
next chapter where we'll do an actual turnaround
| | 07:41 | with the character.
| | Collapse this transcript |
|
|
5. Creating a Head Turn-AroundIntroducing the turnaround| 00:00 | In this chapter, we're
going to do the turnaround.
| | 00:02 | And as that suggests, it's going to involve
going from the front view, the A pose through
| | 00:07 | the three-quarter, the profile, the three-
quarter rear, the rear view, and so forth.
| | 00:12 | And before we go much further, I'd like to
just take a step back, and see what we've
| | 00:15 | done so far and how it's going to be
integrated into the rest of the project.
| | 00:20 | So here are our angles, and again, as I
explained earlier, the reason why I call them A, B,
| | 00:25 | C, D, and so on, is because I don't like calling
them profile, three-quarters profile, because
| | 00:30 | they stack arbitrarily in the library, they
follow the alphabetical patterns, and you
| | 00:35 | end up having to scroll through
your library to find things.
| | 00:38 | That's why the A, B, C, D, E, F, naming convention
works better. You'll get used to it very quickly.
| | 00:43 | And let's go forward. I've made some little
diagrams, so this is essentially an overview
| | 00:48 | as if we could look down upon the whole setup. So
the A view front on, and the B, three quarters.
| | 00:54 | Let's keep going.
| | 00:55 | So what we did essentially in the previous
chapter is we took the A view, and we took
| | 01:01 | the three-quarter front to the right side,
and the three-quarter front to the left side,
| | 01:06 | and we spun a whole clock rotation out of
this, and this gave us great flexibility and
| | 01:11 | a lot of different poses
that we can use for the head.
| | 01:14 | It really articulates the head.
| | 01:15 | Now let's see how this
works with the rest of it.
| | 01:18 | Imagine that we could look down from a high
viewpoint, and again, here's our familiar
| | 01:23 | A, cycling through the other eight positions.
| | 01:26 | And what we did was, in the clock sequence of
the pivot points, we basically spun those
| | 01:31 | from the A direction. So the center of this
will be identical to the A pose, and the 3
| | 01:37 | o'clock is identical to the B pose, and
the 9 o'clock is identical to the H.
| | 01:43 | This is the naming convention that I developed
and it gives me great flexibility in moving
| | 01:47 | between each of the states, because there
might be a time when you want to integrate
| | 01:50 | for example, the profile, or the C
into one of the clock points here.
| | 01:56 | And if you follow this course correctly, and
if you're very thorough keeping the layers
| | 01:59 | consistent, you will be able to do this.
| | 02:02 | So take a while to look at this, if you're
in anyway confused about why some of these
| | 02:05 | frames are called A, and some are called 3,
this should make it clear that essentially
| | 02:10 | I've used a different numbering
system for the three-quarters B head,
| | 02:14 | but we will be able to repurpose a lot of
the work that we did on the clock chapter
| | 02:19 | when it comes to doing these full turnaround.
| | 02:22 | I'd also like you to bear in mind the key
points to focus on are working on the A head,
| | 02:28 | and the B and the H.
| | 02:29 | So make this your focus if you
feel like your time is short.
| | 02:32 | I find it's very rare when I actually
need an E head or a D head or an F head.
| | 02:38 | For the rest of this chapter, I am going to
walk you through how to fully tween between
| | 02:42 | this entire circuit; a 360 degree turnaround.
| | 02:46 | You may just find a part of this
useful, you might find all of it useful,
| | 02:49 | but it's sure as good to know how to
do it just in case you ever need to.
| | 02:53 | So with that, we'll proceed.
| | Collapse this transcript |
| Creating the B head (3-quarter)| 00:00 | Now let's get started and move the profile
face into the three-quarter view which is
| | 00:05 | the view from which you'll do most of your
animation. Most cartoons have the figure in
| | 00:09 | a kind of side on, very rarely
like a front on view like this.
| | 00:12 | So let's go with the Library panel and open
up the turnaround comp for a symbol, and this
| | 00:18 | is the first one that we worked on when we
began, and we more or less left it in place
| | 00:22 | and now finally it's time to
return to it to finish it.
| | 00:26 | So if you recall from the earlier section,
let me switch off this little fade out layer,
| | 00:30 | so you can see it better.
| | 00:31 | We have eight directions, which we've called
A, B, C, D, E, F, G, and H, and we've done
| | 00:38 | the A pretty thoroughly.
| | 00:40 | And so what we're going to do is then
map three-quarters view onto this.
| | 00:45 | So the one thing to note is that we created
this workspace for a different function, so
| | 00:50 | let's go back to an earlier workspace, reset
it, because if you've been playing around
| | 00:56 | as I do myself a lot with these different
settings, it's nice to reset it back to the
| | 01:00 | default. So just nudge everything around
to get it as efficient as possible, okay.
| | 01:09 | Now it's nice to have the Library active,
because we're going to be cutting and pasting
| | 01:12 | some work that we've done in the clock comp
or symbol. If you recall, we created a bunch
| | 01:19 | of these head turns.
| | 01:20 | And as it turns out, by good luck, the number
three pose is identical to the B pose as our
| | 01:25 | standard three-quarter view. So let's unpadlock this,
and carefully select this column, right-click,
| | 01:32 | copy those frames and now we'll click on the
hd 1 turnaround symbol, and before we actually
| | 01:38 | paste it in there, I want to keyframe the
end, because like with all these rigs too,
| | 01:45 | and as I begin, so the first is the
A pose and the end is the A pose.
| | 01:49 | Now let's go to the B column and
carefully select all the way from nose to nose.
| | 01:54 | Right-click and go Paste Frames.
| | 01:56 | Now Flash does this thing which kind of bugs
me a little bit where it automatically bumps
| | 02:01 | whatever was already in place to this side. We
don't need those, so select those and Clear
| | 02:06 | Keyframe, right-click, and we also have a
bunch of tweens here that we don't need. I
| | 02:11 | think we have to do these individually.
| | 02:14 | In the earlier versions of Flash you could
simply select all these and go--there we
| | 02:19 | go Remove Tween; it didn't like me going across
the on tween layers for some reason. That's great.
| | 02:28 | And so now let's activate Classic Tween, and
again, be careful that you select the right
| | 02:34 | kind of tweening for the right symbol.
| | 02:37 | If you have a shape, in other words if
you see dots then it's a Shape Tween.
| | 02:41 | If you click on this and see a blue box as
with the ear, then it's a Classic Tween, and
| | 02:45 | when they say Motion Tween, a Classic
Tween is really the Classic Motion Tween.
| | 02:50 | So these are both Motion Tween, but this is
the new one, which I don't use, and this is
| | 02:53 | the Classic Tween which I do.
| | 02:56 | Now let's see what that looks like.
| | 02:59 | And we initially have a very quick issue with
the ear, because the ear goes from one level
| | 03:05 | to the other level, so let's fix that right
off the bat, and I am just going to move this
| | 03:10 | ear to the upper level, and let's switch off
the Reference layer, and it's looking pretty
| | 03:19 | good. Not bad for a very quick cut and paste.
| | 03:22 | I can see off very quickly that
the hair on this side is going wrong.
| | 03:29 | So let's put a shape hint in there, so let's
just click that to find the layer, there it is.
| | 03:33 | Hide everything else, so we can
really see what we're doing.
| | 03:36 | And as I've said in the previous chapter,
every time you apply shape hints, it's a really
| | 03:39 | good idea to make some little note of that.
| | 03:42 | So I am just going to make a label by clicking
on anywhere in this timeline, and then click
| | 03:46 | on the label in the Properties panel and
Enter just Space, Enter, and you see it creates
| | 03:52 | a little red flag, so it warns us that
we're about to put in a shape hint here.
| | 03:57 | But we don't need Snap to Objects on. All
shape hints are automatically snapped to the
| | 04:01 | object on the stage, so let's make an
A and a B, and just try those too.
| | 04:06 | And I'll remind you again, if anything will
crash Flash, shape hints will, so be sure
| | 04:12 | you backup your project
before you go much further.
| | 04:16 | Before I am about to embark on a big series
of shape hints, I always backup the file.
| | 04:24 | And oftentimes again, you'll find that one
sequence of hints won't work. This won't work
| | 04:29 | first time out, but sometimes you might have
to put the A in a different position, and
| | 04:33 | like I said before, it can be a bit of a puzzle, but
this time it worked first time which is very nice.
| | 04:39 | Okay, so that is our A to B transition.
| | 04:45 | Let's take another close look, make sure
nothing strange is going on. I think we might need
| | 04:49 | to make a slight change to the neck. Let's
have a look at the reference for the neck,
| | 04:53 | and I am going to just hide that.
| | 04:55 | So from there we are going to here.
| | 04:56 | So the neck should change a little bit.
| | 04:59 | Let me lock that, I just want to have the
neck area active, because don't forget the
| | 05:06 | body will also be in a slightly different
position, so when I designed this, I also
| | 05:10 | made change to the shape of the neck to match
the shape of the upper torso, which you can
| | 05:14 | see very faintly here.
| | 05:17 | Okay, ah-ha! And the neck chooses to disobey. So
very quickly we'll just apply some hints to that.
| | 05:26 | Same process again, I am just going to select
the keyframe, or one next to it, and in the
| | 05:30 | Properties panel, in the Label field, type in a
space, and there we have our little reminder
| | 05:35 | to ourselves, Ctrl+Shift+H to apply some hints,
and I think we'll put four down; A, B, C, and D.
| | 05:46 | Go to the next and just
copy them in the same places.
| | 05:53 | Perfect! So the nice thing about this and
the reason why it's really worth doing, if
| | 06:03 | you were to desire a very slow move, it can
be as long as you like. I am going to just
| | 06:09 | really expand this enormously now.
| | 06:15 | So if you were to do, for example, a camera
move orbiting around the character, this is
| | 06:19 | the way to do it. It's great for faking a
3D effect, so let's undo that, get it back
| | 06:23 | to the original timing.
| | 06:24 | It also gives you the option of picking all
kinds of secondary keyframes, all you'd have
| | 06:29 | to do is keyframe any of
these positions along here.
| | 06:32 | If you wanted to have a standard
character with different poses, it's very handy.
| | 06:37 | So that's the B taken care of, and we'll move
onto the next most important one, which is
| | 06:42 | our profile face, in the next movie.
| | 06:45 |
| | Collapse this transcript |
| Creating the C head (profile)| 00:00 | Now it's time to do the profile face and this
will really give you a great deal of coverage.
| | 00:05 | This is about a 45 degree turn and this will
give you a full 90 degree range of motion,
| | 00:09 | so it's really, really good to
have at least this much done.
| | 00:12 | So let's hit F6 and keyframe the C position.
| | 00:17 | And I think let's just hide everything on
this because there is a lot to do, so let's
| | 00:21 | just break it down into simple components.
| | 00:23 | So here's our profile reference and I'm going
to hit the little white layer on top to fade
| | 00:28 | it out a little bit.
| | 00:29 | And let's just maybe start at the bottom and
work our way up. So we'll pick the neck and
| | 00:34 | let's make all of these Outline,
much easier to work with.
| | 00:36 | Zoom in a little bit.
| | 00:38 | We don't need Snap on for this.
| | 00:42 | And we really need to be able to have fine
control over where to put the line. Okay, and
| | 00:52 | I'm going to hide that, ear left. The ear left is
actually completely invisible at this point.
| | 00:58 | Just for thoroughness sake it might be
nice to keep a place holder there.
| | 01:01 | And let's just padlock these
layers as we get them done.
| | 01:05 | Skull very, very similar, so it's just a slight
change on the curve. Let's pull it up a little
| | 01:10 | bit here so that we can get a
little more coverage for the hair.
| | 01:16 | And I'll keep the skull visible because we want
to match the hair to that as close as we can.
| | 01:21 | This is the hair area, maybe can cheat this
a little bit, because right now this hair
| | 01:24 | should be going behind the skull.
| | 01:26 | I find that very tedious to switch layers, so
I'm just going to see if we can find an easier
| | 01:33 | way of doing it at least up to the C
direction and I think that'll work.
| | 01:40 | Let's padlock that, and next, the right hair.
| | 01:42 | Be sure we have Snap to Objects on for this
because we want to really ping that right
| | 01:46 | on to there, perfect match.
| | 01:51 | Great! Let's pull the hair
over and that's pretty good.
| | 02:04 | Now the jaw, and if you find that the line is
a little hard to see then don't feel like
| | 02:11 | that you're married to the
colors that I've selected.
| | 02:14 | You can go and pick a dark one
if it will help you read it.
| | 02:20 | Great! Pull that right over to the ear.
| | 02:28 | Let's switch Snap off now, padlock that.
| | 02:34 | The mouth is going to be a little tricky,
but for now I'm just going to put it into
| | 02:38 | a rough position, and let's hold down Alt+Option
key and use the Free Transform tool.
| | 02:45 | Just took that reasonably close to match.
| | 02:47 | I knew this isn't real.
| | 02:48 | If we were to actually work with
this it would look very strange,
| | 02:52 | and that's obviously not the final look that
we're going for, but just for now this will
| | 02:57 | work as a general position for the final
mouth shape that we're going to put in there, so
| | 03:02 | let's just padlock that, and we'll just keep it
as a solid, because when we go to Outline
| | 03:05 | mode we see all the mask layers,
so it's a bit overwhelming.
| | 03:09 | Now the eye left, and what this is going to
do--will look really weird for the moment, but
| | 03:15 | select all of those four layers and
just really pull them in very thin.
| | 03:19 | Essentially what you want to do
here is to create a little slice.
| | 03:24 | This will not be seen by itself, but it will
help to create the tweens that will be visible
| | 03:29 | whereas this itself will not.
| | 03:31 | And you'll see what I mean when we
activate the tweens in a little while.
| | 03:35 | So make this as thin as you
think we can get away with.
| | 03:38 | The brow has really gotten out of control, so let's
delete that and just copy the first one back again.
| | 03:43 | And I'm just going to use Free
Transform to get this a little closer.
| | 03:49 | And now I'm just going to use the
regular tools, the Selection tool.
| | 03:55 | We'll try to get this into a shape
that's a little more controllable.
| | 03:58 | And I'll Free Transform again to
pull it in, and let's go even tighter.
| | 04:07 | Okay, padlock those and the right eye will
be a little bit easier than that because it's
| | 04:15 | not making such a dramatic change of shape.
| | 04:19 | But we still probably want to use the Free
Transform on this just to get it a bit closer.
| | 04:25 | And then let's just pull the points
down with the regular Selection tool.
| | 04:31 | And let's bring the pupil over much further.
| | 04:34 | And actually you might even want
to do the same thing on this eye.
| | 04:39 | Let's select the left pupil. Let's
push it out right to the edge there.
| | 04:49 | Padlock those and now the hair on the top, and then
just using the arrow keys very quickly to move it over,
| | 04:58 | Free Transform, and that's just
pretty close to the reference image.
| | 05:06 | You are left with an empty layer there, the
right ear, again Free Transform with the arrow
| | 05:12 | keys to push it over and expand a
little bit and finally the nose.
| | 05:22 | Maybe we'll use Free Transform just to
squish it a little bit, just so there's some change of
| | 05:26 | shape as it begins to move into profile.
| | 05:30 | Now let's have a look at everything there.
Let's see it in color and that's not too bad.
| | 05:41 | Now you could forget the tweening, a lot of
people don't need this level of tweening.
| | 05:45 | I'm going to go ahead and try to tween the
entire turn of course, but I've seen many
| | 05:49 | rigs that are basically done and print
on three quarters and profile.
| | 05:54 | It is so much greater if you have access to
the ability to tween between any of these,
| | 05:58 | so let's go to do that.
| | 05:59 | I'm going to very quickly
activate the different kinds of tween.
| | 06:04 | And of course we have the inevitable--there
is the usual disobedient layer or two. Let's
| | 06:09 | fix them and the jaw.
| | 06:15 | So hide everything except the jaw,
let's look at this in outline.
| | 06:19 | And we're going to add shape hints, so let's
go to the Properties panel, add a little placeholder
| | 06:22 | label so we got our red
flag, and apply some hints.
| | 06:29 | We'll try two, A and B.
| | 06:31 | Don't forget to backup your
project before you do this.
| | 06:34 | Great, and I am seeing this section of hair, it
seems to be a big culprit, so let's go in there.
| | 06:46 | And again, add a space as a
little shape hint marker.
| | 06:50 | And as you can see, the previous pattern of hints will
probably work for the second transition as well.
| | 06:55 | Whatever you put down, your original A, B, C,
D and E, if you just follow that for the
| | 06:59 | second, at least first
time around, it should work.
| | 07:05 | And every time you get something
like this working, I advise save again.
| | 07:09 | Sometimes I'll save when I do a
particularly tricky shape tween.
| | 07:12 | I don't ever want to do that
again, so backup your file.
| | 07:17 | And let's switch that to solid color.
| | 07:20 | And now we have a fully tweened 90 degrees of
movement between the portrait view through
| | 07:26 | three quarters into profile.
| | 07:28 | And as you can see the left eye is
appearing to wrap around the head.
| | 07:34 | This can be fine tuned of course.
I'm doing this as a very quick pass,
| | 07:38 | but you can see that these frames are holding
up pretty well, and let's do the same thing
| | 07:41 | with this as we did the first time
around, let's make it really long.
| | 07:46 | It helps you to identify that maybe the left
eye should be on a slightly different angle.
| | 07:52 | So let's just do it with these three
layers for the eyeball, the pupil and the lid.
| | 07:57 | I'm just going to rotate it slightly more
this way and pull it in just a little bit,
| | 08:02 | and now let's zoom out.
Feels a little bit better.
| | 08:09 | And if you think that maybe the eyebrows are
a little too thick, you know we can go in
| | 08:15 | and using the Free Transform,
squish it up a little bit.
| | 08:20 | And it is going a little bit wonky there,
so what I'm going to do is tell it I'm very,
| | 08:27 | very sorry and I won't do that again.
| | 08:29 | Some of these--you can only be punished
so much. You can probably go a little tighter
| | 08:34 | than that, but I think
you get the general idea.
| | 08:36 | But it's good to push these to breaking points to
see just what exactly can you get away with.
| | 08:40 | So that being done, let's just pull
these back in to their correct position,
| | 08:45 | and in the next movie I'll show you how to
make the peculiar little transition from the
| | 08:48 | profile to the three-quarter rearview.
| | 08:51 |
| | Collapse this transcript |
| Creating the D head (3-quarter rear)| 00:00 | Next up, we'll do the transition from the
profile to the three-quarter rearview.
| | 00:05 | And I'll say it again, don't feel like
you're under some obligation to get the tweening
| | 00:10 | transition to work. You can pretty much at
this point say, right, I'm happy enough to
| | 00:14 | not be able to do a motion
tween from here to here.
| | 00:16 | Sure is nice to have it though. More control is
better, but it does become a little bit of a puzzle.
| | 00:22 | So let's puzzle that out and
I'll show you what's involved.
| | 00:25 | Again, let's make a vertical column and keyframe
it, and let's go to Outline and hide everything,
| | 00:32 | and look at the reference.
| | 00:34 | So we're trying to do the transition
from the profile view to this view.
| | 00:39 | And actually, it's not as crazy as it might
seem. Some of the levels are going to change
| | 00:43 | here, but for now we don't even worry about it.
Let's just worry about lining the different
| | 00:47 | layers and it should become apparent
once we're in color what needs to be done.
| | 00:52 | So let's hide it all and
we'll just do the neck.
| | 00:57 | And again, if my outline colors are too light,
let's go and maybe darken that a little bit.
| | 01:02 | Zoom in a little bit, it
will be easier to see.
| | 01:09 | You'll notice too the virtue of working like
this is that you have the same layer hierarchy
| | 01:14 | for all the different directions. So even
without the tweening, this is a great way to
| | 01:18 | work, because if your character turns from
one direction into a completely different
| | 01:23 | direction, this way you've already worked out all
the different layers that you'll possibly need.
| | 01:28 | So this is the way I do everything now.
It's much easier once you get used to it.
| | 01:33 | So let's do the left ear and, again, I'm not
worried too much about this ear. It's really
| | 01:37 | just occupying the approximate space. We can
even hide that, it's kind of distracting.
| | 01:46 | The skull, let's use the Snap to Objects and
just line that up with the back of the neck,
| | 01:51 | even though we can see it, it's
still nice to make them line up.
| | 01:55 | I'm going to go in and switch Snap off.
| | 01:58 | I need to really be able to move this finely.
| | 02:05 | The left hair area; I think finally we
get to move this to the bottom level.
| | 02:10 | I'm not sure we can cheat it much longer,
possibly maybe. If we make it small enough,
| | 02:15 | no one is even going to see it.
| | 02:18 | That's pretty good.
| | 02:23 | And the hair, right? I'll keep going through
layer by layer, make sure that snaps to that.
| | 02:30 | Let's zoom out so we can see it better.
| | 02:34 | Ah! I completely
misinterpreted that with all the lines.
| | 02:37 | Let's go back and hide the left hair, and
what's going to happen here is that the right
| | 02:43 | side of the hair is really going
to take over the entire head.
| | 02:45 | Let's zoom out again.
| | 02:47 | Let's move this all the way
over to here, Snap off.
| | 02:54 | I'm switching Snap on and off as I go,
and you'll develop your own habits.
| | 02:58 | Let's pull the hair over,
zoom in a little bit.
| | 03:08 | Okay, that's pretty good.
| | 03:15 | And I'm trying to do this with a single vector, that
will make the shape tweening a little bit easier.
| | 03:21 | So this is a case of making a
compromise with the original pencil drawing.
| | 03:24 | I think it's well worth it, because this will
make the tweening of the shape just so much
| | 03:28 | easier than if I was to put like a little
bump or a shape in there to match that contour.
| | 03:36 | Let's Snap Objects on and
line up the jaw with the skull.
| | 03:42 | Now the jaw clearly is going to change level
somewhere around here, and I'm going to use
| | 03:46 | Free Transform and click on that, just
to push it into a slightly smaller area.
| | 03:53 | And again, go in and using Snap, I'm
going to line that up. It's good.
| | 04:00 | And again, padlock as you go.
| | 04:04 | At this point there is no mouth,
it shouldn't be visible at all.
| | 04:07 | So for the moment let's just delete
that, and the same with the eye.
| | 04:15 | None of these are going to be visible on this one,
and I think nothing is going to be visible
| | 04:20 | of the right eye either, apart from the brow, so
we'll keep that, move it over with the arrow keys.
| | 04:27 | Now I'm going to use Free Transform again to
try to get it into some semblance of shape,
| | 04:37 | using V on the keyboard to select the
Selection tool so that I can pull the points.
| | 04:44 | Padlock all of these.
| | 04:47 | Now the hair on the top, which will be
moving to a lower level very soon so that it can
| | 04:52 | appear behind the forehead here.
| | 04:55 | Let's switch Snap off, I need to be
able to position this very carefully.
| | 05:03 | Zoom in a little bit.
| | 05:06 | That's pretty good!
There's nothing to do here.
| | 05:15 | The ear right now, this is going
to have to be in this position.
| | 05:20 | Now you can see something that's immediately
apparent in that the actual shape of the ear
| | 05:25 | should be different, and we have a basic ear
that was done in a different viewpoint and
| | 05:30 | we should like to be able to
turn it and in dimension.
| | 05:33 | Now we can do this, but not right now. At
this point in the process all I want to do
| | 05:37 | is to get the actual spatial position of the
ear correct. Later on we'll go back and we'll
| | 05:42 | add this line art that will make the ear look
much better in this position. Padlock that,
| | 05:50 | and finally we'll do the nose.
| | 05:51 | I'm just starting to loop
around the side of the head.
| | 05:53 | I'm just going to push in a little bit further
back than we actually can see in the drawing.
| | 05:58 | Okay, and now the moment of truth, and that's
when we assign all of our classic motion tweens,
| | 06:10 | and we have issues here. We'll
deal with these as we go along.
| | 06:14 | As you can see, anytime you see dots that
means we're missing a keyframe or something
| | 06:17 | is wrong on the other end.
| | 06:19 | Let's look at it in color, and we have several
issues that are now hitting us full square.
| | 06:25 | We have the fact that some of the
shape tweening is behaving weirdly.
| | 06:30 | Instead of being subsumed by the entire thing,
let's just switch off all of our layers and
| | 06:36 | we know that the jaw is going to be a problem.
| | 06:37 | We have the neck first,
let's look at the neck.
| | 06:39 | The neck is being very good,
so we'll padlock that,
| | 06:44 | and the skull is very important as well.
| | 06:48 | And the skull is doing
something between here and here.
| | 06:51 | So let's lock down the skull, because it
really is very difficult to get anything working
| | 06:55 | if the skull itself is distracting us.
| | 06:58 | So don't forget to backup your file before
you proceed, because you don't want to lose
| | 07:02 | anything should we have a crash.
| | 07:04 | So we're going to add another Shape Hint here,
make a space, hit Enter, and now we have our
| | 07:09 | red flag to remind us.
| | 07:11 | Ctrl+Shift+H to apply a Shape Hint.
| | 07:13 | And I'm going to apply two, maybe we can get
away with just two of them here, A and B. Nope.
| | 07:22 | So let's try B here. That's better.
| | 07:25 | There's a slight little wiggle, I can see it
happening here where it's not totally clean,
| | 07:32 | so I'm going to add a C Hint there to tie
it down, just to be picky. That's working.
| | 07:40 | So now we have the jaw.
| | 07:42 | Let's put them in Outline, and the
skull, both working pretty well.
| | 07:46 | And the other big one that was causing the
problem was the jaw level, so let's go into
| | 07:50 | that and see what he's doing.
| | 07:52 | Actually, the jaw seems to be tweening fine.
| | 07:54 | The problem with the jaw was a layer
issue, so let's look at this in layer.
| | 07:59 | As we turn from here to here, the
jaw should really be behind the neck.
| | 08:03 | So let's find the point where that happens.
| | 08:07 | And I think the best place for that will
be right before here, at the very end.
| | 08:11 | So I think we need to make an extra keyframe
right about here and then drop the jaw onto
| | 08:19 | this lower jaw level down here.
| | 08:22 | At which point we go back to the
top and hit F7 to blank that out.
| | 08:26 | Now we right-click and go Remove Tween, and
let's activate the bottom layer, and let's
| | 08:32 | see what this looks like.
| | 08:35 | So some things are happening.
| | 08:36 | It's really not moving as smoothly as I like,
and I think the solution will be to fix the
| | 08:40 | actual shape itself.
| | 08:44 | So let's reverse that.
| | 08:45 | I'm going to push the jaw back up and thin
it out, because don't forget, we're meant
| | 08:49 | to be moving around the head.
| | 08:51 | Switch off everything for a second and
let's look at the position of the ear.
| | 08:55 | So the jaw should be moving from this point
here, so I made a mistake in terms of the
| | 09:00 | position of the jaw line.
| | 09:01 | Let's move it to about there, and
make sure it lines up with the skull.
| | 09:06 | It's very easy to fall out of place.
| | 09:08 | Be sure we have Snap to Objects on for this.
| | 09:12 | Okay, I'll make sure it tweens. It does.
| | 09:17 | Nice! Repeat that process.
| | 09:18 | I'm going to put a keyframe here, drop the jaw
onto the lower level and hit F7, right-click
| | 09:26 | and just remove that tween,
| | 09:27 | and let's look at that.
| | 09:30 | Let's see it in color. There we go.
| | 09:37 | Nice clean transition from here to there.
| | 09:42 | Let's look at the rest.
| | 09:43 | And I think we probably need to help
the eye transition off the screen.
| | 09:47 | The left eye at this point right here can
just cleanly disappear, so put an F7 in there.
| | 09:55 | The right eyeball, which we see here, I think
we need to give him another keyframe, so let's
| | 10:02 | put them back here and go Remove Tween.
| | 10:06 | And let's see if we can push
it over with the arrow keys.
| | 10:09 | Oops, just the eyelid,
the pupil, and the ball.
| | 10:16 | And use the Free Transform tool to
skew them really, really tight.
| | 10:20 | This is exactly what we did with the
left eye on the previous keyframe.
| | 10:27 | Gets very, very tricky to really get the handles
working when you get this thin with it. So there we go.
| | 10:35 | And then they'll disappear here.
| | 10:41 | And finally, we're almost there, the hair
on the top seemed to be moving fine, but he
| | 10:47 | also should really go to a lower level.
| | 10:50 | So let's copy him to this layer here,
hair top, holding the Alt+Option key.
| | 10:56 | Let's make a keyframe here, and then delete
the upper level, and that way we move hair
| | 11:02 | from this level, then he
transfers down to this one.
| | 11:08 | And then we have the right ear, the neck;
you can see it's not quite matching to the
| | 11:15 | ear, so let's go in and fix that.
| | 11:17 | See it in Outline.
| | 11:19 | Let's padlock this, go to the neck, and just
pull it behind the ear like that, and let's
| | 11:25 | hope that he still tweens. I think he does.
| | 11:30 | And the last element was the nose, and obviously
the nose very, very soon should go to a lower
| | 11:34 | level, probably immediately after this one.
| | 11:38 | So let's make another
keyframe right there for the nose.
| | 11:41 | Let's select these two frames, drag them down
to the bottom, and don't forget to put a blank
| | 11:48 | keyframe in here.
| | 11:50 | Switch off tweening just to keep things clean.
| | 11:54 | And there you have the
transition from the C to the D.
| | 11:59 | Now we need to make a little fix to the mouth.
| | 12:01 | Let's just blank the mouth out at this point, and
let's switch off the reference images, and there we go.
| | 12:11 | So it's from here to there.
| | 12:14 | There are a couple of spots that we need to
polish a little bit at the upper edge of the
| | 12:18 | hair there, but
fundamentally this is pretty sound.
| | 12:23 | And as you can see we've
been thinking as we went.
| | 12:26 | The first pass we simply got the thing
tweening. Don't worry about the layers.
| | 12:30 | Once you get the layers tweening correctly,
then you can worry about splitting one thing
| | 12:33 | off from another and trying to
figure out what goes where.
| | 12:36 | I've already done some of the thinking in
terms of trying to figure out, okay, what
| | 12:41 | elements here are going to have to move? When
I do this from scratch, believe me, it's a
| | 12:45 | dynamic process and I'll be changing my mind
as I go along, but trying to keep the overall
| | 12:50 | number of layers to the absolute minimum.
| | 12:52 | The good news is now that you've got this
layer hierarchy figured out, it's a lot easier
| | 12:56 | to get into the next pose,
the E, and the one after the F.
| | 12:59 | So that will be what we do in the next movie.
| | Collapse this transcript |
| Creating the E head (rear)| 00:00 | In the last section, we went from the profile
pose to the three quarter rear, and you may
| | 00:05 | remember that I mentioned that some of
the fringe was looking a little weird.
| | 00:08 | So let me go in really close very quickly
and I'll show you how I fix that, rather than
| | 00:13 | show you me messing around with
it for a good number of minutes.
| | 00:17 | So essentially this was the troublemaker and
it wasn't quite matching the green hair area.
| | 00:22 | Oops! I'll fix that, and
let's go through frame by frame.
| | 00:26 | So it's a bit of a cheat, it's--let me hide
this as well, it's kind of hard to see there.
| | 00:31 | So what I did was make a shape that it could blend
into and then hopefully on the next frame
| | 00:36 | pop off, and just get us to
where it doesn't catch your eye.
| | 00:40 | So not the most beautiful piece of animation
there, but it works, and then when you look
| | 00:45 | at it with the hair on top, it will
go past so fast you can't notice it.
| | 00:50 | So let's move on and do
the actual back view now.
| | 00:55 | And then I'm going to again hide everything.
Whenever I get lost in the maze of layers
| | 00:59 | I just switch everything off, and start from
something simple and I work my way back into
| | 01:04 | complicated things.
| | 01:05 | So let's look at the rear view reference image
and if you want it a bit dark you can switch
| | 01:10 | off the little white shaded area.
| | 01:13 | Now the process that we'll be doing is moving
the shapes back into match that and the layers
| | 01:18 | should be pretty similar for this I think.
| | 01:20 | So let's begin anyway with the neck, and first
things first we'll make a new series of keyframes
| | 01:25 | right beneath the E, and just start doing the
familiar process now, pulling the neck into
| | 01:32 | the right shape and that's pretty good.
| | 01:37 | And then once again, we padlock that, and the
jaw will be on this lower level, and there
| | 01:43 | is a nice little cheat we can do for this
rather than twist the jaw back into the shape.
| | 01:48 | This jaw shape would be pretty much the same
one as we began with, so let's go to the jaw
| | 01:54 | image on the first frame, and hold down the
Alt+Option key and just drag it, and we're
| | 01:59 | going to drag it to here.
| | 02:02 | And switch tweens off just to
keep things clean, and there we go.
| | 02:07 | So padlock that, the nose will be invisible, but
if you want we can still have it under there.
| | 02:14 | So it tweens itself off smoothly because we
still see it here and I want to do have Flash
| | 02:19 | take care of the tweening to get this off
screen, and we certainly wouldn't need the
| | 02:23 | nose after that, so we
can blank out after that.
| | 02:27 | The hair on the top layer, we'll be going
from this three-quarter view and this is this
| | 02:31 | area here, to again, this point.
| | 02:37 | So let's use the Free Transform tool
just to stretch it out a little bit.
| | 02:41 | Again, padlock that.
| | 02:43 | The left ear will now be coming back into
view, and this is where we get into a little
| | 02:47 | tricky area, but for now, bear with this as it
will look strange for a couple of sections.
| | 02:54 | But I just want to get the physical ear in
the right physical location, and let's join
| | 02:58 | it pretty much here at the top of the neck.
| | 03:01 | Let's pull it out, Snap on, and just put it
there, and we will create a new internal ear
| | 03:08 | graphic that will actually look
exactly like this but not right now.
| | 03:12 | Right now we're just
getting everything to move.
| | 03:17 | And if it bothers you that it looks
so strange, just hide that ear level.
| | 03:20 | Now the skull, again, another little cheat
that we can do here to speed things up.
| | 03:24 | The skull will actually be the same as the
skull from the very first, because it's rotating
| | 03:30 | back around into the same general direction
so that's just Alt+Option+drag that to
| | 03:35 | here, right-click, remove that tween.
| | 03:39 | And there is a little bit of asymmetry on
the neck, let's have a look at it, so let's
| | 03:42 | go and fix that. Close enough
I think, padlock that again.
| | 03:47 | So now I like where the
skull is, so padlock that.
| | 03:51 | The left hair is now going to be I think
pretty much gone, so I think the last we see
| | 03:56 | of that will be here, and again, we are
looking at this area, so let's F7 to get rid of it
| | 04:03 | and delete it from this.
| | 04:05 | And the next will be the right hair, and
even though we call it the right hair it's now
| | 04:09 | basically working as the entire
area of the hair that we are seeing.
| | 04:14 | So let's see if we can do some magic
and have this thing adopt that shape.
| | 04:19 | Zoom in a little bit and now I'm
just going use the Selection tool.
| | 04:26 | This may end up being something of
a challenge for shape tweening.
| | 04:31 | So I'm kind of confused now about where the
points are, so let's hit the Subselection
| | 04:35 | tool, click on this, and we have maybe some
more points than absolutely necessary, but
| | 04:40 | we've to keep them all here so that
this thing Shape Tweens more efficiently.
| | 04:43 | So I'm going to try to move this point a little
bit over to this direction and see if that works.
| | 04:52 | It's good. Let's pull that in.
| | 04:55 | You can pull the neck down.
| | 04:58 | Flash is being really tricky, very sensitive
about selecting my lines for some reason.
| | 05:03 | So if that happens to you, try not to get
frustrated, but it definitely is a little annoying.
| | 05:08 | So now I'm going to padlock these, padlock
that, and all these are empty layers, that's
| | 05:14 | good, and then the last
one would be the right ear.
| | 05:17 | And once again the right ear has the same
problem as the left ear, it's the wrong shape
| | 05:22 | for what we wanted to achieve.
| | 05:25 | So for now again, let's just move it out and
I'm going to put Snap on, and make sure that
| | 05:30 | this point here snaps to
where the neck joins the skull.
| | 05:36 | You may have picked up
on that I'm very picky.
| | 05:38 | For good reason, it really helps.
| | 05:40 | So what I'm going to do is to make sure that
the neck, let's make it color, lines up with
| | 05:46 | that point there, so that the jaw, the skull
and the neck all have that point of origin.
| | 05:52 | Let's unpadlock the ear now.
| | 05:55 | We can make that point of origin the same point of
origin that's where the ear attaches to the skull.
| | 06:00 | That won't always be possible, but
it's really nice if it can be done.
| | 06:03 | I think I've moved the
timeline there, let me get it back.
| | 06:06 | Let's do the same thing at this side too.
| | 06:08 | So again, padlock
everything except the neck, okay.
| | 06:12 | So again, select that and now we've three
points of origin, all connecting right there.
| | 06:19 | And I think let's put the ear there as well.
| | 06:22 | Super! Now let's zoom out.
| | 06:28 | Go to color, and we have
some mad ear weirdness,
| | 06:31 | but again, don't worry
about it, we'll fix that.
| | 06:33 | But first things first.
| | 06:36 | So let's activate Shape Tweens and Classic
Tweens as needed, and look at how few layers
| | 06:42 | were actually working in right now.
| | 06:44 | As you go to the rear view, you'll find that
there are fewer and fewer layers that are
| | 06:48 | actually needed as the eyes
disappear, and the mouth disappears.
| | 06:51 | Let's see what this looks like.
| | 06:54 | Once again, we have a couple
of rogues, so let's fix that.
| | 06:56 | The neck is being bold so I'm going to show him,
and once again, let's select the timeline
| | 07:04 | and go into Properties, and under Label make
a blank space, enter that, and then we've
| | 07:09 | our little red marker.
| | 07:11 | I'm going to go Ctrl+Shift+H, let's drag our
Shape Hints and I'm going to go A, B, C, and D.
| | 07:26 | Again, backup your file before you do this.
| | 07:31 | Shape Hints are the one thing that can
crash Flash very, very quickly I found.
| | 07:36 | And the jaw is doing a
something a little flaky.
| | 07:38 | So let's have a look at that.
| | 07:41 | Okay, so once again, add Shape Hints.
| | 07:48 | I think two Shape Hints
would probably enough for this.
| | 07:52 | Lovely, it's beautiful.
| | 07:56 | And the skull is acting up, so let's hit him
and again, pull a little marker in just to
| | 08:04 | let us know; A, B, and C, because I can see
once I activated hints, it flagged the hints that
| | 08:10 | were on the previous keyframe,
| | 08:12 | that went forward and connected with this one,
so that means all we have to do is really
| | 08:16 | follow the previous pattern,
will work for the next one I find.
| | 08:19 | So let's add them in, and be sure we add
them to the second, and that works, yeah.
| | 08:28 | A little bit of air appearing. See right here
where the hair isn't quite matching? So a couple
| | 08:35 | of things we can do.
| | 08:35 | Let's just bring that down a
bit lower and that covers it.
| | 08:39 | We could also push the hair up a little bit.
| | 08:42 | So the big outstanding issue
at this point, are the ears.
| | 08:45 | They are turning around in 360 degrees, and
obviously you can't do that with one static symbol.
| | 08:51 | In the next movie, I'm going to show you how
we can fix this and really, really sell the
| | 08:55 | illusion that we're dealing
with a dimensional object here.
| | 08:59 |
| | Collapse this transcript |
| In-betweening symbols manually| 00:00 | As we've already mentioned, the ears are giving
us trouble, so they are in their right physical
| | 00:05 | position, but they're just the wrong shape,
and that's obvious, because you can't have
| | 00:08 | the same direction of the
ear around 360 degrees.
| | 00:12 | So let's see how we will fix that.
| | 00:13 | So let's just click on the right ear.
| | 00:14 | We'll switch off everything; keep things
nice and simple and clean, except the jaw, the
| | 00:19 | neck, and the skull, so we can really
see the amount of motion on this thing.
| | 00:26 | We get to this point and I'm going to put
the reference layer on beneath, and going
| | 00:31 | to go to Outline mode, and let's
go in and take a look at this.
| | 00:35 | So already by this point here by the D
angle, this ear should look quite different.
| | 00:41 | So what we're going to do is go to the labels
at the top, right-click, and go Copy Frames.
| | 00:46 | And then go to the ear symbol, that's right
here, double-click on that, and now we're
| | 00:52 | inside the ear symbol.
| | 00:54 | And if you go into Outline mode again, we
can see next to the image that we want.
| | 00:59 | Now what I want to do is to create for the
ear symbol its own internal timeline and its
| | 01:04 | own internal selection of ears.
| | 01:06 | So let's make a New Layer and right-click
on the New Layer > Paste Frames, and then
| | 01:12 | just extend the timeline, hit F5, and right under
the D, here's where we're going to make a new ear.
| | 01:18 | So hit F6 for that.
| | 01:21 | And I don't like this light green, it's not a
really great color, so let's pick dark green
| | 01:24 | for this, so you can actually
see ourselves in Outline mode.
| | 01:27 | And there are a few
different ways of doing this.
| | 01:30 | Let's split this onto some
layers and make it a bit easier.
| | 01:32 | So what I'm going to do is make a new layer,
take this inner color, for example, copy it,
| | 01:38 | and on that external layer, on the upper layer,
paste in place, Ctrl+Shift+V, and actually
| | 01:45 | let's just do the same thing for, hold down
the Alt+Option key and copy that, and we'll
| | 01:51 | take it off this.
| | 01:52 | So just Eyedropper, paint
it out on the bottom layer.
| | 01:56 | So what we have now is two frames that are
of the same, with no internal line. On the
| | 02:01 | top layer we have the internal shape,
| | 02:05 | and now we can start playing around with it.
| | 02:08 | So frame 1 is great, it's
exactly the way it was.
| | 02:11 | Frame 2, let's start pushing that.
| | 02:13 | So I'm going to select everything, draw a
box around it, and with the Free Transform
| | 02:16 | tool, just pull this into place.
| | 02:19 | And even though it's slightly different, I'm not
going to heroically try to match the reference
| | 02:24 | drawing. I'd rather have this be a
little bit closer to the original state.
| | 02:28 | It will make a much better transition.
| | 02:31 | And let's thicken the highlight area. I am
switching Snap off so I can get a much more
| | 02:37 | fine level of control over this.
| | 02:40 | And this is why I like having this fellow on
its own layer, it just makes a little bit
| | 02:43 | easier to control, zoom in a little bit.
Actually if I can padlock that and select the layer.
| | 02:54 | It's getting a little too thin. I'd like it to
really match the line weight of the first one.
| | 02:59 | I don't like it when these feel like you've
just grabbed them and skewed them really thin,
| | 03:03 | it looks kind of lame, whereas this looks more
like an original piece of work, which it is.
| | 03:08 | Now this is on Frame 13, which you can see
down here, on the current frame marker.
| | 03:13 | So let's go back to the external clip, the
head turnaround, and on this I'm going to
| | 03:19 | click on that, and in the Properties panel, under
Looping, set to Play Once, and I'm going to set it to 13.
| | 03:28 | You can set it to Single Frame as well
if you prefer. What I'm going to do here is
| | 03:31 | try to make a few of these so that we can actually
get several different ear images working here.
| | 03:37 | So let's zoom out and already we have, I think
you get the general idea, the ear in a much
| | 03:42 | more believable position.
| | 03:44 | By the time we get to here, we need one more,
and this will be on the E frame of the internal,
| | 03:49 | and that's number 17, so let's click on that.
| | 03:53 | And again, notice, I'm not flipping anything
horizontally. These symbols, both the right
| | 03:57 | ear and the left ear, are in their natural
position. They're not being mutated beyond
| | 04:02 | having extra pieces of artwork inside them.
| | 04:05 | So let's make the E an absolute mirror of
this, but it will be the internal shapes that
| | 04:11 | are being flipped, not the symbol itself.
| | 04:14 | So in this case, we're looking at the back
of the ear, we don't need that inner shape.
| | 04:18 | So select the lower level, Modify > Transform
and Flip that Horizontally, go in really close.
| | 04:26 | And I'm just going to use Shift
and the Arrow Key to get it closer.
| | 04:31 | Click Snap to Grid on will get us to snap to
this little thing, View > Snapping > Snap
| | 04:36 | to Grid, because I want that to be exact.
| | 04:40 | It's a little bit off on this, so
let's pull that in as well, there we go.
| | 04:47 | How great is that? And now we could probably
use some in between frames between this and
| | 04:53 | this, but first let's see what we look like.
| | 04:56 | Also, the A here will probably start coming
in somewhere around here, but for now let's
| | 05:01 | just see what this looks like by itself.
| | 05:03 | So we have to correct the looping instruction, and
we're on frame 17, which you can see down here.
| | 05:09 | So let's go to Play Once, frame 17.
| | 05:17 | Now we go from the first frame to this
pretty quick, and then we have 1, 2, 3, internal
| | 05:24 | frames before we get to that,
and maybe one more in-between.
| | 05:31 | So what I'm going to do is show you
how to do a manual in-between in Flash.
| | 05:36 | So let's click on this, go in really close.
| | 05:40 | I used to do in-betweens by hand back in the day, and
it turns out to be a very useful skill in Flash.
| | 05:48 | Let me make a couple of empty layers,
and we want to go between here and here.
| | 05:53 | And I'm just going to make one
between these two extremes.
| | 05:58 | So let's make a blank here and here.
| | 06:02 | I'm going to make another empty frame
here, so this will be our first frame.
| | 06:07 | Hit Ctrl+C, Ctrl+Shift+V
to paste it into place.
| | 06:11 | Go into Outline mode so we have this proper
outline, which is the first frame, and we're
| | 06:15 | trying to in-between into this one,
so Ctrl+C and Ctrl+Shift+V here.
| | 06:20 | And let's hide the two layers.
| | 06:22 | So now we have copies on one layer
of our first and our second key.
| | 06:28 | And let's pick nicer Outline colors for these, we'll
pick medium green and medium blue, so we can see them.
| | 06:36 | Okay, so let's draw.
| | 06:40 | We'll use the line tools in Flash for this.
| | 06:42 | Let's make some marks here.
| | 06:45 | So I'm going to make this a hairline. I
like using a hairline color for this.
| | 06:49 | Let's put Snap on so we
really get precisely onto that,
| | 06:53 | and now we can switch it off.
| | 06:55 | And by holding the Alt key you can just pull
the line and make new points, and I think
| | 06:59 | we want to switch off any other snapping like Grid.
| | 07:03 | So if you have a tablet of
course, feel free to draw it.
| | 07:07 | I'm working with a mouse, so that even those
of you that don't have tablets can get the
| | 07:10 | general idea that you don't
have to have a tablet to do this.
| | 07:14 | And also padlock the two lower
layers so you don't interfere with them.
| | 07:20 | I'm going to make this pretty quick and
dirty, again, just to give the general idea.
| | 07:26 | Make a Snap back on, and if it's hard
to see then hide the other temporarily.
| | 07:36 | Okay, and then one more, that will just color
this for the highlight area that defines the
| | 07:45 | edge of the ear so we can see it.
| | 07:47 | And then Snap off.
| | 07:50 | Nice! There it is.
| | 07:56 | So now let's color it.
| | 07:57 | I'm going to get rid of these two and
drop that, let's see where we will put it.
| | 08:03 | So we have this and we have this, so let's
just drop this down to here, and move that
| | 08:10 | blank frame to there.
| | 08:12 | So we're going from the start position to the skewed
forward, to this intermediate position, to that one.
| | 08:21 | So now I'm going to use the Eyedropper just to
grab the colors and paint, and let's double-click
| | 08:28 | on the lines to get rid of them.
| | 08:30 | And now when we go back to the head
turnaround, there is the intermediate frame.
| | 08:36 | And of course you can add as many of these
as you like, and probably one more on each
| | 08:41 | side wouldn't hurt.
| | 08:42 | Let's go back into full
color so you get the idea.
| | 08:49 | And you might think how few--how many of these
do I need? It's really a matter of your personal
| | 08:54 | taste or the style of the
project that you're working on.
| | 08:57 | It depends on how
naturalistic you want it to be.
| | 08:59 | The exact same process
will apply to the left ear.
| | 09:03 | So what I'm going to do in the meantime is
leave the rest of this to you as an exercise.
| | 09:07 | I will provide the final artwork with the
smooth in-betweens, so that you'd be able
| | 09:13 | to see that in the exercise files.
| | 09:15 | But this is a really, really cool trick to
have up your sleeve and it will really help
| | 09:20 | you to sell all kinds of illusions that
will otherwise simply would not be possible.
| | 09:25 | Small thing, we have to deal with the
layering a little bit, but again, that's something
| | 09:28 | that I'm going to leave to the final fine-
tuning pass of this particular section.
| | 09:33 | So with that, I think we're ready to move
on to--first of course, please have a go at
| | 09:38 | fixing the left ear, and feel free to
use some of these as reference of course.
| | 09:44 | Don't copy this horizontally onto the left ear,
that's a shortcut that you really should
| | 09:48 | avoid, but do feel free to take the internal
timeline and copy that into the left ear symbol.
| | 09:54 | That's not a problem.
| | 09:56 | So with that, we'll move on.
| | Collapse this transcript |
| Creating the H head| 00:00 | If you are back then you'll notice that we
have both ears sticking out, and I left you
| | 00:05 | with a couple of comments that I was going to
create some more in-betweens for this ear.
| | 00:10 | It is the same process over and over again.
| | 00:11 | Now if you have a different way of
doing it, then by all means do that.
| | 00:14 | There's just no one way of doing it, but the
trick is just to keep the transition so smooth
| | 00:18 | that the ear itself doesn't pop at any point
and I think that's pretty smooth. There might
| | 00:26 | be a little spot here that we can fix.
| | 00:30 | What I did was, I took the end
state from the previous class.
| | 00:34 | And I just added two extra drawings in between,
but I think this will look a little more forgiving
| | 00:38 | if we put a bit of meat on the edge
of the ear there, so we get this.
| | 00:45 | And you notice how the dark area
inside the ear becomes a sliver?
| | 00:50 | The beauty of having that on a separate
layer is that you can move it so easily.
| | 00:53 | Whereas if it's all on one layer,
it can be kind of tricky.
| | 00:56 | Okay, so back to this. The solution for the other
ear, I don't know if you gave it a go or not.
| | 01:02 | It's pretty simple; when you get to the point
where the ear starts to appear from behind
| | 01:06 | the head, simply go from
this state to that state.
| | 01:10 | So ultimately you could have a whole
series of ears in that are pivoting.
| | 01:13 | As long as the pivot around the center point,
then you should have a pretty solid piece
| | 01:19 | of animation to work with.
| | 01:21 | So let's go back.
| | 01:22 | There was one other outstanding issue, and
that is we're looking at the layer hierarchy
| | 01:27 | here, that ear is too high.
| | 01:29 | So at this point I think we'll make a final
keyframe here for the ear on the top layer
| | 01:34 | and then we will move this ear down onto
the lower ear level, ear right down here.
| | 01:41 | And let's put a blank keyframe in there.
| | 01:43 | I'll just remove that tween and I
think we are ready to proceed.
| | 01:48 | If you remember our clock animation, let's
go back to the Library and go to the hd 3
| | 01:54 | clock symbol, and if you scrub through there,
we already created our B head, which is the
| | 01:59 | same as the 3 o'clock position.
| | 02:02 | And luckily for us, the 9 o'clock position is
the same as the H head. There's some clean
| | 02:06 | up too we could do here.
| | 02:07 | Take the reference folder and
just drag it back to the bottom.
| | 02:10 | It's easier. It makes them
all consistent that way.
| | 02:13 | If you go from all of the symbols then
the head folder should be on the top.
| | 02:17 | So let's go back to the clock.
| | 02:19 | Back to our 9 o'clock position and let's select
all of these, right-click, Copy Frames, we
| | 02:27 | will go back to our turnaround, and go to the H
position and go from nose to nose, right-click
| | 02:33 | and Paste Frames.
| | 02:35 | And let's get rid of this insert that gets
created, and here we have almost a freebie.
| | 02:47 | So now it's a question of going in and
fixing glitches, and I see the jaw is misbehaving.
| | 02:54 | And it's misbehaving so badly, it's very hard
to see what else is happening, but I think
| | 02:57 | the hair here as well is doing something a
bit funky, so let's go in and hide everything.
| | 03:03 | Once again, you will see I just switched
everything off and just find the trouble spots.
| | 03:08 | So the neck looks great, padlock that.
| | 03:12 | And I think let's move up
all the way to the jaw.
| | 03:14 | And this is the jaw level, and notice that
comes with shape hints built-in, because they
| | 03:19 | were shape hints in the frames that we
were copying, so that could be an issue.
| | 03:23 | Let's hide everything but for the jaw, and go
Ctrl+Shift+H, and of course, this creates
| | 03:28 | a C hint that we don't need.
| | 03:29 | So just right-click on that and Remove Hint.
| | 03:33 | And then we just correct the other hints.
| | 03:36 | Make sure they are exactly right.
| | 03:40 | And then you can see the hair
here is also causing problems.
| | 03:43 | So let's find the hair right level.
| | 03:46 | Let's find that, Ctrl+Shift+H,
because it has the hints built-in.
| | 03:53 | Remove the new one that has just been added,
| | 03:55 | scrub forward, and then we just
correct all of these. There we go.
| | 04:04 | So now when we look at everything, that's great! And
we can just select all the eyes, reactivate them.
| | 04:18 | The hair needs a little bit of help.
| | 04:20 | Again, just switch everything off
and let's look at that by itself.
| | 04:23 | It also comes with hints built-in, So Ctrl+Shift+H,
remove that hint, and then fix the others,
| | 04:33 | and it should snap to
various little points in there.
| | 04:39 | Okay, the ear is doing something weird,
because of course we shifted the ear layers.
| | 04:44 | So let's do a little patch for that.
| | 04:48 | So what would be the best way to do that? The
ear really has to be on top at this point,
| | 04:52 | because that's the left ear, and it is on top,
but we are trying to tween into another ear
| | 04:57 | that's lower, because it has to be on
a lower level in its default state.
| | 05:01 | So let's make a duplicate of that, Ctrl+C.
That's one way of doing this, click on the
| | 05:05 | slot and Ctrl+Shift+V to
paste in place. There we go.
| | 05:12 | And let's look at this in Outline and see
if anything else is doing something weird,
| | 05:17 | I think we are good.
| | 05:19 | So that was pretty straightforward.
| | 05:21 | So now we are almost there, we have
this section here to contend with.
| | 05:27 | I think other than that we
are very near to being done.
| | 05:31 | And I think there's one outstanding
thing, and that's the neck area.
| | 05:35 | So let's click on the Reference level,
switch off everything but the neck.
| | 05:40 | Let's go to Outline.
| | 05:41 | I thought so. If you remember from the clock,
we tied down the neck, whereas here the neck
| | 05:46 | should be rotating with the torso.
| | 05:48 | Oops, I switched Snap off. There we go! And now
we will reveal everything again, and fantastic!
| | 06:02 | So another little area here where see that
that corner of the hair appearing up, so we
| | 06:07 | might want to do something like bring this
down just a little bit, of course, we have
| | 06:12 | to fix the hints.
| | 06:14 | There is always something. Same process,
again with hinting, backup your files. There we
| | 06:28 | go! So, super! Next we'll move onto the F and
the G directions, which are very similar to
| | 06:35 | the C and the D directions, but they have
their own little things to watch out for,
| | 06:40 | so we'll do that in the next movie.
| | Collapse this transcript |
| Creating the G head| 00:00 | We have two final major head
directions left to do, the F and the G.
| | 00:05 | The G is like a mirror image of the C
profile, and the F will be a mirror image
| | 00:11 | of the three-quarters rear on the other
side. And I'd rather do the G first and
| | 00:15 | work from this side back in towards the
middle. It's the same workflow that we
| | 00:19 | followed on the outward side of the
project, so let's do that, and it's also
| | 00:23 | better to have a profile than a
three-quarters rear view I find.
| | 00:27 | So let's create a little reference
layer that we can use based on this.
| | 00:33 | So what I'm going to do is select all
of these layers, make sure nothing is
| | 00:38 | Padlocked, and go Ctrl+C for copy.
| | 00:41 | Let's make a new layer down here, and
I'm going to put in a blank keyframe on
| | 00:48 | this layer, and go
Ctrl+Shift+V to paste in place.
| | 00:52 | Can't see much right now, so let's
hide this, and let's put this layer in
| | 00:57 | Outline Mode, and then let's flip it
horizontally, Modify > Transform > Flip
| | 01:03 | Horizontal, and let's check this
against our reference image down here.
| | 01:08 | So I'll just nudge it using the
arrows until it lines up, pretty close.
| | 01:13 | So let's hide that again, and let's pick
a better outline color, because pink is
| | 01:17 | too hot, it's really overwhelming.
| | 01:19 | So I'm going to go to like maybe a
slightly darker gray, that will do, and
| | 01:24 | then Padlock that, and now we're going to go
through these layers and match them to this.
| | 01:29 | And so let's make our G key--actually
what we should do is copy the C--hold down
| | 01:36 | the Alt/Option key, and drag it
over to the G level, and there we go.
| | 01:42 | So we'll go through these
one by one and build this up.
| | 01:45 | So here is the neck level.
| | 01:47 | Put Snap on so we get these
points more accurately. It's good.
| | 01:56 | Snap off to get that little closer, and go in
really, really close to get that just right.
| | 02:04 | Kind of hard to see where it should be
ideally, but I'm thinking somewhere about there.
| | 02:12 | And notice there are two little circles,
that's because if you look at the layer
| | 02:15 | 2 reference image, they're on
that, those are from the eyelids.
| | 02:18 | They're really getting in
the way, so let's delete them.
| | 02:21 | They're creating these little circles
that are really annoying, so good riddance
| | 02:24 | to that, and let's continue.
| | 02:27 | So we've got the neck done, and
just Padlock an Outline as we go.
| | 02:31 | I like that because then you can see
you're making progress. Next one is done.
| | 02:35 | The left ear, let's move
the left ear, there it is.
| | 02:43 | So we'll work with this one instead, so let's
ignore this layer for now and just keep going.
| | 02:48 | I want to hide it and figure out later
when we have everything else in color.
| | 02:52 | Keep Padlocking and going if
there's nothing to do on these layers.
| | 02:55 | And next we have the skull.
So let's go in really close on that.
| | 03:01 | Put in an Outline, and now I'm just
going to use the Selection tool, Snap to
| | 03:05 | Objects, and line them up perfectly.
Check on the other side. Great!
| | 03:15 | And the back of the skull is really
misbehaving here, so let's pull that down.
| | 03:23 | You know what, there's a
quicker way of doing that.
| | 03:25 | I'm going to hit undo for a bit, and
just reverse that horizontally, Modify
| | 03:29 | > Transform > Flip Horizontal, because
that's a shape, not a problem to flip shapes.
| | 03:36 | That gets us a little bit
closer to where we want to be.
| | 03:40 | And Snap back on, get those points
lined up, and then Padlock that, the
| | 03:47 | left hair level. Let's see.
Right, because we're going from here to there.
| | 03:58 | So what I'm going to do actually is
delete that and work from this one backwards.
| | 04:05 | So let's hold down the Alt/Option
key and drag that to here, because it's
| | 04:08 | closer to the shape I want than the previous
one, and let's just drag it to where we need it.
| | 04:18 | There we go, and let's put
Snap off for a moment. Okay.
| | 04:32 | And the right side hair, and
again, this is being a flip of the other
| | 04:35 | side, this is really wrong, so let's
just delete that, and I think the left hair
| | 04:41 | from this side will be closer
to what we need, that was like this one.
| | 04:45 | Let's Ctrl+Copy that, and Ctrl+V to
bring it in here for the right side.
| | 04:53 | And of course flip it horizontally, and
I'm going to use the Free Transform to
| | 05:01 | squish it a little closer to
what we need, zoom in a little bit.
| | 05:04 | Be sure we have Snap to Objects on
for this, and switch Snap off just to go
| | 05:12 | for the fine-tuning.
| | 05:13 | The really close work usually Snap
is a little too aggressive for me.
| | 05:17 | Okay, let's try that,
Padlock these, keep going, jaw.
| | 05:22 | And the jaw will probably click us again,
Modify > Transform > Flip Horizontal,
| | 05:29 | and then just drag it to where you need.
Let's check that in Outline.
| | 05:33 | Pretty good. And I'm going to
zoom in, Snap on, and drag that in.
| | 05:38 | Click, Padlock, and the mouth.
| | 05:44 | That's how I look at the mouth, not in
Outline, so we can see it a little more clearly.
| | 05:48 | Always be careful you don't
slide out of the right column.
| | 05:53 | The left eye will be, of
course, the exact opposite now.
| | 05:56 | Probably, I think the best way of doing
the left eye, instead of working
| | 06:01 | from the squished one, from the
other side, it's simply too twisted.
| | 06:04 | So let's just use the left eye
that's in the H column, and the same with
| | 06:09 | the right eye as well.
| | 06:10 | So what I'm going to do instead is go
over and copy all of these here, 1, 2,
| | 06:16 | 3, 4, 5, 6, 7, 8, Alt/Option, and
drag them to here, and let's now go into
| | 06:23 | Outline so we can really see them, and zoom in
tight, really a much better way of doing this.
| | 06:28 | Let's do the right eye first.
| | 06:33 | I'm just going to slide that out of the way
for the moment, and then just select a big
| | 06:37 | bounding box around all the blue,
when we have all four levels high-lit.
| | 06:41 | Let's bring that over, Free
Transform, and there we go.
| | 06:47 | For the left eye, or the blue eye,
go in really close and bring the pupil in.
| | 06:56 | Notice I haven't even
flipped the pupil horizontally.
| | 07:01 | It's something that you're welcome to try.
| | 07:03 | If you think that you can make
flipping work horizontally, then give it a go,
| | 07:07 | and sometimes you just do it in the
course of creating the animation, but when
| | 07:11 | rigging a character, I
just find it so problematic.
| | 07:16 | So it gets confusing when you go
inside and outside of symbols and one is
| | 07:20 | flipped horizontally, and the one
side that is not and the one side that is
| | 07:24 | you end up really disoriented.
| | 07:26 | There we go, the green eye is in place,
let's move the pupil right out to the edge.
| | 07:32 | Now, the eyebrow has become really
twisted around, so let's just delete
| | 07:35 | that, and I think the easiest way to
get that back is to copy it from its
| | 07:40 | cousin in the C column.
| | 07:42 | So let's go over there, select that,
Ctrl+C. If you have a problem selecting it
| | 07:51 | in Outline Mode, which I just did,
then just go back into Solid Color Mode,
| | 07:55 | Ctrl+C, go back to the eye right brow
level, Ctrl+V, Modify >
| | 08:04 | Transform > Flip Horizontal, and you can
track it back in there, and I think the
| | 08:10 | right eye should be a bit
thinner, so let's go in really close on that.
| | 08:14 | Let's go into Outline, and I'm going
to just select those three layers, make
| | 08:18 | them really close, actually skew it
just a little bit. Let's try that.
| | 08:31 | Then Padlock that, the hair on the
top of the head, and that will also be a
| | 08:36 | Modify > Transform > Flip
Horizontal. Padlock an Outline.
| | 08:45 | Outline everything, the ear left, and I
think on this one we should be
| | 08:51 | seeing the left ear, and right
now, I think it's down at this point.
| | 08:57 | So let's delete that, it's really
peculiar, and work with this ear up here.
| | 09:02 | This is the right place for it.
| | 09:04 | So hold down the Alt/Option key and
drag it to here and pull it over, and Free
| | 09:09 | Transform to skew, Padlock that, and Outline.
| | 09:15 | And above that we have the right ear,
which I don't think we need at all.
| | 09:19 | The right ear at this point
should be completely invisible, so I'm just
| | 09:22 | going to delete that, and Padlock, and
now the nose should be the last element.
| | 09:29 | Let's pull that over.
| | 09:30 | Do not turn the nose around
horizontally because it's a symbol, but we can
| | 09:37 | certainly skew it like this.
| | 09:45 | Okay, and now take a deep breath and hide
the reference and see what this looks like.
| | 09:51 | That's pretty good, and we didn't
have to think too much, most of that was
| | 09:58 | simply be just grinding through,
matching the reference layer.
| | 10:00 | So all I have to do now is fix that
neck, and I think the rest of it's
| | 10:05 | looking pretty stable.
| | 10:07 | So let's just select the neck layer
that's there, and Ctrl+Shift+H to select
| | 10:21 | some Shape Hints, and we'll just apply them.
| | 10:27 | Don't forget to backup your project
first before you start applying these in
| | 10:32 | case anything bad happens, like a crash.
| | 10:34 | Don't forget that we should also add a
Label here in the Properties panel just
| | 10:39 | an empty blank space just to create
that little red flag, and let's look at
| | 10:43 | the whole thing again.
| | 10:47 | There seems to be a slight--I'm not
quite sure what this area here is doing,
| | 10:51 | let's have a look at that. Now it's okay.
| | 10:53 | It's certainly doing a little pop after,
that's more to do with the position of the key here.
| | 11:01 | So let me go in and play with that for
a second, kind of little eye-catching
| | 11:09 | when that transition happens. That's better.
Okay. Once more, fantastic!
| | 11:23 | Okay, so we have one last head to do, and that's
the F head, which is a duplicate and reversal of the D.
| | 11:30 | So in the next movie I'll
show you how to do that.
| | Collapse this transcript |
| Creating the F head| 00:00 | So, happily, we only have one
final head direction left to do.
| | 00:05 | If you the adventurous type, and you
feel like you've pretty much picked up the
| | 00:09 | method by now, feel free to do this by
yourself and skip over this movie and see
| | 00:14 | if your solution to the problems and
the puzzles involved will be similar to
| | 00:18 | mine or different, better, or worse.
| | 00:20 | So in the meantime, for those of
you who still need to see more of this
| | 00:24 | procedure, stay tuned, and I'll
walk you through this process.
| | 00:27 | There might be a few little
pitfalls still ahead of this.
| | 00:29 | Bear in mind that we do have to take
care of not just one transition from the
| | 00:34 | F to the G, but the one backwards as well,
from the F to E, and that's the tricky part.
| | 00:39 | But let's just get
cracking and see what happens.
| | 00:41 | So what I am going to do is similar to
the previous section where we used a flip
| | 00:48 | of the opposite head as a
reference, we'll do the same thing again.
| | 00:52 | So I am going to put a little blank
frame in here and the F is going to be a
| | 00:57 | direct mirror image of the D.
| | 00:59 | So let's select all of the D heads,
I'll go Ctrl+C, making sure none of the
| | 01:05 | layers are padlocked of course, and
let's go to our new little reference
| | 01:09 | level, Ctrl+Shift+V to paste in place, and you
can see it in there, it's now a little faint gray.
| | 01:16 | So let's activate the reference image
and go to the layer 2 here, that will just
| | 01:22 | paste it in, go Modify > Transform >
Flip Horizontal, and then we just nudge it
| | 01:27 | with the arrow keys until
it's pretty much where we like.
| | 01:31 | Now, we can get rid of the line art in
beneath and padlock the reference, and
| | 01:36 | the next step will be, let's unhide
everything, let's grab the entire D column,
| | 01:42 | hold down the Alt or
Option key and drag it to here.
| | 01:46 | So the next thing that I am going to
do is because it's kind of intimidating,
| | 01:49 | when you see all these layers and these
keyframes popping from level to level,
| | 01:54 | and you just wonder, "What am I dealing with here?"
| | 01:56 | One of the easy way of getting a good
feeling for how it's going to work is just
| | 02:01 | make it all tween and see what happens.
| | 02:04 | So I am just going to go through
all these layers and just activate the
| | 02:07 | tweens, there are some layers that
are now standing by themselves, let's
| | 02:10 | figure those out in a moment.
| | 02:12 | There is even a layer here that doesn't
seem to be doing anything, so we'll get
| | 02:17 | to that in bit as well, and do
some troubleshooting with there.
| | 02:20 | Okay, let's see what this looks like.
I am going to hide that Reference layer.
| | 02:28 | So we spin to the back view. Ah!
| | 02:30 | Of course, we haven't matched these
horizontally yet, so let's go in and do that first.
| | 02:38 | So let's go into the Reference layer again.
| | 02:42 | Very quickly, we are going to go through
the layers and move them into position.
| | 02:47 | Select the nose, swing him over there,
and let's put these into outline, easier
| | 02:53 | again to see exactly what we are doing,
padlock and the familiar process now.
| | 02:59 | And the beauty of this is once we have
the shapes selected, the shapes can then
| | 03:02 | be transformed
horizontally, but never the symbols.
| | 03:07 | Padlock that, same with the neck, Modify >
Transform > Flip Horizontal, same with the hair.
| | 03:18 | The left ear should now be on the
uppermost level, and this is a holdover from
| | 03:26 | the other side where it was on the bottom.
| | 03:28 | Let's see where we are coming from and
going to, and it was when it was behind
| | 03:32 | the head, and now it's spinning
around, and that should be on top.
| | 03:36 | So I am not really 100% sure about this
fellow, there is another ear up here, so
| | 03:41 | let me just hide him for
the moment again, keep going.
| | 03:44 | These little outriders we can leave
alone for the time being, the head
| | 03:48 | let's flip that as well, Modify > Transform >
Flip Horizontal, because it's just a shape.
| | 03:53 | I don't want to affect
anything other than itself.
| | 03:58 | Now we have the two hair
layers, hair Left and hair Right.
| | 04:01 | What happens when we take the head from
one side, from the D, and we transport
| | 04:06 | it over to the F is that basically
these reverse in hierarchy, so that the left
| | 04:11 | becomes the right and the right becomes
the left, so here is a quick and dirty
| | 04:15 | way to fix this, simply drag one key up,
the other down, move this guy over.
| | 04:20 | I think we'll just reactivate shape
tweening so that should be safe enough.
| | 04:25 | and then of course, we have we have to
flip these horizontally and the same for
| | 04:31 | this guy, Flip Horizontal, okay, just keep going.
| | 04:39 | These are all empty, and I think you
might have a little issue with the left eye
| | 04:46 | that this eye here is his
physical left eye, or the blue eye.
| | 04:49 | So let's not use any of
the green eye artwork here.
| | 04:54 | So let's just select these and delete them.
| | 04:57 | And actually let's switch off the
tweening, we don't need that either.
| | 05:01 | Instead, what we'll do is use the
blue eye level from the previous or the
| | 05:05 | subsequent key, this one here, so
Alt/Option-drag over, and now I am
| | 05:13 | going to use Free Transform to push this
into place and match the reference, and
| | 05:20 | let's move that pupil out just to the
edge, much better, and let's see if we can
| | 05:25 | match this very twisty eyebrow, and
that's pretty good, and let's see if we can
| | 05:37 | figure out what's going on with this ear.
| | 05:39 | So now we have the ear Right, and we
shouldn't be seeing much of an ear Right on
| | 05:44 | this fellow, because it will be the
right ear, was not beneath the head.
| | 05:48 | So for the moment anyway let's just
delete that, and we have the nose.
| | 05:53 | This is the upper nose level for the A
direction, we don't use that, and I am
| | 05:56 | going to put in some blanks here
just to keep everything consistent.
| | 06:00 | So let's see, I haven't done any major
thinking I have just been repositioning
| | 06:03 | things, so let's go to color, see what happens.
Now there are some flashing going on.
| | 06:09 | But you get the idea of the basic
motion, and I find this is actually a very
| | 06:12 | comforting way to work because you can
see most of the work that really needs to
| | 06:17 | be done now is just stabilizing
some of the weird flashing shapes.
| | 06:21 | So let's do that that first.
| | 06:23 | So again, switch everything off, and
let's go to the jaw, and I think we have a
| | 06:28 | level issue with the jaw to fix,
so let's leave that for the moment.
| | 06:31 | You can't really fix levels when things are
doing this, so it is a question of that workflow.
| | 06:36 | So now we are on the neck level and
their shape pins on it, we can tell because
| | 06:40 | we put this little flag on there.
| | 06:42 | So let's hit Ctrl+Shift+H, and of course
they've all fallen out of place because
| | 06:46 | we reversed the artwork horizontally,
so let's right-click on the E and remove
| | 06:51 | that, but we want the other four, so
let's just put them back to their corners.
| | 06:56 | Again, I will warn you, back up your file before
doing this, because this is a crash risk event.
| | 07:03 | Okay, I lost my hints there, so I'll go
back to the first one, Ctrl+Shift+H to
| | 07:08 | make a new one, remove that, a bit
of a workaround this, but it works.
| | 07:12 | Let's move these, I want to make sure
that we absolutely have these on the
| | 07:16 | corner, looks good, on both directions,
check them back and forth, and let's
| | 07:23 | go for the hair on the top is also
facing the layering issue, so that has to
| | 07:28 | be fixed, and there's probably another hair
top layer up here, which we'll combine with this.
| | 07:33 | But for now, I think we can let that
slide. Let's look at some more layers and
| | 07:38 | see if there's something
bad happening on the hair.
| | 07:43 | So let's go to the hair Left level.
That seems to be working to here fine.
| | 07:52 | The hair Right is doing something strange.
| | 07:55 | Let's figure that out, see
where things are breaking.
| | 08:01 | So the jaw is doing something very strange.
| | 08:04 | Let's fix that, yeah, so they need
shape hints, so we are going to put in a
| | 08:13 | little label in the Properties panel
to put a flag on there, Ctrl+Shift+H,
| | 08:17 | two of them for an A and the B, I am going to
apply them, and there are two over here as well.
| | 08:25 | So I'll fix them, whatever they are doing.
Okay, so we fixed that.
| | 08:36 | So this ear seems to be stranded,
and we probably are in need of another
| | 08:45 | right ear to fix that.
There is not one up there.
| | 08:48 | So what I am going to do is go Ctrl+C,
Ctrl+Shift+V to paste in place and
| | 08:55 | just slide it off like that and then put a
black frame there and Create Classic Tween.
| | 09:02 | So we have one last thing that's sticking.
| | 09:03 | Now let's go from the E to
the F, seems to be working okay.
| | 09:13 | Okay, now the hair Left.
| | 09:18 | Sometimes you get confused or lost is
it better to work backwards from the end.
| | 09:23 | I found it very easy to work forwards
from the A and to the E, and then it can
| | 09:28 | get really bit of a puzzle in here.
| | 09:30 | So one way to work is to work backwards
from the A, through the H, to the G, and
| | 09:34 | now we are looking at the left side of
the hair, into this state, and we want to
| | 09:39 | work this into a large mass of hair here.
| | 09:43 | So let's see if we can
find that, and there it is.
| | 09:47 | So we may need to duplicate this
and have it in more than one spot.
| | 09:50 | So let's copy that, paste it here and
Create a Shape Tween, see if that works.
| | 09:57 | We may need to add some hands onto this.
| | 10:02 | So let's hide everything, snap on,
Ctrl+Shift+H to get us a hint, and move that
| | 10:10 | in the corner, and in this case one
hint seems to be enough. There is a little
| | 10:15 | bit of weirdness going on here,
so I'll put one more down.
| | 10:19 | Again, back up your file
before you do this, and that's okay.
| | 10:26 | Okay, so now when we look at the whole
thing, it's starting to look a lot more solid.
| | 10:33 | I'll padlock these and outline them,
and there are some very strange
| | 10:42 | business going on here.
| | 10:43 | I suspect this probably won't even be
noticed, but we do have a duplicate anyway
| | 10:48 | of this hair right mass, so it's
possible that we can just switch that off and
| | 10:53 | then jump to the layer beneath, it's
exactly the same, again, kind of like a
| | 10:58 | relay when one transfers into the other.
Let's try that and see if it works.
| | 11:04 | And the rest of the column is pretty
empty, and there's the F, we have four more
| | 11:10 | here, for the left eye, okay.
| | 11:13 | So now I am going to put color
on again and see how close we are.
| | 11:20 | So the pops note that are still
outstanding are because of level problems, so
| | 11:24 | let's work backwards from the end to the center.
| | 11:27 | So the jaw is on top as it should
be, as we go back, still on top.
| | 11:33 | We need to get to the point where the
jaw is on the bottom, which is down here.
| | 11:37 | So we have a jaw level on the bottom,
and we have a jaw level on the top up
| | 11:41 | here, so some kind of handover has to happen.
| | 11:44 | So let's hold down the Alt/Option key
and drag this down to here and then hit F7
| | 11:49 | there, because we don't
need the jaw after that point.
| | 11:51 | Let's see what this looks like.
| | 11:53 | So that's where to find out at what
point the jaw needs to be above, and I
| | 12:00 | would think right here.
| | 12:03 | So what I am going to do is make a
keyframe here and then select that and
| | 12:10 | drag it to the upper jaw level here
and then blank it out here and then
| | 12:18 | delete this as well.
Let's see what that looks like.
| | 12:23 | I think when we add the ear to cover
that little join, I think we need one more
| | 12:28 | left ear right at the spot.
| | 12:31 | So let's see, I'll go into Outline mode. With the
left ear here, I think we can do better than that.
| | 12:36 | Don't forget, too, we have a bottom ear
level and what happens is let's follow
| | 12:39 | this thing around in 3D NURB from the beginning.
| | 12:41 | We have the left ear, and as he
rotates, the ear is beneath, it's still
| | 12:47 | beneath the head, still beneath the head,
still beneath the head, until here, and then boom!
| | 12:55 | At this point, we need another left ear
on this level, right here on that square.
| | 13:01 | So what I am going to do is drag that
left ear up to here, back down to the bottom.
| | 13:08 | I am very carefully moving up and
down, trying to catch these layers.
| | 13:11 | This ear symbol, I think we can do
better than that, so I am going to delete
| | 13:15 | that, and I am going to put in a blank
frame there, so this is the last time
| | 13:19 | we'll see the left ear beneath, and
now we are going to transition up here to
| | 13:23 | the upper left ear, as it
begins to rotate around.
| | 13:26 | So we need to add one in here.
| | 13:28 | So let Flash do, and I am going to
clear that keyframe, right-click and Clear
| | 13:32 | Keyframe, and there is a better
position for it, hit F6 to keyframe that, and
| | 13:37 | let's move that into place, and now
we have the ear moving around solid.
| | 13:44 | You see what I've done here, even if
I was doing this by myself in an empty
| | 13:48 | room, I would talk this through slowly
and very carefully, trying to reason the
| | 13:52 | position of all these objects, and
now as we scrub through, it's really
| | 13:57 | starting to come together.
| | 13:59 | On this transition from E, through F and G
is starting to really look a lot more solid.
| | 14:05 | It's not there yet, but
it's really getting close now.
| | 14:08 | The big scary pops and
problems are starting to go away.
| | 14:12 | So let's figure out the last few bits here.
| | 14:15 | The hair on the top is disappearing, if
you follow through there, it's popping
| | 14:18 | on and off. That's just another layer issue.
| | 14:21 | So here we have the hair on top, and
as we move to here, we have the hair on
| | 14:26 | this level down here.
| | 14:28 | So all we need to do is to duplicate
the hair from this level, and one way of
| | 14:33 | doing it, Ctrl+C, and let's go down
to the lower level, here it was that
| | 14:38 | again, easy to get lost, hair top
to the hair top level down here,
| | 14:43 | Ctrl+Shift+V to paste that in and hit
F7 after that to blank it out, and let's
| | 14:52 | see how this behaves.
| | 14:55 | And at least it stopped disappearing,
so we have definitely improved it, and I
| | 15:01 | think we might want to keep
the hair on top a little longer.
| | 15:05 | I think to here, probably to here,
the hair should still be on top.
| | 15:10 | So let's go down to this level again,
I am just going to grab this and Alt or
| | 15:14 | Option and drag all the way to there.
| | 15:17 | I think that looks stronger, and then
it's just a piece of housekeeping to
| | 15:22 | get rid of all of these, hit F7, so
now the transition happens on this
| | 15:26 | frame to this frame.
| | 15:28 | So this is the kind of operation
that you have to follow through.
| | 15:33 | I am still seeing a bit of weirdness here.
| | 15:35 | So let's have a look, the hair is on the
top, looks fine until here, until here,
| | 15:41 | and I think we are missing maybe a
piece of the hairline, that could be it.
| | 15:47 | So let's hide him for a moment, there it is.
| | 15:51 | So, this area here, I click on it so I
can see it and put it in outline, follow
| | 15:57 | it through, frame by frame, and it's
spinning around right there, and that's
| | 16:01 | what's making that a little color pop.
So let's hide this as well.
| | 16:04 | All I want to see right now is this
little green area. Let's go in really close
| | 16:10 | on that, and I suspect we'd probably
have to add shape hints, so please save
| | 16:15 | your file before you do anything.
| | 16:18 | So this is the frame we have to
contain with, click on the timeline, in the
| | 16:22 | Properties panel under Label, give it a
little red flag, and now Ctrl+Shift+H,
| | 16:29 | and let's pick maybe that point there,
Ctrl+Shift+H for another one, click,
| | 16:41 | maybe we'll put it here.
| | 16:46 | Let's try one more, Ctrl+Shift+H for
another one, click, and I am just going to
| | 16:55 | move that around, play with it a little bit.
There we go, that's a little better.
| | 17:01 | I think that might be enough
to at least stop that pop.
| | 17:05 | So the other thing that we can do is
change the shape of this hair, let's do that.
| | 17:09 | I am going to put it into outline, and
pull this line down like this so that we
| | 17:16 | get a smooth motion into here, we pull
this point in a little bit deeper, I am
| | 17:22 | going to switch Snap Off, and
let's see what that looks like.
| | 17:27 | Let's zoom out so we can see a better look.
It's a lot better.
| | 17:38 | Now this could use some polishing, no
doubt, but you get the idea of the basic
| | 17:42 | process, and it's well worth taking a
bit of time on this particular area here.
| | 17:47 | If you have watched this and thought
that this is just a phenomenal amount of
| | 17:52 | effort to go to, then I stress most of
the real puzzle work is between here,
| | 17:57 | and if you look carefully, after we
are tweening between the A, the B, the C,
| | 18:03 | it is quite straightforward, there is
no level changes happening here, and
| | 18:06 | there are no level changes happening
between the G and the H and back to A
| | 18:10 | again, and this area here is where you
will do almost all of your animation if
| | 18:15 | you are doing character work.
| | 18:17 | It's very rare that you do
stuff from three-quarter rearview.
| | 18:19 | I'm putting this in here
for the sake of completeness.
| | 18:22 | But I have animated most of my career,
most of it's happened within here and
| | 18:28 | here, so I would suggest if you feel
that this is just not worth the effort,
| | 18:34 | then don't worry about the tweening, but
I would still recommend that you try to
| | 18:38 | maintain the layer
hierarchy, and that's pretty easy.
| | 18:41 | You could switch off all the tweens
here and be able to move between the rearview
| | 18:46 | and the three-quarter views
with the same layer structure.
| | 18:49 | It creates a lot more freedom and
opportunities when you begin to animate.
| | 18:53 | So that is the head rotation, 360 degrees,
and now we're going to just do some last
| | 18:59 | minute tweaks. There are some things that
obviously aren't going to work from here.
| | 19:03 | The most obvious being the mouth, and
the mouth right now is in the front on A
| | 19:09 | view, and we need to make a mouth
that will work in the B and the C
| | 19:14 | directions, and luckily that's not just fun, but
it's pretty straightforward, so we'll do that next.
| | Collapse this transcript |
| Creating the B mouth (3-quarter)| 00:00 | So now we have our character's head
rigged. Let's click on the symbol to go
| | 00:04 | inside the hd 1 turnaround symbol,
and take a quick scrub through, still
| | 00:10 | working, which is nice.
So, we need to make some other alterations.
| | 00:14 | If we look at the mouth, we have a nice
mouth rig, and it works great in the front view.
| | 00:19 | But obviously, as we turn the head
around, the point will come somewhere around
| | 00:25 | here to here where that might look weird.
So at this point, let's hit the B pose.
| | 00:30 | Let's see what that will look like, and
if you scrub through, then you see how
| | 00:37 | flat and odd that is.
| | 00:39 | So, in your 05_10 exercise files, what
I have done, I have taken the liberty
| | 00:43 | of going into the head rig, and
where before we had the mt A symbol, I
| | 00:50 | right-clicked on that, and selected
Duplicate Symbol, and made a new symbol called mt B.
| | 00:56 | Let's look in the Library panel,
and see what that looks like.
| | 00:59 | It's identical to mt A for the moment,
it's a duplicate, and inside mt B, let's
| | 01:04 | just double-click on that,
and go straight into it.
| | 01:08 | I've made on the reference layer,
reference mouth shapes for the
| | 01:12 | three-quarters mouth shapes.
| | 01:15 | So let's see on top of that, currently
what we have is the A mouth on top of this.
| | 01:21 | So essentially what we have done is we
have taken A, duplicated it, called it
| | 01:25 | B, and now we have laid in the
reference layer that we're going to use and
| | 01:30 | repurpose the A mouth shapes into the B
shape to go from the front view to the
| | 01:33 | three-quarter view.
| | 01:35 | So let's take another look
outside just to again orient ourselves.
| | 01:39 | So, we have the A head with the A mouth,
and now we have on the B direction, the
| | 01:44 | B head with the B mouth.
| | 01:46 | To do this, I think it's nice to just
double-click on that and see it in place.
| | 01:50 | If you see the head looking--not
grayed out like this-but the normal color
| | 01:55 | when you click inside the mouth, then go up
to View > Preview Mode > Anti-Alias Text.
| | 02:00 | If you want to see it as it looks
with the true color, then it's full.
| | 02:04 | So, let's go View >
Preview Mode > Anti-Alias Text.
| | 02:06 | This is a much nicer way to work
because you can see the contrast between the
| | 02:11 | level that you are working
in and the one on the outside.
| | 02:15 | First thing that we should do is let's
just hide everything for the moment, and
| | 02:19 | we think we don't need the B mouth and
the C mouth, let's get rid of them, Clear
| | 02:24 | Keyframe, right-click again, and clear
the keyframe for the E, and let's just
| | 02:29 | work on the mouth inner level.
| | 02:31 | I am just going to unhide that, and
let's scroll through, and go to the D mouth,
| | 02:37 | go to outline, and let's padlock the
reference layer. And you can see the
| | 02:41 | difference, the reference image shows
us the curvature is quite different, but
| | 02:45 | not wildly different.
We're pretty close already.
| | 02:49 | So, it will be quicker to make these
adjustments than it was to create the front
| | 02:53 | on mouth the first time around.
| | 02:54 | So, let's select the Selection tool,
and start pulling these points, and again
| | 02:59 | if you select the Subselection tool and
click on one of the line areas, you will
| | 03:03 | see we have 1, 2, 3, 4
points here and two in the bottom.
| | 03:07 | So, as we work through this, let's
just make sure that we don't accidentally
| | 03:11 | generate extra points, or
lose control over these ones.
| | 03:15 | So, all I am going to do is pull this in.
| | 03:19 | If you feel that the reference line is
too overpowering, maybe it's hard to see
| | 03:23 | the lines that we are working with,
let's unpadlock it, and give it a lighter
| | 03:27 | shade of gray--maybe even
lighter than that--padlock that again.
| | 03:33 | That's a lot easier to work with.
| | 03:34 | There we go. And let's just work
through, we'll do the next one as well.
| | 03:40 | Let's just do the F, quite different,
it's a little bit over this way.
| | 03:44 | I am going to pull that corner in.
| | 03:49 | Now, I think for now, let's
test this, see if it works.
| | 03:53 | It's a big move, and a little bit
where you were going too far with this.
| | 03:58 | So, let's go all the way now, and
see if it misbehaves. It looks solid.
| | 04:05 | So let's keep that.
| | 04:07 | It's nice to have that strong forward
movement, maybe we can push it a bit more.
| | 04:12 | If we have problems with this later on
with the upper lip and lower lip layer,
| | 04:16 | maybe we can pull it back in.
| | 04:18 | But you can always test to
an extreme, see if that works.
| | 04:23 | It's nice when that happens.
We have the flexibility.
| | 04:26 | You can even make this change later
on by moving this for different frames.
| | 04:30 | But for now, let's keep it about here,
padlock that, and don't forget that the
| | 04:37 | ending point will be the same as the start.
| | 04:39 | So we want to copy this, hold down
Alt/Option and drag to there, and then just
| | 04:43 | right-click to remove that
tween just to keep this static here.
| | 04:47 | And also, don't forget that the mask layer
will be the same as the mouth inner layer.
| | 04:52 | So hold down Alt/Option and
drag that to the mask layer.
| | 04:55 | We're also going to repurpose this shape
for the lip upper and lip lower levels,
| | 04:59 | so same thing, Alt/Option and drag to
copy that to here and here. So that's great.
| | 05:03 | Let's switch off the reference layer now,
and the next thing I am going to do is
| | 05:08 | recolor the lip upper and the lip
lower as black, because we want to see the
| | 05:12 | difference in the line.
| | 05:13 | So I am going to swap colors just to
do a very quick recolor of these levels,
| | 05:21 | same thing with the lower lip.
| | 05:22 | We'll find, sometimes, it's just quicker
to select the whole thing rather than
| | 05:29 | messing with the Paint Bucket tool. Okay.
| | 05:31 | Now let's do the upper lip,
the A mouth is the same in both.
| | 05:35 | In the B, then we have to pull the corners up.
| | 05:39 | And roughly try to match the
points, so I am going to select the
| | 05:46 | Subselection tool, take a quick peep at this.
| | 05:48 | So, I like to make sure that
these points are aligned properly.
| | 05:51 | Let's do that again. There we go!
Test that very quickly, wonderful.
| | 06:01 | If you have problems that things start
tweening strangely, always go back to the
| | 06:04 | Selection tool, click, and make sure
you have the same number of points on all
| | 06:09 | your keys, and you can test that fairly
quickly by doing that, and if it's 6 on
| | 06:13 | each, or you see a 7th by mistake
somewhere, then you simply redraw that area.
| | 06:17 | So now back to the Selection tool, and
I think some of my points I've lost the
| | 06:26 | fine level of control of
them that I like to have.
| | 06:28 | So let's select the Subselection tool,
and that's a trouble one there, and we
| | 06:33 | may have even lost this one too.
| | 06:34 | So, what I am going to do is just
draw a bounding box around these, and we
| | 06:39 | have them back again.
| | 06:40 | Now, I have six points that I can
control and back to the Subselection tool, and
| | 06:46 | let's try to match these
points here and here. Nice!
| | 06:53 | Pull this in, wonderful! That's it!
| | 06:59 | I repeat the same process for the lower
lip, more or less the same, in that we
| | 07:05 | have to make sure that we maintain
the attachment of the corner to here.
| | 07:08 | I am going to do that.
| | 07:10 | And again, I am just going to have a
little look at the points, so that I
| | 07:21 | can align that to here.
| | 07:24 | If you don't do that, then you can get
some strange shapes, even if a tween is
| | 07:28 | right, the thick and thin, this can
undulate in a very unpleasant way.
| | 07:33 | So, this should work.
We are having a little line weirdness here.
| | 07:37 | Let's see if there's a reason for that.
| | 07:40 | It might be because I
moved that point, that's it!
| | 07:46 | So that was simple to fix as that, I
was just making sure that those two points
| | 07:50 | here and here travel more or less in tandem.
| | 07:57 | And also, I think we might have
lost a little bit of control here.
| | 07:59 | So, all I am going to do is draw a
big bounding box around that, delete the
| | 08:04 | dotted area, check to make
sure we have 6 points. Excellent!
| | 08:07 | So let's just bring these back in.
| | 08:13 | Again, checking to make sure that we have
these points lining up, pull this in, there we go.
| | 08:25 | So let's zoom out, so we can
see the entire range of movement.
| | 08:28 | I will unhide the upper lip and the
lower lip, and I think we can unhide the
| | 08:33 | lower lip level as well.
That should still work fine.
| | 08:36 | Well, no, needs a bit of tweaking.
| | 08:39 | So let's go into the lower lip level,
go to the D mouth, and just nudge it out,
| | 08:44 | and nudge it out here, using the
arrow keys, works fine, and I think we can
| | 08:55 | probably pull the corner down here just to
give it a little more volume. That's it!
| | 09:02 | Now, let's check the inner mouth which
we haven't done anything with, and it's
| | 09:07 | probably a little too far over.
| | 09:08 | So, let's hide the mask layer, and
just look at the teeth upper and the teeth
| | 09:13 | lower on the A mouth, and I am going
to put them into Outline Mode and they
| | 09:17 | really are a little bit too far over.
You will see it more clearly on the D mouth.
| | 09:22 | So all I am going to do is hold down
Shift, and push the arrow key to the left,
| | 09:27 | and that will pull it in.
I am going to pull it down one.
| | 09:30 | Moving it around like this, you can
get into a pretty decent looking space.
| | 09:34 | So, I want to unpadlock the tongue.
Let's move that as well.
| | 09:37 | And on the A mouth, I am just going
to move them over one, two, and see if
| | 09:42 | that tween is all right. It's looking good.
| | 09:47 | I think the ooh mouth, maybe we
can just move them a little bit.
| | 09:56 | So, let's hit padlock again and put the mask on.
| | 09:59 | So now we have everything visible and
everything padlocked, and that's pretty good.
| | 10:04 | That is no longer looking strange.
| | 10:07 | So, then final step is to add our E
mouth, so I am going to make this, or this
| | 10:13 | here, so, we can choose any of
these little tweens, the E mouth.
| | 10:16 | I don't like to use the middle one, I
usually find it's nicer to have something
| | 10:20 | a little closer to the
final ooh shape to play with.
| | 10:23 | So let's make my column, hit F6, move
that into the E slot, and let's pick a
| | 10:28 | wide-open mouth for C, this should do,
and something much more close for the B
| | 10:37 | mouth for the ee sound. There we have it!
That is it! That's the process.
| | 10:51 | What remains to be done is to
convert the mad and the sad and the neutral
| | 10:54 | mouths using the same process, and all you
have to do is adjust the corners of the mouth.
| | 11:00 | I'll very quickly show
you how to do one of these.
| | 11:03 | So, in the event of doing the mad and
the sad mouth, so that you have that in
| | 11:07 | the B state as well, I think the
quickest thing to do would simply be to copy,
| | 11:11 | and what I am going to do is switch the
Workspace under Window, and set it to I
| | 11:17 | think rigging_face as a
horizontal, that's better.
| | 11:19 | So let's move this up.
| | 11:20 | Let's just hold down Alt/Option and
drag our A through F mouth shapes to here,
| | 11:29 | and while we're at it, do this as well.
| | 11:31 | So now we have three sets of three
quarters mouths, all happy, and what we want
| | 11:36 | to do is take the mad and the sad, clear
the keyframes for the C and the D as we
| | 11:42 | did before, do it here as well, since
we are doing this right now, and repeat
| | 11:51 | the identical path of our process.
| | 11:53 | So that would mean going into the wide
open mouth, pull the corner down, do the
| | 11:58 | same thing for the ooh mouth, and
now we have the beginnings of our angry
| | 12:06 | dialog, and don't forget too you can
make other changes like you can pull the
| | 12:10 | corner down here, great fun!
| | 12:15 | Same thing for the A mouth, you'd might
want to start, of course, with the corner,
| | 12:21 | the mouth down, so we tween
with a series of angry shapes.
| | 12:25 | And with the neutral mouth, do
something that's not quite so extreme, maybe
| | 12:34 | about to there. Don't forget to copy your
A to the end, on the angry and the neutral.
| | 12:45 | That is the basic process, then you simply
repeat all the steps I showed you in this chapter.
| | 12:50 | You can actually rewatch the beginning
for the happy mouth and just follow it
| | 12:53 | through for the mad and the
neutral, and you will have it.
| | 12:55 | You make changes to the teeth where
appropriate, and then the last step that you
| | 12:59 | would have to contend with will be
changing the custom expressions to match the
| | 13:04 | three-quarter view as well.
| | 13:06 | What I have done in the reference
layer, I have sketched in, to help you out,
| | 13:10 | the three-quarters view for the wide
open mouth, for the furious mouth, and
| | 13:13 | for the puzzled mouth.
| | 13:14 | So take some time with this
and have little fun with it.
| | 13:17 | These shapes and the ones in the
exercise files are pretty stable, I think you'd
| | 13:20 | be able to push them around
without getting into too much trouble.
| | 13:23 | And by the time, you'll have all this
done, you will have an identical copy of
| | 13:29 | the A mouth now in three-quarters position.
| | 13:32 | In the next movie, we'll tackle the
profile mouth which is slightly different
| | 13:35 | from the A and the B mouth and has some
issues that you need to be careful with.
| | Collapse this transcript |
| Creating the C mouth (profile)| 00:00 | Let's do the final of our mouth shapes,
and that's the profile mouth, or the C
| | 00:05 | mouth, as we are calling it.
| | 00:07 | So let's double-click on the stage, if
you're not already in the symbol, on the hd
| | 00:11 | 1 turnaround, or just double-click on
the symbol in the Library panel, and let's
| | 00:16 | go to the C direction, the C label
on our timeline. And the symbol that we
| | 00:23 | actually placed in here when we were
doing turnaround was basically just a
| | 00:27 | placeholder of the A symbol, and that's
obviously not ideal for us to work in.
| | 00:32 | So let's just get rid of that.
| | 00:34 | And what I have done is I've taken the
A symbol, I have created a duplicate and
| | 00:39 | called that duplicate the C mouth.
| | 00:41 | So let's click on that in the library
and drag it to the stage. And I am going
| | 00:46 | to use this little crosshair to line up
that crosshair to the edge, and then I'm
| | 00:51 | going to go in and fix the pivot,
which is a circular object down here.
| | 00:56 | If we were to rotate this, it
would rotate around the wrong spot.
| | 01:00 | So let's put Snap on and drag that
little circle to the center point, that's
| | 01:05 | where we really need it to be, and that's it.
| | 01:07 | So now we can double-click
on this symbol, which is mt C.
| | 01:12 | So now we are inside the C mouth, let's
zoom out so you can see a little more clearly.
| | 01:17 | I have sketched in, very lightly here, a
series of mouth shapes, from the close
| | 01:23 | mouth, the B, which will make the e sound, the
D, the wide-open mouth, and then the oo shape.
| | 01:30 | So the actual artwork is a duplicate of
the A mouth, none of this is any good.
| | 01:35 | So we are just going to keep these
frames here as a reference for our general
| | 01:39 | timing, but let's get rid of all
the elements that we don't need.
| | 01:42 | So just select these, right click and
go Clear Keyframe, and let's go back to
| | 01:47 | the very first frame here.
| | 01:48 | I think the best place to work from is
the mouth inner, so let's do that, and
| | 01:54 | unpadlock it, and let's try going
to outline. And if I click on the
| | 02:00 | Subselection tool, or A on the keyboard,
and then click on this layer, you see
| | 02:04 | that we have this six-point geometry,
which was great for the front view, but
| | 02:09 | not really ideal for the side view.
So what I am going to do is chop it right here.
| | 02:14 | So let's just select the Selection
tool and delete the rest just draw around
| | 02:19 | it and hit Delete. And now we can use
this shape, get into the habit too of
| | 02:24 | holding down the Alt/Option key and
just duplicating that to the end, so we
| | 02:28 | match our begin point and our end
point as the same, and we'll create the D
| | 02:33 | mouth, or the wide-open mouth.
| | 02:35 | So let's padlock the Reference layer,
unhide it, and now we are going to make
| | 02:40 | some alterations to this to
make it closer match the source.
| | 02:43 | So let's zoom in as close as we think
we can get and what I am going to do is
| | 02:49 | make some modifications to this shape, Snap
is not needed for the moment, so off that goes.
| | 02:55 | I am going to distort this for a bit
just so I can see where my edges are, pull
| | 03:02 | this in, pull that into here and any
change that I make here, again apply to the
| | 03:14 | end, and now we will do the D mouth,
zoom in a little bit, constant zooming in
| | 03:22 | and zooming out, pull that into here,
last little check, make sure that our
| | 03:33 | points haven't merged into one another,
so we can still access these little
| | 03:37 | corners, hit Undo, and now let's go
to a solid color and play it through.
| | 03:42 | That looks really good.
| | 03:44 | Don't worry about the size of this
for now, this will be dealt with later.
| | 03:48 | And now I'm going to duplicate the A
mouth onto the F position to create our
| | 03:52 | oo shape. Just click it and drag it
over so that the corner aligns, go in
| | 03:57 | really close with this.
| | 04:01 | So now we can play the whole thing, and we
have it blocked in, in general outline form.
| | 04:08 | The beauty of this method, as you can
see, right from the beginning, more or
| | 04:11 | less what the range of motion is
going to be, and that looks really good.
| | 04:15 | So now that we have that,
let's duplicate this a few times.
| | 04:18 | So the first thing to do is to
duplicate it to the mask layer and to the lip
| | 04:22 | lower layer and to the lip upper layer,
and this is the same process that we
| | 04:26 | used for the A and the B mouth.
| | 04:28 | So let's hide out everything except
for the lip upper and the lip lower, and
| | 04:34 | what we are probably going to do is
color these black, so that they have their
| | 04:38 | right color for the lip outline.
| | 04:40 | So we'll select black for here, paint
that, and just go through and paint all
| | 04:45 | the lip layers black.
Same for the lower lip, there we go.
| | 04:55 | Okay, and I'll scrub through, oh, we
missed one, I have the beginning here, okay.
| | 05:03 | Next step, I am going to click on the
inner mouth so we can see that, activate
| | 05:09 | the upper lip and go to the D mouth now,
and we are going to pull these shapes
| | 05:14 | up so that we can share the upper level
of this shape, but then alter the lower
| | 05:20 | one, so that we can create
the illusion of the upper lip.
| | 05:24 | Zoom in a little bit, looks good.
Same with the F mouth, also looks good.
| | 05:36 | I've noticed that Flash has done the thing
where it's hidden this point, so now if
| | 05:41 | I pull on this, the entire line moves.
| | 05:43 | So let's just do a little bit of
busy work here and get that back.
| | 05:47 | I am just going to draw a box around
that shape, hit Delete, and now we get
| | 05:51 | control over these points.
| | 05:53 | Again, put Snap on and just push and
pull these until they connect together
| | 05:58 | again, and we are back down to two
points that we have control over.
| | 06:02 | I said earlier, some people use the
Spline Tools to do this, I really don't like
| | 06:06 | the Spline Tools, I think they cause
issues, and this may seem like a little bit
| | 06:10 | of extra work when the point is still there,
but it really is nice to be able to go
| | 06:15 | in and just grab it like this, without
having to deal with the spline handles.
| | 06:19 | So let's see if we still have access,
there it is, and it's tweening beautifully.
| | 06:23 | Now we will repeat the same process for
the lower lip, zoom out again, pull the
| | 06:32 | corner down here and something weird is
happening here, the curves, the curves.
| | 06:39 | Okay, let me go in and try to figure
out why we're seeing this little flicker,
| | 06:45 | and if in doubt, the nice thing about
this system is--I will just hit Undo, this
| | 06:55 | is why it's nice to have a good number
of undoes available, I am going to keep
| | 06:59 | going back further, zoom out.
| | 07:00 | So when something like this happens,
what I like to do is just do one change at
| | 07:05 | a time and then move forward a frame and back.
| | 07:08 | I am going to use the Subselection
tool on the first one to make sure we
| | 07:15 | have five points here, check the second one,
and I think we have 1, 2, 3, 4, 5, 6 points.
| | 07:21 | So the problem seems to be that some
other point became generated by mistake.
| | 07:26 | So I am just going to delete that by
drawing over it, and let's straighten this
| | 07:30 | out a bit, there we go, back and
forward, and you see that's a great way when
| | 07:35 | you get those flickers, and you start
wondering where are these things coming
| | 07:39 | from, this is the most
controlled way to stop that in its tracks.
| | 07:43 | Then you can target the exact point
where your shape tweening gets into trouble,
| | 07:50 | and there we go, that's
exactly how you deal with that.
| | 07:54 | So now we go on do the same
thing for this mouth here.
| | 07:57 | Okay, now we zoom out, and let's just
look at it with the mouth inner and the lips.
| | 08:09 | So we have the upper lip, the lower
lip, and the mask layer, and it's all
| | 08:12 | working exactly as we like.
| | 08:15 | The next thing we need to do is fix the
teeth and the tongue, and that's pretty
| | 08:19 | easy because they're just symbols,
so these are much more stable.
| | 08:22 | So let's padlock everything and hide the
mask layer and just unpadlock the teeth
| | 08:26 | And they are kind of hard to see, so
let's go into Outline Mode and start at the
| | 08:30 | beginning on the A, and as you can
see, they are jutting out too far.
| | 08:34 | So let's just select all three of those
and just Shift and use the numeric arrow
| | 08:40 | keys to get them to where
you think they should be.
| | 08:42 | Don't worry about this part up here
that's sticking outside near the nose.
| | 08:45 | I am going to mask that out in a little bit.
| | 08:48 | So when you have that where you liked
it, select all of these three and hold
| | 08:52 | Alt/Option and drag to here to copy
them, right click and go get rid of that
| | 08:55 | tween, and the next thing we do is we
position them as we need them for the D mouth.
| | 09:03 | So, most of the work here will
actually be on the lower teeth or the
| | 09:07 | blue outline layer.
| | 09:08 | You might even rotate them slightly
as the jaws moving down, let's get the
| | 09:12 | tongue, slide that down as well. What
I'll do is I'll just again select the a
| | 09:18 | frames for the teeth and the tongue,
hold down Alt/Option and drag them to the F
| | 09:23 | position and just move them forward like that.
| | 09:27 | Again, don't worry about the red area
overlapping, that's going to be our mask.
| | 09:32 | You can hide that if you
think it's kind of hard to see.
| | 09:35 | So, I think looking at this, we can
probably move the upper teeth down a little bit.
| | 09:39 | So I'm going to hit Shift and move the
numeric arrow key down one click, same
| | 09:44 | here, same here, same here.
Let's see what that looks like.
| | 09:52 | So I am going to unhide everything
and make sure it's all padlocked.
| | 09:57 | Looks great, and let's hide the mouth inner,
because it is a little bit too big for now.
| | 10:05 | So what I am going to do is correct the inner
mouth layer, because it's a little too large.
| | 10:09 | What we did was we created a mask
that's quite big, it completely covers the
| | 10:14 | entire area where we would be seeing
the teeth and the tongue, and that's
| | 10:18 | doing double duty, it's also working as the
inner mouth, but the inner mouth is far too big.
| | 10:22 | Let's unhide the lips, so
you can see what I mean.
| | 10:25 | So what I want to do is to make
it a little bit smaller than that.
| | 10:29 | So put the lips into Outline Mode, and
if you remember, the geometry of this
| | 10:34 | shape for the mouth, let's click
on that is 1, 2, 3, 4, 5 points.
| | 10:38 | I want to get rid of everything to this side
and just limit this to a very thin triangle.
| | 10:45 | So let's go really close and see
if you can get that exactly right.
| | 10:48 | So I'm going to hit N for the Line tool.
| | 10:51 | Be sure that Snap to Objects is on, and
let's make sure that our line is black,
| | 10:56 | so we can really see it.
Just draw a line in here.
| | 10:59 | Let's hide the lips now, so we are just
working with this area, and if you need
| | 11:04 | a reminder about the points we are
trying to snap to, they are here and here.
| | 11:09 | So let's pull the line to connect there,
and we want to make sure that we create
| | 11:14 | a shape, I am going to delete that now,
that is three points, and there it is
| | 11:21 | get rid of that black line just select
it and hit Delete, and we repeat the very
| | 11:24 | same process for the rest of these frames.
| | 11:26 | I am just going to draw a line, and
you'll feel that Snap to Point, it's
| | 11:31 | pretty much a feel thing, and
again, if you want to check, hit the
| | 11:34 | Subselection tool, and ah,
| | 11:36 | see, here we--we may have
gone a little too close.
| | 11:39 | I hit just the wrong spot, so let's undo that.
Let's see if that was the right one.
| | 11:47 | I seem to have overshot it again.
| | 11:49 | So what I'm going to do, it's
pretty close though, if I delete this and
| | 11:53 | delete that line, and then we look at
those points again, we're still only
| | 11:56 | three points, I think this will be
fine, it's very, very near to what I
| | 12:00 | wanted, and let's pull that line in, so
that we get a more natural curve and
| | 12:04 | then the same thing here.
| | 12:05 | I am just going to use the Line tool
again, and we can maybe bring in a little
| | 12:09 | closer than that, delete this, delete
that, and again, check the points 1, 2, 3.
| | 12:15 | To be super sure, sometimes I'll even do
this to make sure that there aren't two
| | 12:21 | of those points very close
together, it happens sometimes.
| | 12:23 | But since this A is working now,
smoothly into here, and there, let's copy the
| | 12:28 | start to the very end and move the tween
at the end, and now when we look at all
| | 12:36 | of our layers together, we are
seeing a very believable mouth.
| | 12:40 | And the last little piece to do is
this lip, and right now it's a crescent
| | 12:46 | shape, and I think for this angle,
a triangular shape will be better.
| | 12:49 | So I am going to delete the right half
of it, thicken it a little bit, and we
| | 12:54 | have our Reference layer down below as a very
simple guide, so it's fatten it a little bit here.
| | 12:59 | I am going to push it out.
| | 13:02 | I like it, so copy that to the end,
remove the tween, copy it for the B direction.
| | 13:09 | It's way too high now, so let's grab
that and pull it down, and let's grab
| | 13:15 | it again, copy it again for the oo shape, and
again, push it up, I am using the arrow keys.
| | 13:24 | Pull the corner down a little bit,
hide the Reference layer, and let's scrub
| | 13:33 | through that. And if you find this
confusing, looking at it against the
| | 13:38 | head, let's just double-click on the mt C
symbol in the Library, and there you can see.
| | 13:45 | It's kind of hard to see the teeth beneath it.
| | 13:49 | So one quick way of testing is just
to draw a placeholder color behind it,
| | 13:56 | let's pick a blue, and there you can see the
teeth are working, I can see the tongue peeping in.
| | 14:04 | That's really good, I am very happy with this.
| | 14:08 | So let's get rid of that little temporary
layer, and we can go back to the main stage.
| | 14:13 | In the next section, I'll show you an
issue that arises when you want to do
| | 14:17 | dialog C now from the profile position
because as you could see from that, when
| | 14:22 | you do the oo shape, for example, there
is no skin where there should be skin,
| | 14:26 | there should be an upper
lip area, a lower lip area.
| | 14:28 | In the next movie, I am going to show
you how we handle that, there's a very
| | 14:32 | simple workaround, it will
solve this little problem.
| | Collapse this transcript |
| Adding detail to the C mouth| 00:00 | So I am just going to make some finishing
touches to our profile mouth, the mt C symbols.
| | 00:06 | If you're not in it already, click on the
head to enter into the hd 1 turnaround
| | 00:10 | symbol, or double-click on the Library,
go to the C position. And you notice
| | 00:15 | that we have our new profile mouth,
which we did in the previous movie, and it
| | 00:21 | needs to be patched, because right now
we are seeing air gaps where there
| | 00:25 | really should be the flesh of the upper lip
and the lower lip pursing to match the mouth.
| | 00:31 | How we do this is a bit of a clever cheat.
| | 00:33 | We need to have the jaw area which we like
to have the jaw on the outer head timeline.
| | 00:38 | But for the dialog purposes it's
certainly nice if we have a jaw just to handle
| | 00:44 | the dialog functionality.
| | 00:45 | So let's select to select the jaw area--
it should be covered in lots of little
| | 00:51 | dots to show that it's active--and
let's put it into outline so we can kind of
| | 00:54 | position it more carefully. And now
we'll double-click on the mouth symbol, and
| | 00:59 | we are going to make a new layer at the
very bottom called jaw, and for now we
| | 01:05 | are just going to guide it out because
for the moment the primary jaw will be
| | 01:09 | the one for the turnaround, but
whenever you want to snap to a profile dialog
| | 01:13 | scene you would guide out the jaw
layer on the external timeline and guide in
| | 01:18 | this jaw layer so that it will
cover and patch your dialog needs.
| | 01:22 | So let's put some keyframes here at the
beginning and the end, and Ctrl+V just
| | 01:29 | paste it in, don't worry too much about
where, put it into outline and then just
| | 01:34 | drag it until it matches the original,
and we should be able to find a point
| | 01:39 | here where we can use the arrow
keys to really get it very, very close.
| | 01:47 | Make sure that north, south, east and
west all line up as best as you can, and
| | 01:54 | that's pretty good, excellent.
| | 01:56 | So now that we've done that it's just
easier if we work directly in the mouth C
| | 02:00 | symbol, so let's just double-click on
that in the Library panel, and we need to
| | 02:06 | make some modifications to this.
| | 02:08 | So what I am going to do is hide
everything except I think the mask area might
| | 02:13 | be the, maybe not, let's try the
mouth inner, see what that looks like.
| | 02:19 | No I need the entire mask area, there we go.
| | 02:23 | So I want to see this in outline better,
so I'm going to make the Outline color
| | 02:28 | black for that, and I think if I
padlock that that goes away, it becomes
| | 02:32 | invisible, that's kind of annoying.
| | 02:34 | So what I'm going to do is make a temporary
layer above the jaw and just copy these there.
| | 02:40 | Hold down Alt/Option and drag,
makes it a mask, we don't need another mask
| | 02:44 | layer, so right-click on that, and
we'll just call this uppercase TEMP, so we know it's
| | 02:50 | just junk we want to
get rid of when we're done.
| | 02:54 | and then we can put the mask layer back
to be white, hide that, and now we can
| | 03:01 | padlock that, keep it in outline color,
and now when we start on this jaw layer,
| | 03:08 | let's have a look first at our point
geometry and see where all of our points
| | 03:12 | are, because we're going to
start adding some more to it.
| | 03:15 | So hit the Subselection tool, or A, on the
keyboard and what we are going to do is
| | 03:20 | add two little points in here and cut
the slice out of the jaw, sounds painful,
| | 03:24 | but it won't be for us.
| | 03:25 | So let's select the Line tool
and working on the jaw layer.
| | 03:29 | I am just going to draw right through it,
and be sure we Snap to Objects right
| | 03:35 | at the end, and now we can switch it
off, actually keep it on and match that
| | 03:40 | corner exactly, that will be the
cleaner way of doing it. And now that I look at
| | 03:45 | this again I think I probably should
have tried harder to match this, so let me
| | 03:49 | undo that, switch Snap off.
| | 03:52 | I'm going to draw very carefully here
to make sure that these lines are inside
| | 03:56 | the orange area, and now
we can put Snap back on.
| | 04:00 | Once we have this point lined up
when all of this done, let's do a bit of
| | 04:08 | cleanup and Snap can go away now.
| | 04:09 | Let's look at it in color, see what
we're dealing with, and we can hide the
| | 04:15 | TEMP layer for a moment.
| | 04:17 | If we click on this and delete it and
click on the lines and delete it, what
| | 04:21 | we've done is cut this shape in the jaw,
and this will work to patch the area
| | 04:26 | that is currently opening.
| | 04:28 | So now the thing to do is to match
this as best as we can to the TEMP.
| | 04:33 | So I am going to make the TEMP
outline black, so it really stands out, and
| | 04:37 | we're working in this new jaw layer, let's just
match this gap, let's zoom out so we can see it.
| | 04:44 | So there is our gap, and once again
copy that to the end, Alt/Option and drag,
| | 04:50 | and make another F6 here for a new keyframe.
Let's zoom out so we can see it better, look ah!
| | 05:01 | Okay, now that you have the second
mouth done, let's activate shape tweening in
| | 05:04 | here so we can test this, as you can
see, the jaw is now traveling really,
| | 05:11 | really nicely with the mask
area in the black outline.
| | 05:14 | So let's make another copy of this
frame for the ooh mouth and move in, and I
| | 05:20 | am going to put Snapping on, so we can
get at least these points here to match
| | 05:27 | closely to the edge of the mouth, and
then I think we can switch it off after that.
| | 05:33 | And again let's pull these points
into something really obvious, so that we
| | 05:37 | can exactly see where we want them to
go and then we make them more refined
| | 05:41 | and subtle after that.
| | 05:42 | And Snap on to get the corner of the
mouth back to here and then the rest is
| | 05:48 | again refining these points.
| | 05:51 | You'll see me occasionally move
the entire thing by mistake, that's a
| | 05:54 | sensitivity glitch in Flash, and
that's just something that you have to
| | 05:59 | develop patience with to
deal with and workaround.
| | 06:02 | Okay, so that's looking really solid.
I think we can delete the TEMP layer now.
| | 06:06 | I am going to padlock everything, and
let's zoom out a little bit and have a look.
| | 06:11 | There is a slight area of
trouble to watch for here.
| | 06:17 | I'm not going to fix that it's a
masking issue with one of these layers, and
| | 06:20 | it's just something that you'll play
with to move some of the curves one side
| | 06:24 | or the other, maybe thicken the lips
to give them a more generous area of
| | 06:28 | travel so that they don't have to
conflict like that, but it's a fairly
| | 06:32 | straightforward thing to repair.
| | 06:34 | I'm going to make the E mouth now just
hit F6, and then drag that to there as
| | 06:39 | we've done many times already.
| | 06:41 | The C mouth will be this,
drag it under the C label.
| | 06:44 | The B mouth will be much more closed so
we keyframe these and drag them under the
| | 06:49 | B label, and now you have your first
profile AF tweened dialog scene, and the
| | 06:57 | jaw is working really, really well, I think.
Let's get it back in frame, looks pretty cool.
| | 07:05 | Now you have to do the very same thing
for the remainder, so what that means is
| | 07:09 | copy these frames for the mad, the sad, and
the neutral. And pull the corners of the
| | 07:15 | mouth down to create the angry mouth
for the mad/sad and make it neutral as we
| | 07:21 | did in the previous chapters, and
you have these as rough reference, as a
| | 07:25 | general idea about what you need to do there.
| | 07:27 | You will also have to add in the jaw
layer, of course, and if you're feeling
| | 07:32 | really brave then you can take on
the profile versions of the jubilant, the
| | 07:35 | furious, and the puzzled.
| | 07:38 | Right now we're really approaching a really
good level of functionality for our rig.
| | Collapse this transcript |
| Creating other mouths| 00:00 | You may remember from earlier on in
this course I really strongly recommend
| | 00:05 | against flipping symbols horizontally,
because when you're trying to do these
| | 00:09 | really complicated head turnarounds,
having some symbols that are left leaning
| | 00:14 | and others that are right
leaning can be a real problem.
| | 00:16 | You can end up with not knowing where
you are, you get so tied up and then mine
| | 00:21 | is inside a symbol that's flipped
horizontally inside one that's flipped the
| | 00:24 | other way inside one,
that's flipped the other way.
| | 00:26 | I just like having them all
flipped one direction and keeping that to
| | 00:29 | an absolute minimum.
| | 00:31 | There is, however, one point I think
where we're kind of forced, and I am going
| | 00:35 | to go inside this symbol
to show you what I mean.
| | 00:38 | Let's put that jaw back in Color mode.
| | 00:41 | If we turn the head around from here
to here, here now you can see we have a
| | 00:45 | couple of things we need
to fix on the turnaround.
| | 00:47 | But now that we have our C mouth with
the profile dialog, what happens when you
| | 00:56 | want to do dialog from the G position.
| | 00:58 | Well, I think the quickest and most
humane way of doing this, of course delete
| | 01:04 | that, go back to your first mouth, copy
that Ctrl+C, go back here Ctrl+Shift+V,
| | 01:13 | Modify > Transform > Flip Horizontal,
and let's just nudge it back into place,
| | 01:19 | and you see what begins to happen as
you go from one of these symbols to
| | 01:23 | another, this happens.
| | 01:25 | So this means that you are going to end up
having to create keyframes here to prevent this.
| | 01:30 | So it adds a little bit of complexity
to the outer turnaround timeline, but
| | 01:36 | really I think I would be asking too
much of you to ask you to flip all of these
| | 01:40 | internal to duplicate this symbol and to
flip all of these the other way around,
| | 01:44 | it will be just brutal.
So let's not do that.
| | 01:47 | And so let's make some last
minute corrections here.
| | 01:51 | We have the B mouth, and it
was tweening into the C mouth.
| | 01:56 | So I think we should make a keyframe
here, and let's select this and pick the
| | 02:05 | Free Transform tool, hold down the Alt/Option
key and pull the mouth until it
| | 02:12 | matches much more closely the contours
of that face, and now as you go through
| | 02:18 | frame by frame, we'll try to get the
best possible transition, and if you feel
| | 02:23 | like we might have to move
that mouth symbol we can do that.
| | 02:26 | And the mouth seems to pop off here so
we can make one more little adjustment.
| | 02:30 | Let's move this black keyframe out of there,
and I'm going to duplicate the C mouth here.
| | 02:40 | And again, holding down the
Alt/Option key, stretch it in.
| | 02:48 | Now let's zoom out.
| | 02:52 | Ah, and we have one of our settings
set to Play, so I think let's go to the
| | 02:56 | Properties panel and go from Loop to
Single Frame, and this might be the same.
| | 03:04 | As a default setting I like to have all
the symbols set to Single Frame so that
| | 03:09 | they don't start playing in the wrong place.
| | 03:11 | So that's looking pretty good, and
now we have to fix the other side.
| | 03:16 | So on this frame we should be seeing this
symbol doing the opposite of what it's doing here.
| | 03:21 | So I'm going to hold down Alt/Option
and drag to there, and I think we might have
| | 03:25 | to split this horizontally as well.
| | 03:28 | That's the A mouth, that's the wrong mouth for
that shape, we should have the B mouth in here.
| | 03:33 | So let's right-click on that and go
Swap Symbol and make that the B mouth, and
| | 03:38 | we may have to flip this
fellow horizontally, yep.
| | 03:44 | So Modify > Transform > Flip
Horizontal, let's go in a little closer, okay.
| | 03:49 | And here as well, because also it's
the wrong mouth in the wrong position,
| | 03:58 | right-click, Swap Symbol, B mouth,
and now when we go inside, it's the B
| | 04:05 | mouth, but it's facing the wrong way,
Modify > Transform > Flip Horizontal and
| | 04:11 | skew it so it's matching the contours of
the face a little better than that, and
| | 04:15 | we need to just change the position here,
so let's use the Arrow keys, hold down
| | 04:21 | the Alt key and use Free Transform to
again skew roughly into the right place,
| | 04:27 | and now here we have the spin, because
we've had no choice, we really had to
| | 04:34 | move this thing horizontally.
| | 04:36 | So this will be the regular A mouth and
here there's no reason to have it flipped.
| | 04:40 | So all I need to do is to
create like a temporary layer.
| | 04:44 | We'll copy the A mouth from
here, and we'll copy it to here.
| | 04:50 | Let's go into Outline mode, and I am
going to move the A mouth to match the
| | 04:55 | other symbol here as closely as we can,
near enough, and now let's right-click
| | 05:02 | and go Create Classic Tween, make a new
keyframe, and this keyframe will now be
| | 05:07 | the transition that we're looking for.
So get rid of the rough layer, and there we go.
| | 05:13 | So it's a way of tricking Flash
into doing the actual positioning for us.
| | 05:16 | So now when we turnaround,
all mouths are functional.
| | 05:23 | So let's just do a quick
test, run through, love that.
| | 05:29 | Let's go to the H position, the
three quarters left, looking great.
| | 05:34 | The A will work, of course, because
this is a clone of the very first frame.
| | 05:42 | The B will work, of course, and the C will
work as well. And I'm not sure if we'll
| | 05:54 | even get away with this little
oblique angle here, let's see.
| | 05:58 | Just barely, it starting to look a little
weird because it's so flat, but still there it is.
| | 06:03 | So now that you have the head fully
tweened from the A through to the H
| | 06:07 | directions, it's a good idea for you
as an exercise to reverse that turn and
| | 06:11 | animate it from H through G, F,
E, D, C and B and back to A.
| | 06:16 | Some of the transitions and the layer
issues will be slightly different should
| | 06:20 | you need to use a right to left turn.
| | 06:22 | Of course, if you don't need a tweened
head turn, then what you have here is
| | 06:26 | already more than enough.
| | Collapse this transcript |
|
|
6. Fine-Tuning and AnimatingPutting together a head rotation| 00:00 | Now that we have our rig done, I am
going to show you how you would begin to
| | 00:05 | animate with the rig, and these are
simple scenes, I'm not going to do these as
| | 00:07 | extremely detailed animation tutorials,
but I'll show you the general principles
| | 00:12 | of how you can work with the
symbols that we've worked so hard to make.
| | 00:16 | So, let's work with the clock
symbol. I think we can do some very
| | 00:19 | interesting stuff with this.
| | 00:21 | So right-click on that and go Duplicate,
and I want to call this one space, test,
| | 00:30 | hd for head, let's call it reaction, hit
OK. And I want this animation to happen
| | 00:38 | inside of its own symbol because we're
going to be breaking the symbol apart in
| | 00:43 | some very small ways, so never do that
directly on the stage, always nest your
| | 00:47 | animation inside another symbol.
| | 00:49 | So go Insert > New Symbol, and we'll
call this one the body for the head, I'll
| | 00:53 | call it body for the test hd reaction, and
that will be the outer container that holds that.
| | 01:00 | So let's just drag the test hd in here,
and we'll call this layer head, and you
| | 01:08 | notice when you click on this that the
rotation pivot is not really in the very
| | 01:13 | default place. So let's, for the moment,
just copy it to the actual center of the
| | 01:19 | skull area, right there, and then we'll
just center up the whole neck around the
| | 01:25 | cross at the bottom, great.
| | 01:29 | So first thing I want to do before we
do anything is click inside this, and
| | 01:34 | we're kind of running out of screen.
So let's go to Window > Workspace, and
| | 01:39 | let's switch to rigging_face_vertical
and then holding down the Spacebar
| | 01:43 | let's re-center that.
| | 01:44 | And what I want to do here is to go
from, start in this position, as if he is
| | 01:49 | looking screen right and then he
scrunches up, he will blink here like on
| | 01:54 | frame 5, he will reacts like he has heard
something to this side and then he will settle.
| | 02:00 | So with that effect let's
start cleaning up the Timeline.
| | 02:02 | So this reference folder we actually don't
need that anymore, get rid of that.
| | 02:06 | And let's just start removing all
of the frames that we don't need at all.
| | 02:12 | So for 3 and 4 we can clear keyframe on
these and next we're going to 9 and 10,
| | 02:18 | so we can select 5, 7, and 8, right-click
Clear Keyframe, and let's select all
| | 02:25 | the stuff at the end and go Clear Keyframe.
| | 02:28 | And the other thing we have to do, I
want to go from 2 to 5, to 10 to 9, so let's
| | 02:33 | select all these and drag them over to
here, and I want the turn to be quicker,
| | 02:39 | not too slow, from 5 to 10
like fast, like what's happening.
| | 02:43 | So let's just have a look at this and
get rid of some of these empty frames
| | 02:47 | at the end, and now let's Play. A bit slow at
the beginning, so let's get rid of some of these.
| | 02:57 | So he has heard something
and reacts, that's the idea.
| | 03:00 | You notice immediately that we have
the familiar shape tweening errors are
| | 03:05 | creeping in, that's because we've been
cutting layers that had hints, some of
| | 03:08 | these hints are calling on frames
that no longer exist, and we're playing
| | 03:13 | frames out of sequence, so
other issues are going to arise.
| | 03:17 | So we can patch these as we proceed, so
let's have a look, if there is anything
| | 03:21 | that needs fixing between the first
two, I think they look really stable.
| | 03:24 | So the issues come in between 5 and 10.
| | 03:27 | So let's have a peep
through here, the jaw certainly.
| | 03:30 | So let's just click off this, and
we will play the skull, looks fine.
| | 03:37 | The hair, funky, so what I am
going to do is add some hints to that.
| | 03:42 | Every time we do so, we'll open the
Properties panel, and then Label, put in
| | 03:44 | a little empty space, hit Enter, and that
puts a red flag so you know hints are here.
| | 03:50 | And with this junk I think we know by now
he needs five hints, usually in this pattern.
| | 03:57 | And again, back up your project before
you start applying hints because crashes
| | 04:01 | do occur when you do this, and that
goes a little haywire. There we go.
| | 04:08 | What will happen is as you begin
working with this you will get faster, and it
| | 04:13 | will become second nature.
| | 04:17 | It may seem like an awful lot of work
to go through just to get these effects,
| | 04:21 | but this is what it takes to break you
out of static symbol animation, which is
| | 04:25 | kind of the bane of Flash animation
where people just make one static symbol
| | 04:30 | and they motion tween it and then dread
words of producers everywhere it looks flashy.
| | 04:34 | So we're trying to break
out of that flashy look here.
| | 04:37 | Again don't forget to put our little
shape hint reminder wherever it's needed,
| | 04:42 | and I think the jaw is
going to need one too, yep.
| | 04:44 | So let's pop them in here, two will
work, and as you become familiar with
| | 04:50 | the rig you become familiar with the
trouble spots, and you can get faster
| | 04:54 | with anticipating them and ironing
them out, the eyes will be fine, okay so
| | 05:01 | let's look at that.
| | 05:02 | The hair on the top, this
little fellow, he needs a bit of help.
| | 05:05 | So I am going to add another one of
our little labels here, and we need
| | 05:14 | three hints for this guy.
| | 05:15 | They are different on the other side,
but don't worry we'll just deal with that.
| | 05:22 | As long as Flash can tween them okay,
we'll be all right, keep moving over, great.
| | 05:30 | So I've just corrected all of the
little glitchy bits, there is one little bit
| | 05:35 | on the jaw right here I can see it, so
let's fix that just to be thorough, and
| | 05:39 | if you select the wrong layer like here,
you'll see the hints for the hair top
| | 05:43 | when you are really looking at the
jaw, so be careful that you don't
| | 05:46 | accidentally work on the wrong layer.
| | 05:48 | When you see stuff like this
happening right here, that edge flickering.
| | 05:52 | It means that one of your hints
could be slightly out of position, so I
| | 05:55 | pull them off, pull them back on,
still happening so maybe the problem is
| | 06:00 | here, gotcha! And let's see, it could be a
problem here as well, well, it's still there.
| | 06:09 | Another thing that we can do is
simply go Remove All Hints and add two new.
| | 06:16 | It's possible that some extra points
were generated along the way and does
| | 06:20 | happen, so we may have to
clean, do a little bit of clean up.
| | 06:24 | Well, that has fixed it, okay, super.
| | 06:26 | So let's look at the whole
thing one more time, there we go.
| | 06:29 | Now you can probably see--it looks a
little bit funky--and there are still a
| | 06:34 | couple of things going on like problems
with the layering of the ear, so let's
| | 06:38 | see if I can fix that.
| | 06:39 | So this ear here is popping off, so we
can do little things, like let's make
| | 06:43 | sure our Snap to Objects is off so we
can move this a little more smoothly.
| | 06:47 | Let's see, how about we get rid of that ear,
let's give him like a couple of more frames.
| | 06:52 | Put in the keyframe there.
| | 06:54 | Don't feel like you slavishly have to
follow the existing rig, I mean you can
| | 06:57 | still make alterations to it to move
things in or out, I am going to pop it off
| | 07:02 | at that point right there on this frame,
and now we have this ear popping in
| | 07:07 | here, so we need to have that taken care of.
| | 07:10 | So we have ear left on this side,
there is an ear left down here.
| | 07:15 | So let's copy that, see if this will
work onto the upper level, and it's coming
| | 07:20 | in, in a weird way, so
let's move that out to here.
| | 07:25 | That is a little more
elegant, not so eye-catching.
| | 07:27 | You can finesse this, I'm not going
to get totally tied up in correcting
| | 07:31 | every little tiny thing here, but--
and I notice there is a little issue
| | 07:35 | around here with the hair.
But for now this is looking a lot better.
| | 07:38 | So let's go into the outside symbol, the
body test hd reaction scene, and now we
| | 07:44 | have the head by itself on its own
timeline, and it's nested inside this symbol,
| | 07:48 | so we have the Library panel, we have
the body hd test reaction, which holds the
| | 07:54 | head reaction scene.
| | 07:55 | Let's be sure that we're inside the body
scene, there should be one layer for the head.
| | 07:59 | What I want to do now is to separate
the neck from the head comp or the head
| | 08:03 | symbol onto this layer here.
| | 08:06 | So let's make a layer, call it neck,
and we are going to go into the head turn
| | 08:13 | symbol that we've just created.
| | 08:14 | Let's copy just one of these neck symbols,
Ctrl+C, go back into the body symbol,
| | 08:21 | paste it here Ctrl+V. Let's put it in
outline so we can actually position it a
| | 08:26 | bit better, looks good, now put it
beneath, and now we go into the head.
| | 08:32 | We keep the neck layer but just Guide
it out, and now we go back into the body,
| | 08:36 | and what you see now is we have the
head in a nested symbol above the neck and
| | 08:42 | both of these now can be
manipulated separately from one another.
| | 08:45 | So what we have to do is
synchronize the animation of the head with the
| | 08:50 | animation inside this symbol.
| | 08:52 | So what we do is select the labels level,
right-click, Copy Frames then go back
| | 08:57 | out one and make a new layer and paste
those frames and extend the timeline.
| | 09:04 | And click on the symbol and make sure
in the Properties panel it's set to Loop
| | 09:09 | or Play Once, and that way you'll see this
move, you don't want to set to Single Frame.
| | 09:14 | And the beauty of it is--let's put the neck
back on so we can have something to judge against.
| | 09:20 | I am going to make keyframes for 5, 10,
and 9. And on frame 5 let's push it down,
| | 09:26 | let's do something drastic with it. On
frame 10 push it higher and on frame 9 a
| | 09:32 | little lower, and as you feel like I go
into Free Transform and just tilt these
| | 09:37 | to where you think you'll have a
better position or a better pose, something
| | 09:41 | more interesting to look at.
| | 09:42 | I am going to tilt the head back up
here, and now we'll just activate Classic
| | 09:47 | Tweens and have a look at this.
| | 09:52 | I think we can probably
move the head over a bit.
| | 09:55 | Don't worry about the neck break we'll fix
that in a minute and move that over a little bit.
| | 10:00 | And again, don't feel like you
have to follow exactly what I'm doing.
| | 10:04 | This is great fun, once you have the
nested symbol working for you, then you can
| | 10:08 | go really wild with it.
| | 10:10 | So once we have that roughly done,
padlock that, and now I am going to make new
| | 10:15 | keyframes for the new neck and Create
a Shape Tween, and now you can put the
| | 10:20 | head into Outline mode, and you can
adjust the neck layer to fix any of these
| | 10:27 | little breaks and things that
have happened, especially here.
| | 10:33 | I am trying not to move these two
points down here, I am imagining that they're
| | 10:38 | attached to an invisible body.
Now let's see how that looks.
| | 10:43 | And again of course, more hints required
because in the extremity of this animation.
| | 10:48 | So maybe we might want to pull it back in a
little bit, and pull the head back just a tad.
| | 10:54 | Lock that, fix that little piece of
neck sticking out and yeah we will have to
| | 11:01 | put some hints in here, so Ctrl+Shift+H,
and I think let's try them down here A
| | 11:06 | and B two will work.
[00:11:1.47]
No, put them at the top, and we need
to fix these here as well, there we go,
| | 11:24 | and there is our scene.
| | 11:26 | We can add details to this, for example,
once you know that this is going to be
| | 11:31 | the range of motion we can do things
like squish the eyebrows down and again
| | 11:36 | this can be corrected out in a minute. Oops!
We have gone walkabout.
| | 11:40 | Let me find my scene, we are in the
Library panel, body test reaction.
| | 11:45 | And in the up shot obviously it would
be nice if we could push the eyebrows up,
| | 11:52 | I need to push the nose up.
| | 11:54 | In the down position maybe bring the
nose down a bit more, and let's see
| | 11:58 | what that feels like.
| | 12:01 | You find you can really exaggerate the
different elements much further than you
| | 12:05 | felt you could when you were actually
setting up the clock and then the final
| | 12:09 | touches things that will really add to it.
| | 12:11 | The eyelids, for example, I would
duplicate these and call it--let's say test
| | 12:17 | reaction--and once again copy these
frames, the labels, go into this, and
| | 12:25 | inside the eyes. I won't go into too many details
with this, because this is getting quite heavy.
| | 12:30 | But we can make sure that our eyes are
blinking on the down position, and we'll
| | 12:38 | do the same thing with the left eye.
| | 12:39 | Don't make these changes to the original
one, so we'll Duplicate that symbol and
| | 12:44 | call it test reaction.
| | 12:49 | Make a new layer and paste those frames,
and now we set these under Looping to
| | 12:58 | Play Once on frame 1, and we're on
frame 9 here, on this one we set them to
| | 13:08 | Properties > Play Once, frame 9, and
we'll do the same thing with the left eye,
| | 13:18 | and we want the eyes to be closed on
frame 9 on the most down one, so let's go
| | 13:23 | into those symbols again
and make sure that they are.
| | 13:25 | Yep, I know what the problem was.
| | 13:28 | On this one just right-click on it,
Swap Symbol and make sure it's the test
| | 13:35 | reaction one, there we go
and the same for the other.
| | 13:39 | There is a slight difference, the
blink starts on frame 9 on this one, and it
| | 13:47 | should match on this one, so let's
just move this up by one, there we go.
| | 13:52 | And again back into or auto clip, and
now we have an eye blink in the nice
| | 13:56 | little reaction scene.
| | 13:58 | That is in general outline how you would
begin to use something like the clock rotation.
| | 14:04 | To get right, I look at, and I see a
very rich animation that's starting to
| | 14:08 | really break away from the dreaded flat
Flash symbol pushing look that I think
| | 14:13 | people are getting tired off.
| | 14:15 | It's nice to have the option to be
able to do something that's a little more
| | 14:18 | dimensional and feel a lot more real.
| | 14:20 | So I recommend you play with this a
lot and push the head turns and see what
| | 14:24 | kind of effects you can get with it.
So with that we'll move on to another example.
| | Collapse this transcript |
| Moving frames between symbols to make a rotation| 00:00 | In this movie, we'll do a very subtle head turn.
| | 00:03 | We are going to improve it a little
bit by moving frames from one of our rigs
| | 00:08 | and goes into another which is a
very important skill to know how to do.
| | 00:11 | First, before we go any further, I want
to show you a fundamental Flash glitch
| | 00:15 | that is the kind of thing that crops up
from time to time, so not to get freaked
| | 00:19 | out if you do see it at some point.
| | 00:21 | If you open the library and look at the
body test hd reaction symbol, click on
| | 00:27 | that, and when you play it, have a
look at this, absolutely weird, and I saw
| | 00:35 | this, and I thought, "Oh no, what's gone wrong?"
| | 00:38 | Maybe it deleted all of my shape
hints or something, but there is actually
| | 00:41 | symbols are disappearing here,
two at the nose, that's just wrong.
| | 00:45 | So when I click inside the head.
| | 00:48 | That all looks fine, and then when you
click outside the head, let's go back to
| | 00:53 | the symbol, and now
everything is just back to normal.
| | 00:58 | So, if you see that happening and
your character becomes a faceless wonder,
| | 01:02 | don't panic, simply tunnel into this symbol and
back out again, and that will fix the problem.
| | 01:08 | Now there's a couple of other problems
that could arise with this, if you have a
| | 01:11 | project file that has hundreds of symbols,
that's a lot of work to be going back
| | 01:16 | in, and clicking in one and back out
again just to make this bug go away.
| | 01:20 | This is a CS6 bug that has
crept in, in the latest version.
| | 01:23 | So, one workaround is to save your file
as a CS5.5 or a CS5 document, and then
| | 01:31 | open it in a version of Flash that's
CS5.5 or 5, and it will go away.
| | 01:36 | I've tried this, and it simply
does not appear anymore.
| | 01:38 | It solves the problem.
| | 01:39 | The problem is you have to have access
to CS5.5, it doesn't help you very much
| | 01:43 | if you only have CS6.
| | 01:46 | I'm sorry about that, I wish I had more to tell you
on that, but that is the situation right now.
| | 01:50 | If you do have CS6, and you have no
backward version, then you're basically
| | 01:54 | trapped into using this little workaround.
| | 01:56 | I would also recommend that you check
the Adobe website for updates to Flash in
| | 02:00 | case they do get around to fixing this glitch.
| | 02:03 | But that is a situation
that we're in at the moment.
| | 02:05 | Anyway, that said, let's
make another cool little scene.
| | 02:09 | This one will be a little
bit simpler in some respects.
| | 02:12 | What I want to do is to take our head
turnaround, hd 1 turnaround, right-click,
| | 02:15 | and duplicate that, and I am going to
call it test hd turn, space, test hd turn.
| | 02:24 | We'll call it turn LR from left to
right, click OK, and double-click on this.
| | 02:32 | I'm not sure if we need to embed this or not.
| | 02:35 | I am going to go from the H direction
into the A direction, and then forward
| | 02:41 | again into the B direction.
| | 02:42 | That will be the range of
motion that we're going to do.
| | 02:45 | So I suspect this is going
to be fairly constrained.
| | 02:50 | So let's just work inside here
inside our test hd turn LR symbol.
| | 02:55 | Let's get rid of the reference
folder, let's clean up a little bit.
| | 03:01 | There is all kinds of little bits and
bobs around the place that can be cleaned
| | 03:05 | up, but this is always the way of Flash.
| | 03:07 | Little bit of housekeeping from
time to time keeps your files clean.
| | 03:10 | So, let's get rid of all of the poses
that we don't need, and that's C, D, E, F, and G,
| | 03:15 | and we don't need these two.
| | 03:22 | So, we are going from H to
the A pose to the B pose.
| | 03:28 | So, what I'm going to do is select
these two, and this might break some of our
| | 03:33 | shape hints, but don't worry, we'll fix
them in a moment, and just drag that to here.
| | 03:41 | Super simple!
That's all we're doing.
| | 03:44 | So, of course we've got some
broken business with the ears.
| | 03:47 | This always happens when you do this
kind of thing in Flash, there is hints or
| | 03:51 | there is extra frames and spot
to spot, don't worry about that.
| | 03:55 | So, let's stretch this out a
little bit. It's a bit fast.
| | 03:59 | There will be two more
empty frames, hit F5, one, two.
| | 04:05 | Next, I want to correct this ear.
| | 04:09 | So, I click on that to find what level we're
on, and we need to put an ear in that level.
| | 04:14 | So, let's copy this one, Ctrl+C,
Ctrl+Shift+V, so now we have two and put a
| | 04:21 | blank frame after that. So we hand it off.
That's taken care of the worst of it.
| | 04:26 | The right ear seems to pop on a little bit.
| | 04:29 | So, let's see if we have one
beneath. We do right there.
| | 04:34 | So, Ctrl+C for that, that's on this
level, and if I put it up here, however, it
| | 04:39 | will pop on top of his head.
| | 04:41 | So, let's copy this ear, Ctrl+C down to
here, Ctrl+Shift+V, and you see it just
| | 04:48 | got a little bit darker,
and now we can black that out.
| | 04:51 | Let's see if that works. That's better!
Okay, so that's basically it.
| | 04:57 | If this was a head turn, I wouldn't
want to be moving the neck so much.
| | 05:01 | It's more like the whole body is rotating.
So let's just go with this neck position here.
| | 05:06 | So, I'm just going to drag that back to
there and delete this, Clear Keyframe,
| | 05:10 | and maybe adjust the neck in a
little bit, but this is a better sense of
| | 05:18 | what's going to happen.
| | 05:19 | So what I want to do is just pull that
neck in a little bit, padlock everything
| | 05:23 | except the neck, coax it in,
do that, let's track through.
| | 05:28 | That seems to work better for most of them.
| | 05:33 | If you were animating a head turn, I
always stress this isn't going to be the
| | 05:37 | be-all and end-all animated head
turns, let me just fix this little neck.
| | 05:42 | What I want to do is to show you how you
move frames from one comp into another.
| | 05:49 | So, what I want to do in the middle of
this turn right here is for the head to
| | 05:54 | dip down a little bit.
| | 05:55 | That will be a much more standard way
of doing a head turn, and if we didn't
| | 05:59 | have this already done earlier,
we'd have to go in and move all these
| | 06:03 | objects down, and there are so many
of them, and we've already done this
| | 06:07 | work in our other rig.
| | 06:08 | So let's go into that, open the
library, go into the hd 3 clock, and if you
| | 06:13 | remember, our 6 o'clock position
already has all of that work done, including
| | 06:17 | changing the shape of the hair, and we
can obviously make this a little more
| | 06:21 | subtle, but this is the bulk of the
work already taken care of for us.
| | 06:25 | So let's just select all of these, copy
those frames, and now go back into your
| | 06:30 | library and back into the test head
turn left, right, and now currently, we have
| | 06:36 | A, select that stack, right-click, and go
Paste Frames and watch what happens to the head.
| | 06:44 | Flash has inserted a keyframe here that
we don't need right after our paste, get
| | 06:49 | rid of that, right-click, and go Clear
Keyframe, and now we have a much nicer
| | 06:55 | little head turn, of course a lot of
these shapes need to be fixed and so let's
| | 07:00 | see what that's going to entail.
Skull will probably be fine.
| | 07:09 | The left hair will get
small and disappear almost.
| | 07:15 | So we probably have to add some
hints in here, so same process again.
| | 07:19 | Go to the Properties panel, insert a
blank label, 5 hints, A, B, C, D, and E.
| | 07:31 | There we go, click and match them on the second.
| | 07:34 | Again, remembering to back up your file
before you do too many of these, and we
| | 07:40 | need to fix these here as well. Okay, super!
| | 07:47 | Now, we just repeat that process,
and there may have been a little bit of
| | 07:53 | slippage here, so pull the hints off.
| | 07:56 | If I see things like this, it tells me
something got moved, sometimes it is
| | 08:00 | easier to move them all,
A, B, C, D, and E, great!
| | 08:11 | Same, let's not wonder it's flickering.
| | 08:18 | It's good, okay, and we just keep going,
and we need to fix these here as well.
| | 08:29 | So, let's just click off this.
| | 08:31 | So now let's unhide everything, and
it's looking a lot less scary now.
| | 08:36 | When I looked at it first, I thought, "Oh no!
I think this is going to be a nightmare!"
| | 08:41 | But we fixed a few hints here and
there and suddenly things are
| | 08:43 | looking really polite again.
| | 08:45 | So, from here to here looks pretty good,
maybe there's a slight issue with the
| | 08:49 | ear at this side, it needs somewhere to
go to, and that means we need to adjust
| | 08:54 | for a layer again, and that's the blue ear here.
| | 08:59 | So, let's see, from this point on,
that ear should be on the bottom level,
| | 09:03 | meaning that you go from here
to--let's see, would it be here?
| | 09:08 | Actually, it should disappear from
this level, so let's put a blank frame in
| | 09:11 | there, and let's fix the neck.
| | 09:15 | I am going to put a keyframe in there,
and just pull that neck in, and that's it!
| | 09:26 | So, this is a great help when there is a
little bit of business going on, on the
| | 09:30 | top of the hair that needs to be fixed,
but I think you get the idea from this,
| | 09:35 | and if you had a lot of very detailed
characters, actually they are the ones
| | 09:38 | that really pay off on this, if the
character was super simple, and you could
| | 09:42 | probably make up all of these
little positions as you go along.
| | 09:45 | But with this guy, he has got so many
levels, I don't won't to be messing around
| | 09:49 | with these every time I need to do a head turn.
| | 09:52 | This way, I can create the
different angles for the head.
| | 09:55 | The system that I used during this
course is my own system, you might find it's
| | 09:59 | not even complex enough, you
might need more positions or less.
| | 10:02 | But this is the general methodology
that I use for years now to pre-create all
| | 10:05 | of these little poses and directions
that give a level of subtlety that is just
| | 10:09 | time-consuming to have to add if you
have to do it for every single keyframe and
| | 10:13 | to do animation that goes beyond the
usual flat Flash symbol pushing style.
| | 10:17 | So in the next movie, we're going to
do some facial acting and make the
| | 10:20 | character really show some emotions.
| | Collapse this transcript |
| Using the rig with audio| 00:00 | Now we are going to finally
bring speech to our character.
| | 00:03 | So what I have done is created a
couple of very short lines. They are in the
| | 00:07 | Library in a new folder called
audio in your 06_03 exercise files.
| | 00:13 | So we have a happy line dialog.
| | 00:15 | (character speaking: I'm happy!)
And an angry one.
| | 00:18 | (character speaking: But now I'm mad!)
| | 00:20 | Okay, so it's not exactly
Shakespeare, but it will work.
| | 00:23 | So let's make a new symbol to house
the animation that we are going to do.
| | 00:28 | We are going to base this on the dialog first.
| | 00:31 | So let's go into the mt A folder, or
symbol, right-click on that, click
| | 00:37 | Duplicate, and we will call this mt A dialog.
| | 00:41 | And always duplicate your symbols.
Never, ever alter these unless you are
| | 00:46 | changing the rig itself.
| | 00:47 | If you are going to create a new
animation, always make a duplicate and then do
| | 00:51 | all your experimental work in here.
| | 00:52 | So that's it, let's just work inside
the mouth symbol to do the dialog line.
| | 00:56 | Double-click on that and
here we have the familiar set.
| | 00:59 | Of course it's a dupe, so always double-
check, triple-check, and we need to drop
| | 01:04 | the audio track into here.
| | 01:06 | So right at the top of the timeline
I'll make a new layer, and let's go to the
| | 01:10 | Library and find the audio folder and
drop the happy.wav file onto the stage.
| | 01:16 | It doesn't matter where, and
there we see our wav file.
| | 01:18 | We will make another blank keyframe here.
| | 01:20 | Hit F7, back to the Library, drop the
mad sound and put that onto the stage now,
| | 01:27 | and let's hide all of our symbols,
and we will just move through.
| | 01:31 | (character speaking: I'm happy! But now I'm mad!)
Super!
| | 01:34 | So the first thing we want to do is to
create the happy line of dialog, and guess what?
| | 01:39 | We are going to use the happy mouth
shapes, and when we are done with that,
| | 01:43 | we will do the mad line of dialog
using the mad side of mouth shapes.
| | 01:47 | So let's make some room on the timeline.
| | 01:49 | So I am going to just click from the
emotions to the--and actually this
| | 01:53 | reference layer, I think we can delete.
Let's get rid of that.
| | 01:56 | So select from the emotions layer
through to the lip layer and just drag and
| | 02:00 | remove them all, roughly to about here
to give us a bit of room, essentially so
| | 02:04 | we can just see our standard mouth
shapes here so we have easy room to access
| | 02:08 | them and drop them down in
the area that we are working on.
| | 02:11 | So let's scrub through again.
(character speaking: I'm happy!)
| | 02:15 | Now when I'm playing a dialog--and
again, remember that we have these six
| | 02:18 | basic shapes, and I am going to padlock
everything so we don't accidentally change anything.
| | 02:23 | The critical shapes are the phonetic
sounds to nail with great accuracy are the
| | 02:28 | closed mouth shapes, and that will be
the A mouth, and again these labels, a, b,
| | 02:32 | c, d, e, f, don't apply to the
actual sound we are hearing.
| | 02:36 | They're simply quick ways to remember the
different shapes of the mouth themselves.
| | 02:40 | So the F mouth, for example, creates the
ooh sound and the A will be a buh, muh,
| | 02:44 | puh sound and so forth.
| | 02:46 | So let's start with the A mouth, and
I'm going to select this column here, hold
| | 02:51 | down Alt/Option and drag, and
now we begin with the closed mouth.
| | 02:58 | So the next thing I'm looking for are all the
instances where we hear another closed mouth.
| | 03:02 | (character speaking: I'm happy!)
I'm, so we'll have one about here.
| | 03:08 | Happy, so I am just eyeballing it, and
when we hear it...
| | 03:14 | I think about here is good.
| | 03:16 | And then watch again and make a mental
note of where you see this, and when you
| | 03:20 | hear the closed mouth shape, the I'm happy.
| | 03:22 | (character speaking: I'm happy!)
That looks pretty good to me.
| | 03:26 | So let's just copy some more A mouths,
and if you ever accidentally find that
| | 03:33 | you move instead of copy which I've
done quite a few times, always be sure to
| | 03:37 | repair your area over here,
because you don't want to lose them.
| | 03:43 | (character speaking: I'm happy!)
| | 03:44 | Okay, so that when he says happy, that
will be our end mouth, and that will be
| | 03:48 | like the B shape where his mouth is
pinched into this little crescent shape.
| | 03:51 | So let's select these, hold down Alt/Option
on the Mac and drag to here.
| | 03:59 | Okay, and I think then it'll be
pretty safe to leave that there.
| | 04:02 | (character speaking: I'm happy!)
| | 04:04 | Now the next thing we want to do is
the open shapes for the mouth, and if you
| | 04:09 | listen again to how loud they are,
that's a good guide for how large of a shape
| | 04:13 | we want to assign here.
(character speaking: I'm happy!)
| | 04:15 | So I'm happy, the A sound on happy seems
to me a little bit louder, think about here.
| | 04:23 | So when I find that point, I just hit
F7 to put a little placeholder, and let's
| | 04:28 | pick the d for the wide-open mouth.
| | 04:30 | And conversely, let's use a medium-
sized mouth for the I'm.
| | 04:38 | (character speaking: I'm happy!)
Looking pretty close already.
| | 04:41 | (character speaking: I'm happy!)
| | 04:41 | Now we could just grab a C for the happy
period, but let's pick a different one,
| | 04:48 | so we can--actually the beauty of
this system is we can actually create
| | 04:51 | in-between shapes here that
are slightly different sizes.
| | 04:54 | And they should be pretty stable.
| | 04:56 | We shouldn't see any shape
flickering if we've done right.
| | 04:59 | So I am just going to make
one there and drag it over.
| | 05:02 | (character speaking: I'm happy!)
Looks good.
| | 05:04 | The other thing that we can do to
finesse this a little bit. In general, when you
| | 05:08 | go from a closed mouth to an open to a
closed, it's nice if you open faster and
| | 05:14 | then you have a few extra frames to go
back into the closed, and we might try to
| | 05:19 | push this happy a little bit. But the
other thing that we can do, for example,
| | 05:23 | by moving a back one,
that will make it pop more.
| | 05:25 | (character speaking:
I'm happy! I'm happy!)
| | 05:29 | And the other thing that we can do is
hold the closed mouth for two frames,
| | 05:33 | let's do that and see what that looks
like, and that's because sometimes the A
| | 05:37 | mouth can disappear. If it closes
only for one frame and one-thirtieth of a
| | 05:41 | second, it can almost be invisible to the eye.
| | 05:44 | So let's just hold the A mouth for a
little bit longer, see what that looks like.
| | 05:48 | (character speaking: I'm happy! I'm happy!)
That's pretty snappy.
| | 05:54 | (character speaking: I'm happy!)
Good, done.
| | 05:57 | So as you can see, that's the general
process, and we just proceed now.
| | 06:01 | We're going to repeat that identical
procedure for the mad or sad section.
| | 06:06 | So I am going to clear the happy
placeholder keyframes, and let's just move
| | 06:11 | forward just a little bit.
| | 06:12 | So now we have our angry wav shape
here, and let's see what he says.
| | 06:18 | (character speaking: But now I'm mad!)
| | 06:20 | Okay, so he starts right from the
beginning with that bah, and that's going to
| | 06:23 | be our closed mouth or the A mouth, and
again we have our sad angry mouth here.
| | 06:28 | Let's drag that to there.
| | 06:29 | Oops! And if you go to the wrong level
just pull it in a little bit, and I am
| | 06:35 | going to also copy our mad/sad label,
so that we can more easily follow.
| | 06:38 | So when we look through the timeline,
we can see the changes of general
| | 06:42 | emotional state, so we can see this
is now beginning a different set of A-F
| | 06:45 | mouth shapes, okay, and I am going to
widen this a little bit so that I can
| | 06:51 | see more of the timeline.
| | 06:54 | Often when I do this I'll make the
timeline really long so that here's the
| | 06:58 | entire area and then a bit of extra on
each side, move that up to here so we can
| | 07:03 | see it, and let's hit this and hit F5
just to give us a little more room, okay.
| | 07:13 | (character speaking: But now I'm--)
But now I'm.
| | 07:17 | So we have an M sound, and that's
another closed mouth. That could be about there.
| | 07:20 | (character speaking: But now I'm mad!)
And mad, I'm seeing that around here.
| | 07:24 | And I think I am hitting that a bit
late, so I'll move that back one.
| | 07:30 | (character speaking: But now I'm mad!)
| | 07:30 | That's about right I think, so let's
grab these, Alt/Option and drag, and
| | 07:37 | this time I am just going to hold them for
two frames since you know that system works.
| | 07:43 | (character speaking: But now--)
And buh should also probably be held for two.
| | 07:47 | (character speaking: But now I'm mad!)
Great!
| | 07:50 | The next thing to do is here we have a
but now I'm, but now, the oo sound on now
| | 07:57 | is interesting, so let's...
(character speaking: But now I'm--)
| | 07:59 | Let's put that in, and I think that's
around here, putting in a blank keyframe.
| | 08:04 | (character speaking: But now I'm--)
Let's say that's about right.
| | 08:06 | So let's hit the F, Alt/Option
and drag to there.
| | 08:12 | (character speaking: But now I'm mad!)
Mad is one big long movement of the mouth,
| | 08:17 | so let's make some space to drop those
shapes in, and I think the B sound will
| | 08:23 | be the nice one to end there.
Mad, it's a really, really long one.
| | 08:28 | This is for having this blending
system for a dialog really comes in handy,
| | 08:32 | because if you only had six or seven or
eight static mouth shapes, getting these
| | 08:37 | to work and to really look
smooth will be almost impossible.
| | 08:41 | So let's--mad, I think they're a little too slow,
so let's move the D in a little bit, so
| | 08:47 | it's moving now to frame 61, and
that's have the B sound a little sooner.
| | 08:53 | (character speaking: --mad!)
Better.
| | 08:58 | So let's go back in now
and just drop in the rest.
| | 09:01 | But, but, so the but will have
another B sound around here.
| | 09:09 | May be a little sooner, Alt/Option and
drag to where you think that should go,
| | 09:19 | And I'll drag the C mouth from here.
| | 09:21 | So the C mouth is now on frame 34, the B
mouth is on frame 37, let's see how that.
| | 09:26 | (character speaking: But now I'm--)
| | 09:27 | Now you see a weak transition from
the B to the F. You almost don't see it.
| | 09:35 | So let's make that just open up a
little bit, and I don't want to use the C
| | 09:39 | mouth, it should be subtle.
| | 09:41 | So what I'll do is make a secondary
keyframe somewhere in here. Let's pick this
| | 09:45 | one, hit F6 and drag those over to here.
(character speaking: But now I'm--)
| | 09:50 | Now you really notice it because you
go from the ee to a little more widely
| | 09:56 | open, before you go into the F.
| | 09:58 | And what that does is it
creates that chewing action.
| | 10:01 | And the same thing applies here, but
now I'm, so we go from the F, and we
| | 10:11 | want something very similar to this, maybe a
C will work for that. Let's copy that to here.
| | 10:17 | (character speaking: --now I'm mad!)
Great! But now I'm.
| | 10:25 | I think we can keep the A
mouth here all throughout this.
| | 10:28 | So I am going to clear that and clear
that, and let's keep the mouth closed
| | 10:34 | from here through here.
(character speaking: --now I'm mad! But now I'm mad!)
| | 10:40 | Great, so that will really read from there to
there, and I think we can switch off the
| | 10:47 | tweens here and our dialog scene
will end around there, I am going to
| | 10:53 | double-click to select all those frames,
right-click and go Remove Frames, just
| | 10:58 | housekeeping, keeping the
timeline nice and clean.
| | 11:01 | (character speaking: I'm happy! But now I'm mad!)
Fantastic!
| | 11:04 | Now there is a couple of
little fine tunes we can do.
| | 11:07 | If you remember we had these three basic--
I can get rid of the rest of the mouth
| | 11:13 | and the sides at the moment.
| | 11:15 | When I will do this in a production
setting, I would always keep all of the
| | 11:20 | different standard mouth shapes here,
because it's nice to have them if I want
| | 11:23 | to change something later on.
| | 11:25 | But for the purpose of this tutorial
because the timeline is getting really
| | 11:28 | long, I am going to just delete these,
and now we want to see how we can relate
| | 11:33 | the custom mouth shapes to the rest of
the scene, and I think we can integrate a
| | 11:37 | couple of these with the dialog line
to really punch it up a little bit, and
| | 11:41 | let's see where we can add them.
(character speaking: I'm happy!)
| | 11:44 | So he says I'm happy. So the
really big shape on here is this one.
| | 11:49 | What if we were able to use this jubilant
mouth which is even wider? Let's try that.
| | 11:55 | I'll hold that down, Alt/Option
and drag, and copy it to here.
| | 12:02 | (character speaking: I'm happy!)
See, so that's how that will go.
| | 12:05 | And you really feel that.
You feel it more than see it.
| | 12:08 | (character speaking: I'm happy!)
| | 12:10 | You might think it's a little over the top, in
which case you can tone it down a little bit.
| | 12:15 | But that's pretty good I think.
(character speaking: I'm happy! But now I'm mad!)
[00:12:18.79ll]
Okay, so maybe we can do the
same thing at the end here.
| | 12:22 | So that's the angry B mouth, but we
also have a really nice furious mouth here
| | 12:27 | which is really more extreme.
| | 12:28 | So let's copy that, Alt/Option and
drag to here, and now I am just going to
| | 12:34 | switch off the tweens just so
that we end it at the right point.
| | 12:37 | (character speaking: --happy! But now I'm mad!)
That's great.
| | 12:41 | So we end on a frame that really shows
us that we have more inner arsenal than
| | 12:45 | just six standard shapes and different
emotions, and we can create all kinds of
| | 12:50 | custom notes, as you proceed, and you
start to animate more and more and more,
| | 12:54 | as long as you follow the same pattern
of structuring your images, you can have
| | 12:59 | an enormous library--not just the one,
two, three of these, but you could
| | 13:04 | conceivably have 20, 30, 40 different
custom mouths and be able to blend most
| | 13:07 | of them with our regular dialog and go back and
forth that will really give you incredible power.
| | 13:12 | One last thing that we need to do here,
and that's slow in or ease in, and that
| | 13:18 | will add a lot more subtlety.
| | 13:19 | So let's select these just the shape tweens,
go to Properties and under Ease, set that to 80.
| | 13:27 | So we are easing out to 80, and what
that's going to do is it's going to ease in
| | 13:32 | to there, and you'll see the
difference now on the top level compared to the
| | 13:36 | lower ones that don't have it yet.
It's a much smoother motion.
| | 13:39 | We'll do the same thing for the classic
tweens, and we'll do the same thing for the
| | 13:44 | bottom layers, too, and now
let's go back to the beginning.
| | 13:51 | (character speaking: I'm happy!)
| | 13:53 | And I think we should do the same thing here
so that we end on happy, we slow in there.
| | 14:06 | (character speaking: I'm happy! But now I'm mad!)
Great, and there we have it.
| | 14:11 | So I am just going to delete
the custom shapes from the end.
| | 14:14 | Again, were this a project that I was
working on at home, I would keep the
| | 14:19 | entire stack of standard shapes on
here like I said, because it's handy, if I
| | 14:23 | change my mind later on, or I want to
add something extra to have them right
| | 14:27 | there in the timeline.
| | 14:28 | But if you'll delete them, it's not a
big deal, you can copy them back in from
| | 14:32 | the original rig file.
| | 14:33 | So and one last piece of work, just call
that sound and right-click on that, make
| | 14:40 | the Outline Color for sound white as well,
because it doesn't have any graphical
| | 14:44 | elements or anything, and there we go.
| | 14:46 | So we have made our first dialog
scene, and that's pretty great.
| | 14:49 | So in the next movie what I'm going
to do is take this dialog scene and
| | 14:53 | integrate it with the face and make the
face and the dialog work together, and
| | 14:57 | that's going to be really, really impressive.
| | Collapse this transcript |
| Adding expressions to the animation| 00:00 | In the previous movie, we took a
simple short line of dialog, and we arranged
| | 00:05 | the mouth shapes so that we brought
this thing to life and made it speak.
| | 00:09 | (character speaking: I'm happy! But now I'm mad!)
Great!
| | 00:12 | So now the next step, obviously,
is to place that inside the face.
| | 00:16 | So let's go into our Library
panel and see how we do that.
| | 00:19 | And the best way will be to pick our
facial acting rig, right-click, Duplicate
| | 00:26 | this, and we'll call it facial acting
dialog, and that will match our mt A
| | 00:34 | dialog symbol that we've made our dialog in.
So click OK to that, and there it appears.
| | 00:39 | Let's double-click on that in the
Timeline, in the Library I am in, and now
| | 00:44 | let's make a few little
fixes here to line these up.
| | 00:48 | What we need to have happen is to have
the timeline of the face perfectly match
| | 00:53 | the timeline of the mouth.
| | 00:55 | So let's double-click on the mouth
now that we see it next to the face, and
| | 01:00 | that's the wrong mouth,
so let's go back out again.
| | 01:03 | I am going to go back into the Library.
Happens a lot this, so bear with me.
| | 01:07 | So now we have our hd 2 face symbol.
| | 01:10 | I am going to move the timeline back a
little bit, so we can see the name of that.
| | 01:15 | We don't want to get lost, so here we go!
| | 01:18 | And the mouth right now
is the wrong mouth symbol.
| | 01:20 | So let's right-click on that, and we'll
swap the symbol for the mt A dialog, and
| | 01:27 | that's the one that has our great
mouth dialog in, so there we go, and let's
| | 01:31 | test that again, click on the mouth. That's it!
| | 01:36 | Next step, select the sound, emotions,
and shapes, so click this, hold down
| | 01:41 | Shift and click on shapes, or Ctrl-click,
click, click, right-click on that, copy
| | 01:47 | those frames, go back into our hd 2
facial acting dialog scene, or click here,
| | 01:53 | and then on the three new layers on the
top--we'll make 1, 2, 3--I am going to
| | 02:00 | paste those layers in here, and let's
get rid of this little reference folder,
| | 02:06 | we don't need that anymore.
| | 02:07 | We created that when we were rigging the
thing, but obviously we're done with that now.
| | 02:13 | Okay, so now we have if we play through.
(character speaking: I'm happy! But now I'm mad!)
| | 02:18 | That's great, and then we have at the
end of this, and I am going to just move
| | 02:22 | these to the back just to clear the Timeline.
| | 02:24 | So now we have our
Timeline and our custom faces.
| | 02:30 | So the problem will become how do we
integrate these custom faces with the dialog?
| | 02:35 | So usually it's easy to get a little
bit flustered and quit before you even
| | 02:39 | begin with this, so let's start with
basic principles, and we'll work forward.
| | 02:42 | (character speaking: I'm happy! But now I'm mad!)
| | 02:45 | Okay, so for the first chunk of this,
he will start out in the happy face which
| | 02:50 | we can see from our labels here.
| | 02:52 | And actually, these happy labels are
kind of confusing because they came with
| | 02:56 | the rig, so I am going to delete these,
make this easier to follow, and let's
| | 03:00 | pull this forward by 1, right-
click and clear that keyframe.
| | 03:06 | So the only labels that we have now at
the top are the ones that tell us where
| | 03:09 | our different emotions should go here.
| | 03:12 | So I like the first one of course, it's
nice to start in the A pose, and we'll
| | 03:16 | start from here, and stay
happy until about this frame.
| | 03:21 | So let's put a keyframe in here.
| | 03:25 | And also one little thing to be sure of
for whatever reason, make sure that your
| | 03:29 | mouth symbol on the first frame in the
Properties panel under Looping is set to
| | 03:33 | Play Once and is set to frame 1 from the start.
| | 03:36 | That way, all of your future
frames will line up and play perfectly.
| | 03:40 | So at this point here, we're going to
go to mad and sad, so let's make a little
| | 03:44 | F7, a blank keyframe just to make a
note of that, and I want to go to the end
| | 03:49 | and pick the angry face,
that could be about this one.
| | 03:54 | So let's select that stack, hold down
Alt/Option and drag and move it to
| | 04:03 | there and see what that looks like,
and it's probably made a bunch of keys
| | 04:08 | for the mouth that we don't need, so
let's delete them, put the mouth level as
| | 04:12 | one continuous line.
| | 04:13 | (character speaking: I'm happy! But now I'm mad!)
Great!
| | 04:18 | So you're getting the rough idea
as to how this will work by now.
| | 04:21 | So let's pick a big bright
happy face for the D mouth.
| | 04:26 | If you remember the custom happy
mouth that we used for the previous movie
| | 04:31 | right here, that's where he is at his absolute
happiest, so I am going to make a little note there.
| | 04:39 | And actually that wasn't an A mouth,
that's a D mouth, so I am going to fix
| | 04:43 | that in the Properties.
| | 04:44 | This will be a custom mouth, so let's
call it WIDE, and it's nice to use these
| | 04:50 | labels to make little notes and
reminders for yourselves, because it's very easy
| | 04:53 | to get lost with these huge timelines.
| | 04:56 | So again, let's go forward and get the
jubilant face and hold Alt/Option and
| | 05:03 | drag that back to here.
(character speaking: I'm happy! But now--)
| | 05:10 | Okay, now there is some weirdness
happening because this symbol for the mouth
| | 05:13 | got pulled in, and it's the wrong one, so let's
right-click on that and go clear that keyframe.
| | 05:17 | (character speaking: I'm happy! But now I'm mad!)
| | 05:21 | Okay, so there is a lot of stuff going on
that needs to be fixed with these tweens.
| | 05:26 | So what I am going to do is to hold
the neutral start frame until this point
| | 05:30 | here, and then I am going
to start activating tweens.
| | 05:35 | So it's just a method of right-
clicking on each layer, and it allows you to
| | 05:40 | Create a Shape Tween, you Create a
Shape Tween, and if it doesn't, then you
| | 05:44 | make a Classic Tween.
| | 05:45 | So here, for example, we can only do
Classic Tween because it's a symbol, on
| | 05:49 | these layers as a shape, so we
apply Shape Tweening, and we go forth.
| | 05:53 | Let's see what that looks like.
(character speaking: I'm happy!)
| | 05:58 | Now, I think the face is
moving a little fast with this.
| | 06:01 | I think we should get him
into that happy a little sooner.
| | 06:04 | So I am going to drag that
to here, see what that's like.
| | 06:10 | So really it's just that wide open
flash of happy, so I am going to move these
| | 06:15 | forward just a little bit.
(character speaking: I'm happy!)
| | 06:19 | I am not worrying too much about the
mouth right now, but if it does get to
| | 06:23 | annoy you that it's on the wrong frame, then
select those new keys and just get rid of them.
| | 06:28 | (character speaking: I'm happy! But now I'm--)
Okay, looking good!
| | 06:30 | So then we want the transition from
the end pose, the regular happy pose, into
| | 06:35 | the mad or sad pose.
| | 06:36 | So let's keyframe that, and
we'll just start making tweens again.
| | 06:44 | (character speaking: I'm happy! But now I'm mad!)
| | 06:47 | Looking better, so you get the
general idea about where we're heading now.
| | 06:51 | So let's fix some little things that are
flashing, the creases around the mouth,
| | 06:55 | and I think that's because when we
dragged the lines back, there were some
| | 07:00 | layers that got left out.
So I can correct that.
| | 07:03 | So that's on this layer here.
| | 07:07 | So the uppercase layers, and this is
where it's nice to have uppercase for the
| | 07:11 | custom layers that we use for
this symbol that need to be added.
| | 07:14 | So I am going to hold down the Alt/Option key
and drag them to where they will
| | 07:20 | fade in and fade out, and we
obviously don't need them here, so let's
| | 07:26 | right-click and remove those Tweens.
| | 07:29 | And here, adding the creases means that we
would have to make them move with the mouth.
| | 07:35 | And frankly, for the purposes of this
tutorial, it's too much work, but it would
| | 07:41 | be a matter of your personal preference
whether or not you wanted to have these
| | 07:44 | creases added for all of the rest of the dialog.
| | 07:46 | But what I am going to do for
the moment is just take them out.
| | 07:51 | So on these layers that are marked
uppercase, let's just delete them, and we don't
| | 07:58 | need them here either, so
we'll delete them there too.
| | 08:01 | And by here, of course, they are invisible
anyway, so I will put a blank keyframe in there.
| | 08:08 | Now, we only see them for this gesture.
(character speaking: But now I'm mad!)
| | 08:12 | Now, as you can see, he is tweening
here at the end, and we probably don't need
| | 08:18 | him to tween, so let's
select these and go Remove Tween.
| | 08:24 | (character speaking: I'm happy! But now I'm mad!)
| | 08:27 | Now, he goes into that
really fast, so let's see
| | 08:30 | if we can punch that a little bit.
(character speaking: But now I'm--)
| | 08:33 | So maybe we can add an extra
expression because we have this puzzled
| | 08:39 | expression as well.
| | 08:40 | And don't worry about these lines here,
we're just going to work with--and the
| | 08:43 | mouth is very distracting,
let's switch that off.
| | 08:46 | It would be nice if we could work this shape in.
| | 08:48 | So let's select these instead, grab
these with the puzzled stack, hold down
| | 08:53 | Alt/Option, let's drag them in here.
| | 08:55 | Maybe we can go to puzzled first and then take
him into angry, that will be a nice transition.
| | 09:00 | So I'm going to put puzzled to here,
select angry, and just let's replace
| | 09:06 | them one to the other.
| | 09:08 | I think I accidentally dragged one to
the wrong layer, so let's undo that.
| | 09:14 | You have to be very careful when doing
this so you don't accidentally move like
| | 09:17 | one down, or you will cause a problem.
| | 09:22 | So I will have him in the furious here,
and we'll begin with puzzled, and once
| | 09:29 | more, let's get rid of the creases
on the face, and we've also probably
| | 09:35 | generated a bunch of mouth shapes
that are in the wrong state, so let's
| | 09:38 | right-click them and clear those keyframes.
So now we're looking better.
| | 09:47 | (character speaking: But now I'm mad!)
| | 09:49 | And let's slow this down a bit.
So I am going to pull the
| | 09:53 | angry face forward just a little bit,
so he gets there a little bit slower.
| | 09:58 | Now you can see some weirdness
happening with the mouth because it's not
| | 10:01 | tracking the motion of the nose.
So let's correct that.
| | 10:04 | Now, we can put in keyframes for
the mouth where they are needed.
| | 10:10 | So I am just hitting F6 to do that,
right-click on these and Create a Classic
| | 10:15 | Tween, and if you think that mouth is
a little high or even too big, you can
| | 10:21 | use Free Transform to apply Motion
Tweens and make smaller adjustments or even
| | 10:26 | rotate these, hence the beauty of nesting
all of your animation inside other symbols.
| | 10:32 | And by here, let's move that mouth down
because that looks mighty strange with
| | 10:37 | that nose there, so let's
see what this looks like.
| | 10:39 | (character speaking: I'm happy! But now I'm mad!)
That's much better.
| | 10:44 | So just for the sake of cleanliness
and making this timeline easier to follow
| | 10:48 | for the tutorial, I will remove these frames.
(character speaking: I'm happy! But now I'm mad!)
| | 10:56 | Imagine how long this scene would have
taken me to animate if I didn't have
| | 11:00 | access to that beautiful library of pre-
constructed expressions. It would have taken hours.
| | 11:07 | I would have been here all day, and
instead I've been able to put this little
| | 11:11 | scene together really in 20 minutes.
It's astonishing when you see actually in
| | 11:16 | practice and in real-time how
little effort it takes to do this.
| | 11:20 | You do have to practice with the rig
and get used to it and maybe build your
| | 11:24 | own, and you will be really
intimately familiar as you create your own
| | 11:28 | characters and develop
your own methods and systems.
| | 11:32 | But let's look at this fellow one more time.
| | 11:34 | One last thing I would like to change
is, again, adding a slow in here, very
| | 11:38 | important, and I like easing in--or easing out
rather--80% usually gives a really nice feeling.
| | 11:44 | (character speaking: --now I'm mad!)
Oops! Let's go back and fix that.
| | 11:48 | So what I am going to do is simply go
through all of these, add 80 out, and
| | 11:55 | that gets rid of the mechanical feel where
everything is moving at the same consistent speed.
| | 11:59 | Let's see what that feels like.
(character speaking: I'm happy! But now I'm mad!)
| | 12:05 | Great, and I feel like the mouth at
the end gains a little bit of volume from
| | 12:13 | here to there, and there is a
beautifully easy fix for that.
| | 12:18 | I'll make a keyframe under the D, make
a keyframe under the A, and you can make
| | 12:28 | it as small as you think you need, or
even rotate it, and if you want to do
| | 12:34 | something like rotate the nose, for
example, then again, make a keyframe in
| | 12:37 | the same place, Create Classic Tween,
Create Classic Tween and maybe do an Ease
| | 12:44 | Out again and then Ease Out here, now we can
move the nose just very slightly, very slightly.
| | 12:52 | And again, nothing stopping you from
adding little custom movements here.
| | 12:59 | If you wanted to bring the eyebrows down,
for example, simply add more keyframes.
| | 13:06 | Use Free Transform, hopefully the
shapes will continue to behave.
| | 13:13 | Let's squish them a little bit.
| | 13:16 | (character speaking: I'm happy! But now I'm mad!)
There we go!
| | 13:19 | So that's the method, and as you
can see, we break it down into two
| | 13:23 | steps, first pass, we do the dialog, on the
second pass I match the head to the mouth.
| | 13:28 | You could of course do the other
way around. You could animate the head
| | 13:31 | animating first and then add the mouth in.
| | 13:33 | It really comes down to what
workflow is going to work best for you.
| | 13:37 | I like to begin with the mouth and
workout, you might want to animate the entire
| | 13:41 | body, then animate the head,
then animate the mouth.
| | 13:43 | I am not trying to encourage you to do
one or the other, but I find this is a
| | 13:48 | good approach for me, as you can see,
it's a very nice squishy plastic feeling,
| | 13:52 | and other things can be added, for
example, if you could articulate the jaw
| | 13:55 | here on this like really wide open motion there.
| | 13:59 | There is really no end to this, you
could keep going, adding more and more
| | 14:06 | subtlety and more and more animation to it.
| | 14:08 | So, as you can see, it's possible to
use this system to animate rich lifelike
| | 14:13 | characters very, very quickly.
| | 14:15 | Imagine how long it would have taken
me to animate this scene from scratch.
| | 14:19 | It would have required hours, and instead, I
was able to put it together in just minutes.
| | 14:23 | So this is the payoff for all the
really hard work that we did at the
| | 14:27 | beginning of the course.
| | 14:28 | This is a very flexible powerful way to
animate, and I think it's pretty amazing.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | So we're done!
I hope you enjoyed following along with me.
| | 00:03 | If you need more resources here in
the lynda.com online training library, I
| | 00:08 | have two other courses that also deal with
animating in Flash, Flash Professional CS5:
| | 00:14 | Character Animation, and Animation
Tips and Tricks with Flash Professional.
| | 00:19 | In addition, I found these
books to be very helpful:
| | 00:22 | Animated Performance by Nancy Beiman,
which focuses on performances and
| | 00:25 | personalities of cartoon characters,
Character Animation Crash Course!
| | 00:30 | by Eric Goldberg which is an
excellent general overview of animation,
| | 00:34 | The Animator's Survival Kit by Richard Williams,
which is probably the greatest
| | 00:38 | single resource of the mechanics of
walk and run cycles, but which also has
| | 00:42 | excellent material dealing
with dialog and facial animation.
| | 00:46 | I think that this course was
hard work but really rewarding.
| | 00:48 | A lot of this material took me
a number of years to develop.
| | 00:52 | But now that you've seen what's
possible with Flash, take some time and play
| | 00:56 | with these techniques with your own
characters and see what works for you.
| | Collapse this transcript |
|
|
