IntroductionWelcome| 00:04 | Welcome to Flash
Professional CS5 Character Animation.
| | 00:08 | I am Dermot O'Connor.
| | 00:10 | This course will take you through the
process of animating for TV or the web.
| | 00:14 | In this course I'll show you how to set
up a project and make your work process
| | 00:18 | as fast and smooth as possible.
| | 00:21 | Then we'll take a traditional character
design and convert it into a puppet or
| | 00:25 | rig that can be animated in Flash.
| | 00:28 | Once we have the rigged figure set up,
I'll show you some of the different
| | 00:31 | styles of animation in Flash,
motion tweening and shape tweening.
| | 00:36 | The first scene will be a simple head
turn, which will allow us to animate some
| | 00:40 | nice facial movements.
| | 00:41 | Then I'll show you how to animate a couple
of walk cycles and finally, a dialog scene.
| | 00:48 | I have been working in animation for
20 years in feature television, games,
| | 00:52 | mobile phones and the Internet.
| | 00:54 | Flash can be used to create
animation in all of these formats.
| | 00:59 | By the time you finish this course,
I hope you will feel ready to begin work
| | 01:02 | on your own projects.
| | 01:03 | So please join me as we create an
animated character from scratch in Flash CS5.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a premium member of the
lynda.com Online Training Library, you have
| | 00:05 | access to the exercise files
used throughout this title.
| | 00:09 | The exercise files are in the Exercise Files
folder, which I have placed on the Desktop.
| | 00:14 | You can store it wherever you like.
| | 00:16 | There are files for most movies.
| | 00:19 | They reside in subfolders
named according to the chapters.
| | 00:22 | It is not necessary for you to use these files.
| | 00:25 | You can use files of your own in place of them.
| | 00:28 | If you are a monthly or annual subscriber
to lynda.com, you don't have access to
| | 00:33 | the exercise files, but you can
follow along with your own work.
| | 00:37 | Let's get started.
| | Collapse this transcript |
| Prerequisites| 00:00 | In this course, I assume that you are
familiar with the basic Flash interface.
| | 00:05 | So as long as you know how to use all
of the tools, you know, not in any great
| | 00:08 | detail, but you know how to make a line,
you know how to make a rectangle,
| | 00:12 | you know how to turn that into a symbol,
the essential stuff, you know how to move
| | 00:16 | objects on the stage, how to set a
keyframe or blank keyframe, and also how to
| | 00:22 | navigate the Library.
| | 00:23 | As long as you are reasonably aware of
that, then I think you're ready to go.
| | 00:27 | I'm not going to use
ActionScript, so don't worry about that.
| | 00:30 | This is a fairly artist friendly program.
| | 00:32 | I am ActionScript-phobic.
| | 00:34 | I have also used all CS4 friendly assets.
Even though this is going to be a CS5 course,
| | 00:40 | all of the exercise
files have been saved in CS4.
| | 00:44 | If you use CS4, I think you can
probably stick with this class.
| | 00:48 | I don't think there is
going to be any major issues.
| | 00:51 | I've used the basic
traditional tools to create this.
| | 00:55 | If you are using an older version than
CS4, things obviously will be different.
| | 00:59 | The Properties panel will look quite different.
| | 01:01 | So I'm afraid it's at your own risk,
but all of the general principles that I'm
| | 01:05 | teaching in this will be applicable
backwards to all, I think, all the way to
| | 01:09 | Flash MX to be honest.
| | 01:10 | You'd have to be of course patient, but
it might be worth your time looking at.
| | 01:15 | I think this is probably the fastest
way for any artist to break into the world
| | 01:19 | of computer animation.
| | 01:20 | It's not like 3-D, because you can
really get into the animation process very
| | 01:24 | quickly with this, and as long as you
have a little bit patient and you are
| | 01:28 | ready to work around a couple of
quirks, I think you want to find yourself
| | 01:30 | animating a lot quicker than
you might think. So that's it.
| | 01:35 | Let's go on to the first part of the course.
| | Collapse this transcript |
|
|
1. Setting Up the ProjectCreating Flash-friendly character design| 00:01 | When you're working in Flash, it's
important to know the strengths and
| | 00:04 | weaknesses of the program.
| | 00:05 | This is going to affect how you
design your project and your characters.
| | 00:09 | Now unlike in 3-D programs like Maya
or 3D Studio MAX, Flash works with a
| | 00:13 | series of flat layers.
| | 00:15 | This means that we should favor
design styles and movements that recognize
| | 00:19 | this and allow for it.
| | 00:20 | Now we have to work around this
flatness and create the illusion of
| | 00:24 | dimensionality, that the character
actually is in a series of squished levels.
| | 00:29 | So I'm going to show you the rig that we're
going to create during the course of this class.
| | 00:33 | Let me change the workspace layout
a little bit. So it's easier to see
| | 00:41 | the vertical stack. That's good.
| | 00:43 | Let me switch this to Outline mode.
| | 00:47 | Each layer has a different outline color.
| | 00:49 | I'm going to pull the figure apart a little bit.
| | 00:52 | Let's go back to color.
| | 00:56 | So you get the idea.
| | 01:01 | Essentially think of it like a one of
those little flat dolls on strings that
| | 01:05 | you pull and yank the legs out.
| | 01:07 | It's pretty much no different.
| | 01:08 | That's the physical structure of the character.
| | 01:10 | I'm going to reverse them back now, okay.
| | 01:16 | So the simpler and the more graphic your
design, the easier it's going to be for
| | 01:20 | you to pose the character and to
animate them, and the more realistic and the
| | 01:23 | more detailed the design,
the harder it's going to be.
| | 01:26 | So let me show you.
| | 01:27 | In fact these layers are old one single
color means I can move them, align them
| | 01:32 | into different positions and poses,
and I don't have to worry quite so much.
| | 01:36 | I can split the legs over here.
| | 01:41 | Quite drastically change the pose
of the character, even without doing
| | 01:45 | anything really substantial.
| | 01:47 | I don't have to worry about
lining up too much details.
| | 01:50 | That's pretty good.
| | 01:51 | I can flip the head over, all kinds of
things, and that's just a simple example.
| | 01:58 | Now, let's suppose that our figure has
lines, one of the big design no-nos of Flash.
| | 02:04 | Try to avoid stripy lines
that cross the seams of the levels.
| | 02:08 | You got to try to avoid polka dots, and
I've seen all these things in actual
| | 02:12 | productions and they caused havoc,
because lining up the seams, if stripes cross
| | 02:17 | them or dots cross them or some other
graphical element crosses these points,
| | 02:21 | the animators have to spend
quite a lot of time making that work.
| | 02:24 | So let's try to do
something similar with this guy.
| | 02:27 | If I move that arm, you can see
immediately on the shoulder area, if I move that hand,
| | 02:33 | try to do anything with that hand
to make him look like, "Come this way sir,"
| | 02:37 | oh dear, oh dear.
| | 02:38 | That's going to be someone's lunch break ruined.
| | 02:41 | So this is the problem with being
too ambitious and too fancy with
| | 02:46 | these graphical elements.
| | 02:47 | You have to be very careful about how
you structure them and where you put them
| | 02:51 | and if I wanted to do something even
more important with one of these shapes.
| | 02:55 | For example, if I wanted to take
the arm and work inside the arm, to do
| | 03:03 | something really interesting and
position it into a different gesture,
| | 03:07 | it's easy enough to do it.
| | 03:10 | It's just a single area of flat color.
To do this same thing with the striped arm
| | 03:21 | involves point after point after point.
| | 03:26 | It's going to take a long time just
to do something, the smallest change.
| | 03:33 | That's not going to be fun and the
chances are it's not going to look good.
| | 03:38 | So that's one of the cardinal rules when
you're designing a character for Flash.
| | 03:41 | Don't inflict this on yourselves,
because it will wear you down.
| | 03:45 | I'm not saying it's impossible.
| | 03:46 | There are ways and means to do some of
these effects, but they require quite a
| | 03:50 | bit of engineering and they're
certainly not for somebody who's beginning to
| | 03:53 | work in Flash and you should have
a lot of time to decide to do it.
| | 03:57 | As a good rule of thumb, the more
complicated your design, the less energy and
| | 04:01 | time that you're going to have
to actually animate the character.
| | 04:04 | Let me show you just the simple example
of a simple design, little dollar bills
| | 04:09 | walking in great numbers. These are marching.
| | 04:12 | Let's go in a little closer.
| | 04:19 | Okay, let's go try it again.
| | 04:23 | So there we see a little shape,
a simple shape tweened animation.
| | 04:26 | A lot of personality in that, a lot of
fun to work in, and all this is a
| | 04:30 | couple of layers, so if you're in the
process of learning this program, I think
| | 04:34 | you'll get a lot more enjoyment out of
animating something that's easy to work
| | 04:38 | with, and not overly laden with
graphical elements, things around the perimeter
| | 04:44 | or any of the detail.
| | 04:45 | So that's initially, we'll try to keep
these symbols as simple as we can, and
| | 04:49 | make your time as free as possible to
focus on actually making our little guy
| | 04:53 | perform and act and walk.
| | 04:55 | So let's move on.
| | Collapse this transcript |
| Animation rendering: SWF or AVI| 00:00 | There is a technical issue
that I'd like to address.
| | 00:03 | This is going to affect your
character and your animation and the visual
| | 00:07 | style that you choose.
| | 00:09 | If your animation is going to be
played online as an SWF file, like on the
| | 00:14 | phone or any kind of way that keeps it
as a vector image, then your file size
| | 00:19 | and your frame, they're going to be
very important and they're going to set
| | 00:21 | constraints to some degree
on the choices that you make.
| | 00:25 | Your characters should be optimized,
not too complex, or the frame might
| | 00:30 | slow down and become choppy.
| | 00:31 | So for example, you're currently
looking at a scene from a short film that
| | 00:35 | I've been working on.
| | 00:36 | This is a scene that actually can't
play in Flash because it has gradients.
| | 00:40 | It has all these color layers and effects and
transparencies that slow down the Flash Player.
| | 00:47 | If I try to play this in the
Flash Player, it gets very ugly.
| | 00:49 | I'm going to show you the scene
straight through. It starts well.
| | 00:54 | The little guy doubles and he keeps doubling.
| | 00:56 | But each time he doubles, his numbers
double, as you can see the gradients double,
| | 01:00 | until soon we have too many symbols,
too many gradients, too much stuff going on.
| | 01:04 | By this point we are not even
getting one frame per second.
| | 01:07 | So effectively we're stuck. So what do we do?
| | 01:11 | If our target audience is going to be
watching this on a DVD or television,
| | 01:16 | then there is no problem.
| | 01:17 | They can simply export it in the AVI
file or an MOV file or a PNG sequence,
| | 01:21 | bring them into After
Effects and do our work in there.
| | 01:24 | So now I'm going to show you the same
scene rendered out and we're going to
| | 01:29 | play it in Media Player.
| | 01:42 | That's it. So, as you can see, no
problems with frame rate there.
| | 01:45 | So, again you should bear that in mind
when you are building your character.
| | 01:49 | If you're going to be keeping it as
an SWF file all the way through your
| | 01:53 | production right to your final destination,
you don't want to go too heavy with gradients.
| | 01:57 | You've just seen what happens when you
overload your rig with fancy effects.
| | 02:01 | You could probably have one or two or
three or four characters looking like this,
| | 02:04 | lots of nice little effects
and things, but if you had a crowd scene
| | 02:08 | you'd be in big trouble.
| | 02:10 | So this is a pretty good example of how
you're going set your limitations based
| | 02:14 | on your audience and the format that
they're going to be watching your movie on.
| | 02:17 | We'll proceed on to talk about the
Line tool and other stylistic limitations
| | 02:22 | that you might face.
| | Collapse this transcript |
| Understanding line tool drawbacks when animating| 00:01 | When you create your images in Flash,
there are several different looks that you
| | 00:04 | can assign to your character and each
of these looks has its own pros and cons
| | 00:08 | and I'm going to be covering each of them.
| | 00:10 | So the three major looks that most
people use are the Line tool, the Fill or
| | 00:14 | the flat color, so you can see the line on
the left, fill in the middle, flat on the right.
| | 00:19 | So the pros of the Line tool are
it's very fast and easy to draw.
| | 00:23 | So let's just pick that nice
little solid area and do a
| | 00:29 | good demonstration.
| | 00:30 | So I'm going to match the line
weight of the character we were looking at
| | 00:33 | here, a little bit heavier.
| | 00:36 | So we just draw and we can create our
character very quickly, very easily.
| | 00:41 | So it has speed on its side and ease-of-use.
The line weight can be changed very easily.
| | 00:47 | Let's just select everything, go into
our Line tool, and as you can see I'm
| | 00:50 | changing the Stroke size, quite brazenly.
| | 00:52 | Let's make it lighter.
| | 00:53 | That gives you a great deal of
power over the weight of the image.
| | 00:56 | And then also it has a very small file
size, because we're dealing with many of the
| | 01:00 | smallest number of points that
we could use to create this image.
| | 01:03 | It's hard to see how we could
make it much smaller than this.
| | 01:07 | Now on the downside, when you scale the Line
tool, it tends to clump and it looks quite ugly.
| | 01:15 | Let me show you what that looks like.
| | 01:16 | I'll do all three together for comparison.
| | 01:19 | Let's scale this down, and zoom in just a
little bit, and the weird thing happens with the
| | 01:24 | Line tool when it hits a certain point,
it seems to stop getting smaller.
| | 01:28 | The flat color and the fill character are
legible, even at this tiny size. You can
| | 01:34 | still kind of make out arms and legs and such.
| | 01:38 | The line character is a bit of a clumped
thing and if you have a lot of these it
| | 01:42 | looks quite ugly and eye-catching.
| | 01:45 | This causes pretty large problems.
| | 01:47 | So let's undo that.
| | 01:50 | The other disadvantage is that the line
weight is so consistent that it doesn't vary,
| | 01:55 | so therefore it just ends
up looking extremely mechanical.
| | 01:58 | If you especially need to compare to
the middle character who looks like he was
| | 02:01 | drawn by an ink brush or something
a little more creative, this seems to
| | 02:05 | have been carved in.
| | 02:06 | It just looks like it's been machined.
| | 02:07 | It's not a nice look I think.
| | 02:10 | Another disadvantage when playing
animation with the Line tool, I found that you
| | 02:15 | don't get quite as good a frame rate
strangely enough as you will when you're
| | 02:18 | working with these flat color areas.
| | 02:20 | Another disadvantage is that when
different lines of different colors overlap,
| | 02:25 | it can be very difficult to
control which line is on top.
| | 02:28 | So I'll show you what that looks like.
| | 02:30 | If I grab this line here and pull it out,
| | 02:32 | it's then blobbing over the black line.
| | 02:34 | If I wanted to put the black line on
top of that, I'm not quite sure how I would
| | 02:38 | rather do it frankly. Even when I make
a new black and pop it down, this one
| | 02:41 | still wants to be on top.
| | 02:43 | And if it happened to put the lines on
different layers, it's a terrible chore.
| | 02:46 | So let's undo all that.
| | 02:51 | So slightly hard to control some of the
graphical elements in there, and the big one for me,
| | 02:56 | if you are into animation and you
create your image out of these lines,
| | 03:00 | and let's say you want to shape tween from
this pose to this pose, here's what happens.
| | 03:05 | All the lines disappear on the
in-between frames, and if you wanted to
| | 03:09 | correct out the process, it's pretty dire.
You have to keyframe all of the secondary ones.
| | 03:15 | You have to then fill them with the
Ink Bottle tool frame-by-frame and if you
| | 03:21 | have many, many frames, this is really
tedious, and then you've got to paint out
| | 03:25 | this little guy at the top because of
course that's not going to look good here.
| | 03:30 | So it's pretty boring and
it's just honestly not suitable.
| | 03:35 | So that's the Line tool and
that's why we won't be using it.
| | 03:38 | So that leaves us with the
Fill tool and the Flat Color tool.
| | 03:42 | So let's look at the Fill tool.
| | 03:44 | The Fill tool has the advantage of
looking much nicer, where you can taper the
| | 03:47 | line so that it looks it's
been drawn by an actual artist.
| | 03:51 | It scales down much more
nicely as we saw if we zoom out.
| | 03:53 | It still looks good whereas this is clumpy.
| | 03:56 | I've not been able to detect any major
frame rate impact as I did with the Line tool.
| | 04:03 | On the disadvantage, it takes a little
longer than the Line tool to draw and if
| | 04:07 | we look at the points, the geometry
inside with the Subselection tool,
| | 04:11 | just click on this, and you can see
that of course there is an inter line.
| | 04:15 | There is an outer line.
| | 04:16 | They've been colored in.
| | 04:17 | Let's go a little tighter on this,
so you can see exactly what I mean.
| | 04:21 | So I've got an inter line for one
side of the stroke and then outer for the
| | 04:24 | other, and then these are
filled with a solid color.
| | 04:27 | So of course this is doubled in
points of the line version and the other
| | 04:32 | disadvantage of this is that it can
make shape tweening a little trickier and
| | 04:37 | I'll show you an example there.
| | 04:39 | Here's an arm where we've roughly
colored it and painted it with the same
| | 04:44 | technique and if I do a shape tween
on this from this pose to this pose,
| | 04:48 | it begins to break apart, and this means
that I have to add lots of secondary shape hints
| | 04:52 | and other points to try to
encourage it to not mutate like this.
| | 04:56 | So that by no means is a deal-breaker.
| | 04:57 | We can work around this problem, but it
does create a little more time that we
| | 05:01 | have to spend tweaking all these points.
| | 05:04 | So ideally what I like is a system that
combines some of the strengths of both
| | 05:08 | and also that looks good.
| | 05:11 | So that would be our flat color
version, and in this case you can see there
| | 05:14 | are the areas that don't have any
line work at all because the flat color
| | 05:17 | basically speaks for itself.
| | 05:19 | I think this style looks great.
| | 05:21 | I think visually, stylistically, it's
the most sophisticated of all the Flash looks
| | 05:25 | and you have seen that all over
the place. If you watch commercials very
| | 05:28 | carefully, it'll come up a lot in some of
the animated ads and there's a reason for that.
| | 05:34 | The reason being it is the most
adaptable to Flash and that's the fastest and
| | 05:39 | it allows for very cool physical action.
| | 05:42 | So as a good rule of thumb, the more detail
your figure has, the harder it'll be to animate.
| | 05:47 | So obviously the flat color having
fewer points is easier to animate.
| | 05:51 | Now the disadvantage of the Flat Color
tool occurs if you move two areas of the
| | 05:55 | same color in front of one another.
Hands can get disappeared and if you move
| | 06:01 | the hand in front of the face,
they're in the same color areas.
| | 06:04 | There is no black
outline to keep them separated.
| | 06:06 | So that's why we've added
these little areas of shades.
| | 06:09 | We've had to add these and little areas
of bright and these can be increased in
| | 06:14 | color or contrast if needed to. A closer
approach to what we're seeing here on the
| | 06:18 | physical left arm of the character.
| | 06:20 | So as you can see here with the dark
color of the background hand, that's the
| | 06:23 | workaround for not losing that against
the body. If that arm were the same color
| | 06:28 | and we began moving it around, we wouldn't
know where the chest ended and the arm began.
| | 06:33 | So I don't see extra engineering that we
have to do on our character's color and
| | 06:38 | these little shadow areas to
be so dire that we have to not use it.
| | 06:42 | So I think this look is definitely
the optimal one and this is the design
| | 06:46 | style that we'll be animating with,
not for this particular character, but an
| | 06:50 | original one of our own.
| | 06:51 | So that's essentially it.
| | 06:53 | So the weaknesses of the line and the
pure fill character will be abandoned and
| | 06:58 | we will work as best as we can with pure color.
| | 07:01 | It'll be a lot less struggle and I
think a little more enjoyable for us.
| | 07:04 | The end result looks pretty cool.
| | Collapse this transcript |
| Using uniform project scales in Flash| 00:01 | So even if you're just going to
animate a single scene, bear in mind that you
| | 00:04 | might at some point reuse it or the
artwork in that scene in a later project.
| | 00:09 | This can be fairly common.
| | 00:10 | So to make this process easier or
possible you should create and stick to a
| | 00:14 | uniform project scale if you can.
| | 00:16 | This means keeping your characters and your
props roughly in the same size as one another.
| | 00:22 | So this is going to make it possible
to move your objects and props from one
| | 00:24 | project to another and from one figure
to another with fewer scaling issues.
| | 00:29 | So here we're looking at some
characters from a recent project that I worked
| | 00:32 | on called Bounce-a-rama and there are
seven major characters and they interact a lot.
| | 00:37 | So I thought let's keep all these guys
in the same size so that we can safely
| | 00:41 | move them and share them in the same area
without having one at 10% and one at 1000%.
| | 00:44 | So I want to show you how that operates.
| | 00:48 | Let's just empty the stage,
work on a clean layer.
| | 00:51 | Let's say we bring Amelia onto the stage,
open her folder, drop her in, and let's
| | 00:57 | pick another character. We'll bring Bounce in.
| | 01:00 | By default he is the same scale. He is a kid.
| | 01:02 | She is a grownup, so he is about the right size.
| | 01:05 | So let's say we want to do a scene
where one of these guys hands a pizza to the
| | 01:09 | other, bring the pizza onto the stage.
| | 01:11 | It's also the same scale, about
the right size for one of these guys.
| | 01:16 | Let's suppose we want to give that to Amelia.
| | 01:19 | We'll make an even layer
here. Drop in the pizza.
| | 01:21 | It still is the right size.
| | 01:22 | And if we went into Bounce's symbol,
paste it in there, it's the same size.
| | 01:26 | The reason being they're all to the same scale.
| | 01:29 | It seems obvious, but let's look at what
happens if you have your characters set
| | 01:32 | up by maybe more than one artist or
you've worked in one scale and then in
| | 01:36 | another project you've
worked in a totally different one.
| | 01:39 | So we'll do the same thing.
| | 01:40 | We'll bring Bounce onto the stage and
this time we'll bring in Mr. Farling, and
| | 01:47 | let's imagine that somebody took Mr.
Farling's design and instead of matching it
| | 01:53 | to Bounce they made him gigantic.
| | 01:54 | So now every time we put him on the
Stage, we have to scale him down, and
| | 02:00 | we have to get it right. Maybe you have
to check to make sure you've scaled it
| | 02:04 | to the right level.
| | 02:05 | Is this really how big he is supposed
to be relative to Bounce? I don't know.
| | 02:08 | So then you have to check that.
| | 02:10 | Okay, so you finally get it, you're
reasonably halfway, but that's the right
| | 02:12 | size and then the same problem.
| | 02:15 | You have to do a scene
where somebody gives a pizza.
| | 02:17 | So maybe we have Bounce go up.
| | 02:20 | So here's his pizza and I want to give
that to Mr. Farling and he made the hand off,
| | 02:25 | so I put it in there and lo and
behold, of course it's tiny because
| | 02:28 | Mr. Farling's symbol is huge.
| | 02:31 | Now you have to go in and resize the symbol,
trying to match it to the one out here.
| | 02:38 | Let's copy that and then later on in the
scene if you have to hand it back, it's huge!
| | 02:44 | This is one simple example and
I've had this happened on professional
| | 02:48 | productions that I worked on and it's not fun.
| | 02:51 | It's already tricky enough as we have
to do a scene where Mr. Farling hands a
| | 02:54 | pizza to Bounce without having to worry
about the thing being 400 times bigger
| | 02:58 | than it's supposed to be.
| | 02:59 | So that's the importance of
keeping all your guys onto one scale.
| | 03:02 | Just pick a scale that works for you.
| | 03:04 | I like rigging my characters on a stage that's
about 640x480 or 800x600 is usually good.
| | 03:12 | So I would definitely pick something.
| | 03:13 | I think 800x600 would be more than
safe, and allow that stage dimension to
| | 03:19 | determine the maximum size
of your characters if you can.
| | 03:22 | Sometimes you have to vary things.
| | 03:23 | That's okay, but as your default
setting if you can keep all your stuff in one scale,
| | 03:28 | I think you'll find that as you
proceed and do more-and-more work,
| | 03:33 | you'll really appreciate the value of being
able to swap and share and move these
| | 03:36 | things back and forth.
| | 03:37 | So we'll move onto the next.
| | Collapse this transcript |
| Finding helpful extensions for Flash| 00:01 | So there are some things that we can do
that are going to make our lives a lot
| | 00:04 | easier when it comes to working in Flash
and the biggie are extensions and these
| | 00:08 | are programs or little applications
written by third parties, other artists and
| | 00:12 | animators, that will speed things up
for us and here is a fantastic website
| | 00:17 | called toonmonkey.com. And if you go
to toonmonkey.com and click on the
| | 00:22 | Extensions link, you'll find
an entire page of these things.
| | 00:25 | They're really great.
| | 00:26 | They're well worth looking at.
| | 00:27 | So there are two in particular that you
should really try to get and one is called
| | 00:31 | LayerColor and then the other one is
called frameEDIT and that's the biggie.
| | 00:36 | LayerColor will let you recolor 10
layers at a time. If you have like a bunch of
| | 00:40 | ugly randomized layer colors and
you're in outline mode then you can go use
| | 00:45 | LayerColor and make them all green or
blue or black or whatever that looks nicer.
| | 00:49 | And frameEDIT will allow you to go to frame
20 of a symbol, click on frameEDIT, and
| | 00:54 | you'll go into the internal point
frame 20 on that symbol and if that has
| | 00:59 | another symbol inside then you can go
into frame 20 on that, and that's going to
| | 01:02 | be critical when we begin animating later on.
| | 01:05 | So I've already downloaded these to the
Desktop and if you have never downloaded
| | 01:10 | an extension, here is how you do it.
| | 01:11 | Simply go into Flash, click on
Help, go to Manage Extensions and this
| | 01:16 | will open the Extensions Manager.
| | 01:19 | Okay, now we click on Install and go to
wherever it is you've saved your extensions.
| | 01:25 | In this case, it's just the
Desktop. Click Open and Accept.
| | 01:30 | It's installed and just
repeat this process for as many of these
| | 01:34 | extensions as you like and we're done and
Flash recommends that we restart the program.
| | 01:40 | So let's do that.
| | 01:44 | Okay, so let's make a new project first,
so we can activate the Commands menu
| | 01:48 | and there they are, frameEdit and
LayerColor, and the other thing I like to do,
| | 01:53 | since I'm going to be activating these quite
a lot, is to assign some nice shortcuts to them.
| | 01:58 | So let's get this out of the way.
| | 02:00 | So we go to Keyboard
Shortcuts and let's select LayerColor.
| | 02:06 | You'll find it quite difficult to find a
shortcut that hasn't already been taken.
| | 02:10 | So play with it a little bit to find
something that's comfortable for you.
| | 02:13 | Ctrl+Shift+Q is free for--
I can use that for the LayerColor.
| | 02:18 | Click Change and frameEdit and it's
very important actually that you use
| | 02:23 | this particular key.
| | 02:25 | Because if you look at your
keyboard, you'll see the brackets going
| | 02:29 | backwards and forwards and they move
us on the Timeline and then by having
| | 02:33 | our shortcut mapped, you can access all
of these three with your three adjacent
| | 02:37 | fingers and we're good.
| | 02:39 | Now we're ready to move on to a
assigning a few more shortcuts and creating some
| | 02:43 | custom commands of our own.
| | Collapse this transcript |
| Using commands and keyboard shortcuts| 00:01 | Sometimes, you'll find it very
useful to make your own shortcuts or
| | 00:04 | macro scripts basically.
| | 00:06 | Many times in Flash, depending on
your workflow, you'll find yourself doing
| | 00:09 | the same repetitive click over and over and
over again and it can really slow you down.
| | 00:14 | So I want to show you how to make
your own commands and it's fairly simple.
| | 00:19 | So the big one, the one in
animation, is setting tweens.
| | 00:23 | I'm going to be having all
kinds of different tweens.
| | 00:25 | So here is how we do it.
| | 00:27 | Go to File. Open our special
commands project. Let's close that.
| | 00:33 | So our friend and this will be
a panel lot of people don't use.
| | 00:37 | It's the History panel and this
keeps a record of everything you do.
| | 00:42 | So if you look at the panel,
watch as I create different objects.
| | 00:45 | This, as in Photoshop, keeps a little
record of these actions and the cool thing
| | 00:49 | is you can save these and play them back.
| | 00:53 | So what we are going to do is set some
tweens and save these commands and make our own.
| | 00:59 | So the first thing we want
to do is have a clean slate.
| | 01:02 | So let's go up to the Timeline, make a
new layer, get rid of the old one, and as
| | 01:09 | you can see a lot of rubbish and
junk here, so let's clear our history.
| | 01:14 | Yes, get rid of all of that.
| | 01:15 | What I want is to create a command for
a simple motion tween and we can already
| | 01:21 | do it from up here. We can
go Insert > Classic Tween.
| | 01:24 | We'll be using Classic Tween
a lot and Shape Tween a lot.
| | 01:27 | The problem is every time you move from
the Timeline up to Insert Tween, you're
| | 01:31 | putting miles on your mouse and
you really are slowing yourself down.
| | 01:34 | It completely breaks the flow.
| | 01:36 | So let's-- as I said we'll make our own.
| | 01:39 | So we'll go to the Timeline, click on
the frame, go Insert > Classic Tween and
| | 01:46 | now that's a basic tween
with no ease in and no ease out.
| | 01:50 | Now we select Create
Classic Tween. Save As Command.
| | 01:54 | I'm going to call it tween 0. Click OK.
| | 01:59 | Now to test this tween, I'm going to
make a new layer, select that, and go to
| | 02:04 | Commands > tween 0 and as
you can see that's done.
| | 02:08 | The beauty of this is we can assign a
keyboard shortcut to tween 0 and this can
| | 02:15 | really speed up, as you can
already imagine I'm sure, the workflow.
| | 02:18 | So let's make a few of these.
| | 02:19 | This is a generic tween with no ease-
in or ease-out. You'll find this so you
| | 02:23 | begin to move symbols around the screen.
| | 02:25 | Now you want some to favor one key or
favor another to ease in or ease out.
| | 02:30 | I like to delete this history every
time because this can get confusing and
| | 02:35 | we're going to be doing multiple steps here.
| | 02:37 | So let's create a tween.
| | 02:39 | And now I'm going to create an ease in, -50.
| | 02:46 | Now we have a multiple series of actions.
| | 02:50 | So these two, Create Classic Tween
and setting the frame property or tween easing,
| | 02:55 | -50, this is the command that we
want to create. Right-click, Save As Command.
| | 03:00 | I'm going to call this tween -50 and
again every time I do this, I like to test it.
| | 03:07 | Go to Commands > tween -50 and perfect.
| | 03:12 | I want to repeat this
process again. Clear History.
| | 03:20 | I'm going to create a tween, and ease
out this time. Save the command, tween +50,
| | 03:37 | and that should be it, let me do a --
No reason why it shouldn't work, but I'll
| | 03:42 | just test these and there we go.
| | 03:44 | You can make your own.
| | 03:45 | If you don't like 50, if you prefer 60
or 100, go for it, but this is the area
| | 03:50 | that I like to work from and I can
change it later on if I want to get fancy.
| | 03:54 | So the next thing you would do
would be to assign a keyboard shortcut.
| | 03:59 | Again, all these commands are logged under
the Commands menu and there we have them.
| | 04:05 | Now at this point you'll find your
keyboard is getting very, very cluttered.
| | 04:10 | It can be extremely challenging to find
a nice, simple-to-use keyboard shortcut.
| | 04:16 | I tend to be quite bogged down.
| | 04:18 | So this is where the numeric keypad comes in.
| | 04:21 | Now if you're working on a keyboard
that's on a small laptop and you don't have
| | 04:25 | the numeric keyboard, I would advise
you to get an external keyboard with a
| | 04:29 | numeric keypad. Very quickly
see how advantageous this is.
| | 04:34 | I can assign to the tween +50 to the
6 key, tween -50 to the 4 key and the
| | 04:47 | regular tween, the generic one, to 5.
Drop these shortcuts in very, very easily.
| | 04:57 | I would repeat the same process.
| | 04:59 | Instead of making motion tweens
now, we can make shape tweens.
| | 05:03 | To do this, we need to create some shapes.
| | 05:05 | I'm hitting F6 to create a second key
and now Insert > Shape Tween and Window >
| | 05:16 | Other Panels > History. And I didn't
follow my advice of deleting the history and
| | 05:22 | this is the result. But I think we
can figure it out. Create Shape Tween.
| | 05:28 | Save As Command and call it tween shape 0,
OK, and now we should be able to assign one
| | 05:37 | of these. Commands > tween shape 0.
| | 05:44 | I'm going to repeat the process
for ease in 50 and ease out 50.
| | 05:48 | And we'll have a complete set of
short codes assigned to the numeric keypad
| | 05:53 | for shape tweening and motion tweening,
easing in on the 4 key and the 1 key,
| | 05:58 | easing out on the 6 key and the 3 key.
| | 06:02 | So let's create the remaining two tweens.
| | 06:04 | I want to keep this window open.
Workspace. No, Other Panels > History and let's
| | 06:09 | keep it clean, clear the history, yes.
| | 06:11 | Let's get that square back, Ctrl+C,
Ctrl+V. This is just rough and ready.
| | 06:21 | This doesn't have to be fancy.
| | 06:24 | Do this on a completely clean layer, and F6.
| | 06:31 | Again, you'll find yourself doing this a
lot, clearing this history to keep it clean.
| | 06:35 | Now go Insert > Shape Tween and then
pull it into -50. Save As Command, tween
| | 06:48 | shape -50, repeat for the out, F6.
| | 07:00 | Again, I'm going to clean this up.
Insert > Shape Tween, ease out to 50,
| | 07:09 | Save As Command and then we have our slate
of shape tween shortcuts. Map them onto
| | 07:19 | the keyboard shortcuts.
| | 07:24 | I'm using the 4, 5 and 6
numeric keypads for the motion tween.
| | 07:28 | I'm going to use 1, 2 and 3 with +50,
the 3 key, -50, the 1 key and the 0 key, set to 2.
| | 07:45 | That looks good.
| | 07:48 | So there is one more thing that I like
to have easy access to. As you're setting
| | 07:52 | tweens on the keyboard, sometimes you
want to be able to switch it off and
| | 07:55 | we're going to create a command to remove
all the tweening information on the Timeline.
| | 08:00 | So let's just click onto one of the pre-
existing timelines in the blue and again
| | 08:05 | this is a big one so
let's clear the history, yup.
| | 08:08 | So first thing I like to do is make
sure that there is no ease in or ease out
| | 08:12 | information buried in the timeline.
| | 08:14 | Go to Insert > Remove Tween and now
select these two, Save As Command, and go
| | 08:23 | tween remove and I need to test this
to make sure it still works. Command >
| | 08:29 | tween remove, and of course it's gone.
| | 08:31 | Let's make sure it works in
the shape tween layer, yes.
| | 08:36 | I want to make sure that it also has
removed all of the ease in and ease out
| | 08:41 | information and it has on this one.
| | 08:44 | I'm just going to test it on a few
of these to make sure that work.
| | 08:50 | Yeah, it seems to be resetting it
completely back to zero and we now have the
| | 08:56 | ability to basically delete any tween
information on the timeline with the
| | 09:00 | stroke of a key. Map this onto the
number 8 key on the numeric keypad.
| | 09:11 | Now you have complete control over
classic tweening with one hand without ever having
| | 09:15 | to move from the numeric keypad.
| | 09:18 | As you can see the numeric
keypad is your best friend.
| | 09:20 | It's going to save you a lot of time
when you start throwing motion tweens and
| | 09:25 | shape tweens all over the place.
| | 09:27 | I can't recommend that enough.
| | 09:28 | You can still work without it.
| | 09:29 | You can still do
everything through running up here.
| | 09:32 | Your mouse is going to be doing this a
lot and you're going to start getting
| | 09:36 | really tired of that and before the
extensions came along, we had to do this.
| | 09:40 | We were moving your mouse from here to there.
| | 09:43 | It's not fun and being able to assign
tweens with moving of a single finger
| | 09:48 | means you can focus on your work,
your animation on being creative.
| | Collapse this transcript |
| Setting up your workspaces| 00:00 | Flash CS5 comes with a series of
Workspace layouts that are designed to help
| | 00:05 | with your production process and they
have several of them depending on design ,
| | 00:10 | that are aimed at animators,
programmers, and so forth.
| | 00:13 | The Animator layout, I really
don't like at all, funnily enough.
| | 00:17 | I think it's extremely cluttered.
| | 00:19 | You'd have to have a huge
monitor for this to be good.
| | 00:22 | So let's go with something
closer to the classic look.
| | 00:25 | This is cleaner and it gives us a nice
long Timeline and I still want to make
| | 00:29 | some tweaks to it and the issues I have
with this are that these fly-out windows
| | 00:33 | here cover your Timeline. It really
bugs me the way they get in the way.
| | 00:37 | So let's change that and if we take
one of these and tear it off, grab the
| | 00:42 | little gray area and slide it, then we
can grab this over here and I am going to
| | 00:47 | drag it down to the bottom of the
Properties panel until I see a little blue
| | 00:50 | line there, then release, and
it springs into place very nicely.
| | 00:54 | So I'm going to repeat that up here.
| | 00:58 | And this little arrow, this
double arrow, will expand the panel.
| | 01:01 | That's going to be your library and tear
this off as well, and same thing there.
| | 01:06 | That's our Color and our Swatch panel.
| | 01:08 | So let's select this gray bar again.
| | 01:10 | I'm going to drag that here,
drop it and we can collapse these.
| | 01:13 | We don't have to have them open all the time.
| | 01:14 | Let's move our Library panel over.
I'm going to stack this one vertically to
| | 01:20 | the left of the other column and way
down until we see blue vertical line and
| | 01:25 | release and there we go.
| | 01:27 | Now you can keep the Timeline on the
top or the bottom and either is good
| | 01:31 | and I've used both.
| | 01:32 | For this class I've done
on the bottom of the screen.
| | 01:35 | So let's drag it down there until we
see the blue line, release that, okay.
| | 01:40 | That's really nice.
| | 01:41 | So anytime we need to access our other
areas, we just click over here, and I want
| | 01:49 | to keep these compressed so I see the
Properties panel more clearly. This works for me.
| | 01:54 | If you have a different way that you
are comfortable with and you don't mind
| | 01:56 | being on a slightly different layout
than me, that's totally fine, but this
| | 01:59 | is how I'd be working just so you know where
everything is and where all the windows went.
| | 02:04 | So let's save this layout.
| | 02:09 | I'm going to call it lynda_character_animation.
| | 02:13 | If you want to call it something more
descriptive like horizontal timeline or
| | 02:17 | whatever then that's fine.
| | 02:19 | So the other thing that I want to do
now is create a second layout, almost the
| | 02:23 | same as this, but one big difference
and that is I want this Timeline to be
| | 02:27 | tall and thin on this side of the
screen, because when we're designing
| | 02:31 | characters we need lots of layers and as you
can see we can't see many layers in the space here.
| | 02:35 | So let's tear this off.
| | 02:37 | I'll tell you this is a little bit
tricky and I found this quite quirky.
| | 02:41 | Let's try to do this in a
way that's as safe as possible.
| | 02:44 | So tear away the Tool menu, so we have
our Timeline floating around here and the
| | 02:48 | Tools over on this side and then let's
grab this, slide them in, and drop it.
| | 02:55 | That's exactly what I want.
| | 02:57 | Now you might find, I'm not sure what
your setup will be, but if you see this
| | 03:03 | Collapse to Icons, this is not good.
| | 03:05 | So you want to be sure you're set to
Expand Panels and it's worth playing around
| | 03:10 | if you have issues with that because we
really want to have this Timeline tall
| | 03:14 | and thin, and then we grab the tools.
| | 03:16 | Let's drag them over there and drop them in.
| | 03:19 | So we have a nice tall, thin Tools
panel and our Timeline and I want to save
| | 03:24 | this and call this one
lynda_character_animation_2.
| | 03:33 | We'll be toggling back and
forth between each of these.
| | 03:36 | That's a much quicker way of doing it than
having to mess with the layout every time.
| | 03:42 | If I was doing this on an actual
commercial production, I'd set keyboard shortcuts
| | 03:46 | for each these and do it
without even thinking about it.
| | 03:49 | You might also find sometimes that you want
to grab more room and collapse your library.
| | 03:54 | So this little arrow is very handy for that.
| | 03:56 | You'd have to do like that.
| | 03:59 | For some reason I just seemed to prefer
having these fellows over here and then
| | 04:03 | hide them when they are not needed.
| | 04:06 | So that's the workspace layout taken
care of and we're ready to continue.
| | Collapse this transcript |
|
|
2. Character RiggingUnderstanding character rigging| 00:01 | In this part of the course, we'll
take a hand-drawn cartoon character
| | 00:04 | and convert him into a fully rigged and
vectorized Flash puppet ready to be animated.
| | 00:09 | We're going to use the basic Flash
drawing tools and find out how to name
| | 00:12 | and layer the symbols.
| | 00:14 | So, here is our starting position, a
hand-drawn, basic fairly generic character
| | 00:19 | figure in five different poses.
| | 00:21 | This is the kind of thing you get in an
animation studio, a nice turnaround like this.
| | 00:26 | And so, I'm going to show you the final
product, so you can have an idea about
| | 00:30 | where we're going to be going over
the course of the next few chapters.
| | 00:34 | So, this is the character in Flash,
fully rigged, and I'll show you the
| | 00:38 | structure of this rig in outline form.
| | 00:41 | So, if we select all the outlines, as
you can see, there's one layer for the
| | 00:44 | right leg, one for the left.
| | 00:46 | There is one for the head.
| | 00:47 | Let's go back into color mode.
| | 00:49 | It's a little bit easier to follow.
| | 00:50 | So, what I'm going to do is take one
of these layers, say the right arm, and
| | 00:55 | show you how it works when
we begin to move this puppet.
| | 00:58 | So, the big issue that you'll see
right away is some gaps opening up.
| | 01:02 | Obviously, we can close off and fill
later on, but this is just to give you a
| | 01:05 | general idea about how we can take this
cutout character and put him into poses
| | 01:10 | and situations that we
can then begin to animate.
| | 01:12 | Let me roll this guy back
to his starting position.
| | 01:16 | So, I'm hitting Ctrl+Z to undo, and I'm
going to show you the basic process that we use.
| | 01:22 | F6 to make a keyframe, and
then I'm going to hit the second keyframe,
| | 01:27 | move it to a slightly new position,
and then create a Classic motion tween.
| | 01:34 | That's a movement.
| | 01:35 | We can then push this.
| | 01:37 | It's pretty simple, but that is the
methodology that we will use to create this
| | 01:43 | character and to make him animate.
| | 01:47 | So now that you've seen how the symbols
are tweened. In the next segment I will
| | 01:52 | show you how they're actually
structured in a little more detail, and how the
| | 01:56 | eyes and the mouth and the head
will work in tandem with the body.
| | Collapse this transcript |
| Exploring underlying structure in character rigging| 00:01 | Before we begin, let's look at the
character that we're going to create
| | 00:04 | during this chapter.
| | 00:05 | Here we have him in the Library.
| | 00:08 | Let's drag him onto the stage so we
can have a better look at the guy.
| | 00:13 | Now, I'm going to show you
how this puppet, this rig works.
| | 00:16 | Let's double-click on the rig, have a
look inside, and as you can see, we have
| | 00:20 | multiple layers from the hair,
legs, arms, torso, and so on.
| | 00:24 | This is called a comp or a composite,
meaning it's a symbol that contains many
| | 00:29 | different layers and secondary
symbols, and these can be changed and
| | 00:33 | repositioned so that we can make
this character do any number of actions.
| | 00:36 | So, I'm going to switch into outline
mode, so we can have a look at the layers
| | 00:40 | and you can see how they overlap one another.
| | 00:42 | I've color-coded the layers, so we have
green for the right side, blue for the left.
| | 00:46 | This makes things a little more simple
when you're selecting things in Outline mode.
| | 00:50 | Each layer has to be named correctly.
| | 00:53 | So we have arm right, head, hd.
| | 00:55 | I use short, very snappy naming
conventions, torso nck or torso neck, torso
| | 01:02 | itself, the leg right, the leg right
foot, which will be this symbol here.
| | 01:06 | In addition, everything
has to be pivoted as well.
| | 01:09 | So, for example, let's take the
right arm and as you can see, our cross
| | 01:13 | circle pivot is here.
| | 01:14 | So, if we want to rotate this symbol,
it'll pivot correctly around that object.
| | 01:18 | I'm going to undo, Ctrl+Z.
Next, I'm going to tunnel into the head.
| | 01:23 | This is also a comp.
| | 01:25 | Double-click on that.
| | 01:27 | As you can see, we're already in outline mode.
| | 01:29 | At this point, you'll notice that there are
many many layers, and it gets quite compact.
| | 01:34 | Very hard to see exactly what's going on.
| | 01:37 | So, what I'm going to do is switch
our layout, and we have a second layout
| | 01:41 | called lynda_character_animation_2,
and this provides us with a vertical
| | 01:46 | Timeline, and we can
reposition our head to here.
| | 01:49 | In fact, we can close our Library panel.
| | 01:52 | We want to zoom in on the head and now
we can take a closer look at the head.
| | 01:59 | So, if we look at the head in full
mode, we can play through this comp and
| | 02:03 | I've created some pre-existing animations that
occur in here, and these are also nested comps.
| | 02:09 | Let's look at them one at a time.
| | 02:11 | So, if we tunnel into the mouth comp,
double-click on that, you can see we have
| | 02:16 | quite a timeline in here.
| | 02:18 | We have six individual mouth
shapes and these are all animated.
| | 02:22 | The beauty of this system, and we'll
cover this in a later chapter, is these can
| | 02:25 | be played in any sequence we like, and
this is the Flash equivalent of blend
| | 02:30 | shapes in 3-D program such
as Maya or a 3D Studio MAX.
| | 02:35 | Now, let's move outside of the mouth.
| | 02:36 | I'm going to look inside the eye symbol.
| | 02:39 | One of the things we need to do a lot of
with character animation is eye blinks.
| | 02:43 | Again, they can be quite tedious.
| | 02:45 | So it's nice if we have them
already done and in this case we have a
| | 02:49 | shape-tweened eye blink.
| | 02:50 | And again, the beauty of the system is
we can make this fast or slow depending
| | 02:55 | on the needs of the scene itself.
| | 02:57 | So now it's a much quicker eye blink.
| | 02:58 | Ctrl+Z, undo, fix that.
| | 03:02 | Again, in Outline mode, if we look at
the character, the same color conventions,
| | 03:06 | green for the right side, blue for the left.
| | 03:09 | So I can see at a glance, for example,
that this ear is the right side,
| | 03:13 | his anatomical right ear, and now on the
opposite side of his head, you'll find
| | 03:17 | that this technique will come in
very useful as we begin moving these
| | 03:20 | many-many layers around.
| | 03:23 | So, let's move back outside to the main
body comp and the process of animating
| | 03:29 | with this method, I like to
think of it as like a Russian doll.
| | 03:33 | The outer comp, the body symbol, the
bd symbol in the Library, that's the
| | 03:38 | outer doll, and inside this symbol
exist the head, the mouth, the eye blinks,
| | 03:44 | and the other body parts.
| | 03:46 | So, when we animate this character,
you have to think of multiple timelines.
| | 03:52 | We're going to have one timeline for
the body. Inside that will be a head.
| | 03:57 | That will also have its own animated timeline.
| | 03:59 | inside that, the mouth comp
will have its own timeline.
| | 04:02 | One will work inside the
other, inside the other.
| | 04:06 | It sounds complicated, but it's
surprisingly easy to get used to and once
| | 04:11 | you've adapted to it, I don't think
you'll go back to pushing symbols around
| | 04:14 | frame by frame by hand.
| | 04:16 | So, the next thing we're going to do,
now that we've explain what this thing is
| | 04:19 | going to be, we're going to convert
our hand-drawn pencil sketch into a
| | 04:23 | vectorized symbol, much like
the thing you're looking at now.
| | Collapse this transcript |
| Vectorizing the character body| 00:01 | Now we're going to cover how to
vectorize the character beginning with the body.
| | 00:04 | Now, what this means is we're going to
take the pencil drawing, the sketch of
| | 00:07 | the character, bring it into
Flash, and we're going to line it.
| | 00:12 | We're going to draw a series of vector
lines over the pencil drawing and that'll
| | 00:16 | enable us to rig and pose the
character in Flash and ultimately animate it.
| | 00:21 | So let's take a look first at the sketch.
| | 00:24 | This is our character.
This is pretty standard.
| | 00:26 | you'll get your character from the
designer if you work for an animation
| | 00:28 | studio, and if they are good one,
you'll get it with a turnaround in more than
| | 00:32 | one angle, beginning with the front
down view three-quarters profile, all the
| | 00:36 | way to the rearview.
| | 00:38 | This is the image we're going to work from.
| | 00:39 | So let's start a new project
and let's import the image.
| | 00:48 | So now, we have this huge turnaround
on the stage and our bitmap or our PSD
| | 00:54 | file in the Library.
| | 00:56 | So, the first thing I like to do is
convert this into a symbol. So let's hit F8.
| | 01:03 | I want to call this bd, short for body,
and I'm going to make it a movie clip,
| | 01:07 | which is my shorthand for signifying
that it's going to be a big symbol full of
| | 01:12 | lots of secondary symbols, or a comp,
or a composite as it's widely known.
| | 01:17 | Let's keep the Library clean.
| | 01:19 | I'm going to make a new folder, call
it character for now, and let's drop all
| | 01:24 | of these inside that.
| | 01:26 | It's very important that we keep
our Library clean and organized.
| | 01:29 | For now, this should be enough for the moment.
| | 01:31 | So now let's double-click on the bd
symbol and we can work directly in that.
| | 01:39 | So, the ideal would be to start rigging
in the front view and the reason being
| | 01:45 | why is that it's fairly easy to take the
work what you do, rigging the character
| | 01:49 | in the front view, and then twist it
and repurpose it into the three-quarters
| | 01:53 | view and the profile view.
| | 01:55 | Now, we do not have the time honestly
to do that, but it's more than enough to
| | 01:59 | work in that three-quarter view because
we can then work the three-quarter view
| | 02:02 | into the profile view.
| | 02:03 | These are the two poses that we're
going to be working with in this course.
| | 02:06 | It's actually also quite rare to do
production work in the complete flat front down view.
| | 02:12 | If you've seen TV shows, they tend to
avoid too many direct front down views.
| | 02:17 | slightly three-quarters is the norm.
| | 02:19 | So, we're going to start
working with the three-quarter pose.
| | 02:22 | So after we align that up, center it
roughly around the character's center of mass,
| | 02:26 | then we are ready to
begin lining this character.
| | 02:31 | Okay, so the next thing we have to do is
remove the character layers that we don't need.
| | 02:37 | That is the other four.
| | 02:38 | So let's right-click and break apart
the layer and then select and delete the
| | 02:44 | parts that we don't need.
Ctrl+X here and here.
| | 02:50 | Very important that we padlock the
reference layer and name it ref for reference.
| | 02:55 | Next, we make a series of
layers for the different body parts.
| | 03:01 | You can be a pretty broad at this point.
| | 03:02 | You do not have to be too exact.
| | 03:04 | We want more than one layer to work into.
| | 03:06 | So, we'll need one for the head, neck,
torso, so I would guess seven or eight.
| | 03:10 | So, we can just think, okay, one for
the head, one for the neck, one for the
| | 03:15 | upper torso, lower torso or the groin
area, the right arm, the left arm, the
| | 03:19 | right leg, the left leg, and the feet.
| | 03:22 | So, now we have that, we can just throw
in some names, and I like to keep the
| | 03:26 | naming convention short and sweet,
but easy to see what they are.
| | 03:29 | You want to keep your Timeline really straight.
| | 03:31 | As you can see the screen gets really full.
| | 03:34 | So I like to keep the things as
condense and compact as I can.
| | 03:38 | So, beneath that, there may be the neck.
| | 03:40 | I like to call that torso neck, so
like I tend to group it with the torso,
| | 03:44 | beneath that the torso
upper and the torso lower.
| | 03:51 | Oops!
| | 03:52 | Again, no need for the O. The right arm,
left arm, left leg, and the foot, and
| | 04:09 | again, I'm calling it left leg and left
leg foot, because you will find you'll
| | 04:12 | be selecting these two layers
together, so I like them to read.
| | 04:15 | They are a little more easy to follow.
| | 04:20 | Leg Right and leg right foot.
| | 04:24 | Already made a slight error.
| | 04:25 | Right leg should be on top of the leg left.
| | 04:28 | I'm naming them anatomically.
| | 04:30 | The left leg means the character's
physical left leg, not the one on the left
| | 04:35 | side of the screen, and it's very
important that we keep that accurate.
| | 04:38 | And even at this point, you can begin
to roughly say to yourself, okay, the
| | 04:42 | right arm's going to be above the
torso, put it above the torso layer.
| | 04:45 | We will tweak these and
refine them greatly later on.
| | 04:49 | Having created our rough layer set,
the other thing I like to do is get rid of
| | 04:53 | these horrible random color outlines.
| | 04:56 | It really is nice if you have like a
much more standardized color methodology as
| | 05:00 | we've already seen in earlier
overviews of the rig process.
| | 05:04 | So, I like to control and select all of
the-- hold down the Control key and you
| | 05:08 | can batch select a bunch of layers.
Go to your Commands menu and you may
| | 05:12 | remember we've already installed
the LayerColor plug-in, the extension.
| | 05:16 | So we select that and I can select a
nice deep blue color for all the right
| | 05:22 | layers, and I'm going to select a nice
green one for the right ones and just
| | 05:31 | some generic body color.
| | 05:36 | This one's usually good.
| | 05:43 | There we go.
| | 05:44 | I want to be even pickier and just
select an odd color for the reference layer.
| | 05:50 | I find it really helps me
to select layers visually.
| | 05:53 | That reduces a little bit of
the visual confusion in the scene.
| | 05:56 | Now, we have our named layers and we're
going to actually be keeping this naming
| | 06:00 | convention when we begin
symbolizing these layers and that'll help that
| | 06:03 | they're color-coded and we are now ready
to begin drawing the line art that will
| | 06:08 | be ultimately the final rigged
assets that'll constitute our character.
| | 06:12 | So, we have our character, the layers are
set up, they're named, they're colored.
| | 06:16 | So let's save this project and we'll
be ready to begin creating the line art
| | 06:20 | in the next lesson.
| | Collapse this transcript |
| Outlining colors in an animated character| 00:01 | So it's time to create the
vector lines for our character.
| | 00:04 | So let's go into the Library, double
click on the symbol for the bd, the body, and
| | 00:11 | as you can see we have our layers
more or less named correctly and colored.
| | 00:17 | So couple of little things I want to
do first is symbolize the Reference
| | 00:21 | layer and I want to brighten that up a
little bits, so that our lines can be
| | 00:25 | seen a little bit better.
| | 00:26 | So in the Properties panel go to
Brightness and bring it up by about 50% and
| | 00:31 | then padlock that layer and
we're ready to start drawing.
| | 00:34 | The other thing I like to do is to
improve our screen real estate and we have
| | 00:38 | covered this earlier and we have a
second layer or our workspace format
| | 00:42 | Lynda_character_animation_2 and that
sets our stage to be vertical as our
| | 00:46 | timeline is, as we going to have a
lot of layers ultimately in this rig.
| | 00:50 | So holding down the Spacebar we can center
this and we can begin creating the layers.
| | 00:55 | So we'll be using the Line tool,
we will be using the Selection tool, and the
| | 00:59 | Rectangle tool to create
most of these vector layers.
| | 01:03 | So in the torso upper layer I am going
to start by drawing the body layer and
| | 01:08 | get rid of the inner color and we can
start positioning these points to match.
| | 01:13 | As you can see the snap is set on, so I
want to get rid of that because we're going
| | 01:17 | to get rid of all the snaps.
| | 01:21 | Now we can control very finely the
positioning of our points. Zoom in and we are
| | 01:29 | going to have four points. That's going
to make this bump a little harder, so we
| | 01:32 | need put it another point here.
Holding down the Alt key or Option on the Mac,
| | 01:37 | you can add a new point. Don't go
crazy with this use it. Use it on as many
| | 01:40 | points as you think you're going to need.
| | 01:42 | You can also add more in later on, but
it's real pain to get rid of them and the
| | 01:46 | fewer points you have, if you click the
Subselection tool, you can always check
| | 01:50 | your geometry to make sure that you
haven't gone over the top with the points.
| | 01:55 | So that's our body layer down and you
might not want to lock them as you do them.
| | 01:58 | That will stop you from breaking them.
| | 02:00 | So let's make another rectangle and the
other thing to make sure about is I find
| | 02:06 | it's nice if you are working in the
Hairline rather than Solid make this line as
| | 02:11 | fine as possible, so again position this
and the reason why I'm drawing through is
| | 02:16 | because when that head begins to
move, we want see neck and not air.
| | 02:20 | So we draw a little further than we
absolutely need to. I would lock that.
| | 02:25 | Same with the lower torso and how far
you draw through is up to your judgment,
| | 02:31 | how extreme you think the animation
is going to be. This I think is pretty
| | 02:35 | average and again you can change it later on
if you have not done an off or done too much.
| | 02:40 | Now the right leg as you can see is
very similar to the left leg. I'm only
| | 02:46 | going to do it once.
| | 02:47 | So let's just do the right leg. Later-
on in the process we can copy and paste
| | 02:52 | that as a duplicate for the left leg.
And you need a point for the knee, front
| | 03:01 | and back, and so it's almost worthwhile
testing to make sure that, there we go.
| | 03:06 | We have a point. Sometimes Flash snaps
the mode of existence if the line is to
| | 03:09 | straight, but that looks good. And let's
drop in the right arm, another rectangle.
| | 03:19 | Give it the inner color fill.
| | 03:22 | Now I want Snapping back on so at
this point this cornered can snap to the
| | 03:27 | shoulder. You want these to be always
together and once that's done we can get
| | 03:32 | rid of it again. And if you find your
lines are becoming a bit of a clump, hard to see,
| | 03:41 | we can go to Outline mode and now
you're active layer stands out and it's
| | 03:45 | much easier to control where your work is going.
| | 03:51 | Curve on that and make it
fit the torso a little better.
| | 03:55 | So now let's make the foot also a
rectangle, go to the inner color, and I'm
| | 04:01 | going to use Alt/Option to put an
extra point here, following the curve around
| | 04:08 | the toe area, and I would like this line
to continue through, so I'll hit N for
| | 04:15 | the Line tool and I want to Snapping
to be on for this and get that sharply
| | 04:23 | joined there and there. You will feel
that thing really snap in. Once that's done,
| | 04:28 | switch it back off again.
| | 04:30 | Now we have a nice curve here and I
want to make another line, complete these
| | 04:37 | forms, get rid of all the leftovers,
round that off a little bit. Holding down
| | 04:46 | the Alt key or Option on the Mac, and
round this off a little bit so that the
| | 04:57 | foot gets rotated. We see something
other than a sharp unnatural looking edge.
| | 05:04 | And this can be changed and tweaked
and refined latter on, but this part of
| | 05:08 | the process is about the first pass and
once you begin to symbolize everything,
| | 05:13 | you will get a better idea as to how much
further you need to go, if you need to tweak anything.
| | 05:18 | So that's the first phase of this
process done and again just go back into a
| | 05:21 | Outline mode. We still need to add the
hands, that's a little more work, and of
| | 05:25 | course the head and actually one thing
I'll add before go any further is the left arm.
| | 05:45 | Make sure we snap the shoulder again.
| | 05:49 | Hold down Alt/Option to create our joints.
| | 05:59 | And there we go. Believe or not
that's the first step in this process.
| | 06:03 | So now we move on to finishing this
phase. That means lining the hands and
| | 06:08 | duplicating some of the symbols and
moving on to the head, and we begin to cover
| | 06:13 | that process in the next part.
| | Collapse this transcript |
| Vectorizing the hands| 00:00 | So here we are.
| | 00:01 | The body has been lined. As you can
see the basic arm torso shapes are very simple.
| | 00:07 | They are little more
than rectangles with points added.
| | 00:11 | Now it's time to do the hands, which
are a little more detailed, and the hands
| | 00:16 | initially were simply going to bend
them as you see them on this drawing, but
| | 00:20 | in a future chapter, we are going to
add detail to these symbols. We are going
| | 00:24 | to join the fingers so we can move
them. Otherwise they look very stiff.
| | 00:29 | As you begin to move the hand, the
fingers really need to be able to splay and
| | 00:32 | bend and they will give the
character a little more natural feel.
| | 00:35 | But like I said, the first stage in the
process is to simply line them and the
| | 00:40 | beauty of Flash is we can add
complexity later on. We can create a simple
| | 00:44 | placeholder symbol and we can go in
and add layers and layers of additional
| | 00:49 | animation and jointing and pivoting.
| | 00:51 | It doesn't trap us.
| | 00:53 | That's one of the advantages of this program.
| | 00:55 | So that said, I'm going to double-
click. Either we can double-click on the
| | 00:58 | symbol on the stage or you can double
-click on the symbol in the Library.
| | 01:02 | And now we are back in and we are
ready to start lining the hands.
| | 01:07 | Okay, so let's create some temporary
layers for the right hand and the left hand.
| | 01:14 | And even though they are temporary layers,
I think it's a good form to name them properly.
| | 01:21 | Ultimately the hands are going to be
nested inside the arm symbols, so these
| | 01:26 | layers are temporary.
| | 01:28 | But we can also move symbols from the
inner arm comp or symbol by going to the
| | 01:35 | outer body timeline, as we need them.
| | 01:37 | And you will find when you begin to
animate, that you will be doing this back
| | 01:41 | and forth depending on your scene.
| | 01:49 | So I have just assigned the same color,
using green for the right side of the
| | 01:53 | body and blue for the left.
| | 01:54 | So now we will zoom in on the right-hand.
I am going to say right. Again, I mean
| | 01:59 | his physical right hand.
Always use that convention.
| | 02:02 | Never call it the left hand of the
screen or the right hand of the screen.
| | 02:06 | That will cause problems if the
character turns around for example.
| | 02:09 | So we would be using the V shortcut for
the Selection tool and the N shortcut or
| | 02:15 | the Line tool and we will be toggling
Snap to Objects back and forth if we want
| | 02:19 | to make these lines join
together very tightly. So let's start.
| | 02:22 | And if I switch my outline color on,
that gives me a better idea that the layer I
| | 02:30 | am working on is active.
| | 02:35 | And you will find the Snap
tool can be very aggressive.
| | 02:37 | It likes verticals and horizontals.
| | 02:39 | This can be a problem, so
let's switch it off for this line.
| | 02:42 | And the other thing I like to do with
lots of complex shapes like this is
| | 02:46 | sometimes throw down temporary lines.
| | 02:48 | If you have used Illustrator, you might
find this is not a fun way for you to work.
| | 02:52 | If you have a personal preference for your
own aligning system, by all means use it.
| | 02:56 | This is the system that I've
become very adapted to over the years.
| | 03:01 | So this works for me but if a better
system works for you then I would say go for it.
| | 03:06 | As long as the only health warning on
that, if you use the Subselection tool,
| | 03:10 | be sure to check your points to make
sure that you have the minimum number of
| | 03:14 | points to describe any shape.
| | 03:16 | Don't go crazy with points. Flash won't
like it. Yu will at some point hit a wall.
| | 03:20 | As you can see, the fewer points you have,
the easier it becomes to modify these shapes.
| | 03:29 | And that will be good enough for our
first pass for the right hand. Padlock that
| | 03:35 | layer and be sure you are also
working in the correct layer.
| | 03:39 | That's where the outline is very handy.
| | 03:41 | If you start drawing and you are in
Outline mode and you see that your green
| | 03:45 | hand on a blue body you know, oops,
I am working in the wrong level.
| | 04:00 | As you can see this is a very
slow and the repetitive process.
| | 04:06 | This probably will drive some people crazy.
| | 04:08 | Lining is one of those
meticulous but brain-dead functions.
| | 04:16 | So as you can see, I am working with
Snap On quite a bit because a lot of these
| | 04:19 | points have to be connected. Your
problem will be having to go back and forth
| | 04:23 | switching Snap On, switching Snap
Off, I find that's one of the more
| | 04:27 | time-consuming aspects.
| | 04:30 | But the nice thing about doing this
is that it is very precise and once
| | 04:33 | again always check with the Subselection
tool to make sure your geometry is very clean.
| | 04:41 | As you can see it's a reasonably fast
process and you do get used to the back and forth.
| | 04:46 | You might find this easier if
you select a hotkey for Snap to Objects,
| | 04:51 | something that's close to the V and the
N key on the keyboard, and that way you
| | 04:54 | can switch it off without
having to put miles on your mouse.
| | 04:59 | So this is our hand. It's lined now.
| | 05:02 | So the next thing I want to show you
is just very quick on a clean layer
| | 05:05 | some other little drawing methods for lining.
| | 05:08 | Your problem will be creating joins
like this as you are creating these
| | 05:12 | more complicated forms.
| | 05:13 | As you can see this is one way of doing
it. The only problem with that is Snap
| | 05:17 | has to be on to make this a clean form.
| | 05:18 | The other way you can do it is just
simply create a single line and then
| | 05:22 | holding down the Alt or Option key, pull
that line and that's as you can see much faster.
| | 05:27 | And the other problem that you will
have when you begin drawing these shapes is
| | 05:31 | when lines intersect as well.
| | 05:33 | Sometimes you can do an overlap like this
and cut away the pieces that you don't need.
| | 05:37 | It just simply depends case-by-case.
| | 05:39 | When I'm lining a really complex
character, I will use any number of these
| | 05:44 | techniques over the
course of that lining process.
| | 05:47 | Sometimes it simply depends on the area.
| | 05:48 | It's quicker just to do that and
remove the line and once again always check
| | 05:52 | them to make sure that our points are
nice and minimal and then you can modify
| | 05:55 | the shapes to whatever form you like.
| | 05:57 | You might find that if you're an
Illustrator expert, by all means take your line
| | 06:01 | drawing into Illustrator, line it in
there, and then bring it back into Flash.
| | 06:04 | I would just do a test on a simple area first.
| | 06:07 | Make sure that it works.
| | 06:08 | That you've got the right versions of each
program. Some studios do that. Yhey love
| | 06:11 | to use Illustrator, the different
look to the Illustrator graphic, but it's
| | 06:15 | still very important, even if you are
going to do that, to have some inkling of
| | 06:18 | how internal Flash tools work
because for fine-tuning small things,
| | 06:22 | you certainly will have to use
these inside Flash at some point.
| | 06:25 | It will damage your workflow if you're
constantly happened to move your line
| | 06:28 | work into Illustrator and
then back into Flash again.
| | 06:31 | So now that we have that covered, first
delete this layer and we have our fully
| | 06:37 | lined character out here.
| | 06:38 | Don't worry about the
missing leg. That will be covered.
| | 06:41 | We're ready to move onto to the head layer.
| | Collapse this transcript |
| Vectorizing the head| 00:00 | So here we are.
| | 00:01 | This is our character and we have lined
the body, we have lined the hands, and
| | 00:05 | we are ready to move on to the head layer.
| | 00:08 | So let's double-click either on the
symbol on the Stage or double-click on the
| | 00:12 | bd symbol in the Library
and we are inside our body.
| | 00:15 | This i, as I said before, it's a
composite, meaning that this symbol has
| | 00:19 | multiple layers and objects inside it
that can be controlled individually.
| | 00:24 | There is a layer for the major body elements
and also one for the head up here at the top.
| | 00:29 | Now as you can see the head is not
going to be a single static shape that will
| | 00:34 | be a very limited and boring
kind of character to animate.
| | 00:37 | We are going to make separate layers for the
eyebrows, the eyes, the nose, mouth and so on.
| | 00:41 | And if we put these layers in here,
just simply adding them, then this is not
| | 00:46 | going to be a very easy to use symbol or a comp.
| | 00:49 | I am going to undo that, Ctrl+Z.
So the solution is to add those layers inside
| | 00:54 | a single head symbol.
| | 00:56 | It's going to be a comp inside a comp,
and this will allow you to control the
| | 01:00 | animation inside a
bounding box or the Russian doll.
| | 01:03 | It will its own internal world.
| | 01:06 | It's much easier to control and animate inside.
| | 01:09 | So the first thing we have to do
is a basic symbol that will have the
| | 01:13 | properties that we need.
| | 01:14 | The symbol is going to be the head,
about this shape, and it will be pivoted
| | 01:19 | around this point here.
| | 01:20 | Let's switch the Outline mode off.
| | 01:22 | We can see it in black. So the head
is going to rotate around this point.
| | 01:25 | So let's simply select this. Hit F8.
| | 01:31 | We will call it hd for head.
| | 01:34 | Make sure it's symbolized in the center and
that is close enough. A little bit of housekeeping.
| | 01:39 | We've got our head symbol in the
Library. Just drag it into your character folder
| | 01:43 | so that all our
assets are created in here.
| | 01:46 | And now we can double-click on the hd symbol.
| | 01:49 | It's close enough for our purposes.
| | 01:52 | So now we have our pivot and our head
area and we could see on the lower layer,
| | 01:58 | the reference line work.
| | 01:59 | So we can now begin to create the
layers that are going to constitute the head.
| | 02:04 | So as a quick count, I can see the left eye,
the right eye, the eyebrows, the mouth.
| | 02:08 | So at this point as we did with the
body, I am just going to create layers so
| | 02:12 | the hair upper area, maybe a couple
more for the hair on the left side of the
| | 02:16 | head, the right side, one for the ear,
one for the eyebrow, the other eyebrow,
| | 02:21 | left eye, the right eye, the nose, the
mouth, maybe the jaw area, and a little
| | 02:26 | piece of hair at the back of the head.
| | 02:27 | And that's pretty much
enough for us to begin with.
| | 02:31 | And the other thing we could do at this
point if you lie, you don't have to,
| | 02:34 | but you can begin naming these.
| | 02:35 | So let's try to do that.
| | 02:37 | Hair upper and it will be this area
here at the very top and I am going to call
| | 02:42 | the next area hair right
for maybe this area here.
| | 02:46 | We can play with these as we go
along, but I like to have some kind of
| | 02:48 | structure as we work.
| | 02:49 | The ear right and also these layers
can be moved and as we begin to find that
| | 02:54 | we can prefer the ear be above the
hair layer or vice versa. Maybe this hair
| | 02:59 | could be above that ear.
| | 03:00 | Again we are playing with two
dimensional shapes and a lot of cheating and
| | 03:04 | creative decisions have to be made to
find the best combination of layers that
| | 03:08 | will work in the most scenarios.
| | 03:11 | So the eyebrows, eyebrow right.
| | 03:14 | This naming convention that I use is
designed to make at the forms logical so
| | 03:19 | they're easy to find and pick out.
| | 03:21 | We are going to have very long
vertical timelines with some of these.
| | 03:24 | So it's obviously nice if your eye can
scan, eye, is it the right eye, is it the
| | 03:27 | left eye, and so forth.
| | 03:29 | So this is the system that I found works for me.
| | 03:31 | There is also a stack you'll see very nicely
in the Library if you follow this method too.
| | 03:35 | I think that should be enough for at the moment.
| | 03:42 | So the first thing we should do to
color these layers if we want and simply
| | 03:46 | select all the right elements
and use the LayerColor extension.
| | 03:53 | If you don't have the extension, you
can do them one-by-one but it's much
| | 03:57 | quicker if you use the extension, which
we have covered in a previous course.
| | 04:03 | And that's available from
toonmonkey.com, along with many other excellent
| | 04:08 | add-ons to Flash, all free.
| | 04:09 | So I am just going to pick a generic
color for everything that's-- I am
| | 04:14 | holding down the Ctrl key to multiply
select, I am going to undo that, the
| | 04:19 | layers that got missed.
| | 04:27 | And that makes it a little easier
to see what levels we are working on.
| | 04:31 | So now that we have the layers labeled
correctly and colored correctly,
| | 04:36 | it's time to go in and begin actually
drawing the vector line art, which will be the
| | 04:41 | final stage before we can actually begin
to color the entire character and begin
| | 04:45 | to bring him to life.
| | Collapse this transcript |
| Outlining the head| 00:01 | So we are finally ready to
start actually drawing our head.
| | 00:04 | So double-click on the symbol on the
Stage or double-click on bd in the Library
| | 00:09 | and we are inside it.
| | 00:10 | One thing to notice is our head symbol,
which is already created, it doesn't
| | 00:14 | have anything in it yet, so what you
are going to see is either a circle with a
| | 00:17 | square or if you're not on that
layer you might have just a circle.
| | 00:20 | So this is why I like to keep
everything properly labeled. You can find
| | 00:24 | things that want to hide.
| | 00:26 | So double-click on the circle with the
square and we are inside the head symbol
| | 00:29 | or the comp, composite.
| | 00:31 | This is going to contain
everything that will animate for the face.
| | 00:34 | We've already got our
layers colored and roughly named.
| | 00:37 | So the first problem is to decide
what the basic level hierarchy should be.
| | 00:41 | So one obvious place to
start would be the very top.
| | 00:44 | Now his hair will definitely be on
top with everything, so let's just
| | 00:47 | start with this guy.
| | 00:48 | So it's padlock everything
beneath just to be careful.
| | 00:51 | Select the Rectangle tool, draw a box,
get rid of that internal shape, and
| | 00:56 | let's drag our points.
| | 00:58 | If Snap to Object is off you'll find it's
a bit easier to get things where you want.
| | 01:02 | And when you are positioning this
point, bear in mind what you think the
| | 01:05 | animation of the curve is going to be,
and that looks like a good range.
| | 01:09 | We can add more points later on if
we want this to be a little richer.
| | 01:14 | To begin with I'd like to
pick as few points as possible.
| | 01:16 | Hold down Alt+Opt and add another
point in here and you can make a couple of curves,
| | 01:21 | so that we have what basically
is either an S-curve on one side or a
| | 01:26 | C-shaped curve on the other.
| | 01:28 | And bear in mind, Flash oftentimes
will make a shape, a point, disappear.
| | 01:32 | You may even encounter this before.
| | 01:34 | It's happened already.
| | 01:35 | So I am going to undo that.
| | 01:37 | I like to have access to these points
and one of the problems that you find with
| | 01:42 | Flash is that if you make a curve
that's too smooth, it's simply not there
| | 01:46 | anymore, even though it's
accessible through the Subselection tool.
| | 01:49 | So this is an area where I do
like to be very picky about it.
| | 01:53 | It may not bother you but it does bother me.
| | 01:54 | I find that it already gets in my way.
| | 01:56 | So I'm going to recreate that line,
making sure that we have clean points, and
| | 02:03 | I'll switch Snap off. As you can
see our line is still selectable.
| | 02:10 | That's nice.
| | 02:12 | That's a very smooth curve.
| | 02:13 | The point is still accessible.
| | 02:16 | Now this one is gone.
| | 02:18 | This might seem pretty inane.
| | 02:20 | It's really something we want to have to
do once, at this point. This is basically
| | 02:25 | lining, rigging the character, so you really
want to get it right at this point. That's good.
| | 02:31 | So that's a smooth S-curve,
all the points are still alive.
| | 02:35 | You've got an easy to manipulate piece of hair.
| | 02:38 | So the next most important aspect
after we do that: outline it and padlock it.
| | 02:43 | So the next thing that will be most
important will be the eye layers and the mouth.
| | 02:48 | So I am going to very quickly go into
the right eye. Now these are going to be
| | 02:53 | essentially more complex forms later on.
Let's get the Oval tool and to shape this,
| | 03:01 | use the Free Transform tool, rather
than pulling the points of the circle.
| | 03:05 | It will get very ugly if
you do that. I'll show you.
| | 03:09 | As you begin to manipulate the Oval tool,
| | 03:11 | it will get very difficult to pull
things back in. I like to use it very
| | 03:15 | lightly towards the end of the process.
| | 03:17 | And as I said before these are temporary
symbols or shapes. They are going to be
| | 03:23 | drawn in much finer detail later on
with eye blinks, nested, and so forth, but
| | 03:28 | bear that in mind this is a first generation.
| | 03:31 | So the eye right, colored the eyebrow.
Also very important, the eyebrow is going to be--
| | 03:39 | Let's pick the Rectangle tool for this
and go into the Fill Color mode, and we
| | 03:45 | want to pick, I would say,
five or six points for this.
| | 03:48 | Hold down the Alt/Option key and this
will allow us the ability to pull and
| | 03:53 | push the eyebrow into different
shapes that will allow us to make the
| | 03:58 | character act and express.
| | 04:01 | We'll undo that and again make sure
that our points are still accessible.
| | 04:08 | Switch to outline and lock that.
| | 04:10 | So as you can see as we begin to
progress we try to figure out which layers
| | 04:13 | are on top of others.
| | 04:14 | That'll be very important for the hair,
so for example the hair right layer here.
| | 04:19 | I am going to do that
that has a box, a rectangle.
| | 04:21 | Let's go into Fill Color mode.
| | 04:27 | That's fine for now. Lock that, outline
it, left side as well, and we can make
| | 04:34 | tweaks and changes later
on. Very much a first pass.
| | 04:37 | As we add colors that'll affect your
number of layers and the position they occupy.
| | 04:42 | So for now I am just going to make this
hair area cover that and we will patch
| | 04:47 | another one in beneath on a lower level.
| | 04:51 | We definitely need to have another hair
layer here and we're calling it lower because
| | 04:57 | it's beneath this area and
let's make it dark green as well.
| | 05:01 | I'll use the Rectangle tool.
| | 05:05 | It's basically in the little box shape.
Put Snap to Objects On so that can
| | 05:11 | pinpoint that, and back Off again.
| | 05:13 | And we can save, pick a point, make it
follow through. Because this hair is going
| | 05:22 | to flow through and it should really
join up with that, so let's see if we can
| | 05:27 | make it follow that line.
| | 05:28 | And then we are actually drawing
what's supposed to be a three-dimensional
| | 05:34 | object in the two-dimensional space.
| | 05:36 | So the other shape that's very
important is the mouth. You do a lot
| | 05:40 | of acting with the mouth. Unlike the eye
this is going to be another temporary symbol.
| | 05:43 | Ultimately this mouth is going to open,
close, and speak, but for now we need
| | 05:48 | something that we can color
and place a name correctly.
| | 05:52 | We will then go in greater detail later
on and add layers and shapes that can be
| | 05:57 | tweened and that gives us absolutely
amazing amount of performance.
| | 06:00 | But that simple can't be done at this
stage in the process. It's its own project.
| | 06:04 | So for now let's just create a simple
form and that's nice and can cover to
| | 06:11 | that area, outline that.
| | 06:13 | And I'm going to proceed with this.
I'll continue with the nose, the other eye.
| | 06:19 | The other thing to really
prioritize will be the jaw area.
| | 06:23 | This will be something that I'd
like to keep as structural as I can.
| | 06:27 | So the upper layer will follow roughly
the eye line on the original drawing and
| | 06:34 | trying to keep the shape. Even though
it's a flat shape I'd like to keep it as
| | 06:38 | close to the anatomy of the form as
possible. That will really help us when we
| | 06:42 | start to animate it. And again check
the geometry with 1, 2, 3, 4, 5 points.
| | 06:48 | Now this jaw we will be animating
later on and we are going to be pushing
| | 06:51 | and moving that about.
| | 06:52 | So we definitely want this shape to
be stable and flexible, and that's a
| | 06:57 | good way of doing it.
| | 06:58 | So I am keeping it as simple as we can.
| | 07:00 | We could add more points too, but this
is a good starting place and the skull.
| | 07:05 | And as you can see, we are losing that
so let's go to outline with the jaw so I
| | 07:10 | can see where the skull layer is.
| | 07:12 | It saves me the bother of having
to recolor lines all the time.
| | 07:17 | And the skull is going to beneath the
jaw. So you want to make sure that there's
| | 07:22 | a good amount of overlap between these
two. Otherwise we'll see like a little
| | 07:26 | shimmering area here.
| | 07:31 | The skull should be reasonably
approximate to the position of the actual
| | 07:34 | skull beneath the hair. This is hair here,
| | 07:37 | I am not going to do.
| | 07:39 | That's going to be out external to
the head symbol because the hair will go
| | 07:42 | beneath the neck area, which is on outer
layer. You will see that clearly going
| | 07:45 | to be begin to color the character.
Here is a more complex shape.
| | 07:52 | I'll use the box for that. Switch off Snap.
| | 08:04 | So I am going to keep relining this
character. Do the nose, the other eye,
| | 08:08 | the under layer of the hair, the top of
the head, back and forth from the Line tool
| | 08:11 | to the Selection tool. You'll have
access to this final Flash file in your
| | 08:16 | projects folder, so I think that's good for now.
| | Collapse this transcript |
| Adding finishing touches with hair| 00:00 | So we are almost ready to start
colorizing our character, and before we do that
| | 00:04 | there is a one little detail I want to
take care of, and that is this area of
| | 00:09 | the hair, and there is a reason why
that's been left until the end and if we
| | 00:14 | double-click on the body layer or double
-click on the bd symbol in the Library,
| | 00:18 | you'll see exactly what I mean.
| | 00:20 | I am going to go into Outline mode for the head.
| | 00:22 | This will become clearer as
we begin to add the colors.
| | 00:25 | Let's move the head area.
| | 00:27 | This area of hair is going to be
beneath the neck area, so if we were to put
| | 00:31 | that hair inside the head and
it would be on top of the neck.
| | 00:35 | You would see the hair slicing through here.
| | 00:37 | There would absolutely be no way to
have that hair inside the head comp.
| | 00:43 | This is even more extreme if you imagine
the character having long hair, maybe a
| | 00:47 | rocker or a woman or somebody with a
big ponytail or a hat. There is any number
| | 00:52 | of costume designs that
would make that impossible.
| | 00:55 | So it's very important that we get used
to not having everything attached to the head,
| | 00:59 | being inside the head comp.
| | 01:01 | It's simply a fact of life with
the Flash and the layering system.
| | 01:06 | So we'll do a last-minute addition to this.
| | 01:09 | I am going to make a new layer down
here called hair lower, and in this case
| | 01:16 | it's a very simple shape, so I am
going to use the Rectangle tool.
| | 01:20 | Get rid of that internal color area,
get rid of Snap, padlock everything.
| | 01:27 | It's very easy to select the wrong area
when you are working like this, which is
| | 01:30 | why I like to work in Outline.
It makes it a little bit easier.
| | 01:33 | And again don't forget that
this hair is flowing from the head.
| | 01:37 | So try to match your layer to the line
of the hair and that'll make the entire
| | 01:43 | thing feel real and more solid, and I want
to keep this shape as simple as I can so
| | 01:48 | maybe 3 points and that is it.
| | 01:51 | So let's select a nice outline color
for it, maybe a faint blue, and that
| | 01:57 | is pretty good I think.
| | 01:58 | So don't worry about the back leg.
| | 02:01 | That's going to be added
when we actually symbolize this.
| | 02:04 | So there is no other point in
messing with that at the moment.
| | 02:06 | So now we have our lines all in black.
| | 02:08 | So that's it, and I hope to
see you in the next chapter.
| | Collapse this transcript |
| Colorizing the character head| 00:01 | So, we're ready to colorize the
character and I think we'll start with the
| | 00:04 | head on colorizing.
| | 00:06 | If you're just doing this by yourself
for fun, then you can pick any colors
| | 00:10 | you like. It's up to you.
| | 00:11 | If however you're working inside a
studio system with a bit more structure, and if
| | 00:16 | you're adapting an animated character
from some of that already exists like a book,
[00:00:2080]
you're going to need to scan
that image or take in a JPEG or a
| | 00:24 | photograph, and pick the colors from
that and apply them to your character.
| | 00:29 | So, I want to show you how to do
that since that is probably more
| | 00:32 | important to most people.
| | 00:34 | So, let's move the character in that
position. Double-click on the symbol on the
| | 00:38 | stage or double-click on bd figure in Library.
| | 00:42 | Let's start with the head.
| | 00:43 | So let's un-padlock that layer, double-click.
| | 00:46 | So now, we're inside the head layer and
everything's padlocked, but we're going
| | 00:50 | to be filling everything with paint soon.
| | 00:52 | So, one little thing you'll notice, you
can't really tell the symbol we're working in.
| | 00:56 | We're inside the head comp,
but everything looks black.
| | 00:58 | Everything looks exactly the same.
| | 00:59 | So first thing, let's go into View >
Preview Mode and select Anti-Alias,
| | 01:06 | and that's much better.
| | 01:07 | So now, we shade out the body level.
| | 01:09 | We know that we're working inside the
head and it'll make the process a little
| | 01:13 | easier in terms of
seeing exactly where we are.
| | 01:15 | So let's zoom in on the head.
| | 01:16 | I'm going to widen the stage a little
bit and make this as big as we can, so we
| | 01:22 | don't have to scroll
around the screen quite as much.
| | 01:24 | We're ready to start painting.
| | 01:28 | So, one thing I want to do first is
import our reference material, and that is
| | 01:34 | contained inside your project folder,
inside the character design folder,
| | 01:39 | inside color model. There he is.
| | 01:41 | So now we have him in the Library.
| | 01:44 | So let's give him a little level
of his own, just temporarily. Oops!
| | 01:50 | Undo that, padlock
everything, just drag him down.
| | 01:54 | This is probably a clean way of doing. it
| | 01:55 | So we're going to match him a bit more closely.
| | 01:59 | So now, if we want to grab
these colors, it's very simple.
| | 02:01 | Eyedropper tool and select and
you'll see the right color appearing here.
| | 02:06 | You might want to be careful
where there is a lot of anti-aliasing.
| | 02:09 | Try to pick from inside
one of these clean spaces.
| | 02:12 | So let's hide him now,
and we can start painting.
| | 02:16 | Making sure we're on the right layer,
and so I'm just going through all the
| | 02:21 | areas that would correspond to skin.
| | 02:23 | The nose, you can see
immediately, probably we missed him.
| | 02:26 | So I'll pop that in, and I would say
just at this point just block at him.
| | 02:31 | don't be too focused on worrying about details.
| | 02:36 | If you close to the lines, sometimes
it'll do it wrong, but oftentimes it
| | 02:39 | will be pretty smart.
| | 02:40 | So let's pick simple white color
for the whites of the eyes. Oops!
| | 02:45 | Just on the inside.
| | 02:45 | There we go, black for the eye itself,
and I think we had a brown color for the
| | 02:53 | eyebrow or a darker color.
| | 02:55 | I'm not sure if that's totally black.
| | 02:56 | Don't worry about the detail of the eyeball yet.
| | 02:58 | We're going to do that in a later class.
| | 03:00 | If I get a black for the mouth and
there is this dark color here for the inside
| | 03:09 | of the ear and maybe the lower lip.
| | 03:13 | Don't worry about upper eyelid as well.
| | 03:14 | That will also be added later on.
| | 03:16 | Now I'm going to pick the black for
the mouth, and now you'll easily say,
| | 03:21 | obviously the ear is on the wrong layer
and this is the part where we can really
| | 03:25 | fine-tune the layering.
| | 03:26 | So I just pull it
up until it stops being wrong.
| | 03:29 | And, you'll also notice that on the
reference material, I'm going to slide it
| | 03:33 | out so we can see them side-by-side.
| | 03:34 | Hold down the Spacebar to drag.
| | 03:38 | So you'll see that the nose has a
dark area here and the reason for that is
| | 03:43 | without these fake black
lines, you can't see the nose.
| | 03:46 | So let's go in and add that.
| | 03:47 | The basic lining is done, but this is
where we can really fine-tune some of
| | 03:50 | these layers, make them look right.
| | 03:51 | I will select the area that
you're going to be painting into.
| | 03:56 | So this if where we'll add highlights
and shadows, things that will help to
| | 03:59 | differentiate some of these spaces.
| | 04:01 | I'll make sure that Snap is off for this area.
| | 04:04 | Snap, I find very keen to
combine lines. So, that's good.
| | 04:08 | Go and select our dark color, drop it
in, and already you can see a slight
| | 04:15 | problem that's going to arise.
| | 04:16 | There's a big ugly white triangle here,
and we can fix that fairly easily by
| | 04:21 | just pulling the jawline over a little
bit and actually probably helping as
| | 04:25 | well by pulling the ear out just a bit.
| | 04:30 | Maybe bring that ear lobe in slightly, and
that should eliminate the ugly white triangle.
| | 04:36 | So now, I think we're pretty much done.
| | 04:39 | Ah, there's one more thing.
| | 04:39 | I previously suggested that we add a
white highlight to the top and a dark to the
| | 04:44 | bottom because that'll help
areas of overlap on the hair.
| | 04:46 | So let's add them as well. Oops!
| | 04:51 | It's very easy to forget. Just make sure
you're working into the right layer. Put Snap on.
| | 04:58 | Make sure these are clean.
| | 04:59 | Hold Option to add a point
here, another point there.
| | 05:02 | It's very very important that
all these corners line up exactly.
| | 05:08 | There can't be more than four
points combining at these corners.
| | 05:12 | If one of your lines were to join
just short of the corner, you will have
| | 05:16 | multiple points, and then when you
begin to animate this, it will go crazy.
| | 05:20 | You simply won't be able to control the forms.
| | 05:22 | So, if that happens, if you find that
you've got additional shapes here, simply
| | 05:26 | delete them, start over.
| | 05:28 | A quick demonstration of that.
| | 05:29 | I'll do it wrong, so you can see
exactly what I'm talking about.
| | 05:37 | So now we have this kind of thing
happening and that's not going to go good when
| | 05:41 | you start adding in the different shapes.
| | 05:43 | So, how I would correct that?
| | 05:45 | Sometimes you can simply drag that
point onto there and then you're good.
| | 05:48 | If you have a real cluster of points,
I like to go in, delete them, and do this
| | 05:55 | and then you're good again.
| | 05:56 | So, I'm going to undo all that.
| | 05:58 | So that's the process.
| | 05:59 | Just watch these corners.
| | 06:00 | Very very important that they
are always kept nice and tidy.
| | 06:03 | So, the next thing I'm going to do is
try to match these little triangular
| | 06:07 | spaces so that we can add our
highlights and lowlights, and this is when the
| | 06:10 | Subselection tool is also handy.
| | 06:12 | So I want to make sure that these points
are roughly corresponding to one another.
| | 06:17 | You can see one of my earlier
mistakes is still there. So now we're fine.
| | 06:25 | And then the last step will be just
to make sure that our colors are roughly
| | 06:28 | corresponding to one another.
| | 06:35 | I want to zoom in.
| | 06:44 | And there we are. So let's
get rid of the guide layer.
| | 06:50 | And then, the last thing we do in this
particular case is we will delete the lines.
| | 06:54 | I'm going to leave them in for now,
even though they look quite ugly, but we
| | 06:57 | leave that till the very last phase.
| | 06:58 | So I want to colorize the body as well,
and then we'll begin the process of
| | 07:01 | removing the lines and testing
everything to make sure that it's solid and all
| | 07:05 | the layers work together.
| | 07:06 | We've done the head.
| | 07:07 | Time to advance to the body.
| | 07:09 | Don't worry about that small area
of hair behind the character's neck.
| | 07:12 | That will actually be colored in
the body layer, not in the head layer.
| | 07:16 | We have more on that in the next class.
| | 07:18 | So, the head layer will cover how to
not just color the body, but to color it
| | 07:22 | with gradients, which will make
it look a little more interesting.
| | 07:25 | So, I think that's good for now.
| | Collapse this transcript |
| Colorizing the body| 00:00 | So, we've colorized our character's head,
and now it's time to move onto the body.
| | 00:05 | So, let's double-click on the
symbol on the stage, or if you prefer,
| | 00:08 | double-click on the bd
symbol in the Library panel.
| | 00:12 | Let's padlock the head because the
head is done and unpadlock all the body
| | 00:16 | layers, and we also would probably
benefit if we had our color_model from the
| | 00:22 | Library on the stage, so we can
refer to this and grab colors from it.
| | 00:26 | Then apply them to our
character or vectorized liner.
| | 00:30 | So, let's use the Eyedropper tool,
that's this one, and grab the relevant
| | 00:36 | colors, and just drop them in.
| | 00:43 | Now, you'll notice when we do this
that any of the errors that we've made in
| | 00:46 | the layer hierarchy will very very quickly
become apparent, and that's not a problem.
| | 00:53 | Very easy to fix this.
| | 00:54 | Notice also, we have a gradient on the body.
| | 00:57 | We're not going to worry
about that in this class.
| | 00:59 | We'll do that in the next one.
| | 01:01 | But for now, let's just go
with the basic flat area.
| | 01:03 | Okay, there's one last little area
that you might see and that's this
| | 01:11 | little white spot in here.
| | 01:12 | So we want to shade that with the darker
shadow area on the skin, grab that with
| | 01:17 | the Eyedropper, and just drop that in.
| | 01:19 | Let's zoom out and have a look. Okay.
| | 01:24 | Now to fix the little layering errors,
just click on the layer that's too high
| | 01:28 | or too low and just drag
it down until it looks good.
| | 01:31 | Same thing with this hand here, and I
think this leg should be, or I actually
| | 01:36 | think the torso might be a bit lower.
| | 01:38 | Oh yes, and this is a little
mistake that we made earlier on.
| | 01:42 | Notice that we accidentally
drew the foot on the wrong level.
| | 01:46 | That's okay. Easy to fix.
| | 01:48 | Just select the foot, copy it, and cut
it, you grab the layer that you want,
| | 01:55 | and into the right foot, Paste in Place, or
Ctrl+C and then Ctrl+Shift+V. Now we're good.
| | 02:05 | So, at this point, there's one last
thing that's really going to be an issue,
| | 02:09 | and that is the color on the hands.
| | 02:12 | We can see the potential problem with
this. If we double-click on the black line
| | 02:17 | and then hit Ctrl+X to get rid of it,
you can't see where the fingers are.
| | 02:21 | The solution to that, while we could
keep the black line, but it looks kind of ugly,
| | 02:25 | is something like this where
we put a shadow color separation.
| | 02:28 | We could also, if we wanted to,
put a highlight one on the other end.
| | 02:31 | So, I'm going to go in
and I'm going to add that.
| | 02:33 | So let's just select the hand layer,
we'll hide the rest, and usually we favor
| | 02:37 | one side or the other.
| | 02:38 | So I like to imagine the light coming
in from one end and be sure when we apply
| | 02:42 | these points that they snap to the
corner to keep the geometry nice and clean.
| | 02:46 | I like to grab a bunch of points, put
them on here first, and then since these
| | 02:52 | are very finely positioned and Snap
can be kind of aggressive, I have to switch
| | 02:57 | it off for this part.
| | 03:02 | And back on when we have to connect to
these corners precisely, and I think one
| | 03:10 | more up here, just to mark that out.
| | 03:16 | Now, I want to find that
color for the skin shadow color.
| | 03:19 | We can get rid of that
line. Pull it from there.
| | 03:24 | Double-click on the line to get rid of it.
| | 03:28 | So let's see what that looks like
without the line, and that looks pretty good.
| | 03:33 | So now, we repeat the process over here,
and again let's just select the right layer,
| | 03:37 | get rid of everything else.
| | 03:38 | Oops! Again, this is one of those points when
we want to get rid of Snap for a little bit.
| | 03:44 | Maybe zoom in.
| | 03:46 | I'm going to just throw down
some temporary positions here.
| | 03:58 | Put Snap back on for this, so we
hit those corners exactly right.
| | 04:03 | Maybe round off these areas, wherever
you think looks best, and color them in,
| | 04:09 | and little reminder to make sure that
Don't Close Gaps has been selected for this.
| | 04:15 | Oops! Ah, we have an open line there.
| | 04:18 | The reason why I don't like to have the
gaps set to that point is because if you
| | 04:23 | have it selected to don't Close Small
Gaps or Large Gaps, these little areas
| | 04:28 | oftentimes will be left white or
empty, and that will cause problems.
| | 04:36 | Okay, that looks good.
| | 04:38 | So, let's unhide everything.
| | 04:40 | Let's just hide these for now.
| | 04:42 | Then if you want to test the character
without their lines, very-very simple,
| | 04:46 | Zoom out, make it quite small, and select the
Eraser and just have it select to Erase Lines.
| | 04:54 | Make sure you've erased everything on
the stage, zoom in, looking pretty good.
| | 04:59 | Let's do the same thing on the head
layer. Unpadlock that, click in, and erase
| | 05:06 | everything, just the lines.
| | 05:11 | Now, we're starting to see our
character begin to approach the end state.
| | 05:16 | So, now we have the character fully colored.
| | 05:18 | There is some little work still to be done.
| | 05:20 | We need to add a gradient to the body,
and we need to symbolize the hands,
| | 05:26 | and the feet, and all the body parts.
| | 05:28 | Then to add pivots, but the next step
will be to add this little cool color
| | 05:31 | gradient to the torso.
| | Collapse this transcript |
| Applying gradients| 00:00 | So here is our character. The colors
are all blocked in and we'll get close now
| | 00:04 | to be able to finally rig this.
| | 00:05 | But there's one last issue with the
color of the character that we need to
| | 00:09 | address, and that's the color of the
torso and how it relates to the right arm.
| | 00:13 | And let me show you what I mean.
| | 00:14 | So if you double-click on the body and
the state or double-click on bd in the
| | 00:17 | Library, and here we have our right
arm and our torso and just watch what
| | 00:21 | happens when we moved the right
arm over the body. It disappears.
| | 00:27 | This is going to happen naturally
anytime you use this style of coloring.
| | 00:31 | So there are a couple of different possible
solutions and here's one that I made previously.
| | 00:35 | This is for demonstration purposes.
| | 00:38 | And this is an option you have. The
only problem is it does solve problems but
| | 00:41 | it also causes some.
| | 00:43 | I'm going to show you what they are.
| | 00:44 | Obviously now you can see where
the arm is separate from the body and
| | 00:47 | everything reads nicely.
| | 00:48 | The only problem with this, even when
you're very careful with it, let's say I
| | 00:52 | want to reposition this arm into a new pose.
| | 00:56 | I end up noodling with all these little
corners and points and it doesn't take
| | 01:00 | much for this thing to
degenerate into a complete mess.
| | 01:05 | Honestly it's just not a fun way to
work when you're working on that big
| | 01:09 | scale, like arms or legs, and so I
like to find ways that encourage me to
| | 01:14 | animate and not punish me.
| | 01:15 | So let me get into that layer and
I'll show you a different possible way
| | 01:19 | to solve this problem.
| | 01:20 | So here is our original simple design
and if we look at it with a Subselection tool,
| | 01:23 | now we have got our-- We
have simple six points instead of 20.
| | 01:28 | So let's rotate this across the body,
and to compare it to the other system if I
| | 01:33 | want to position this guy into a new angle,
| | 01:36 | pretty straightforward. Look at
an outline you can see what I mean.
| | 01:40 | I can really distort this thing
without worrying about all of the little
| | 01:42 | triangles and everything.
| | 01:43 | Of course, the problem being how
do we tell it apart from the body?
| | 01:47 | One way is to make the body a different color,
and we can, you know, pick several of them.
| | 01:52 | Then the problem becomes we can see the scene.
| | 01:54 | Let me make this a little
more extreme so you can see it.
| | 01:57 | Now we can see this line. This is also ugly.
| | 01:59 | So we don't want that either.
| | 02:01 | So the solution is, you may have guessed
this already. It's visible on our color reference.
| | 02:05 | The simplest one I think is to make a
gradient on the torso level. In order to
| | 02:10 | do that we need a quick
demonstration of the Gradient tool. Okay.
| | 02:14 | So I'm going to show you the
Gradient tool, and make just clear the deck
| | 02:17 | here for a minute, and I think that
lot of people may regard the Gradient
| | 02:20 | tool as a little ugly. It is limited.
| | 02:23 | There is no question about that.
| | 02:25 | But it does have certain options
that are very-- kind of capable for
| | 02:28 | simple basic shapes.
| | 02:29 | So I'm going to pick Linear Gradient and
then let's pick an extreme gradient, so
| | 02:33 | we can see it properly.
| | 02:35 | Select the Fill tool and important
sometimes to make sure Lock Fill is not active.
| | 02:41 | Because Lock Fill, this little gadget
down here, can prevent you from making
| | 02:45 | dynamic changes and discourage you actively
from actually doing any thing with the gradient.
| | 02:49 | So let's make sure Lock Fill is not active.
| | 02:52 | We can paint our linear
gradient any number of ways.
| | 02:55 | You can see it appear too. Ignore that.
| | 02:58 | So the linear gradient is fine for
cylindrical shapes and such, but for organic
| | 03:03 | shapes the radial might be more appropriate.
| | 03:05 | And let's see you want to alter the
gradient to fit a particular form.
| | 03:09 | That's when you need to use the Gradient
Transform tool and that's here, beneath
| | 03:14 | the Free Transform tool.
| | 03:15 | So let's click on our area and as you
can see, we got this circular widget and by
| | 03:20 | scaling that in we can rotate this, we
can play with it, and we can adapt it and
| | 03:26 | modify it to fit various shapes.
| | 03:28 | The other thing to watch out for
this triangle change is the focus of the
| | 03:31 | center, so if you want to create
things like billiard balls or pool balls or
| | 03:35 | whatever, even different kinds of
shadow effects, this is very useful.
| | 03:38 | The other thing you can do is you can
add more colors to your gradient, visible
| | 03:42 | in the Color panel.
| | 03:44 | You can make them different colors.
| | 03:46 | You can make them different
transparencies by playing with this.
| | 03:49 | So the scope for effect is pretty substantial.
| | 03:52 | So let me get rid of that. By changing
the position of the colors on your swatch
| | 03:56 | you change how they map on
to the Gradient tool itself.
| | 03:59 | So this is the new gadget that
we'll be using to color that torso.
| | 04:02 | So let me go back into there, and I'm going
to steal these colors from the color model.
| | 04:07 | You can apply any different colors
and play with this as you see fit.
| | 04:11 | So let's select the radial gradient.
We want to fill the torso with that, click.
| | 04:18 | And the first thing that'll likely
happen is you'll see something that's
| | 04:20 | completely hideous, so then
you use the Gradient tool.
| | 04:24 | Sometimes the Gradient tool
leads off the screen like this.
| | 04:27 | It drives me crazy, to be honest.
| | 04:29 | And what you end up having to do, luckily
just once, is zoom out, grab the gadget and bring it
| | 04:35 | back in again until you can see it.
| | 04:37 | So again if that happens, that's the solution.
| | 04:39 | So we position it with the center of
the gradient will be our shadow area, which
| | 04:43 | is similar to this.
| | 04:45 | And rather than have it be a sphere,
which will look kind ofa weird, let's try
| | 04:48 | to match it as closely as we can to the
torso, so that the brighter outer color,
| | 04:53 | which would be identical to the arm,
will be at the outer edge of this.
| | 04:58 | Make sure Snap is off, so we can
align it a little more closely.
| | 05:01 | And then it's a matter of
playing with these colors.
| | 05:04 | Now if you want to sample a color
for your gradients, it's very simple.
| | 05:07 | Double-click on the color itself,
and you can select it like that.
| | 05:12 | If you want to add another color on a
gradient to give it a little more of
| | 05:15 | a depth or a more natural feel so it fits
the curve of the torso a little bit better,
| | 05:20 | simply by moving it, if you look carefully, you
can see where the terminator of the shadow is.
| | 05:25 | It's becoming sharper and sharper as
I push the color on the palette here.
| | 05:29 | That's obviously too
extreme. Let's pull it back in.
| | 05:31 | Now we're getting
something that looks very natural.
| | 05:34 | Let me zoom in to the joint where
the arm is, and that's pretty nice.
| | 05:38 | We can see where the arm is crossing the torso.
| | 05:40 | We're not seeing an ugly separation up here.
| | 05:44 | And if I do a quick test, select the
arm, and use the Free Transform tool, and
| | 05:50 | pull the arm across the
body, that's really nice.
| | 05:53 | So we can see that
everything is working pretty well.
| | 05:55 | And you can change the position
of the gradient. You can tween it.
| | 05:59 | If you have to adjust your
animation, you can do that.
| | 06:01 | You're not a prisoner of this actual position.
| | 06:04 | So that is the torso problem solved.
| | 06:08 | In the next session, we will go forward
and symbolize the different body parts
| | 06:13 | and we'll pivot them and make sure that
they are all named and stacked properly
| | 06:16 | in the library for easy use.
| | Collapse this transcript |
| Symbolizing and pivoting the body parts| 00:00 | Okay so it's time to take our character
and create the symbols for the different
| | 00:05 | body parts to take the overall vector
artwork, turn them into symbols, and to
| | 00:09 | place the pivot points, and it's very
important that we do this just right and
| | 00:13 | we name them right, that we pivot them
properly, because we are going to be using
| | 00:17 | this rig a lot, and if we make any boo-
boos in this part of the process we'll
| | 00:21 | be paying for them for a long time to come.
| | 00:23 | So not to scare you, but it's
important that we do this properly.
| | 00:26 | So let's double-click on the character
or I would prefer to double-click on the
| | 00:30 | character in the Library, and go
straight in, and this is our old color model
| | 00:35 | down here on layer 2.
We can get rid of him now.
| | 00:37 | Now we still have our black-and-
white pencil reference on here.
| | 00:42 | We will keep that until we finally
position that left leg and get that done.
| | 00:47 | So let's hide the head.
| | 00:48 | We will do the body in this part and
let's do the-- I think the right arm would
| | 00:52 | be a good one to start with.
| | 00:53 | So let's hide everything else.
| | 00:55 | I am going to keep the upper torso
there in Outline mode and we are going
| | 00:59 | to symbolize the arm.
| | 01:01 | So simple enough. Hit F8 on the keyboard,
make sure that your pivoted point is
| | 01:06 | set to the middle here, and
we will call it arm right.
| | 01:08 | The same name as our Timeline, keep
everything consistent and easy to follow. Click OK.
| | 01:14 | Now the problem is, oops! That's not good.
| | 01:17 | So let's find a way to
make this pivot thing work.
| | 01:20 | So we double-click on the arm symbol and
obviously we want to drag our entire artwork.
| | 01:26 | Just click on everything on the
Timeline, and we want it to snap to this point
| | 01:30 | here, and the way to do that is to go to
Snapping and Snap to Grid, because this
| | 01:36 | is the 0,0 point of the entire grid.
| | 01:39 | So if we click into there, you'll
notice a little bit of a lag on that little circle.
| | 01:43 | Don't be freaked out
by that. Just take your time.
| | 01:45 | It will go in and if you are not sure,
zoom in as far as you can go and that's it.
| | 01:50 | That's precise.
| | 01:51 | So now when you tunnel out, back onto
the main stage, you will see there we are.
| | 01:56 | So now it's just a question of
dragging this and make sure that Snap to
| | 02:00 | Objects is on, because we want to snap
to the object that is the point at the
| | 02:04 | shoulder, and there we go.
| | 02:05 | That's it, and you can test
it if you like. It looks fine.
| | 02:10 | Let's undo that.
| | 02:11 | Let's repeat that process for the left
arm, and again arm left, and again double-click
| | 02:20 | on the arm and that's
lineup with that 0,0 point.
| | 02:23 | We have Snap to Grid On and Snap to
Object On, so we can position these pretty quickly.
| | 02:32 | You notice that we are generating as
we go. Our Library starting to fill up
| | 02:36 | now with body parts.
| | 02:37 | So those were two easy ones.
| | 02:39 | I mean it was pretty obvious with
the pivots we are going to go on those.
| | 02:42 | Now let's do something like the torso neck.
| | 02:45 | This one is more of an open
question because we can put the pivot here.
| | 02:48 | We can pivot around this point.
| | 02:49 | We can pivot around that point.
| | 02:51 | We can also change the pivot point
later on, but let's pick the one that's
| | 02:54 | probably the most common.
| | 02:55 | The spine goes up the back of a neck, so I
would think probably we can pivot from here.
| | 03:00 | So let's select this one.
| | 03:01 | Before we do this, the other thing that
we are going to do, since we are moving
| | 03:05 | these objects around, I like to
be pretty picky about the process.
| | 03:09 | So let's hide the head again.
| | 03:11 | I am going to make a temporary guide
layer and this will really help us,
| | 03:14 | as we move through the scene. Let's hold on
Shift and unselect the arms, copy everything.
| | 03:19 | I am going to make a new layer, a temporary one.
| | 03:25 | Put it in outline and padlock it and I
like this orange color. Let's keep that.
| | 03:29 | This is only a temporary
thing to help us position things.
| | 03:32 | So now let's go into the torso neck layer.
| | 03:34 | I am going to symbolize it, torso nck.
| | 03:40 | That's our pivot point, so drag that to
the cross, snap it back, and the beauty
| | 03:44 | of having that orange layer now is that
we can position things precisely to it.
| | 03:48 | The menu to unpadlock it is really snap to it.
| | 03:51 | You notice sometimes when you padlock a
layer, the snapping functions doesn't work.
| | 03:54 | So that is 100% accurate, and that's
nice to be able to work to that level.
| | 04:00 | It can be critical for very precise scenes.
| | 04:04 | So here is the layer of the torso.
| | 04:05 | Now with the torso,
| | 04:07 | it's fuzzier. You could place
the pivot in the center of mesh.
| | 04:09 | You could pivot it down here or
somewhere in this general area.
| | 04:13 | So you could even place the pivot..
| | 04:15 | I guess on a corner, but I like to
place the pivot, and it's a matter of
| | 04:18 | personal preference, somewhere around
here at the lower base of the body.
| | 04:24 | So torso upper and for this kind of
positioning, double-click on the torso and
| | 04:29 | hold down the Shift key and move the
Arrow key up by a fixed number of clicks,
| | 04:33 | like 1, 2, 3, 4, 5, 6, 7, 8, 9,
10, 16 up and then 16 back down,
| | 04:43 | and that will be exactly the same.
| | 04:46 | So now you have the body pivoted over the
correct area and that's a nice little rotation.
| | 04:52 | Let's see what else we have to line up here.
| | 04:54 | So we have the lower torso,
the leg and the foot.
| | 04:58 | I am going to pick the lower torso now,
torso lower. Double-click on that so we are inside it.
| | 05:09 | And I think again pivot point
somewhere about here will be better.
| | 05:12 | So move that down by 1, 2, 3, Shift with the
arrow, Shift back up, 1, 2, 3, that was easy.
| | 05:20 | And now we want to place the pivot on
the leg, and we could pivot it here, we
| | 05:23 | could pivot it in the middle
or we could pivot it there.
| | 05:25 | Let me save this to pivot it from
the corner here. Let's try that.
| | 05:29 | Again, we can change this later.
If we begin to animate, do a couple of
| | 05:33 | scenes, but if you are going to do
say 20 scenes from one rig and you want
| | 05:37 | them to be interchangeable then you
really should commit yourself to a full
| | 05:42 | permanent position for these.
| | 05:43 | Here we go. Let's switch off everything
except the two layers, that and the-- this.
| | 05:56 | I want to put them both in Outline
mode, and go into the maximum.
| | 05:59 | Now I am using the Arrow keys
until I get as close as I can.
| | 06:06 | That's pretty close. Okay.
| | 06:12 | I think the last thing is the right foot.
| | 06:15 | So we select that, F8, leg right foot,
and we could pivot around the ankle joint,
| | 06:25 | and that's probably an anatomical pivot,
but there is going to be times when you
| | 06:28 | might want to be able to pivot around
the point of the foot. But I think the
| | 06:31 | primarily along the
conception for now around here.
| | 06:35 | If you've animated a scene later on
and you want them to do tiptoes, then
| | 06:38 | you can always do this.
| | 06:40 | It's a bit extreme but you can do that.
| | 06:42 | It's nice to have the anatomical pivot
be our primary pivot, and then if you
| | 06:47 | want to do specific actions
then they can be secondary to that.
| | 06:50 | Now the last really remaining
big move would be the hands.
| | 06:54 | Now I go back into full color mode and
also if you hit Ctrl+A, that will very
| | 06:59 | quickly show you how many
layers you have left to symbolize.
| | 07:01 | We have the hair with the
little dots and the two hands.
| | 07:05 | So the hair is easy.
| | 07:06 | Let's go in there and do that first.
| | 07:13 | Same thing with the Shift key and the Arrow.
| | 07:14 | 2, 3, 4, 5, 6 down, 6 back up, and
9 over, 9 back and that's pretty close.
| | 07:28 | Now the hands, so let's select the right hand.
| | 07:38 | I think a nice pivot point would be
either this corner here or at the middle.
| | 07:43 | I am going to go at the middle.
| | 07:43 | I am going to use the orange layer
again as my repo guide, to re-correct
| | 07:50 | the position of the hand, and then
repeat that process with the left hand.
| | 07:58 | Double-click on that, position over
the wrist, and again use our repo layer as a guide.
| | 08:07 | And I think now that we are safely
repo-ed we can get rid of that orange layer,
| | 08:13 | and one last step and that's
creating the leg using the right leg.
| | 08:18 | So I am going to copy the right foot
onto the left foot layer, Ctrl+C, Ctrl+V,
| | 08:23 | then reposition that, and Ctrl+Copy
for the leg, and we place that over here.
| | 08:30 | Now you go in to Outline mode. You
might need to make them a little bit smaller.
| | 08:36 | So Ctrl+Alt+S to activate Scale
and Rotate and let's make then maybe 95%.
| | 08:52 | I may skew these symbols too a little bit.
| | 08:54 | If I was going to skew these a lot to
make them work, I would actually make a
| | 08:57 | new symbol, but I think it's
best that we can keep at the same.
| | 09:00 | Later on we can duplicate these symbols,
if we want to make them original to do
| | 09:04 | their own thing, but it's nice to have thing
standard and save us a bit of timelining too.
| | 09:13 | So now that we have that, we can again
hide the reference layer, and quick box
| | 09:20 | around everything, all blue
lines, no dots. So one last step.
| | 09:23 | Go into the Library panel and under
Character, create a new folder, and we are
| | 09:28 | going to call it body parts.
| | 09:30 | So I call it body parts for now, and I
am going to Drag+Shift+Click all the body
| | 09:35 | parts into that folder.
| | 09:40 | Ctrl+Click to select multiples.
| | 09:47 | I think we can get rid of the
color reference from the Library.
| | 09:51 | Bit of housekeeping.
| | 09:52 | Keep that for now.
| | 09:57 | So we can drag that into that character folder.
| | 10:00 | Now this is going to a reference folder.
So let's make a little folder as well
| | 10:03 | for all the little reference bits.
Of course we are about to start cluttering
| | 10:08 | up the Library, so we would like
things to be reasonably clean.
| | 10:12 | So the other thing I would like to do
make things bump up is to put a space
| | 10:17 | before the actual primary comps that we
will be building into the body and the head,
| | 10:21 | and that puts them at the top
of this list, and I will make a folder
| | 10:25 | called head parts because we
are about to make head parts.
| | 10:28 | And we have got out first head part
here, that hair symbol that goes in there.
| | 10:32 | That can go into our reference
folder and that is looking really nice.
| | 10:36 | We don't want to let the Library
get out of control, or be sorry.
| | 10:39 | So this is clean and we are now
ready to move on to symbolizing the head
| | 10:44 | parts and pivoting them.
| | Collapse this transcript |
| Pivoting the head| 00:00 | So now we have our body pivoted and symbolized,
and we will do the same thing to the head.
| | 00:05 | Now I have already taken the
liberty of going in and doing some of the
| | 00:08 | basic pivoting on this.
| | 00:10 | The hair, I will just go right into the
head symbol here. We are all the way in
| | 00:14 | or we can go to the
Library and double-click on hd,
| | 00:17 | the head symbol, and if I hit Ctrl+A
you can see that the blue bounding boxes
| | 00:22 | tell us which parts have
already pivoted and named.
| | 00:26 | So most of the hair levels are done and
that will allow us to move them around.
| | 00:30 | I have left out some parts that need a
little more attention, and other parts
| | 00:34 | we are not going to symbolize. The
eyebrows so far anyway we'll leave them as not
| | 00:38 | symbols. They're going to be shape tweened.
| | 00:41 | The eyes will need to be
symbolized as well the mouth.
| | 00:44 | So the jaw would be left without being
symbolized because we want to be moving
| | 00:48 | that around quite a bit, and shape tweening
it, and shape tweening the eyebrows as well.
| | 00:53 | So let me show you some things about the
eyes. These are essentially positioned
| | 00:57 | placeholders. They are going to be much
more detailed in this, but for now we
| | 01:00 | need to symbolize them and make
them ready. Same with the mouth.
| | 01:03 | So we just select the right eye. Hit
F8 and symbolize, so that's eye right,
| | 01:11 | Click OK and we need to be conscious of
the pivot being placed where the corner
| | 01:16 | of the eye would be. The eye blink
will originate around this line here, and
| | 01:20 | that's where we need that pivot to be.
| | 01:22 | So I am going to move that 2, 3, 4, 5, 6,
7, 8 by Shift with the Arrow key, and
| | 01:29 | then back again the same amount 1, 2,
3, 4, 5, 6, 7, 8 and we'll do the same
| | 01:33 | thing with this eye.
| | 01:34 | I am going to animate an eye blink
with this eye, and almost certainly copy it,
| | 01:38 | back into this one, but for now
I am just going to make our temporary
| | 01:41 | symbol here, eye left, and do the
same thing, and we can call that in the
| | 01:50 | Library, eye Left TEMP.
| | 01:53 | So we know to delete it when we
get around to fixing this properly.
| | 01:56 | Now the same thing with the mouth.
Select the mouth and the lower lip and we
| | 02:01 | can pivot the mouth in the midpoint or the
corner. We are going to be moving the mouth around.
| | 02:05 | It will be shape tweening
internally and motion tweening externally.
| | 02:08 | So I think a nice pivot point usually is
maybe the corner, but again, if we have
| | 02:12 | to change just later we can do so.
| | 02:18 | 5, 6, 7, 8, 9, 10, 11, 12 clicks over,
and 12 clicks back, and shifting with
| | 02:26 | the Arrow keys again, 1, 2, 3, 4.
1, 2, 3, 4, probably, the quickest way of
| | 02:32 | doing it, rough and ready. So there we go.
| | 02:35 | And the skull is not really going to be
animated a lot but it will be animated.
| | 02:40 | So I am going to leave it
without being symbolized either.
| | 02:42 | I like it to be able to follow the
eyebrows as they move up and down like this
| | 02:46 | and we won't be able to do
that very easily if it's a symbol.
| | 02:49 | The nose is symbolized, pivoted around the top.
| | 02:52 | Now there is one thing I did notice,
and you notice very quickly when you begin
| | 02:55 | to do even a couple of scenes. If you
were to move a nose around or the facial
| | 02:59 | features around to see if the nose is too low.
| | 03:01 | It should be higher than the left eye.
| | 03:03 | So let's just move it up a bit. Better.
| | 03:05 | And we may end up later on, as we
do aggressive animation on the face,
| | 03:09 | increasing this area to make sure
that it properly can cover the eye area.
| | 03:14 | It should have really crossed in front
of it, because really it should be
| | 03:16 | extending all the way up to here.
| | 03:18 | But for now for this phase of the
production process I think that is fine.
| | 03:22 | So we can stand out, and we can also do
a little more housekeeping by I think
| | 03:27 | deleting the reference
drawing finally. Get rid of that.
| | 03:29 | And also all of our head symbols should
go into the head parts folder and then
| | 03:35 | as we work and expand our Library,
they will be probably sorted.
| | 03:38 | So we have our body parts and our head parts.
| | 03:40 | One thing I would do in addition to this,
the mouth is going to be a pretty big comp
| | 03:43 | and I would like to
put that outside as well.
| | 03:46 | So sort that inside the character
folder and put a space before it. We can
| | 03:50 | call it empty for mouth, and I am also
going to make it look like a movie clip,
| | 03:55 | and that way this is like a visual
reminder to the animators that these are comps,
| | 03:59 | and then we can make them play
on the stage as a graphic. So if I want
| | 04:04 | this to play as a graphical
symbol, I just go play as a graphic.
| | 04:07 | We don't have to have them be stuck as
movie clips, but I like the MovieClip icon.
| | 04:11 | It's just like a little reminder to
you when you are going through these
| | 04:13 | libraries, which get enormous, that
these are simple, small, or less important
| | 04:17 | shapes in the hierarchy of
things and these are critical.
| | 04:20 | That's a personal preference. You might
want to change these to graphical symbols.
| | 04:24 | That's not really that important.
| | 04:26 | You have your reference folder, your
head parts folder, your body parts folder,
| | 04:29 | and your body head and mouth symbols.
| | 04:30 | And we are going to use these and
expand upon them and in the next parts we
| | 04:35 | will go forward and add eye blinks and
open up the mouth and start doing some
| | 04:40 | simple animations with those.
| | Collapse this transcript |
| Rigging the mouth| 00:00 | Okay. So it's time to add some
little fine details to our rig.
| | 00:04 | the head is done, the body is done.
| | 00:07 | Let's go into the Head symbol and we
are going to first approach the mouth
| | 00:10 | and convert the mouth from something that's
a static object into something with layers.
| | 00:16 | Upper lip, lower lip, teeth, a tongue,
that we can then have setup so that we
| | 00:21 | can animate them later on.
| | 00:23 | What we can do is just
double-click on the Head symbol.
| | 00:25 | Ctrl+3 to Zoom-in, and let's double-
click on the Mouth symbol, and then we can
| | 00:32 | Zoom-in, Z on the keyboard,
make it nice and big.
| | 00:35 | So what we are going to need are a
series of layers. Right now it's just,
| | 00:38 | like I said earlier, it's a placeholder,
something to show us what it is, the general
| | 00:42 | color of it and the position.
| | 00:44 | We'll need a separate symbol just for
this crease, certainly an upper lip,
| | 00:49 | lower lip, and we'll keep this lower lip
shadow as its own symbol, and obviously
| | 00:55 | he will need teeth, upper teeth, lower
teeth, a tongue, and some kind of shape
| | 00:59 | for the inner mouth.
| | 01:00 | So let's make those layers.
| | 01:02 | About 6 or 7 should do it.
| | 01:04 | I am going to padlock the
reference layer, keep that safe.
| | 01:09 | So let's make the top layer the
crease and then the upper lip.
| | 01:14 | So I call it lip upper.
| | 01:15 | Call it what it is and then where it is.
I found this a good way of naming things.
| | 01:19 | Then lip lower.
| | 01:20 | At the very bottom certainly we
have this thing here. The shadow.
| | 01:25 | It's nice to build a system that
helps you remember where things are.
| | 01:28 | So since this thing is the lowest point
physically, and keep it lowest down here
| | 01:32 | too if we can do it.
| | 01:33 | So that's the lip shadow and it would
be the teeth, which will be inside here.
| | 01:39 | Teeth upper, teeth lower, and beneath
them there will be a tongue layer, and
| | 01:47 | beneath that, there will be the mouth inner.
| | 01:49 | That will be the mouth
shape when he opens his mouth.
| | 01:54 | We'll need a mask layer as well, because
these teeth obviously can't be flapping
| | 01:58 | around outside this area.
| | 01:59 | So we're going to have a mask layer as well.
| | 02:07 | The teeth, the tongue, and the mouth
inner will all be underneath this mask.
| | 02:13 | So that's going to be our basic
structure and as we've done before, these awful
| | 02:17 | random color layers should be replaced
by something a little easier on the eye.
| | 02:24 | So let's make the upper maybe dark green,
and make the lower lip be dark blue,
| | 02:30 | and maybe the teeth upper can
follow the same basic color scheme.
| | 02:34 | That will be the medium green.
The teeth lower will be a medium blue.
| | 02:40 | We can make the tongue layer.
| | 02:42 | Like the tongue will be, maybe a
reddish color, and the mouth inner color
| | 02:47 | maybe a bit darker.
| | 02:48 | If I ever make masks, I like to make them white.
| | 02:53 | Selecting the mask area, usually
something that needs to be done pretty often
| | 02:56 | and it makes it jump out to me
visually. Makes it easier to find.
| | 02:59 | Let's label it and the crease on
the far right, make that green as well.
| | 03:06 | This might seem pointless, but this will
really help when we begin lining the object.
| | 03:11 | The lip shadow.
| | 03:12 | Also make it a reddish color. Okay!
| | 03:15 | Now, we are ready to start.
| | 03:17 | So we have colored and
named the layers properly.
| | 03:20 | So let's make the easy one first. The crease.
| | 03:23 | So using the old familiar Selection tool,
the Line tool, we can begin on this.
| | 03:28 | I am going to outline the mouth
and snap this on. That's good.
| | 03:32 | So let's just begin drawing. Same as before.
| | 03:35 | We want these shapes to be clean, crisp.
| | 03:37 | Don't have crazy amount of points.
| | 03:39 | So we can padlock that, maybe outline it,
and I think this layer will be easier
| | 03:44 | to read if we had it in a light
gray outline color. Here we go.
| | 03:48 | So, the lip upper layer.
| | 03:50 | Now, this is something that we'll be
doing in a later chapter, but this mouth is
| | 03:54 | ultimately going to be tweening quite a bit.
| | 03:57 | I've found my experience to be that if
we make the geometry a particular number
| | 04:04 | of points, in this case three separate
lines constituting the form of the mouth.
| | 04:09 | You will see what I mean when I complete this.
| | 04:11 | It's a very solid, very stable
form for shape tweening this object.
| | 04:15 | So we are going to do that
for the upper and the lower lip.
| | 04:21 | Let's switch off Snap to Grid.
| | 04:22 | That's been causing problems, and
we'll switch off Snap to Objects.
| | 04:28 | Let's position that.
| | 04:34 | Then we can try to pull it in a little
bit to match the original shape a bit
| | 04:38 | better, and again taking care to make
sure that these points are not deleted by
| | 04:42 | Flash, which it likes to do.
| | 04:43 | So that's pretty good.
| | 04:47 | Now, I am going to duplicate this for
the lower level. Padlock the upper.
| | 04:52 | Just pull it down.
| | 05:06 | It might be a bit clearer to
see if we can fill this in.
| | 05:12 | The upper lip, the lower lip, and
the crease and we'll outline them again.
| | 05:19 | So the other thing that's
easy to do, this lip here.
| | 05:23 | Copy that, that's Ctrl+C, and then
Ctrl+Shift+V to paste it in place.
| | 05:30 | So it's now out here on its own layer.
| | 05:33 | Check to make sure it's a
clean shape. 2 points, 2 lines.
| | 05:36 | That's great! Padlock that.
| | 05:40 | So the next thing that we need to add
are things that really we don't have
| | 05:43 | reference for and those are the
teeth layers, and the tongue layer, and
| | 05:48 | the inner mouth shape.
| | 05:50 | So we can pretty much have a good
idea about where the teeth should go.
| | 05:54 | Use the Rectangle tool to create an
outline of the teeth layer and these
| | 06:00 | will be white of course.
| | 06:01 | I want to keep the shape of
the teeth fairly simple for now.
| | 06:07 | You can imagine if we zoom out, imagine
we are seeing through the character,
| | 06:11 | we are seeing his teeth as they would more
or less appear. He'd have gums up here.
| | 06:14 | We could even add them in if we were
going to do extreme dialogue that was going
| | 06:18 | to open the mouth very wide.
| | 06:21 | But for now, I am just going
to keep this shape very basic.
| | 06:23 | I'd go to Outline, do the same addition
for the lower teeth, and maybe have them
| | 06:35 | overlap a bit, as in reality. Your lower
teeth are nested inside your upper teeth.
| | 06:44 | Double-click on that line
and get rid of it. Okay.
| | 06:50 | So for now, that's fine.
| | 06:52 | Now, we can hide those teeth. They're
getting in the way of seeing the rest.
| | 06:56 | We also need a tongue layer.
| | 06:57 | Number of ways we can do that.
| | 06:59 | We can continue to use the Rectangle
tool. Give it a more tongue like color.
| | 07:06 | If you have a tablet or Cintiq, you
might find that easier to sketch this in
| | 07:10 | and use that sketch as a reference.
| | 07:12 | You might get a more organic shape,
but it's a pretty basic form of the tongue.
| | 07:16 | So I am going to follow it through
so that we can see right to the bottom.
| | 07:24 | Essentially imagine if you're going to
open this mouth to an extreme position,
| | 07:28 | which we will be doing
later on, something down to here.
| | 07:30 | So that would be nice if the tongue
doesn't get cut off halfway through.
| | 07:44 | You might even want to add a
little crease in the tongue here.
| | 07:47 | It'll help it to look more natural.
| | 07:49 | See from that maybe a little bit of our
highlight layer in here, and select that
| | 07:54 | color and brighten it up a little bit.
| | 07:55 | Now, if you're going to do work in here,
brightening the tones, it's nice to
| | 07:59 | have the H selected.
| | 08:00 | It's got finer control over the
brightness of the hue of the color you are using.
| | 08:05 | So that's the tongue level and then the mouth
inner, which will be the same as the mask layer.
| | 08:10 | Actually, it will be pretty much the same
as the outer shapes of these lines here.
| | 08:14 | The top of the green,
and the bottom of the blue.
| | 08:17 | So, you hold down the Shift
key and we select all of them,
| | 08:20 | Ctrl+C, Copy, also accessible here.
| | 08:26 | Then paste in place.
| | 08:27 | Ctrl+Shift+V. You can see already
the complete silhouette of the mouth.
| | 08:34 | It might be necessary that we're on as
we color it slightly differently, if it
| | 08:38 | bleeds over the edge here,
to pull it in a little bit.
| | 08:40 | But for now, we're more than happy with this.
| | 08:43 | So let's color that.
| | 08:45 | I am going to give it a very dark,
one of these colors maybe, and then we
| | 08:54 | can duplicate this.
| | 08:55 | Holding down the Alt+Option key,
drag it up to the mask.
| | 09:04 | And there we go.
| | 09:05 | Of course, you notice the teeth and the
tongue disappear, but they're all there.
| | 09:08 | And the beauty of this process is that
if later on we want to move the mouth
| | 09:13 | around, pull it out of position, and
create different mouth shapes, our inner
| | 09:19 | teeth, the tongue are already in place.
| | 09:22 | So we won't be opening
this to see an empty space.
| | 09:35 | So it becomes a question of working
with the mask, so that we can see the
| | 09:43 | various mouth shapes.
| | 09:44 | It's a very simple demonstration.
| | 09:45 | I am going to undo all this.
But the essential anatomy of the mouth is not
| | 09:52 | completely established.
| | 09:54 | In a subsequent section of the course,
we're going to add six completely
| | 09:58 | separate mouth shapes using these
layers and we'll be able to use them to
| | 10:03 | create our dialogue and various
expressions and acting for the character.
| | 10:07 | So, the next thing to do before
we proceed is get rid of the lines.
| | 10:12 | So, to do that, the quickest way is zoom out,
select the Eraser tool, and erase lines.
| | 10:17 | Make sure that's selected. Move over that.
| | 10:21 | Then if you access the padlock to
activate the mask, it looks exactly the same.
| | 10:26 | We've started that with this. We still have it.
| | 10:28 | The difference is before,
| | 10:29 | we were looking at one layer, which is
really good for nothing, and now we have
| | 10:34 | eight or nine layers with which we can
begin to work and animate and to create
| | 10:38 | different expressions and
states of being for the character.
| | 10:41 | So now, we'll move on, do our first
actual animation, which will be adding
| | 10:45 | eyelids and then an eye blink for the eyes.
| | Collapse this transcript |
| Rigging the eye| 00:00 | Okay, so now it's time to add some
structure to the eyes and takes the very
| | 00:04 | simple symbols that we currently have
as placeholders and add some eyelids
| | 00:08 | and all the elements that will enable us to
make the character blink in the next chapter.
| | 00:12 | So, let's go on and do that.
| | 00:14 | So we can either double click on the
stage or we can double click on the head
| | 00:18 | symbol in the library to
tunnel in here and have a look at it.
| | 00:21 | So, ideally if we get this right
we'll be able to use the same one for the
| | 00:24 | right as for the left.
| | 00:25 | So let's go right into the eye and be
sure you have the entire head area around it
| | 00:30 | so you can see the work
that you are doing in place.
| | 00:32 | So drop in some layers for the eyelid,
the upper eyelid and the eyelashes.
| | 00:38 | We are going to want separate layers for
the pupil and the whites of the eye and
| | 00:42 | maybe some lower lids as well.
| | 00:44 | So first of all let's just padlock our
lower layer and let's name these so we
| | 00:49 | know what we are doing.
| | 00:49 | So, this will be the upper lashes, the
top layer, and then beneath them there
| | 00:53 | will be the lid, which will help to
cover the whites of the eyes when the blinks happen,
| | 00:58 | and the lashes lower.
| | 01:00 | You probably won't see
them in the normal open state.
| | 01:02 | They won't animate them now but
they'll appear later on when the character blinks.
| | 01:05 | And then we'll have the lid lower
and beneath that the mask for the pupil
| | 01:11 | and then the pupil itself
and then the white of the area.
| | 01:16 | You could have more details like creases
and things but this is a pretty good amount.
| | 01:23 | Using the LayerColor, I'll
make the upper levels green.
| | 01:27 | Ctrl+Clicking to select more than one layer.
| | 01:31 | LayerColor for the lower ones to make
them blue and the mask I like to--
| | 01:36 | I will just keep the masks white or some other
very eye-catching color. It could be red or white.
| | 01:42 | The pupil we make them black and the
white of the eye I'll just make it normal
| | 01:48 | fleshy color like red and we
make the layer a little bit gray.
| | 01:53 | First, of all we'll make the white of
the eye, we'll just copy this and make
| | 01:59 | sure it's all white, get rid of the
pupil, and then I'll copy the pupil from this
| | 02:06 | and paste that in here.
| | 02:07 | Now, we can can get rid of the
preference layer. It's done its job.
| | 02:12 | So we have the while of the eye, the pupil.
| | 02:13 | Now, the pupil itself, it's very banal
looking like just a big black bulb.
| | 02:17 | Let's make it bit more life like.
| | 02:19 | So to do that I'll like to make it a
symbol in its own light first, so we call
| | 02:22 | that eye pupil. Keep it
centered properly like this.
| | 02:27 | Now, we can double click on that
because I want to make a couple of
| | 02:30 | different layers in here.
| | 02:31 | So, I am holding down the
Alt key to copy that layer.
| | 02:36 | Let's go into the lower one and
make a blue, some bright blue color.
| | 02:41 | Then we'll take the upper one, the
black, using the Free Transform tool and
| | 02:45 | holding down the Shift key,
for the black of the eye.
| | 02:51 | Let's hold down the Alt key to copy
again and we'll make this one white again
| | 03:00 | using the Free Transform tool it's
going a bit tighter, getting one eye line.
| | 03:07 | You can do all that in one layer but the
nice thing is you can go in and you can
| | 03:15 | play around with these shapes if you
want to make alterations, I love that.
| | 03:22 | So, the next step would be the upper
eyelashes and that's going to be a very
| | 03:26 | simple shape and we'll start the
up position something like this.
| | 03:30 | Let's make sure snap a switched off now
and then we'll put it back on I want to
| | 03:38 | join these corners
properly and then back off again.
| | 03:42 | There is lot of toggling back and
forth between snap on and snap off.
| | 03:49 | Check to make sure your lines are still intact.
| | 03:52 | Flash likes to combine lines.
| | 03:53 | We need to not let it do that. So there we go.
| | 04:00 | So let's color that and let's give that
a nice color more like this color like
| | 04:05 | the dark color of the ear, drag that with
the eyedropper, let's go in here. There we go.
| | 04:12 | I am going to get rid of that black
line and I am going to be able to see this
| | 04:17 | properly and then beneath this eyelid
would be the eyelash layer that will be
| | 04:23 | the darkest element.
| | 04:25 | Let's go into this Preview mode and go
Full and now we can see the eye in its
| | 04:29 | proper color relative to the
skin and the face around it.
| | 04:33 | So the other color I would like for
the lid upr will be the same color as
| | 04:36 | the skin of the face.
| | 04:37 | So, let's go into that and select that.
| | 04:40 | Let's go back in here and we will
assign that color to this layer.
| | 04:47 | So what that means is later on and we
want to make the character blink or have a
| | 04:52 | different shaped eye.
| | 04:53 | We simply pull the lid layer
down to match the lash layer.
| | 05:04 | We now have complete control
over the extent of the eye.
[00:05:09.90 How opened it is?
How closed it is?
| | 05:12 | Let me do all that and Ctrl+Z
. So that's the upper eyelid.
| | 05:18 | We'll repeat this process for the lower eyelid
in the later class but for now this is ideal.
| | 05:23 | So the next thing I want to do before
we go any further is to make sure that we
| | 05:28 | can copy this to replace the
current placeholder for the left eye.
| | 05:31 | So, that's this layer.
| | 05:33 | So let's make a clean layer on top I
am going to copy that, paste that on to
| | 05:39 | here, flip it horizontally
and let's go in to outline.
| | 05:48 | That's better so we can match this up.
| | 05:49 | Now hit Free Transform or Q, pretty good.
| | 05:51 | Now, the one thing I am noticing is
that the pupil is a little squished.
| | 06:05 | So, first thing let's unsquish it.
| | 06:09 | Now, any change that we make in
this symbol will be replicated here and
| | 06:12 | that's not going to work.
| | 06:13 | So, first thing we have to do is
duplicate this symbol, give it it's own identity.
| | 06:16 | So, let's duplicate that symbol and we
are going to replace the R copy if not
| | 06:20 | the right eye any more.
| | 06:21 | It's going to be its own
thing it's eye left now.
| | 06:23 | Let's go into the left eye and look
at the highlight and make sure that the
| | 06:28 | highlights are both pointing the same direction.
| | 06:30 | So, this should be Flipped
Horizontally and I will stretch it out a bit.
| | 06:36 | That will lose that squished
strange field that is called right now.
| | 06:40 | Let's position that
until it feels little closer.
| | 06:43 | It's more natural and then
get rid of the reference layer.
| | 06:51 | Put the new eye in this correct layer
now and get rid of the temporary layer.
| | 06:56 | Now, there are some small additions you
need to make, the Mask layer needs to be
| | 07:02 | activated and that will identical to the white.
| | 07:04 | So copy that, paste in
place and activate the Mask.
| | 07:09 | What this means is you will be able to
of course move the pupil outside of its
| | 07:13 | area without having a bleed into the skin.
| | 07:16 | So we are all set up ready for
that and do the same thing here.
| | 07:20 | Copy the eye, Ctrl+Shift+V,
paste it in place, activate the Mask.
| | 07:30 | Let's look at it again and that will
move that pupil over just a little bit and
| | 07:41 | may be stretch it just slightly.
| | 07:43 | I think we've left some lines in there
so let's erase them, Erase Lines and make
| | 07:50 | sure everything is active.
| | 07:53 | Paint the whole area and
repeat of course with the other eye.
| | 08:09 | We are ready to proceed.
| | 08:10 | So that's the character done.
| | 08:11 | He is all set, he is ready to go, and
in the next chapter we'll proceed to
| | 08:16 | animate a full head turn and that
will incorporate mouth movements, head
| | 08:19 | movements, eye blinks.
| | 08:21 | The eyebrows will move.
| | 08:22 | Basically, the entire body
will move standing in place.
| | 08:25 | But he will little pivot and turn left,
turn right and we'll begin the same thing.
| | 08:29 | So, I'll hope you like that and
hope to see you in the next chapter.
| | Collapse this transcript |
|
|
3. Creating CompsTween types: Shape vs. motion | 00:00 | So as you may know, there are two
ways of creating animation in Flash:
| | 00:04 | shape tweening and motion tweening.
| | 00:06 | And in this chapter, we are going to
cover and compare both of these systems and
| | 00:10 | see some of the strengths and
the weaknesses of each of those.
| | 00:13 | So, if you've opened from a previous
Flash file, you may be in this layout with
| | 00:16 | a tall timeline, but right now,
we are going to try some animation.
| | 00:20 | So let's switch our workspace back to
the more animation friendly timeline that
| | 00:25 | I have set up, and here we go.
| | 00:29 | So let's create one layer for our tween
animation and we will make one for the shape.
| | 00:34 | So we will call the top one motion tween,
and the bottom one shape for shape tween.
| | 00:41 | So let's make an object
that we can motion tween.
| | 00:45 | Now to do that, if you create, for
example, a box or a column on the stage,
| | 00:50 | this won't motion tween.
| | 00:51 | There has to be a symbol first.
| | 00:53 | So let's select all that.
| | 00:54 | Hit F8 and let's call it box.
| | 00:59 | It's pivoted around the middle.
| | 01:01 | If this was like an upper arm or
an upper leg, we'd pivot it here.
| | 01:04 | So let's just make a simple motion tween.
| | 01:08 | So we can hit F5 to extend our
timeline and maybe hit F6 here.
| | 01:13 | That will make a second keyframe,
and now we want this to motion tween.
| | 01:16 | So we'll go Insert > Classic Tween.
| | 01:19 | We are not going to use the new Motion Tween.
| | 01:22 | We are staying away from that.
| | 01:23 | This course will work entirely with
classic tweening because we have a finer
| | 01:27 | level of control over this process.
| | 01:30 | Now, we take the second
keyframe, and just move it around.
| | 01:34 | This is, obviously, the most simple kind.
| | 01:36 | Just translating or moving
the object from left to right.
| | 01:39 | We can rotate the object and that
will also be created very easily.
| | 01:47 | We can squash the object.
| | 01:49 | Let's make it closer so we can see
the squashing a little more easily.
| | 01:57 | So as you can see, there is a lot we
can do with this, but the big disadvantage
| | 02:01 | is it's still parallel lines.
| | 02:04 | We can't take this and distort it wildly.
| | 02:07 | We can't turn the square into a sphere.
| | 02:09 | So let's do a comparison with shape tweening.
| | 02:11 | I am going to create a similar object, just
a box shape, and let's make a second keyframe.
| | 02:17 | I am hitting F5 out here but this
time I am not going to make a box.
| | 02:20 | I am going to make a
completely different symbol.
| | 02:21 | Let's do the Oval tool and just make a sphere.
| | 02:26 | Then select our timeline. Insert > Shape Tween.
| | 02:32 | Now we can transform something as
radical as a square into a sphere and indeed
| | 02:36 | we can do far more complex objects than this.
| | 02:38 | This is something that you really have
to play with yourself, but I have shape
| | 02:42 | tweens, astonishingly complicated objects.
| | 02:46 | Now, the problem that you'll see
immediately is that the corner,
| | 02:50 | this point if you follow it, it's
moving in this direction, not really the
| | 02:54 | way you would want.
| | 02:55 | Even if you were to center at the
sphere, there's a pretty good chance of it,
| | 02:59 | and it really won't do exactly what we need.
| | 03:01 | So even, for example, this point here
is moving to a nine o'clock position.
| | 03:07 | So let's see if we can play with that.
| | 03:09 | So you go into Modify > Shape > Add Shape Hint.
| | 03:17 | This gives us the letter, A, and the
more of these hints you make, the more they
| | 03:20 | are lettered sequentially.
| | 03:21 | A, B, C, D. So let's drag the A to
the corner that we want to correct.
| | 03:25 | Then we move to our second keyframe
and drag the A to the point that we want
| | 03:30 | that point to move to.
| | 03:32 | We have a little bit of unusual behavior.
| | 03:36 | So this is what drives
people crazy about shape tweening.
| | 03:39 | Things can happen that are
unpredictable and erratic.
| | 03:42 | This is the point where most people
simply give up and go, "Oh, this is no good."
| | 03:46 | So let's stick with it.
| | 03:47 | I am going to move the A to different
point, and now you see the problem is solved.
| | 03:51 | So this is why you should stick with
shape tweening and not give up on it and
| | 03:56 | you have to have a little bit of
patience, but it's worth it.
| | 03:58 | So let's make a second point.
| | 04:00 | Modify > Shape > Add shape Hint
and this time we will try this corner.
| | 04:08 | As you can see, with just those two,
we can already morph and tween a
| | 04:12 | square into a sphere.
| | 04:15 | So, a quick recap of the pros and cons of
both of these systems with motion tweening.
| | 04:20 | This is one of the issues
you see with shape tweening.
| | 04:22 | The redraw of the A, Bs and Cs
is a little peculiar sometimes.
| | 04:26 | If that happens, you just right-click
on the A or the B and go Hide Hints.
| | 04:31 | So the pros and cons of
motion tweening, it's stable.
| | 04:34 | You can throw this symbol around.
| | 04:36 | It's not going to turn.
It's not going to go nuts.
| | 04:39 | It's always going to do what
you more or less tell it to do.
| | 04:42 | The disadvantage is you can rescale it,
you can squash it, or you can skew it,
| | 04:46 | but you cannot turn a
square into a sphere or a donut.
| | 04:51 | With shape tweening, you have
the advantage of flexibility.
| | 04:54 | You can take a square, turn it into a
circle or any number of objects, depending
| | 04:57 | on how aggressive you are
with your hands in your tweening.
| | 05:00 | The disadvantage of shape tweening,
you have already seen, it can be erratic.
| | 05:04 | It can require a little bit of tender
loving care to make it do what you want it to do.
| | 05:10 | Sometimes I have on rare occasions thought,
| | 05:12 | okay, this is not going to work.
| | 05:14 | This shape is something too complex.
| | 05:16 | But for the kind of things we are going to
do in this course, shape tweening is ideal.
| | 05:20 | So that said, we are going to show you a
system where you can take the strengths
| | 05:24 | of shape tweening, combine them with
the strengths of motion tweening, and nest
| | 05:29 | your shape tweening
inside a motion tween symbol.
| | 05:33 | This will help us to offset some of the
disadvantages of motion tweening and the
| | 05:37 | disadvantages of shape tweening
to create some really cool effects.
| | Collapse this transcript |
| Combining motion and shape tweening | 00:00 | So as we saw in the previous lesson,
we have showed shape tweening and motion
| | 00:04 | tweening, and we do have issues
with each of those two systems.
| | 00:07 | If I had to use just one, I would
probably be pretty limited in what I could do.
| | 00:11 | So luckily, we don't have to pick just one.
| | 00:13 | We can have both work together hand-in-hand.
| | 00:16 | So what I am going to do in this class
is animate a flag, something that tends
| | 00:20 | to drive people crazy
because it can be pretty intensive.
| | 00:23 | If you are doing it by hand, frame-
by-frame, it can be quite tricky.
| | 00:26 | There's a very quick way
we can do this in Flash.
| | 00:27 | So let's make a simple flag.
| | 00:29 | We will pick the Rectangle tool.
| | 00:31 | Draw a flag shape, and let's just make
this into a symbol, call it flag, and a
| | 00:38 | flag should pivot from maybe this point.
| | 00:42 | So just to repeat where we are,
here's our scene, here's our symbol flag.
| | 00:46 | Double-click on the flag symbol.
| | 00:47 | Now we are inside the flag symbol.
| | 00:49 | So this is the level that we are
going to be animating our shape tween as
| | 00:52 | part of the animation.
| | 00:53 | So I am going to duplicate, make a clone.
| | 00:56 | Actually, let's stop that for a second.
| | 00:58 | Let's just go back.
| | 00:59 | First of all, let's create our flag shape.
| | 01:00 | Right now, this isn't much of
a form to be animating with.
| | 01:03 | It's just four points.
| | 01:05 | We do like to keep our forms simple.
| | 01:07 | But there is not much we can do
with four points and four lines.
| | 01:10 | So let's make a little bit more
geometry here that we can play with.
| | 01:13 | So I am holding Alt down and
just pull these points around.
| | 01:17 | Make sure snap is off so we can
make something a bit smoother.
| | 01:21 | There's a pretty easy enough graphical
flag shape, maybe put a few bends in
| | 01:25 | here to make it look like it's
actual fabric and cloth. That's it.
| | 01:30 | So now we will make a second keyframe.
| | 01:32 | Hit F6 and now I am going
to activate shape tweening.
| | 01:37 | Well, nothing should happen because
obviously, both keyframes were the same.
| | 01:41 | This is where we use shape tweening.
| | 01:43 | So let's go Modify > Shape > Add Shape
Hint or Ctrl+Shift+H. First of all,
| | 01:49 | let's tie down the corners.
| | 01:50 | So I am going to make four of these.
| | 01:52 | A, B. I like to try to go clockwise if I can.
| | 01:56 | You don't have to, but
it's nice to have a method.
| | 01:58 | Sometimes it will work, sometimes it
won't. And again scrub to the timeline.
| | 02:04 | Make sure nothing crazy happens.
| | 02:06 | Okay, now we are going
to put in some more hints.
| | 02:09 | Just put one down near to the
beginning, go to the final one and this
| | 02:13 | time, don't put it there.
| | 02:14 | Put that at the other end, and now you
can begin to get an idea of some of the
| | 02:18 | possibilities of this.
| | 02:20 | The advantage of this system as I can
drag this keyframe. I can make this wave
| | 02:24 | motion as graceful or as fast as I like,
depending on how short the timeline is.
| | 02:30 | Let's go back to somewhere around 20,
20 frames and our project speed, we're on
| | 02:36 | 24 frames per second.
| | 02:38 | So that's just one.
| | 02:38 | Let's do another one.
| | 02:39 | Ctrl+Shift+H. Sometimes I'll warn you
that Ctrl+Shift+H shortcut doesn't seem to work,
| | 02:45 | in which case just go back
to Modify > Shape > Add Shape Hint.
| | 02:48 | That's an old bug that's
been around for a long time.
| | 02:51 | Do the same thing on this end.
| | 02:52 | Move the F hint and now we have
a pretty nice range of movement.
| | 02:57 | This will cycle because the first
frame is the same as the start frame.
| | 03:00 | So, let's go back to the main stage
and let's just pull this timeline out.
| | 03:05 | This time we'll make it 60 frames.
| | 03:08 | Be sure that you click on your symbol
and then on your Properties panel you
| | 03:11 | are set to Looping.
| | 03:13 | You don't want that to the play once.
| | 03:14 | This is going to be a looping animation.
| | 03:18 | Now you can see the immediate
problem when we begin to loop it.
| | 03:20 | These points aren't moving.
| | 03:21 | We could try to do that inside the shape tween.
| | 03:24 | But there is a different way of doing it.
| | 03:25 | Let's just pop some keyframes down.
| | 03:28 | We want to have a more cyclical movement now.
| | 03:31 | So let's make them classic tween again.
| | 03:34 | And then using the Free Transform
tool or Q, let's just start pulling
| | 03:38 | this back-and-forth.
| | 03:39 | Now we are using the motion tween attributes.
| | 03:42 | It's not the most natural flag which
you ever seen but I think you get the idea
| | 03:48 | it has do with to some of the things we
can already do in very short spaces of time.
| | 03:52 | So the other thing we could do if we
want to really flesh this out, we'll need
| | 03:56 | to add more keyframes in, maybe change
the shape of the backend so that this
| | 04:00 | begins to do some more fluttering,
maybe add in some secondary keyframes.
| | 04:05 | All those things are more than possible.
| | 04:07 | But that is a pretty neat demonstration
of nesting long form of animation shape
| | 04:12 | tweening inside another, which is motion tween.
| | 04:16 | That's the basic concept that we
are going to be playing with a lot.
| | 04:20 | Once you start enjoying the process of
this, I think it'll save you a lot of
| | 04:23 | time and effort and sweat.
| | 04:25 | So that said, I think we are ready
to move on to apply these techniques and
| | 04:29 | animate an eye blink.
| | Collapse this transcript |
| Animating an eye blink using shape tweening | 00:00 | Okay, so it's time to animate for the
first time on our character by making
| | 00:04 | the character blink.
| | 00:05 | So, let's open the file.
| | 00:08 | It's in your Chapter 3 -
rigged character folder.
| | 00:11 | So, let's open character_rig_
01 and here is our character.
| | 00:16 | Let's a little bit of housekeeping from
the previous area where we modeled the eye.
| | 00:20 | We left the eye symbol outside so
let's just drag that into the head parts
| | 00:24 | folder and get that clean.
| | 00:25 | Anytime, you create a head symbol, put it there.
| | 00:27 | Body parts go in here.
| | 00:28 | So let's double-click on the head symbol and
let's zoom in, get up nice and close to the eye.
| | 00:34 | There is our eye level. So let's double-
click on that, get inside, and you can
| | 00:40 | see it's the same color now
as the head so let's fix that.
| | 00:42 | We'll go Preview Mode > View > Anti-
Alias and that shades out the head layer so
| | 00:47 | I can see better area of where we
are working. Go in tighter again.
| | 00:53 | So, the link to start looking at now is
a frame rate 24 frames per second is the
| | 00:57 | one that my project defaulted to.
| | 00:59 | I think we are better off working at 30
because most computers are playing at 30
| | 01:03 | these days and that 24 is a bit of
throwback to the old days of film.
| | 01:08 | So let's set out to 30 and I am going
to make the eye blink about 9 frames long.
| | 01:13 | Let me select these and hit F5.
| | 01:16 | So, it's going to go from the open
position what you see here to a closed
| | 01:19 | position and back to an open position.
| | 01:22 | So in frame 9 let's hit F6 and make
two more keyframes and let's hit F6 on
| | 01:27 | frame 5 to make two more keyframes and these
will be change. These will be our close position.
| | 01:33 | So, let's just work with the eyelash layer.
| | 01:35 | If you find you have a lot of layers
just use the first one you are going to be
| | 01:38 | working one, whichever is the most important.
| | 01:40 | So, in this case that's the eyelashes upper.
| | 01:43 | Let's pull these down until we
find a position that looks good.
| | 02:05 | And let's see how that tweens.
| | 02:11 | And that's beautiful.
So that's our upper eyelash level.
| | 02:16 | Now, we can smooth out this line as we like.
| | 02:18 | If you think the curve
needs to be changed or lowered.
| | 02:22 | Always watch out with the corners. If
you think that the tweening is starting to
| | 02:26 | go little funky you might have to add some
more shape hints in there. That can happen.
| | 02:30 | So I am going to push this to make
sure that we can really be confident that
| | 02:35 | the shapes are solid.
| | 02:36 | It's still looking good and
let's put that into outline.
| | 02:43 | We'll go into the back into the closed position.
| | 02:45 | Now, we are going to match the skin
layer. That's going to go beneath the lashes.
| | 02:48 | That will cover the white of the eye.
| | 02:50 | Let's put snap on and snap to the
corners and we can put Snap off for this and
| | 02:57 | then pull this down.
| | 03:02 | Now, we can look at the
underlying layer in full mode.
| | 03:06 | This little white sliver that you see here
we can't allow that. So let's cover that up.
| | 03:12 | Now, let's start the shape tweening
backend, Insert Shape Tween and that's it.
| | 03:20 | Again, if you find that the shapes are
going wonky and strange then go Modify >
| | 03:25 | Shape > Add Shape Hints and you'll get
your little A, B and C circles that you can
| | 03:29 | apply to different parts.
| | 03:31 | I will warn you since we are starting
to get into animation with shape hints,
| | 03:35 | always before you begin to apply
shape hints save your project file.
| | 03:40 | It is a little bit unstable and I have
had shape hinting crash the program on me.
| | 03:45 | If you make a form that the programs
doesn't like it can crash very, very
| | 03:48 | quickly and you will not be
able to save your project.
| | 03:51 | I will repeat this pretty much every
time we do shape hinting on this course.
| | 03:55 | It's a small inconvenience and it's
not a big price to pay, but just be very
| | 03:59 | thorough before you embark on any
adding of shape hints. Always save your project.
| | 04:05 | So, now we've got our down positions done,
time to do the lower eyelid and lower eyelash.
| | 04:10 | Of course, we don't want to be
seeing these things on the lower position
| | 04:14 | because they'll make the character look
a little bit sleepy, so they'll pop in
| | 04:17 | on this frame here.
| | 04:19 | So, what we will do is we will pose
them on the first frame but when they are
| | 04:23 | complete, we will move that to the
second frame and it will go to white on the
| | 04:28 | first and the final frame.
| | 04:29 | So, when we trigger the blink
they'll pop in on the second frame.
| | 04:33 | Actually, I am noticing a little thing
here where the skin is appearing beneath
| | 04:37 | the eyelid, so you might want to play with that.
| | 04:40 | Let's see if we can...
| | 04:48 | So, what I am going to do is change
the line that describes the skin layer.
| | 04:56 | Let me move it up a little bit, so we
prevent that overlap from happening.
| | 05:02 | It's such a fast action, I doubt
anybody would have noticed it, but still it's
| | 05:07 | good form to keep your eye
open with things like that.
| | 05:09 | Let's zoom out again, all right.
| | 05:11 | Let's do the little lower eyelash layer.
| | 05:13 | So, I'll do the closed position first.
| | 05:16 | Actually, let's see I'll
do the open position first.
| | 05:18 | That's really a matter of
personal preference I think.
| | 05:22 | So, I am holding down the Alt+Option key
to create our line for the lower level.
| | 05:29 | Snap on to snap those two points;
snap off again for the little sliver shape.
| | 05:40 | Now, let's do the closed
shape. Snap on for this.
| | 05:51 | I am going to drag this up so that's
beneath. If we go into outline mode
| | 05:55 | for this that will help us
position this outline a little better.
| | 06:07 | Let's copy this line here and
now let's activate shape tweening.
| | 06:15 | That's nice! Now, you can see the lower
eyelash layer is working great so let's go in
| | 06:23 | and match the color.
| | 06:24 | So, I am going to grab the color with
the eyedropper from the upper layer, apply
| | 06:28 | that to the lower layer, and now I am
going to finish with the lower eyelid.
| | 06:42 | Let's just copy.
| | 06:43 | I am just selecting these and
Alt+Option+dragging to copy.
| | 06:53 | So, the real change here, we'll copy
the skin color, eyedropper to that, copy
| | 06:59 | that on to the lower eyelid.
| | 07:15 | Now let's look at the closed position.
| | 07:16 | I am going to drag this down again so
that we simply mask out the white of the eye
| | 07:24 | and that's tweening beautifully.
| | 07:29 | There is nothing spinning around or going crazy.
| | 07:32 | Again, if there were shape hints, they are
your friend, but in this case we don't need them.
| | 07:37 | The last step now will be to get rid
of the lines. We will have to zoom out.
| | 07:41 | Hit the Erase tool.
| | 07:42 | Let me select Erase Lines and go to
each keyframe and just be thorough and make
| | 07:49 | sure you are painting out
the entire area. Next key.
| | 07:52 | The nice thing about this is it really makes
sure that you are getting rid of everything.
| | 07:55 | And still check if you made any mistakes.
| | 08:00 | It just might come in
but we are still looking good.
| | 08:02 | Of course, the last step will be to --
don't forget we want to be seeing the lower
| | 08:06 | eyelid on the white open frame.
| | 08:08 | So I am going to hit 7 there to put
in some blanks and then we are good.
| | 08:13 | As you can see it's popping off there nicely.
| | 08:17 | So, now we need to duplicate these
frames on to the left eye,which is you
| | 08:21 | remember from the previous class was a
copy of the right one simple reversed.
| | 08:26 | So, let's copy these frames and let's
paste them in here and right-clicking to
| | 08:35 | do all these operations and
then play the test, very nice.
| | 08:41 | So, on the outer head symbol, the final,
let's give to this empty DoD layer.
| | 08:46 | Now I am going to add a few more blank
frames down here, clicking at 5 and making
| | 08:51 | sure that your eye symbol is set in the
Properties panel to either Loop or Play
| | 08:55 | Once, as both should be
set to Loop or Play Once.
| | 08:59 | Now, we can play the scene.
| | 09:04 | Both eyes look good. They
are not at strange angles.
| | 09:07 | There is one last thing I am going
to do and this is a super fine tune.
| | 09:10 | You might have noticed that it's
very hard to se the closed position.
| | 09:13 | So, it's not a bad idea to
hold out for an extra frame.
| | 09:17 | The quick and dirty way to do it and
actually the easiest way to do it is to
| | 09:20 | select this column of frames and hold
down Alt+Option and drag and then you
| | 09:27 | duplicated it and then I'll add a
F5 to add a few blank frames in here.
| | 09:33 | Now, it will be much easier to
see that. And we are done. Oops!
| | 09:38 | One last change. It has to be
duplicated on to the other eye, same procedure.
| | 09:45 | Hit the F5 to add that frame and there we go.
| | 09:50 | Then one last little thing. Make sure
that the eye are slightly closed aren't
| | 09:53 | looking weird and that's
looking good. So that's it.
| | 09:57 | So, now it's time to move on
and we will work on the mouth.
| | Collapse this transcript |
| Rigging a mouth in Flash for dialogue and expressions| 00:00 | Okay, so time finally to begin fleshing
out the character's mouth and giving him
| | 00:05 | the ability to speak.
| | 00:06 | So let's go into our project file and
open character rigged_02. There we go.
| | 00:13 | So, let's just double-click on the head
symbol in the library. Zoom in on the mouth.
| | 00:20 | Try to frame it so that you can see
the jaw area. That will give us an idea
| | 00:23 | about how, when we begin to create this open
mouth shapes, how far we think we can push this.
| | 00:28 | So, let's double click on the mouth
layer and be sure that you have View > Preview
| | 00:33 | Modes set to Anti-Alias.
| | 00:35 | That way you'll shade out the
background, so that you clearly see where you
| | 00:39 | symbols begin in the background layer.
| | 00:42 | So, what we have is a rigged close mouth and
this is what it looks like in outline mode.
| | 00:48 | It's bit of a handful or mouthful.
| | 00:50 | So, let's go through this again frame by frame.
| | 00:52 | This layer 1, this was our
original working layer, our reference.
| | 00:57 | Let's get rid of that.
We don't need him any more.
| | 01:00 | So, we have our underline lip shadow.
| | 01:02 | On the top layer, the lip upper and
the lip lower, with a crease at the corner,
| | 01:06 | separated by a mask. We have the inner
mouth shape and when the character speaks
| | 01:11 | that's going to move around a lot.
| | 01:13 | We have the character's tongue,
the lower and the upper teeth.
| | 01:16 | These things need a little more detail,
right, before we can actually begin
| | 01:19 | to create the animation.
| | 01:21 | So I am just going to
flesh this out a little bit.
| | 01:23 | Let's go into the teeth upper layer and
let's hit F8 to symbolize this. Call it teeth upper.
| | 01:29 | I am going to correct this pivot
position. So I am going to hold down Shift and
| | 01:38 | use a numeric arrow to move this to
the right. 2, 3, 4, 5, 6, 7, 8, 9, 10, 11,
| | 01:42 | 12, one way and 12 back.
| | 01:49 | What I'm doing is lining up the corner
with this crosshair here and I am going to
| | 01:56 | push it over back one more click and
one more click that way and then the
| | 01:59 | opposite back again.
| | 02:01 | Now, we have symbolized tooth
layer which we can pivot at some point.
| | 02:05 | And we can to squash it and
move it around and motion tweening.
| | 02:08 | Do the same thing with the lower
teeth level, call it teeth lower.
| | 02:17 | You can probably eyeball this if you
are not too worried the position, if it's
| | 02:20 | not totally critical. You can do that too.
| | 02:21 | Just long as you are comfortable
sliding it around and pushing it back again.
| | 02:27 | The other thing you might want to do
since the teeth are already blanking
| | 02:31 | one another out here,
| | 02:32 | we can a shadow line or we can make
the lower level maybe a little bit
| | 02:36 | darker, a slightly different color.
| | 02:39 | It comes down to your
preference and style and maybe even both.
| | 02:42 | So let's have a look at this.
| | 02:44 | We are going to Outline.
| | 02:45 | Let's put Snap on, so we
can close these sharply.
| | 02:51 | Now, we can Snap off again.
| | 03:02 | So let's pick a slightly darker gray for that and
now it will be very easy to see where the teeth overlap.
| | 03:09 | So, I'll just double-click in
that line and Ctrl+X to delete it.
| | 03:13 | Again, you've created these
two symbols in the library.
| | 03:16 | Track them into the head parts
folder, which is looking nice and clean.
| | 03:22 | Same thing with the tongue.
| | 03:24 | So the tongue will be pivoting around
this point here, so let's symbolize that.
| | 03:32 | I am just going to again do the
internal double-click on the tongue.
| | 03:36 | The other thing you could do if you want
help with lining up is go View > Rulers.
| | 03:43 | Maybe create a temporary pair of lines
showing you where the pivot should be.
| | 03:48 | Let's move the tongue over to here, go
back to the outer symbol, and note that
| | 03:54 | they are hidden. Excuse me.
| | 03:57 | We try to reposition the tongue to about here.
| | 03:59 | So, let's we can eyeball that.
| | 04:02 | It sounds a bit right.
| | 04:03 | Let's get rid of those rulers.
| | 04:06 | So, let's look, here we go.
| | 04:09 | So, now these are all symbolized,
they can all be motion tweened, and we are
| | 04:13 | going to keep the mouth inner.
| | 04:15 | That's going to be a shape tweened,
so that's going to stay as a live from.
| | 04:18 | That's not going to be turned
into a symbol in the library.
| | 04:21 | The lower lip shadow, I think we can
keep that without being symbolized
| | 04:25 | because that's going to be changing
shape as the mouth moves up and down
| | 04:27 | quite dramatically.
| | 04:29 | The mask will also be a
duplicate of the mouth inner layer.
| | 04:33 | We'll just copy and paste
from here to here to match.
| | 04:35 | You'll see it more purely as
we begin to create these shapes.
| | 04:37 | A lip lower, that's going to be shape
tweening, so we don't symbolize that.
| | 04:42 | lip upper will shape tween.
| | 04:43 | The crease will probably not change
shape so I am going to create a symbol out
| | 04:47 | of this. Call it mouth crease.
| | 04:49 | I like that center of the crease
to be closer to the crosshair.
| | 04:56 | So, let's move this over and then
move it back again by the same number of
| | 05:02 | clicks and now we are ready.
| | 05:06 | So, how you have padlock the mask
you can see the structure a little better.
| | 05:11 | So, we are going to start playing
around with it quite dramatically.
| | 05:14 | So, let's save this project.
We will call it character_rigged_03.
| | 05:20 | Okay, so we have this and in the next
phase we'll now begin pushing these shapes
| | 05:28 | around to create dialogue.
| | Collapse this transcript |
| Creating a D mouth| 00:00 | Okay, so we have finalized the
mouth symbol so it's now ready to go.
| | 00:05 | So, let's open the previous file.
So it's File > Open and then in your Chapter
| | 00:10 | 3 folder in your Exercise Files you will
find the character_rigged_03. Let's open that.
| | 00:16 | Some more little housekeeping. We've got
the mouth and the tongue symbols that we
| | 00:20 | made in the last lesson.
| | 00:21 | Let's drag them into the head parts
folder and let's double click on the head
| | 00:25 | symbol so we could see this a bit
tighter and try to frame in the on the mouth
| | 00:30 | and double click on that.
| | 00:31 | It once again making sure that View >
Preview Mode is set to Anti-Alias so you
| | 00:35 | can see it contrasted
against the outer head layer.
| | 00:38 | So, the next thing we'll need to do is
make some mouth shapes and before we do that
| | 00:43 | I would like to show you the
standard very simplified form of dialogue that
| | 00:49 | was pioneered in the 1960's really, on
the TV shows of the era, and they made
| | 00:53 | six library mouth shapes.
| | 00:55 | These were the only ones they
made, in the columns A through F.
| | 00:58 | Don't be confused by the letters.
These do not mean the A corresponds to the
| | 01:02 | letter A or B to the letter B. These
are simply graphic representations for
| | 01:06 | these mouth shapes and amazingly
these six simple mouth shapes can create
| | 01:11 | practically any dialogue your character mentions.
| | 01:14 | So, what we'll be doing is
something a little more advanced.
| | 01:17 | We are going to create
these standard mouth shapes.
| | 01:19 | As you can see, if you look carefully,
it should be possible to tween or
| | 01:24 | in-between any of these forms.
| | 01:26 | So, what we are going to do, we've
already got our A mouth, a closed mouth.
| | 01:29 | We are going through the open mouth
called the D mouth and that's going to be
| | 01:33 | great for loud sounds.
| | 01:35 | We are going to make it possible to
tween, motion tween and shape tween, between
| | 01:39 | the A mouth and the D mouth.
| | 01:41 | This will give us not just the option
of B and the C mouth but an infinity,
| | 01:45 | an infinite number of states between
the close and the widest open mouth.
| | 01:50 | In the future of course, we'll move
on to the F or the oo shape down here.
| | 01:54 | I have had friends call this the meow
and if you were to follow ,that's exactly
| | 01:58 | the shape the mouth would make
if it was saying the word meow.
| | 02:02 | With that in place, let's proceed
and we are going to do the D mouth.
| | 02:05 | Let's go back into our Flash. So let's
go into this and start creating the
| | 02:12 | layouts for the other mouth shapes.
| | 02:14 | So, let's drop down F5 to
make some blank places here.
| | 02:18 | So, what I'll like to do is use F7 to
create blank frames and I use these as
| | 02:23 | labels and these are very important.
| | 02:26 | So, I'll insert a label name
here that describes each shape.
| | 02:29 | Obviously, these little black circles
in the timeline are not much good at
| | 02:33 | when you start filling
timelines full of these things.
| | 02:36 | So, what I'll like to do is go to the
Label in the Properties panel and we'll
| | 02:40 | call that 'a'. That will be our A mouth.
And the next one will be 'b' and then the
| | 02:47 | next one will be 'c' and so forth.
| | 02:49 | So d, e, f and then back to a.
| | 02:58 | So that we move in a complete cycle.
| | 03:00 | Let's just get rid of the
crud, things we don't need.
| | 03:02 | I am going to call these the mouth
shapes layer and I'll like to make this one
| | 03:07 | white because it's a little visual
flag for me that there nothing on it.
| | 03:11 | That's not going to be visible
when we start playing with it.
| | 03:15 | So, it's there with a note.
| | 03:16 | So, right, let's keyframes F6 to keyframe the
final frame. That's also going to be the A mouth.
| | 03:23 | And now we are going to work on the D mouth.
| | 03:24 | Let's keyframe this as well
and begin playing with it.
| | 03:27 | The first thing we do is hide all the
layers we thing we don't need it and just
| | 03:31 | only work with the ones we do.
| | 03:32 | So, I am going to work with lip upper
and lip lower and I am going to work in
| | 03:37 | outline because I need to be able
to see where these shapes overlap.
| | 03:41 | Let's move the timeline down.
We need as much room as we can get up here.
| | 03:47 | You want to minimize the amount of
pushing and pulling on these points so let's
| | 03:51 | just select the blue layer.
| | 03:53 | I am using Shift+Numeric key to pull
this down about as far as I think it will go
| | 03:58 | and we want the same thing with
the green. Pull it up a little bit.
| | 04:00 | Bear in mind, these are happy smiley
mouth so we with these mouth shapes we
| | 04:05 | want them to stay happy.
| | 04:06 | Don't get angry in the middle of them.
| | 04:08 | So, now it's a question of pulling the corners.
| | 04:17 | You might find that you'd be better
served if you have Cintiq or a Wacom tablet
| | 04:23 | and you might want to draw your mouth
shapes on to a reference layers perhaps.
| | 04:27 | I find it's a pretty simple enough
process to work directly in Flash.
| | 04:31 | You can use the bracket keys, the
comma key, and the period key to toggle back
| | 04:35 | and forth from one to the other.
| | 04:37 | I'll also like to activate shape
tweening on this. Insert > Shape Tween.
| | 04:43 | As a way of testing and I
constantly move back and forth.
| | 04:46 | We don't want to use shape
hints on this part of the process.
| | 04:49 | I'll like to be able to move these
things around and blend them into one another
| | 04:52 | without relying on shape hints because
you will be applying Hints everywhere.
| | 04:56 | It will drive you crazy.
| | 04:58 | So, it is important that the
shapes are as simple as possible.
| | 05:01 | Now, to achieve this you'll notice
that these lines are very simple.
| | 05:04 | There is 1, 2, 3, 4, 5, 6 points and that's it.
| | 05:08 | You can test that by activating the
Subselection tool and selecting the layer
| | 05:13 | and there they are.
| | 05:18 | So, I keep a close eye on this to make
sure that no rogue points creep in at any
| | 05:21 | point of the process, as you are
pushing and pulling these lines around.
| | 05:29 | So, we are moving this corner here and
if you try to move your own face and seek
| | 05:34 | where the mouth of your goes.
| | 05:36 | When you activate a smile, try to
make sure that this looks natural.
| | 05:41 | You don't want this thing looking too strange.
| | 05:55 | So, I am going to put Snap on so
that I can match these corners properly.
| | 06:00 | Now, if you find that at any point in
these processes that these lines start to
| | 06:03 | jitter or wiggle and that means
you've basically broken the process.
| | 06:07 | At that point, you have to hit Ctrl+Z or
Undo and role yourself back to the last
| | 06:11 | point at which your shape
tweening wasn't going crazy.
| | 06:15 | So, we are still stable here.
This is still looking pretty good.
| | 06:18 | So, once this shape is to your
satisfaction, the points are locked,
| | 06:22 | I would consider saving it.
| | 06:24 | I think we are still pretty safe right now
and then I'll still keep testing like this.
| | 06:29 | There are things that you can do
at any point that are safe enough.
| | 06:31 | Pulling the lines will not jeopardize
the tweening, unless they overlap one another.
| | 06:35 | That should be pretty safe.
| | 06:37 | It's pulling the points, these guys.
| | 06:39 | That's where you begin to stress the
process, but as long as these lines are
| | 06:43 | pulled I think we should be fine.
| | 06:45 | So, if you feel that you need to
round the mouth out a little bit and get a
| | 06:48 | better shape by doing this.
| | 06:50 | I would classify that as a lower risk
part of this procedure. So that's our D
| | 06:55 | mouth, the basic upper lip and the lower lip.
| | 06:58 | That's the hard part believe it or
not and then the next part is moving the
| | 07:03 | symbols. The motion
tweening aspect is pretty safe.
| | 07:05 | There is not much that can go wrong with that.
| | 07:07 | So, we just pull these shapes like the
mouth crease over. Let's activate motion
| | 07:12 | tweening on. Classic tween of course.
| | 07:24 | This is a good time too to look at in
the context against the jaw and make
| | 07:28 | sure that looks okay.
| | 07:29 | It doesn't look strange, that it's more or less
sitting prickly against the rest of the face.
| | 07:34 | We can animate the jaw on the outer
comp on the outer symbol, so don't worry if
| | 07:38 | it goes too low here.
| | 07:41 | So, the next tricky part really is
getting the mouth inner layer to match with
| | 07:46 | the upper lip and the
lower lip. So let's try that.
| | 07:52 | So, the first part that we
have to do, we have got no choice,
| | 07:54 | go to the open mouth and make sure
that the corner lines up and then let's
| | 07:59 | switch Snap off and just pull the other points.
| | 08:04 | Oops! We lost one there.
| | 08:08 | This is the-- you'll hear
me crumble about this a lot.
| | 08:10 | You really want to take care
that your lines don't disappear.
| | 08:13 | I can also mess with the shape tweening.
| | 08:16 | I like to be able to grab each
point by itself individually and again
| | 08:22 | Flash has disappeared it.
| | 08:24 | So I am going to hit Undo and go back a step.
| | 08:28 | There it is. I don't like having that
taken away from me so let's do this.
| | 08:33 | Pull that to here, pull that to there, and like --
like a suspension bridge. Pull these back down.
| | 08:39 | You see there, it is like a little rubber
band that just pulled it and it's still there, okay.
| | 08:49 | So the other thing I want to do
now is activate shape tweening.
| | 08:51 | So I can test this is how it works.
| | 08:52 | Make sure the shapes are tuning properly;
otherwise we could be wasting your time.
| | 08:58 | So, there we go, that's good and let's pull
this down to here, to there and then just match.
| | 09:07 | This area that I am working right now
will just be the inside of the mouth and
| | 09:11 | it will double up as the mask layer. That's
the part that is going to conceal the teeth.
| | 09:15 | Now, if we look at in full
color mode, that's really nice.
| | 09:22 | As I've shown you before, hit
F5 as you want to slow this down.
| | 09:27 | Now, we have our access to an extremely
large potential library of mouth shapes.
| | 09:31 | I am going to undo to pull that
back in to where they should be.
| | 09:37 | So that's our D mouth. The
other things that we can do,
| | 09:40 | of course the mask we set
earlier will be a duplicate of this layer.
| | 09:44 | So, Alt+Option and drag that to the
mask layer and then the other thing that we
| | 09:49 | would do is position the teeth and the
tongue should correspond and travel.
| | 09:53 | So let's have a look at the
upper lip and the lower lip.
| | 09:55 | Go back into our D mouth position.
| | 09:58 | The upper teeth won't travel very
much because I imagine they are locked to the skull.
| | 10:01 | They really shouldn't move it all,
but I find that helps for some reason
| | 10:04 | if they move a little.
| | 10:05 | It's an exaggeration of artistic license.
| | 10:08 | Let's activate the motion tweening here.
| | 10:10 | Classic tween again.
| | 10:11 | Let's have a look at that and there
are things that we can do that aren't
| | 10:15 | strictly anatomic, where we can us the
Free Transform tool to squash and stretch
| | 10:20 | the teeth maybe or rotate them slightly.
| | 10:22 | We can play with this at anytime. We
are not imprisoned to using them in any
| | 10:26 | given shape but it's nice to have a basic range
of motion on them at the moment. So, there we go.
| | 10:33 | We can also extend these symbols if
you want to add gum lines into the other
| | 10:37 | elements to mouth later on, very doable.
| | 10:39 | Now the tongue. The tongue should
obviously be tracking with the rest of the
| | 10:44 | teeth and maybe rotate it a little bit.
| | 10:47 | I wouldn't go crazy with it.
| | 10:48 | It just has to move enough at
the moment. Classic tween there.
| | 10:52 | Now, if we put padlock on and let's
make sure everything is in full mode.
| | 10:58 | Last thing is the lower lip.
| | 11:04 | I mentioned earlier I would like to
be able to do this as I shape tween, so
| | 11:07 | let's see if it will do that.
| | 11:10 | If it didn't, you could always make
this a symbol and motion tween it, if you
| | 11:13 | don't have the time to bother with it.
| | 11:15 | It's not doing anything drastic now.
| | 11:16 | It looks fine.
| | 11:19 | You can move it on until you think it's the right form.
| | 11:22 | The beauty of shape
tweening is we can change the line.
| | 11:24 | Again, be careful and make
sure that it doesn't go too crazy.
| | 11:27 | It's not doing anything
weird and becoming unstable.
| | 11:32 | As I am looking at this, I notice that the
corner of the upper teeth is catching the eye.
| | 11:35 | It should probably be moving a bit more.
So let's do that and you probably have
| | 11:42 | to end up working in outline for much of this.
| | 11:43 | So, I am going to move the upper teeth
back just a little bit and do the same
| | 11:47 | thing on the upper level.
| | 11:56 | You might want to move the upper teeth
up a little bit, using the arrow keys.
| | 11:59 | There you can see something
actually is strictly unnatural but really
| | 12:05 | helps the mouth feel a little more plastic.
| | 12:07 | So, that's a pretty average open mouth position.
| | 12:09 | We could go way further with that, but
for what we are doing this is more than enough.
| | 12:13 | So we have our closed mouth, our open
mouth, and in the next class I'll show you
| | 12:17 | how to make the oo mouth shape and the
we'll proceed to create the B, the C and the
| | 12:22 | E mouths and those are fairly easy to
do once we have established stable A, D, F mouths.
| | Collapse this transcript |
| Creating an F mouth| 00:00 | Okay so we've done the D mouth. Now we're
going to move on and do the F mouth and
| | 00:04 | the F mouth is the ooh shaped part of the mouth.
| | 00:08 | So let's go into the Library palette, double
-click on the head, double-click on the
| | 00:11 | mouth and let's go in very
close and have a look it this.
| | 00:15 | So again a quick reminder of the shape
that we are going to be creating is the F
| | 00:18 | mouth or the ooh sound, the
phonetic sound of this six mouth shapes.
| | 00:22 | So I'm going to go back into Flash and we
already have our A to D back to A cycle working.
| | 00:29 | The F mouth is going to be a lot
closer actually to the closed mouth. just with
| | 00:33 | the little pursed shape here.
| | 00:35 | So let's just grab our vertical stack
of A mouth, hold down the Alt+Option key and
| | 00:40 | drag to the F position and let's go in
a bit closer and now this point we'll
| | 00:46 | just hide the layers we don't need.
| | 00:48 | Now I'm going to select the upper and
the lower, hide the crease, and use the Free
| | 00:53 | Transform tool just to push this in a
little bit, and actually what I'm going to
| | 00:57 | do now is I have accrued very quick
sketch using the mouse. I don't have a tablet
| | 01:02 | or anything. What I'm going to do is
just do a quick positional shape and this
| | 01:09 | is where I want the ooh
form to be, something like this.
| | 01:11 | I should do it so if you just look it
at that by itself. So let's put out that in the
| | 01:17 | outline, put it beneath here and let's
put the lip upper back on and just look
| | 01:23 | at that in outline mode and let's go
ahead and make that shape. And you've heard
| | 01:32 | me complain before about the
importance of preventing Flash from joining
| | 01:36 | these lines together into one continuous S-
curve. I like having easy access to these points.
| | 01:42 | So without having to use the Sub-
selection tool. It's nicer if I can access them
| | 01:45 | with the simple Selection tool.
| | 01:54 | So the other thing to be very watchful
here, as we work, don't forget we're shape
| | 01:59 | tweening as we worked.
| | 02:00 | So constantly go back-and-forth to make
sure you haven't done anything to break
| | 02:04 | the shape tween and if you find that
thing you are spinning around or clearly
| | 02:10 | broken, we don't want to
use shape hints for this.
| | 02:13 | We want this to be hint free and it
is quite doable. As long as your shapes
| | 02:17 | are simple and as long as your
structures have something like six points of
| | 02:21 | geometry on the upper and
lower lip, you will be safe enough.
| | 02:23 | There are various different kinds of
mouth shapes, different problems, but you
| | 02:28 | will be able to do it if you're careful.
| | 02:30 | So same thing with the lower lip. As
you can see its behaving itself, so let's
| | 02:36 | pull this down up, snap to there, and
do the same thing with the lower lip.
| | 02:42 | Usually pulls into an ugly shape
before you can get into a pretty one.
| | 02:47 | I'll switch Snap off now.
| | 02:49 | Snap is important for getting the corners
lined up but after that it can be as much trouble.
| | 02:55 | So again we're trying to create some
shape approaching that. Again use back and
| | 03:01 | forward, using the comma key and the
period key to scrub on your timeline.
| | 03:07 | Corners are locked and there we go.
| | 03:15 | So now the little things that we can
do such as smoothing off some of these lines.
| | 03:16 | This is obviously a very harsh join here.
| | 03:19 | It looks a little bit mechanical.
| | 03:21 | So there are things that we can do
once we get the points happy and that is
| | 03:26 | things like round of this corners a little bit.
| | 03:30 | It's a lot better and padlock that when
you get it. Do the same thing with the bottom line.
| | 03:43 | And don't forget to go back and forth
in the timeline. Let's go out a little bit.
| | 03:47 | There we go and you might see it clearer
if you go into black. And that gives us
| | 03:54 | our main lips anyway, the main four
poses, the A mouth, the wide-open D mouth,
| | 03:58 | and ooh shape, so let's padlock that.
| | 04:02 | We get rid of that rough sketch. We
don't need that. We get rid of this purple
| | 04:06 | layer the outline sketch, pull the crease
into match, you might want to rotate it
| | 04:12 | a little bit using Free Transform.
Padlock that when you're happy.
| | 04:15 | Keep padlocking as you go so
you don't break anything.
| | 04:18 | Now the inner mouth layer,
that's the other tricky part.
| | 04:21 | That's got to line up and basically
cover this exact same area as the green and
| | 04:25 | blue for the upper lip and the lower lip.
| | 04:28 | So we can make this a little bit faster
going to Free Transform tool, you know
| | 04:32 | pull it reasonably close. You see
the other points that you have to pull
| | 04:36 | around the screen. Go back into the
Snap, match your corners, nice, and then do
| | 04:42 | the same thing as before. Just
know pull your basic six pointed?
| | 04:45 | If it breaks you can always draw completely new one.
I just find it's a little quicker to work like this.
| | 04:57 | Okay, and then don't forget back-and-
forth. Yeah, that's mapping very nicely.
| | 05:05 | So zoom out and then as I said before,
this shape here, this ooh shape for the
| | 05:11 | mouth inner, that's call be the same as
the one up here. This layer and the mask
| | 05:15 | layer will be identical.
| | 05:17 | So we'll keep making sure, as we
progress, these are kept the same. So that's that
| | 05:21 | and then the last thing we need
to do is to set all the secondary,
| | 05:23 | thankfully easier, layers.
| | 05:25 | So let's look at the upper lip and the
lower lip in outline and just position the
| | 05:30 | teeth to where we think would be good.
| | 05:32 | It's a little bit of the movement so
that there's a different mouth in between
| | 05:36 | one another. You'll be able to see some
motion and we can refine this later on,
| | 05:41 | but we have got it reasonably close for now.
| | 05:43 | Let's put those teeth into
outline so I can see the tongue move.
| | 05:49 | We bring it forward on the ooh. Think of
the ooh as being pursed. If you can make the
| | 05:52 | ooh sound yourself, your mouth pushes
forward a little. So should your animation.
| | 05:59 | And then the last thing would be the lip shadow.
| | 06:07 | This layer here. Right now
the A mouth is not moving.
| | 06:14 | So we wanted to sell that
forward movement of the lip .
| | 06:19 | And if it will let us,
we will shape tween that as well.
| | 06:28 | I think that works nicely.
| | 06:30 | So let's zoom out. Take a
long shot again. Excellent.
| | 06:35 | So that's the main four
keys. That's the hard part done.
| | 06:38 | The A mouth to close mouth, the D mouth
is wide open, the F for the ooh sounds,
| | 06:41 | and back to the closed mouth.
| | 06:44 | In the next part we'll just finish
off with easier stuff, just setting the
| | 06:47 | in-betweens for this, for the B, C and E
mouths, and I'll show you how we can have
| | 06:52 | some fun with this shapes and play
them in any number different sequences.
| | 06:56 | So we're ready to move on.
| | Collapse this transcript |
| Getting the polished look| 00:00 | Okay, so let's finish the mouth,
some last little finishing touches.
| | 00:03 | So that's in charcter_rig_
05 in your Projects folder.
| | 00:07 | Let's double-click on head, double-click on
mouth, and let's have a look at how we finish it.
| | 00:12 | And if we've done everything else
stably and all these shapes are clean and if
| | 00:17 | Flash likes this, then we can create the
in-between frames by simply hitting F6.
| | 00:23 | So I like to, instead of picking things
just here, I would like to be a little
| | 00:27 | more subtle with it.
| | 00:28 | So for example, between the D mouth and
the F mouth, we have a series of shapes
| | 00:31 | that are increasingly pursed.
| | 00:33 | I like to take this one as the key for
the E mouth just to give us a little more
| | 00:37 | texture in our shapes.
| | 00:38 | So I select these frames and hit F6, and
then pull them until they are under the
| | 00:43 | E, and that becomes our E shape.
| | 00:44 | You don't have to do this.
| | 00:45 | You can go right in the middle if you prefer.
| | 00:47 | Now the critical thing to do is to test
these shapes, and you know that they're
| | 00:51 | good, that they are stable, if the rest
of the animation in betweens properly.
| | 00:55 | If it doesn't, it means something
somewhere is annoying Flash, and you are not
| | 00:59 | going to have much luck.
| | 01:00 | So if that does happen to you,
I would advise trying again. You've made a
| | 01:05 | mistake on one of the shapes,
most likely the F or the D mouth.
| | 01:09 | There could be an extra point.
| | 01:11 | You may have to reposition some things slightly.
| | 01:14 | In extreme cases, I've just redone them.
| | 01:15 | Now, the reason why it's worth this
kind of aggravation is because once you get
| | 01:20 | the six shapes correct and stable and
locked, you can do anything with them.
| | 01:24 | You can play them on any number of sequences.
| | 01:25 | So let's just continue this process and
what I want to do is get the C mouth,
| | 01:30 | I would like to be halfway open between
the A and the D. So I am just going to
| | 01:34 | pick something in here,
and then just pull them over.
| | 01:36 | I like the B mouth to
really be a little bit closed.
| | 01:40 | So it's more like, imagine, you
are smiling with your teeth clenched.
| | 01:44 | It would look something more like that
and that will be great for little E sounds.
| | 01:47 | So, the C, so the E element on
that word. So let's do that.
| | 01:53 | We can pick any of these.
| | 01:54 | In fact, if you want, you can finer things,
| | 01:56 | you can use just go in and you can pick
a lot of very fine gradations for your B
| | 02:00 | mouth if you want to even be sweeter on it.
| | 02:03 | So let's pick this one, F6 for that, pull
that in, and then just delete these tweens.
| | 02:10 | Let's play that slowly and
make sure everything is stable.
| | 02:15 | There's no lines flickering.
| | 02:16 | There's no colors appearing where
they shouldn't appear. This looks great.
| | 02:20 | You could add more details if you want.
| | 02:21 | You could add a black
for the back of the throat.
| | 02:24 | You could add lines in the teeth.
| | 02:25 | But for now, we have a limited amount
of time for this but I am just giving an
| | 02:28 | idea about what's possible with this method.
| | 02:30 | We could play it a couple of
times, looks great. So that's it.
| | 02:34 | We've done it.
| | 02:34 | There are no shape hints.
| | 02:36 | This is all working smoothly.
| | 02:38 | I think one reason why this is
so stable is because maybe I am being
| | 02:41 | suspicious or superstitious, I don't
know, but Flash seems to like certain
| | 02:46 | amounts of numbers more than others.
| | 02:47 | I've tried of doing these shapes with eight
points and more, and it just doesn't like them.
| | 02:51 | Six is the smallest number of
points I think we can get away with.
| | 02:54 | Eight becomes a little less stable and you
end up having to use, or I have anyway,
| | 02:58 | having to use shape hints.
| | 02:59 | You do not want to use shape hints for this,
unless you're doing a custom mouth shape.
| | 03:03 | So this is six points for the lower
shape, six points for the upper shape, and
| | 03:09 | if you look at the inner mouth, I think
that is also six points. Click on that.
| | 03:13 | Yup. 1, 2, 3, 4, 5, 6. It's hexagon.
| | 03:18 | So Flash like hexagons.
| | 03:20 | They seem to be more stable
shape tweening objects.
| | 03:23 | So let me show you the cool stuff about this.
| | 03:25 | Let's say I was going to do a dialogue
scene or a scene with some mouth movements.
| | 03:29 | Well, first thing I would do,
I wouldn't mess with this symbol because this is
| | 03:33 | not my final symbol.
| | 03:36 | I'll make a new one. Call it mouth test.
| | 03:42 | Always keep the original. Don't mess with that.
| | 03:45 | So now, we can basically select these.
Hold down the Alt/Option key. Copy them.
| | 03:51 | Actually, let's switch on.
| | 03:52 | I am going to switch on tweening for everything.
| | 03:56 | So let's say you want to go from the B
mouth, and notice I am copying the labels
| | 04:00 | as well so I can see
which mouth I'm working in.
| | 04:08 | I am just grabbing these at random and
pulling them in and dropping them anywhere.
| | 04:12 | This is also a part of the testing process.
| | 04:15 | It's a great way of making sure
that everything is working nicely.
| | 04:18 | No two combinations are going
to take a dislike to one another.
| | 04:21 | Lo and behold, each other
shape blends into each other shape.
| | 04:26 | If you wanted to, you could even make
another set of A-F mouth shapes that are angry.
| | 04:30 | Just take the corner of the mouth,
pull it down, press till you have a little
| | 04:33 | angry A-F library which can
also blend into any of these.
| | 04:37 | If you feel constricted by only having
these six shapes, well, consider the fact
| | 04:41 | these six shapes are your core.
| | 04:43 | If somebody comes up with a unique
line of dialogue that needs something more
| | 04:48 | extreme, you can take any of these shapes,
duplicate it, and push it even further than this.
| | 04:52 | You can do some remarkable shapes
and you can snap into custom mouths.
| | 04:56 | You are not limited to these six, but
these six are a very good safety net and you
| | 05:01 | will always have these to build up
the bulk of a dialogue-heavy project.
| | 05:04 | I would like to say that they're
completely open to customization.
| | 05:07 | Something rough and ready here,
but let's say if I wanted to pull this,
| | 05:12 | I don't know if this will work or
not, but it's worth trying.
| | 05:15 | Yeah! That seems to work.
| | 05:18 | Let's padlock it. It's a very solid system.
| | 05:22 | There is no guarantee that when you do
this tutorial, you will get this working
| | 05:26 | the first time, you may have to do it more
than once, but you'll have this Flash
| | 05:30 | file in your folder and you will be
able to play around with it and see how it
| | 05:34 | works and hopefully duplicate it.
| | 05:35 | If you feel this visual style might
be inhibiting, let me get rid of this.
| | 05:38 | I will make a quick and dirty example
of how you can have maybe a slightly
| | 05:45 | more stylized version, for example.
| | 05:51 | Because not all projects will
be as realistic as this one.
| | 05:55 | You could construct an animated
mouth from-- let's give this more volume.
| | 06:07 | That can be your, for
example, close to your A mouth.
| | 06:13 | That could be your D mouth.
| | 06:19 | Something like this can be your ooh mouth.
| | 06:21 | So if you had a simpler project or
something with a more stylized look to it,
| | 06:27 | you can still repeat the techniques in
this tutorial, but working at a much less
| | 06:31 | detail oriented level. Because obviously,
we are working with fills, not lines,
| | 06:36 | and they do pose more challenges.
| | 06:38 | Definitely, there is a lot of fun
to be had using shape tweening for the
| | 06:42 | creation of dialogue.
| | 06:44 | You can imagine this colored and with the
teeth layer masks inside that looking pretty good.
| | 06:49 | So the head is rigged, the mouth is
rigged, the eye blinks are rigged, and we
| | 06:52 | are finally ready to proceed to
actually animating the entire character.
| | 06:58 | So in the next chapter, we are going
to move on and do a complete head turn,
| | 07:01 | which is going to move the body,
the head, the face, everything, and we
| | 07:03 | will integrate all of the elements in the
lessons we have learned in the previous classes.
| | 07:07 | So that's it and I hope to
see you in the next chapter.
| | Collapse this transcript |
|
|
4. Animating a Head TurnOverview of the head turn| 00:00 | We've created our character
rig from our pencil drawing.
| | 00:03 | We've vectorized it, pivoted the points.
| | 00:06 | He is ready to be animated.
| | 00:08 | So this is going to involve the
creation of several nested symbols.
| | 00:12 | All these symbols are going to be
working in tandem, just like imagine a
| | 00:15 | series of Russian dolls, one inside the other.
| | 00:18 | And this will create the
illusion of motion and acting.
| | 00:22 | Rather than talk anymore, I am actually
just going to show you the final result.
| | 00:25 | This is what we are going to be shooting for.
| | 00:27 | So in your Chapter 4 - head turn folder,
there is a SWF file and this is the
| | 00:31 | previously animated scene.
| | 00:34 | So as you can see, he starts looking left.
| | 00:36 | There is a little anticipation with
an eye blink. He looks right, but it's a
| | 00:40 | pretty fast action.
| | 00:42 | The legs bend, their shape tweening, the
arms bend, the body squashes a little bit.
| | 00:47 | You'll see the hands are jointed.
| | 00:49 | There is a little tiny amount of squash
and stretch on the feet, and if you look
| | 00:53 | carefully at the head, I am going
to zoom in on the head a little bit.
| | 00:56 | You will see there is actually quite
a bit of, I'll call it parallax.
| | 01:01 | What I mean by that is that you can see the
facial features moving relative to one another.
| | 01:05 | They are not just snapping from one side
to the other; they are actually tweening.
| | 01:10 | So in the final version we made we
slowed this action down so it's a little
| | 01:13 | bit easier to see that.
| | 01:14 | So let's go into our project file.
| | 01:17 | So if you go into Open in your
Chapter 4 - head turn folder, here is our
| | 01:22 | starting position. Let's open that.
| | 01:24 | And first of all, he is very big on the
stage, so let's Ctrl+Alt+S.
| | 01:32 | Let's make him 50% size, fit
him on the stage a little better.
| | 01:37 | And our Modify > Transform > Scale
and Rotate. On your Mac, it will be
| | 01:42 | a different shortcut.
| | 01:44 | So that will stop him from
bleeding off the stage quite so much.
| | 01:48 | It didn't matter when you were rigging
him, but now I wanted to have this guy
| | 01:51 | fit a little more naturally.
| | 01:53 | So the first thing that we have to do
before we proceed any further is have an
| | 01:59 | idea about how many elements within the
rig are going to be animating and they
| | 02:03 | all have to be duplicated.
| | 02:04 | We'll also have to have an idea about the
type of animation that we are going to do.
| | 02:09 | So we'll cover all that in the next lesson.
| | Collapse this transcript |
| Preparing the rig| 00:00 | So now we are ready to pose the rig.
| | 00:02 | We'll also have to rename some symbols
and duplicate some objects to make sure
| | 00:06 | that we are ready to go.
| | 00:07 | So let's open our file, character_
head_turn_02, and the first thing you'll
| | 00:14 | notice is a very quick rough and ready
thumbnail, and this is going to show us the animation.
| | 00:18 | This is what we are going to do
in the course of this chapter.
| | 00:21 | So it's four very simple poses.
| | 00:23 | The character will begin looking screen
left, doing anticipation, and key pose
| | 00:27 | number two, overshoot to the high point,
and number three, and then settle into
| | 00:32 | a normal looking right pose in key number four.
| | 00:35 | So four keys, and that's it.
| | 00:39 | Thumbnails should be like a stickman.
| | 00:40 | They don't have to be fancy.
| | 00:41 | They don't have to be well drawn.
| | 00:42 | They just have to have the basic
information to give you something that you can
| | 00:45 | work with, that show you the tilt of the
head, the general attitude of the body.
| | 00:49 | You can of course make more detail in this.
| | 00:50 | But if you don't have great drawing
skills, don't be shy of doing a thumbnail.
| | 00:54 | Here is our character.
| | 00:57 | Let us make some alterations, because
the big problem that we would face is that
| | 01:01 | we have these precious symbols that
we spent a lot of time building and we
| | 01:04 | don't want to damage them.
| | 01:05 | These basically are our pristine
objects that we don't want to disrupt anymore.
| | 01:10 | So what we want to do before we animate is
to work inside a duplicate or a copy of these.
| | 01:15 | You could always just duplicate your
Flash file, but I like to have as many
| | 01:18 | assets in the single Flash file as I
think the program can stand, because I can
| | 01:22 | reuse things more easily.
| | 01:24 | So let's double-click on the body.
| | 01:26 | on the stage and go Duplicate Symbol.
| | 01:29 | There is a good rule of thumb, if
you are ever in doubt, duplicate.
| | 01:33 | The worst that you can do if you do
too many is clutter your library.
| | 01:36 | But if you actually go over an existing
symbol that's been used somewhere, you
| | 01:40 | can destroy hours of work, and I've
done that. You don't want to go there.
| | 01:44 | So anyway, duplicate the symbol. We are
going to give it a name, something nice and
| | 01:47 | descriptive, head turn.
| | 01:49 | I am going to add that every other
symbol inside this symbol, that's going to be
| | 01:54 | working as a comp in animating.
| | 01:56 | That's pretty simple to find out.
| | 01:57 | His body is going to turn, his legs
are going to be positioned, his arms are
| | 02:01 | going to turn, his body, his head.
| | 02:03 | So let's click on all of these and
duplicate them and call each one head turn.
| | 02:09 | You can be lazy and call them copy.
| | 02:11 | I don't recommend it.
| | 02:12 | Your library will be very confusing.
| | 02:16 | So I am just going to add head turn to
the arms, the legs, the right leg here.
| | 02:25 | I am actually going to duplicate that.
| | 02:27 | That's a copy of the right leg, if you remember.
| | 02:30 | So I am going to call that leg left
head turn, so it's now a different symbol
| | 02:34 | completely from this one.
| | 02:36 | Most important of course is to duplicate
the head, as well as the mouth, and the
| | 02:43 | two eyes inside there.
| | 02:48 | You can get pretty fast at this.
| | 03:09 | I think then I'll do the body, and
if in doubt, you can always click on the symbol.
| | 03:12 | Check it in the Properties panel, oops!
| | 03:15 | Body needs to be duped. Okay.
| | 03:20 | So now we have dupes of all the key
elements, and then the other thing to make
| | 03:23 | sure is that each of these is set to
Play Once, because they won't be looping.
| | 03:28 | This is like a single action.
| | 03:29 | It's just that he looks from left to right.
| | 03:30 | We don't want him doing it over and over again.
| | 03:32 | So let's just bundle all of these.
| | 03:35 | Make them Play Once, and same with the head,
and same with the mouth and the eyes.
| | 03:46 | I think we can actually select more than one.
| | 03:48 | Might save a bit of time. Okay.
| | 03:51 | So even if you have made a mistake, don't
worry. You can always change it later on.
| | 03:55 | But it's nice to get it right first time.
| | 03:57 | It makes a lot of the
corrections in here not necessary.
| | 04:01 | So the next thing to do
will be to get the thumbnails.
| | 04:03 | Bring the thumbnails back inside.
| | 04:05 | I am going to copy them.
| | 04:06 | Ctrl+C. Now that we have the head turn
symbol, double-click in there, and then
| | 04:12 | in this dummy layer, we'll just drop
in our thumbnails and just keep them
| | 04:15 | somewhere nearby where we can see them.
| | 04:17 | I'll drag that down to the bottom.
| | 04:19 | I am going to lock it.
| | 04:22 | Then what we do is try to estimate
how long our scene is going to be.
| | 04:27 | I think it's a pretty short action.
| | 04:30 | We are on 30 frames a second.
| | 04:32 | So, 30 frames is one second.
| | 04:33 | So I am going to stretch it out to maybe 60.
| | 04:36 | So it's a two second long scene.
| | 04:38 | It's a very fast reaction.
| | 04:40 | So let's hit F5, and stretch our
Timeline out, and give this some room.
| | 04:43 | I am going to think of the animation
beginning on this key first keyframe, which
| | 04:49 | will start to move around here.
| | 04:51 | I am going to hit F7 on the keyboard.
| | 04:53 | Give our eye some time to see
where we are before we begin to move.
| | 04:56 | Usually when you click to a scene, it
takes you a few frames for your brain to
| | 05:01 | adjust to the new shot.
| | 05:03 | So we'll start keyframe 1 here and
we'll scrunch down to number 2,
| | 05:08 | the down position there.
| | 05:10 | That's where the head turn itself
proper, where he goes from facing one
| | 05:13 | direction to the other, will happen around here.
| | 05:16 | Then up to the high point and now
let's give him some room to settle, maybe
| | 05:21 | push this out a bit more.
| | 05:22 | That's a very -- still a very fast action.
| | 05:24 | About 30 frames a second, this
represents about one-third of the second.
| | 05:27 | So this might look like a lot of time,
but it might be faster than you think.
| | 05:32 | So let's just chop a few empty
frames off here, and so this is where the
| | 05:37 | animation is going to mostly occur.
| | 05:39 | So I am going to put in a
dummy classic tween in there.
| | 05:42 | That's going to be like a visual guide
that we are going to use to help us have
| | 05:46 | the same time duration on all of our symbols.
| | 05:49 | So I want to have the same number of
frames on the body symbol as in the head,
| | 05:54 | and the arm, and the torso, and the leg.
| | 05:56 | I want all the keyframes to happen at
the same time in all of these symbols so
| | 06:00 | that everything nests and
works together in harmony.
| | 06:04 | So let's copy all of them and we
will go to Edit > Timeline > Copy Frames.
| | 06:11 | Then we just drop that into
all the other nested symbols.
| | 06:14 | Let's go back to frame 1 and make a
new layer on each of these symbols. Ctrl+Alt+V.
| | 06:30 | And it's just a repetitive
process of repeating this for all of
| | 06:35 | your animating elements.
| | 07:05 | Of course, don't forget the mouth and the eyes.
| | 07:14 | It's always good to double-check as
well, headturn, headturn, headturn.
| | 07:16 | This is the beauty of modifying the names.
| | 07:19 | You can double-check to make sure that
okay, I am working inside one of my dupes.
| | 07:23 | I am not messing up my original perfect symbol.
| | 07:27 | It's also a good idea to keep your
file names reasonably short, so you
| | 07:34 | can see as many of them as
possible on the top.
| | 07:42 | Okay, so the next step
will be to pose the character.
| | 07:48 | We have done everything else
other than pose the character.
| | 07:51 | We're now ready to go.
| | 07:53 | But at this point, you should have
duplicated all of the animating elements.
| | 07:56 | Everything that is going to have like
an internal timeline of its own, and
| | 08:01 | you should have renamed them all, hopefully,
with the name of head turn or some other modifier.
| | 08:06 | You should have this
thumbnail as a little visual guide.
| | 08:09 | Now with that done, we are finally able
to pose the character and see at what
| | 08:13 | point we are going to be able to make a move.
| | Collapse this transcript |
| Posing the rig| 00:00 | So, we have our character rigged
and all of his symbols and comps have
| | 00:04 | been named and set up.
| | 00:06 | So now let's pose him into a nice position.
| | 00:09 | So let's open our file, character_head
_turn_03 in your Exercise folder, and
| | 00:14 | let's move into the symbol.
| | 00:18 | So here are our rough thumbnails.
| | 00:19 | What we are going to be doing is
more or less keep his feet planted.
| | 00:22 | Trying to start him in a much more
interesting position than this generic
| | 00:26 | vertical uninteresting pose.
| | 00:28 | That's where our model sheet pose or a
zero pose is supposed to be, but we want
| | 00:31 | to find something a little more fun.
| | 00:34 | The other thing would be to make the
head closer to the start position, because
| | 00:37 | imagine his upper body looking off
somewhere here. So let's do that.
| | 00:42 | Some of this is pretty easy.
| | 00:43 | Let's go into the foot and
Modify > Transform > Flip Horizontal.
| | 00:47 | That's a slightly better pose.
| | 00:52 | More balance maybe.
| | 00:53 | So, lots of things that we can do here.
| | 00:55 | But be sure if you are going to be
moving the torso,and the head that we select
| | 01:00 | everything and use the Free Transform.
| | 01:01 | I am using the Shift key to select
multiple objects and maybe the lower torso.
| | 01:05 | Let's pivot it around here.
| | 01:07 | Let's give him a little more attitude perhaps.
| | 01:09 | Let me grab the leg, and the other tool
I like to use other than just rotating
| | 01:15 | objects, that can be kind of
unforgiving, is to use the Skew tool. Oops!
| | 01:19 | If you hold down the Alt or Option key,
you can skew from the other direction, where
| | 01:24 | as if I just grab it like this, it
skews around the pivot, the circle here.
| | 01:28 | So Alt or Option is a very good tool to
have, if you are going to be making your
| | 01:32 | character skewed from side-to-side for
example. So Alt or Option here again.
| | 01:40 | In the head, he is
looking the wrong way for one.
| | 01:44 | So let's go in here.
| | 01:48 | I wanted to reverse the angle of
the head, so around this pivot.
| | 01:51 | But I also want to respect
the center of mass of the head.
| | 01:54 | There is an easier way of doing it.
| | 01:56 | I am going to Edit, just by itself, or I
could double-click on the head in the library.
| | 02:01 | I'll copy all of the layers, and
paste them into a single layer.
| | 02:08 | Ctrl+Shift+V in place. Padlock that.
| | 02:11 | Now select all the layers beneath,
Modify > Transform > Flip Horizontal and as
| | 02:17 | you can see they're kind of off-center.
| | 02:19 | So let's just pull it back
in a little bit. There we go.
| | 02:27 | Sow now if you compare with the
other layer, they should be more of less
| | 02:30 | occupying the same space.
| | 02:32 | I think I like to move
this layer over a little bit.
| | 02:34 | I am using the arrow keys here. Good!
| | 02:46 | So you might want to fine-
tune the position of the head.
| | 02:48 | Maybe tilt it back of it.
| | 02:51 | We can do all the things like
playing with the neck, skew that, and
| | 02:59 | stretch it out a bit.
| | 03:00 | If you even had to make bigger changes
for example, if I was going to make a
| | 03:02 | huge change to this neck to really
work with the new position, duplicate all,
| | 03:06 | just duplicate.
| | 03:08 | Again, call this headturn like all
the other dupe symbols in the scene.
| | 03:12 | The big change I'd like to make here
would be just to make it work with this new
| | 03:15 | angle a little bit better.
| | 03:17 | If you wanted to, you can
curve the neck a little bit.
| | 03:19 | Everything is too geometrical there.
Or if your angle changed, if you tilt it
| | 03:24 | down, things like that.
You can be quite flexible with this.
| | 03:26 | Now let's move this arm a little bit.
| | 03:29 | So let's rotate it and let's go
in a little bit closer for that.
| | 03:40 | Now I did something when I set
up this rig, and guess what happened?
| | 03:44 | I have never done a rig where I didn't
make a change once I began animating,
| | 03:48 | and in retrospect this is a silly mistake.
| | 03:51 | I've rigged the wrists on the hand layer
and that's going to look bad when we
| | 03:56 | start rotating this thing around the place.
| | 03:59 | So what I should do really is have
the wrist be part of the arm layer and
| | 04:04 | completely separated from
the hand. Look at this.
| | 04:06 | That's not going to be fun.
| | 04:08 | Let's very quickly go in here.
| | 04:10 | I'll show you how to make this
kind of change. This is the point.
| | 04:15 | Every time you do a rig, you'll do a
couple of test animations with the rig and
| | 04:18 | that's when you'll find "Oh yeah, yeah,
I shouldn't have done that, and that was
| | 04:21 | probably not the best choice."
| | 04:23 | So let's make that outline.
| | 04:25 | We'll go into the arm layer.
| | 04:28 | We'll make a new layer, paste that,
and just position it where you want
| | 04:32 | the replacement to be.
| | 04:33 | I am going to put it on the lower level,
and let's put some lines in to break
| | 04:38 | this up, Snap, and make the cut about there.
| | 04:45 | Now we can delete the wrist. Let's try that.
| | 04:51 | Now we go into the hand layer and
we do the opposite. We get rid of it.
| | 04:56 | Maybe bring that point down to
here. See what that looks like.
| | 05:03 | Of course, we also have to check the pivot.
| | 05:05 | Now the pivot might be--
or I think that should be fixed.
| | 05:20 | There we go.
| | 05:26 | I'll repeat that process over here.
| | 05:28 | But let's say for now,
I would like to tilt that hand.
| | 05:36 | By layering that, we can make the
forgiveness of the coverage a little more.
| | 05:42 | Okay, you might want to move
these feet little further apart.
| | 05:50 | Alt or Option to skew from the base
into opposite side, because this is a
| | 05:54 | bigger negative shape. Okay, so now he looks
like he is a little more alert and more attentive.
| | 05:59 | And these are the issues with, for
example, correcting the rig on the wrist.
| | 06:04 | Don't forget you have to map
them onto any other symbol.
| | 06:06 | So the corrections I made, I made to a
duplicate symbol, the bd headturn symbol.
| | 06:11 | So we'll have to copy them,
and that's actually pretty easy.
| | 06:14 | Going to the body library, and so any
changes you make on the fly that you want
| | 06:18 | to duplicate onto the other.
| | 06:20 | There is the arm, the arm
right, and the arm right.
| | 06:23 | There is the corrected one.
| | 06:24 | So let's go into arm
right headturn and copy this.
| | 06:29 | That's the new wrist.
| | 06:31 | Go to the original arm right
and Ctrl+Shift+V. There it is.
| | 06:36 | So one now matches the other, and make
sure that the hand has been corrected.
| | 06:40 | That we used the same hand for both.
| | 06:42 | So that's just one small thing to keep in mind.
| | 06:44 | So now we have the body and better
start position and ready to be moving.
| | 06:50 | I am going to make the change to the other hand.
| | 06:52 | I am going to correct that in the rig.
| | 06:53 | You'll have that asset in your Exercise
Files, and any other errors that I see
| | 06:58 | creeping up in the process as we
begin to animate I'll flag them.
| | 07:02 | I'll explain them to you,
what the corrections will be.
| | 07:04 | So with that done, I think we are
ready to go to the next step, which will be
| | 07:08 | actually animating and posing out the
other three keyframes and then beginning
| | 07:12 | the process of animating our character
from keyframe number 1 to keyframe number 4.
| | Collapse this transcript |
| Animating the head movement| 00:00 | So, let's go to our Exercise Files.
| | 00:04 | And we'll open character_head_turn_04.
| | 00:07 | We're ready to continue with
the remaining three keyframes.
| | 00:10 | We have the first one set up and by no means
is this final, but this is our blocking pass.
| | 00:15 | This is going to be our first move
in big strokes through the scene.
| | 00:20 | So let's click on there, enter
this, and let's try to maximize this.
| | 00:26 | Those are our thumbnails, and these are
our guides to the positions of keys 1, 2, 3, and 4.
| | 00:34 | So, this is key number 1, which
we're going to hold until here.
| | 00:37 | Couple of things right now that
might be bothersome. The mouth is moving.
| | 00:42 | Well, that's because it's using our standard--
| | 00:46 | Even though it's a duplicate, it's
still using our standard six shapes.
| | 00:48 | So one thing I like to do is select
these, hold down Alt or Option and drag
| | 00:52 | that and just pull them off, pull
all the animating elements off, and
| | 00:56 | switch off tweening.
| | 01:02 | So now we have a non-distracting
mouth and it still has all the nested
| | 01:06 | different mouth shapes.
| | 01:07 | So, if you want to apply these during
this head turn, we can still do that.
| | 01:10 | I'd like to keep the eye blink at the beginning.
| | 01:12 | I think that's kind of nice.
| | 01:13 | It's like his brain is working,
something's going on to his side out here.
| | 01:17 | So let's throw down a keyframe and on this
one here this will be the same as number 2.
| | 01:22 | So, he'll still be facing screen left.
| | 01:25 | So let's put a key here.
| | 01:26 | And by this point, we should be--
Let's put that hand back into color mode.
| | 01:32 | So, by this point, we're going to
want to see the head facing the other
| | 01:35 | direction and then settling into there.
| | 01:38 | All I will do next is now that we've
had some broad idea about the direction
| | 01:43 | our character will face, let's go in to
the head and match that up so that we
| | 01:48 | have a head turn happening here.
| | 01:49 | It'll make the overall body
action much more easy to see.
| | 01:52 | This is the frame here.
| | 01:54 | If you look at the sequence here, it's frame 16.
| | 01:56 | So I'm going to click on that, and this
is where our extension frameEdit comes
| | 02:01 | in very handy, which we installed earlier.
| | 02:04 | frameEdit is fantastic.
| | 02:05 | So, if I select, for example, this frame and
click on it, I enter at exactly that frame.
| | 02:11 | Now, that's the whole reason
for installing that extension.
| | 02:14 | So, this is the frame that we want
to work in to twist the head back to
| | 02:18 | the original direction.
| | 02:19 | So, I'm going to keyframe this as the
last one, keyframe this as the one that
| | 02:24 | will be facing the other the other way,
and let's just select all of these,
| | 02:29 | Modify > Transform > Flip Horizontal, and
that's again, that's offsetting maybe a little bit.
| | 02:35 | I'm not sure.
| | 02:36 | So you also have a look. It's pretty close.
| | 02:40 | So now, when we look at the outer scene,
that's where the head turn's going to happen.
| | 02:47 | I'm not going to worry too much about
these joins and things because they are--
| | 02:55 | The body position's going to be quite different.
| | 02:57 | So my priority right now will be to
construct the end pose, basically the
| | 03:01 | opposite of this one, and don't worry
too much about the rest of the dirty work
| | 03:05 | of joining all these things up. It can wait for now.
| | 03:07 | So, this is the pose we want to create,
and don't forget. He'll be a little bit surprised.
| | 03:16 | He's seeing something, he's
looking over. he's reacted.
| | 03:19 | Now, the other thing you'll find,
I like to have a larger area available.
| | 03:25 | So, I'm going to switch workspaces
to Lynda_Character_Animation_2.
| | 03:35 | Maybe move the Library over to here, and
let's move these thumbnails, stack them over the character.
| | 03:48 | So, maybe lean the character more to the right.
| | 03:50 | As we can see here, he's like "hmm?"
and then down, overshoot, settle.
| | 03:54 | So I think his center of mass should move.
| | 03:56 | So I'm using Shift key and the
numeric keypads and hold down Alt/Option to
| | 04:02 | really skew these legs over.
| | 04:08 | The beauty of using the Shift with the
numeric keypad is they move things in
| | 04:12 | fixed increments, so it's
easier to keep your points aligned.
| | 04:22 | So, we're going to be starting from
this point, ending in that one. Great!
| | 04:32 | So, the next thing we do is-- it's a
matter of preference really for me, but I
| | 04:37 | would maybe work into the anticipation first.
| | 04:40 | So let's see what happens if
we bring the character down.
| | 04:42 | Let's just click one, let's see start
with the lower torso, bring it down by one click,
| | 04:45 | bring the body down by
one, the arms as well, the hands.
| | 04:50 | Again, I'm going to make
this reasonably fast and dirty.
| | 04:53 | The big danger I found when I work in
animating in Flash is over thinking.
| | 04:58 | I tend to be very analytical and
sometimes that can be a dangerous attribute.
| | 05:02 | Sometimes it's best to just get going and
start moving things and see what happens.
| | 05:08 | Not always, but there are
dangers in being too procedural.
| | 05:11 | So let's bring these arms out.
| | 05:14 | Imagine him flaring out as he
squishes, and there's going to be animation
| | 05:17 | happening in the legs, but I'm not going
to worry about them too much right now.
| | 05:20 | Let's break them, so they're going to
just move down and through the feet.
| | 05:23 | Okay, and then the same. He's going
to be working out of that pose here.
| | 05:31 | Let's do the same thing.
| | 05:32 | Try to match the previous one.
| | 05:37 | See if that works.
| | 05:39 | Now they're going a bit
too far. Back up by one.
| | 05:57 | Okay. Now, one thing that I think we'll
do right now and it'll really help you to
| | 06:00 | figure out what we're
doing is go into these feet.
| | 06:04 | I'm using frameEdit in and as you can see,
here is our guidelines, so we don't get lost.
| | 06:10 | Let's put down F6 here and here,
and I'll put one there too.
| | 06:13 | Let's make this shape tween.
| | 06:17 | This is the frame that's going crazy
because we just moved the legs down.
| | 06:21 | There's nothing joining into
the base of the shoes anymore.
| | 06:25 | So, again, we're on frame 15.
Let's use frameEdit in. Click on that.
| | 06:30 | This is the keyframe 15. We're right
at it, but let's shape tween this thing.
| | 06:39 | This is where it gets really cool.
| | 06:42 | Now, this is where we also
need to have shape hints.
| | 06:44 | Now, I warned you earlier, every time
you're going to apply a shape hint, you're
| | 06:50 | rooting to save your scene.
| | 06:51 | It's very prone to crashing.
| | 06:53 | I'm going to take my own advice and save that.
| | 06:55 | Okay, now let's add some shape hints.
| | 07:08 | Already getting better.
| | 07:09 | If your first hint makes it worse,
you put it in the wrong place.
| | 07:12 | Ctrl+Shift+H, and we just keep
applying more of these hints.
| | 07:16 | The goal being each hint should
make it subsequently stronger.
| | 07:19 | If it's not, then there's a pretty good
chance that you've put it in the wrong place
| | 07:23 | and you should try
putting it on a different point.
| | 07:25 | Now, you can see that's
still going a little goofy here.
| | 07:29 | I'm not going to worry about that for
the simple reason that we could still be
| | 07:32 | playing with this for a
while, but watch this.
| | 07:34 | So you can see for the duration of
this movement, the left leg, or his
| | 07:40 | physical right leg, is actually
animating and it's animating in sync and we have
| | 07:43 | a nested shape tween working in
tandem with a motion tween, and now we
| | 07:48 | just simply do the same
thing with the other leg.
| | 07:58 | And you might find outline mode
might be easier for some of this.
| | 08:06 | Ooh! And that one worked without any shape hints.
| | 08:10 | This is the mystery of shape tweening.
| | 08:12 | So, I'm not complaining.
| | 08:14 | So there we go and that will give you
some idea about the rest of the process
| | 08:21 | that we'll be following.
| | 08:22 | So, since this frame here should also
have bent legs, we can go into these and
| | 08:29 | keep them bent.
Add shape tweening on there.
| | 08:32 | I'm going to go into this one, repeat that too.
| | 08:35 | Still it won't be perfect but it'll
be a lot better. Shape tween there.
| | 08:38 | We need to add hints on the right leg again.
| | 08:44 | So, we want to have some
very straight legs on frame 25.
| | 08:47 | So, before I do anything else, I'm
going to go into that and make a new key here,
| | 08:51 | and that frame's
actually be closer to this one.
| | 08:54 | So, what I'm going to do is grab this
stack of keys, hold down the Alt key
| | 08:58 | or the Option key and drag back, and of
course all of my frame numbers will be wrong.
| | 09:02 | Let me close the Library panel.
| | 09:14 | There we go. To correct that frame, all these,
all the symbols should be set to number 25,
| | 09:19 | which is our number here.
| | 09:20 | Probably a lot of you time when you do
this will be spent correcting all these
| | 09:24 | internal frames to make sure they all line up.
| | 09:37 | So, let's push this one a little higher.
| | 09:39 | I'm going to select everything except
the feet, push it up a bit, maybe rotate it,
| | 09:44 | bring it back forward, and then
let's pull his legs down a little bit.
| | 09:51 | And now, we can see, if you play it
without tweening, you'll have a rough idea.
| | 09:55 | So, I find just make everything
a tween. Watch it quick and dirty.
| | 09:59 | Let's have a look at that.
| | 10:02 | And so this, even though it's obviously
very floaty and far off from finished,
| | 10:05 | you can see that that's the basic
emphasis of the point of the turn.
| | 10:11 | As we begin to fix him, I'm going to
correct the tweening of the foot here,
| | 10:17 | because that's really
catching the eye very badly.
| | 10:20 | So, let's drop some hints in and when
you have previous hints from the previous key,
| | 10:25 | that's often a good
idea to try to follow them.
| | 10:29 | I often find the same combination,
well, not always, but the same
| | 10:32 | combination can work. It does.
| | 10:36 | It's good.
| | 10:39 | So now, we need to fine-tune this
position so everything doesn't move down as a
| | 10:42 | big slidey single image, and that's
simply a process of breaking apart the
| | 10:49 | various elements, so that
they move more naturally.
| | 10:53 | So, I think we should break here.
| | 10:54 | In the next section, what I'll do is I'll
fine-tune and refine this basic movement.
| | 10:59 | We will see the amazing
transformation as we make fairly minor adjustments
| | 11:04 | to this process.
| | Collapse this transcript |
| Animating the body movement| 00:00 | So let's continue with our
character's head turn scene.
| | 00:03 | So, let's open it and we'll pick up
where we left off, character_head_turn_05,
| | 00:09 | and we will double-click
on this file and we're in.
| | 00:12 | So, as you saw from the last time, we had
some nice stuff happening but also some
| | 00:17 | icky things have to be fixed. So let's do that.
| | 00:20 | So, the anticipation is working out the
level of the body. Don't worry so about
| | 00:26 | the head right now, and here's the
point at which the head turns and the
| | 00:31 | overshoot and the settle.
| | 00:33 | Now, this is a very crude overshoot that I did.
| | 00:35 | I was just trying to block it in and
this isn't a bad way for you to work.
| | 00:40 | Don't try to make him
perfect in your first pass.
| | 00:42 | Block in the gross movements first,
and we can fine-tune later on.
| | 00:47 | That's the beauty of Flash. So, let's do that.
| | 00:49 | So we're going from this down position
into the overshoot and then the settle,
| | 00:56 | and the one thing I'm noticing is that I
would like him on this position here to
| | 01:01 | travel forward to the right a little more.
| | 01:03 | He's going straight up
and then down to the right.
| | 01:06 | So let's try to give him more of an arc.
| | 01:10 | So let's select the upper body and
we can maybe move these arms slightly
| | 01:15 | differently too, and if this doesn't work,
we can play with multiple poses here.
| | 01:19 | It's a bit softer already.
| | 01:23 | And then, also imagine the arms, as he
goes into the squish pose, the arms are
| | 01:27 | going to flare out a bit and then as
he moves up to the high point, a number
| | 01:31 | of things can happen.
| | 01:32 | Depending on the character, we
can pull the arms in a little bit.
| | 01:47 | You can see ready that's giving us a
more hinged feel and bear in mind, this
| | 01:52 | is without even any kind of
shape tweening on the arms.
| | 01:54 | These are just flat symbols
that aren't even doing much.
| | 01:59 | They will, but even without doing
it a lot, they've already starting to
| | 02:02 | feel reasonably alive.
| | 02:04 | So, let's go in and fix
some other little things.
| | 02:09 | I notice this head turns from here to here.
| | 02:11 | It seems to pop a little bit.
| | 02:12 | Now, we're going to fix a lot of
business on the internal head, but let's fix
| | 02:15 | the gross mistakes first.
| | 02:23 | Notice the hair on the side of his
head is sliding all over the place.
| | 02:28 | Let's pull that in. better.
| | 02:30 | And of course, the legs
are separating from the feet.
| | 02:38 | So we can fix that pretty easily too.
| | 02:40 | There's a couple of ways we can fix that.
| | 02:42 | We can fix that
internally through shape tweening.
| | 02:45 | We can also fix it externally
through motion tweening, or we can use both
| | 02:50 | depending on which we think is
most lifelike and the most believable.
| | 02:54 | But people are well used to seeing
Flash symbols being scaled and tweened.
| | 02:58 | So I like to do shape tweening if I can.
| | 03:01 | So, we already have our key set here
and our end key should be also keyed.
| | 03:05 | So let's set shape tweening to go here all
the way, and we'll do the same on this one.
| | 03:10 | We need to match tweening
all the way through here.
| | 03:14 | Okay, so let's go back and we'll do
the right leg first and now I'm going to
| | 03:17 | use FrameEDIT in and
that's our question mark key.
| | 03:21 | So let's just pull these points and if
a leg or a body part is stretching,
| | 03:29 | we expect it to lose a little bit of volume.
| | 03:31 | So let's pull in these points a
little bit and it'll make it much nicer.
| | 03:37 | It's much more bouncy, more natural feel.
| | 03:41 | So I'm not going to worry too much
about the placement. I'm going to actually
| | 03:44 | move these feet as well.
| | 03:45 | So, hold down the Alt or
Option key to skew. Bery subtle.
| | 03:51 | This does not have to be a huge move,
but just enough to feel that the
| | 03:55 | character's heels are coming
a little bit off the ground.
| | 03:57 | I think we can push a little more than that.
| | 03:58 | If you do it too much, it'll feel really fake.
| | 04:06 | So this is the question of
just enough, like salt.
| | 04:09 | Just a little bit is nice and a lot is not.
| | 04:13 | So, let's do the same thing for this foot.
| | 04:16 | It'll feel like it's pivoting from here.
| | 04:17 | I'm going to skew back and I'm
holding down the Alt or Option key.
| | 04:22 | If I don't, it does this
and that's not what we want.
| | 04:24 | Okay, and now I'm going to
alter the shape of the keyframe.
| | 04:29 | Again the same keyframe, I'm working on
frame 25 inside frame 25 and if I work
| | 04:34 | on the wrong one, then bad things happen.
| | 04:36 | So, when you're working like this, be
sure you're working on the right keyframe
| | 04:39 | and also be sure that your
outer symbol is named correctly.
| | 04:42 | If it's not, bad things will happen too.
| | 04:45 | It's just a question of being conscious.
| | 04:46 | As you move your keys around, if I was
to grab this stack and move them over to one,
| | 04:51 | but this still says frame 25.
| | 04:53 | I have to go in and make it 26.
| | 04:54 | There's a lot of housekeeping
involved in this style of animation.
| | 04:59 | So let's check that. It's working.
| | 05:01 | It's not going crazy.
| | 05:02 | Now let's play the whole thing.
| | 05:07 | Great! Now we're getting a little
feel of lift on the feet.
| | 05:14 | Excellent!
| | 05:16 | Now there's still things we
can do to add or plus the scene.
| | 05:22 | The arms are stiff.
| | 05:23 | They're not really doing any thing.
| | 05:24 | So let's have some fun with them.
| | 05:25 | Let's just look at the right arm.
| | 05:27 | So, as he's doing this, it'll be great
if we make that arm bend a little bit.
| | 05:32 | So let's go into that and again, we
need to remember that we've got all these
| | 05:36 | elements that we need to work together.
| | 05:39 | So, the other thing that we have is
this little wrist fellow here that I added
| | 05:43 | when I was fixing the rig.
| | 05:45 | That should probably be symbolized so we
can motion tween him a little more easily.
| | 05:48 | So, I'm going to add him as a symbol,
and that'll be arm right wrist, and make
| | 05:56 | sure he's pivoted properly. Great!
| | 06:01 | And now we just keyframe all of these and
these are all going to be shape tweening.
| | 06:07 | So we'll just make them all shape tween.
| | 06:10 | Get in back to see how we're going with this.
| | 06:12 | As the character goes down here, we can
imagine maybe the elbow bending a little
| | 06:16 | bit more out this way.
| | 06:17 | So, I'm using frameEDIT in so that I
go into the right frame. Let's do that.
| | 06:25 | Nice!
| | 06:27 | So, let's see if we even notice that.
| | 06:28 | Sometimes these things don't read.
| | 06:31 | I think that is reading. It's subtle.
| | 06:35 | Now we go popping into this
frame. I'm just checking.
| | 06:38 | It says frame number 16 that
matches with this frame here.
| | 06:43 | So now if we go up to this high point,
I would expect the arm to straighten out.
| | 06:48 | Let's now see if we can straighten them.
| | 06:56 | Ah. Here's our old friend, crazy tween.
| | 06:58 | So, before I add shape hints, save again,
and now we're going to add some shape hints,
| | 07:03 | Modify > Shape > Add Shape Hint.
| | 07:07 | And I think the last time we did this,
| | 07:08 | I think something like this might be good.
| | 07:10 | Let's just add the A to the
shoulder. Yes, it's improved.
| | 07:13 | It's a little bit better, and I'm
using Ctrl+Shift+H to add more. Nice!
| | 07:21 | So, at this point, it's still not perfect.
| | 07:23 | There's still tiny little problems
there, but it's not worth worrying about.
| | 07:27 | This thing is going to move so
fast, no one's going to notice.
| | 07:30 | If you really care, you can add later
on but at this point, let's get the big
| | 07:34 | things working first.
| | 07:36 | So, I'm going to add a couple more
points to help this finish properly.
| | 07:40 | You will also notice, if you're more
into the principles of animation, I'm not
| | 07:43 | putting any slow-ins are slow-outs.
| | 07:45 | Don't even think of adding them at this point.
| | 07:47 | We just get this guy moving first and
we get the big things working before we
| | 07:51 | worry about small stuff.
| | 07:53 | Every time I add tweening or easing in
and easing out or slowing in and slowing
| | 07:58 | out here, I always end up changing it 50 times.
| | 08:01 | There really is no point unless you are
completely locked into the physical movement.
| | 08:05 | In most cases, we can leave
that to until the very last.
| | 08:08 | So anyway, here we go, we straighten
the arm here and then I think the arm
| | 08:11 | should bend a little more by
the time he gets to this point.
| | 08:15 | Let's go back in here and see if we
can straighten this a bit more,
| | 08:25 | And that doesn't break.
| | 08:27 | Sometimes our hands move with this
when we do that, sometimes they break.
| | 08:30 | So I think we're okay.
| | 08:36 | And this is the problem for me.
| | 08:37 | There's just a bit of a pop here.
| | 08:38 | So, I'm going to try to line
that up a little better.
| | 08:50 | And I think we're losing a little volume on
that arm, so I'm going to stretch it a bit.
| | 08:54 | It's feeling a little slow.
| | 08:59 | I said earlier that this will be a fast action,
but it's feeling quite slow for some reason.
| | 09:03 | I'm going to ultimately speed this up.
| | 09:06 | It's still feeling a little floaty for my taste.
| | 09:10 | The other thing we can do that will be
nice, actually we might be able to delete
| | 09:14 | a lot of these frames.
| | 09:15 | So let me just try this.
| | 09:17 | This is an experiment.
| | 09:19 | Insert > Classic Tween.
| | 09:23 | Much better, yes.
| | 09:25 | We only need to do that extra key for
the head, because nothing else is turning.
| | 09:29 | One of the great principles of
animation is called the systematic breaking
| | 09:32 | of limbs or joints.
| | 09:33 | For example, we've got most of
these limbs on the same angle.
| | 09:37 | That's not how we work in real life.
| | 09:40 | In real life, our limbs constantly fold
from one direction to another and good
| | 09:45 | animators know that you can really
give the illusion of fluidity and life by
| | 09:50 | breaking joints and one of the cool
things about this style of animation is
| | 09:54 | that we can do that.
| | 09:55 | I'm going to keep it pretty subtle here.
| | 09:56 | Okay, let's see what that looks like.
| | 10:03 | So that's not too bad.
| | 10:04 | So, I'm going to fold this arm in a little
bit, so that it feels a little more natural.
| | 10:09 | So we see the joint break
from one direction to the other.
| | 10:15 | Nice, if I could find an excuse
to do it for the other arm too.
| | 10:17 | Okay, I notice that also the tuft of
hair at the back of his head has disappeared.
| | 10:27 | So, this is where outline mode is great.
| | 10:30 | We can see how that mistake that
probably happened when I deleted these keys.
| | 10:42 | Towards the end, but
somehow I got lost over here.
| | 10:46 | So, I'm going to move it over.
| | 10:56 | And I think we'll just
copy it here, Ctrl+C, copy
| | 11:01 | it back into there, Modify >
Transform > Flip Horizontal.
| | 11:09 | I think we should add another key here,
because this one is going to pop from
| | 11:12 | one side to the other.
| | 11:13 | So, I'm going to clone this keyframe
here, bring it over, and now let's look at
| | 11:22 | the head and color again. That's great!
| | 11:25 | So, I think this is what I would
definitely classify as the broad pass of the
| | 11:31 | animation of this character now finished.
| | 11:34 | There's definitely a lot of things
we have to tighten up, but this is
| | 11:38 | satisfactory in the sense that we're not
seeing an error between the feet and legs.
| | 11:43 | We're not seeing gross defects or errors.
| | 11:46 | The next step will be to go into the
head symbol and to make the head work,
| | 11:51 | to make the eyes blink on the down move, and
help the head tilt to really settle the action.
| | 11:57 | So that we don't want a head symbol
that's just been flopped horizontally which
| | 12:00 | is what will be done on a cheap production.
| | 12:02 | Now, we're not going to do to that.
| | 12:04 | We're going to make it a
very interesting head turn.
| | 12:06 | So, we'll do that in the next lesson.
| | Collapse this transcript |
| Animating the head turn| 00:00 | Let's start building on our head
turn scene and go into your work folder,
| | 00:08 | Exercise Files, Chapter 4 head turn.
| | 00:10 | I am going to open 06.
| | 00:14 | That's probably where we left off.
| | 00:15 | And let's turn and click into
the symbol. I am going to look out.
| | 00:23 | It's a little floaty and we are going to
speed it up a little bit. Not right now.
| | 00:27 | It's actually nice to have it a little on
the slow side, because it is the way of
| | 00:31 | looking at and seeing if it's too
fast. Sometimes it can be tricky to see things,
| | 00:37 | so certainly for your first
scene when you are looking at all the
| | 00:41 | different kinds of tweening working together.
| | 00:42 | That gives you a better chance of
seeing the bending symbols work and how they
| | 00:47 | all nest inside one another.
| | 00:49 | So let's go into the head symbol.
| | 00:50 | I padlocked it earlier, so
now I am going to reverse that.
| | 00:56 | Just go in and look at that.
| | 00:57 | We have to do the same thing inside the head.
| | 00:59 | Currently this is all what's happening
in there and that's already sufficient to
| | 01:02 | sell the head turn on the outer clip.
| | 01:04 | So what we really want to do is to get
a little bit more intricate than this.
| | 01:08 | So just right click on the head and go Edit,
and that way we will go straight into the head.
| | 01:14 | Let's go a bit closer.
| | 01:17 | And so what I want to do here is to
actually turn and skew some of these
| | 01:21 | symbols inside the head.
| | 01:23 | Very crude. This should give you an idea.
| | 01:25 | I am going to select, Shift+Click
and select a few of these objects.
| | 01:29 | What I am going to do is move them
around like this and tween this movement
| | 01:33 | and that will make it look like
the head is actually rotating in
| | 01:35 | three-dimensional space.
| | 01:37 | So let's set a key here, F6, and this
would be your most extreme turn to this
| | 01:46 | direction and then we will snap to this.
| | 01:50 | So let's just do this part first.
| | 01:52 | And you will see exactly what I mean. Let
me get this working. Insert > Classic Tween.
| | 01:56 | So let's begin the process.
| | 01:58 | So we are starting from here and
rotating the head as far as we can along this
| | 02:03 | axis from here, to here.
| | 02:05 | He is going to move from this
direction through this direction.
| | 02:08 | Now obviously with these
symbols, we can only go so far.
| | 02:11 | There is only so much magic we can do
with this, but let's just start to see how
| | 02:17 | far we can get away with it.
| | 02:18 | So I am going to pick
say the eye and the eyebrow.
| | 02:22 | Let's do a Shift+Click.
| | 02:24 | I like Shift+Clicks for this, because they
move in bigger increments than the tiny one.
| | 02:29 | So let's make it one, two, three,
four that way. Click the nose.
| | 02:34 | You can be actually pretty rough with this.
| | 02:36 | Don't be too precious about it.
| | 02:38 | Let's test that already, see what happens.
| | 02:40 | So you are getting some idea about
the effective we are looking for.
| | 02:47 | So let's take the ear.
| | 02:49 | Move that over and we are and we are
going to actually use free transform, the Q key,
| | 02:52 | to make it seem like the ear is
moving in three-dimensional space.
| | 02:57 | So what we are trying to do is imagine
that the skull is more or less fixed and
| | 03:02 | we are going to be sliding the eyes and
the eyebrows around the skull, trying to
| | 03:06 | get as close as we can to this.
| | 03:13 | So obviously there are things
here that need to be changed.
| | 03:16 | There is too much skin here.
| | 03:19 | That's kind of weird looking.
| | 03:21 | So let's select the eye,
pull it out a little bit.
| | 03:25 | Maybe do the same thing with this, let me be
skew them slightly, same thing with the eyebrow.
| | 03:42 | Now what I have just noticed, when
I switched this to motion tweening,
| | 03:49 | it automatically symbolized the eyebrows.
| | 03:51 | And I don't necessarily wanted to do that,
because I want these to be shape tweens.
| | 03:57 | So let's switch this
tweening system from motion.
| | 04:05 | It won't let me.
| | 04:07 | Okay, just delete this.
| | 04:16 | Make a new key.
| | 04:19 | That's slightly annoying and that's
a new quirk that's crept into the
| | 04:23 | program, I am afraid.
| | 04:28 | Okay, as you can see it's a
shape tween. It works fine.
| | 04:30 | We will have more control over that as
a shape tween than as a motion tween.
| | 04:36 | So let's do the same thing here.
| | 04:49 | I am going to move that over again and I
don't know if there are any other parts
| | 04:55 | that we wanted to maintain.
We didn't want that to be symbolized.
| | 05:02 | It's important that we will keep this
as a shape tween, because we are going to
| | 05:07 | be playing with the shape of
this object quite dramatically.
| | 05:14 | As you can see this isn't a precise science.
| | 05:17 | There's no mathematical equation
going on determining how many degrees I
| | 05:21 | push these eyes over.
| | 05:24 | It's very much a matter of your
artistic tastes and how far you think you
| | 05:29 | can get away with it.
| | 05:31 | I've seen some people push these head
turns really remarkably. You may be a bit
| | 05:36 | intimated the first time you do it.
| | 05:37 | It's worth your while to really shove these
elements around, try to break them and see.
| | 05:41 | I am always amazed by how difficult that
is to see some of the wonderful effects.
| | 05:46 | You make a turn like this and then you
look at in the outer clip and oftentimes
| | 05:51 | that's pretty noticeable.
| | 05:52 | It looks extreme when you look at it
inside the symbol; when you look at it
| | 05:59 | outside the symbol it's quite
subtle. Still very much worth doing.
| | 06:04 | My point being you really have to
push these moves to make them readable.
| | 06:08 | So let's go back into this head.
| | 06:20 | Okay, I think to move that mouth,
maybe the nose over some more, oops!
| | 06:24 | Wrong way. And let me pull
the jaw around a little.
| | 06:29 | And I would expect that cheek to move slightly.
| | 06:34 | And this is where outline
mode is also very handy.
| | 06:40 | We also wanted to keep
the skull as a shape tween.
| | 06:47 | Because we will be actually changing
the structure of the skull slightly
| | 06:52 | to match this. So let's keep Snap on for
of these joints here, and I back off again.
| | 07:01 | You can't really make these kind of very
fine alterations with motion tweening. Okay.
| | 07:08 | So you notice the ear;
the ear is getting smaller.
| | 07:11 | It seems to be wrapping itself
around the form of the skull.
| | 07:15 | Maybe we can move it over a little
bit more and now we can go in and maybe
| | 07:20 | match the hairline up.
| | 07:25 | That's something I didn't want to
be as a symbol, such a big area.
| | 07:30 | And one thing that really helps
this move is if the hair is on the top.
| | 07:44 | Then we have to make an
adjustment to this area here.
| | 07:46 | I will go into outline mode for this
and with the widow's peak here. Now we will just
| | 07:56 | try to line up as best as we can,
this area with that, and the split will be
| | 08:03 | hidden behind the big tuft
of the forelock. Here we go.
| | 08:12 | So that's first part of the turn done.
| | 08:14 | Now I think we can push this quite a
bit further, but for now I just want
| | 08:19 | to get us to a place where we were
reasonably happy with it and that's the
| | 08:23 | turn, snaps into this.
| | 08:24 | Now what we want to do is to complete
the turn, basically have a mirror image of
| | 08:29 | these frames on this side.
| | 08:31 | So whereas here we were moving from the
facing far screen left to look into the middle,
| | 08:37 | jere I want to begin the character
with his nose somewhere around here.
| | 08:41 | I will move him into this position.
| | 08:42 | So what I am going to do is keyframe
here and do the opposite, try to pull these
| | 08:47 | frames back into the center here.
| | 08:50 | So there is a couple of ways we can
try to shortcut it. I could try to copy
| | 08:54 | these keys to this and just flip
in horizontally. That might work.
| | 08:58 | I will try it and see what happens, no
guarantees. Sometimes worth trying these.
| | 09:30 | Hey, how about that?
| | 09:32 | So we can also make this a bit
smoother by repositioning this slightly.
| | 09:37 | There is a center of mass pop here.
| | 09:39 | So I am going to see if I can help
that by moving the entire stack over by
| | 09:45 | Shift+Clicking and moving the numeric keypad.
| | 09:47 | It's a bit smoother.
| | 09:49 | Don't forget too, this entire
movement that you are seeing here,
| | 09:52 | it's all going to be moving
anyway on the outer clip here, so let's see
| | 09:57 | what that looks like in place.
| | 10:04 | Nicer, it's really helped to smooth that out.
| | 10:11 | There is one more thing I want to do.
| | 10:13 | You may remember, I made that click
and dirty copy of frames from this side
| | 10:17 | to that side, which means all these frame
numbers on the stack will be the wrong number.
| | 10:22 | We are on frame 16, you can see here,
and if you click on any of these symbols
| | 10:28 | you'll see its frame 15, because I
copied it from frame 15 stack.
| | 10:32 | So you must not forget to correct
that number and that's really going to be
| | 10:38 | something you worry about on any
graphical symbols or comps that are going to be
| | 10:42 | animated internally, and that
means the two eyes and the mouth.
| | 10:47 | If you don't correct these then
what will happen is if you do internal
| | 10:51 | animations inside these, for example
timing the eye blinks, they will occur one
| | 10:56 | frame too late or one frame
too early at the wrong point.
| | 11:00 | And if you begin copying these stacks
and moving them around dramatically, you
| | 11:03 | can have some extremely inaccurate performances.
| | 11:09 | So that's our first pass over the head
and I think we can save it at this point.
| | 11:15 | We can make further passes that will
fine-tune the animation of the head.
| | 11:19 | And then we will add eye blinks and
tilts to the head animation and that will
| | 11:24 | add another layer of
believability to the animation.
| | Collapse this transcript |
| Adding finesse to the head turn| 00:00 | Let's get started and we're
going to finish this head turn.
| | 00:04 | So if you go into your exercise folder,
Chapter 4 - head turn, and it's file number 07.
| | 00:09 | And let's double-click on our guy on
the stage and let's get rid of those
| | 00:14 | thumbnails. I don't want
to look at them anymore.
| | 00:16 | So we're going to add some
finesse to the head turn.
| | 00:20 | So let's look at what we've got.
| | 00:23 | So first thing that comes out,
the character starts to look from left to right.
| | 00:26 | He really should blink on the
down point, so let's do that.
| | 00:29 | That's an easy one to add.
| | 00:31 | So don't forget we have
the little nose at the top.
| | 00:37 | That will help us position the blink.
| | 00:39 | I'll double-click on the eye.
| | 00:41 | Now as you can see we already have the
blink in there, just on the wrong frame.
| | 00:45 | So let's grab this, hold down the Alt+
Opt key, just drag the entire blink over
| | 00:51 | by one frame, and let go.
| | 00:53 | And then we can just drag this over
to where you'd like the closed eye to be.
| | 00:57 | And I like to get rid of
the tween at the beginning.
| | 01:00 | I don't need that in there.
| | 01:01 | This is our blink for open, close,
to open, so that should work.
| | 01:05 | That should repeat that on
the other eye, same process.
| | 01:17 | So here we go, and that'll look even
better in context on the outer clip.
| | 01:26 | Great! Other things we can do just to help
to fine-tune this is add a little bit of
| | 01:31 | tilt information to the head,. So
for example, in this down position and
| | 01:36 | actually here is a good point. We can push this
a little more, just a bit more, not too crazy.
| | 01:42 | Let's un-padlock all these,
and the same thing on this one.
| | 01:53 | Trying to make that transition as
smooth as we can. That's the tricky one.
| | 01:58 | But it's moving into this down-
tilted the head position to this one.
| | 02:03 | So let's click on that head and I'm
going to use frameEDIT in, and that's --
| | 02:10 | remember that is kind of moving down a bit.
| | 02:12 | So let's move some of his body
parts down and his face parts.
| | 02:23 | You'll be surprised by how subtle the
overall effect will be and hopefully
| | 02:27 | it'll help save this from the awful
Flash-y effect that we're just snapping the
| | 02:33 | head from one side to the other.
| | 02:35 | Don't forget, these eyebrows can be shape
tweened, and the more we can push them the better.
| | 02:44 | People I think don't really expect to see
aggressive shape tweening on this kind of animation.
| | 02:48 | And don't forget, this point
here it's actually the forehead.
| | 02:51 | That's where the joint happens to the
eyebrow, so that will really be important.
| | 02:56 | That looks great, so there we go.
| | 02:58 | I'm going to skew this a little bit, and can't
really go too crazy with it, but there we go.
| | 03:04 | So try to stay on model.
| | 03:08 | That's your big problem here.
| | 03:09 | Keeping these characters on model.
| | 03:11 | So push them as far as you can,
without making them look like somebody else.
| | 03:14 | Bringing this hair down.
| | 03:15 | It's kind of important too.
Or selling this drop.
| | 03:19 | As you can see now this
ghastly gap has been opened up.
| | 03:23 | Working with this hair mask as a symbol,
I think it's going to cause us problems.
| | 03:27 | So what I am going to do is break it
apart and shape tween it instead. So let's
| | 03:30 | hide that here so we can see the
issue that we've got to worry about.
| | 03:35 | So I'm going to break the first one
apart, and that's Ctrl+B. As you can see
| | 03:41 | it's gone live now. Same there.
| | 03:43 | Now we see these little
black dots. That's Flash saying,
| | 03:45 | "Oops, something wrong."
| | 03:46 | So let's remove the tween.
| | 03:48 | That making a shape tween and then
there is a solid arrow, so we're good.
| | 03:53 | So the down position for the
upper hair will be more like this.
| | 03:57 | So let's pull this down and let's go
into outline, so we can grab our points a
| | 04:08 | little more effectively. See if that works.
| | 04:10 | That is beautiful, look at that.
| | 04:11 | Let's see the same for the other side.
| | 04:20 | And again the familiar black dots, so
remove that bad tween and insert a shape tween,
| | 04:25 | and then we bring
that down, join that point.
| | 04:32 | Make sure these two are snapped together.
| | 04:36 | And let's go solid on that
again and make that solid again.
| | 04:41 | And often, too, wiggly is happening.
| | 04:43 | That's nice, so let's
check the first part of that.
| | 04:49 | That's much better, pop to here.
| | 04:52 | So the same thing here,
very important this one too.
| | 04:55 | That's the head tilted down.
| | 04:59 | And I'm using again the
Shift and the Arrow keys.
| | 05:10 | It looks almost funky, but you often could
be amazed when you see how difficult it
| | 05:15 | is to notice how broad this
motion is on the outer symbol.
| | 05:19 | Let me bring the chin in a little bit,
and again don't forget this point here
| | 05:27 | is connecting to the eyebrow.
| | 05:28 | Make sure that works.
The in-between is great. Nice!
| | 05:40 | Okay, it looks like a huge
forward here. Let's get rid of that.
| | 05:44 | So we'll go to outline on this
upper one, and we also break apart this
| | 05:49 | symbol and this symbol.
| | 05:50 | They're both correct.
| | 05:52 | And the others too, here and here. Let's
remove that bad tween and make it a shape tween.
| | 06:01 | So on that down position here, I'm
going to actually take the forelock and pull
| | 06:08 | this one down quite a bit.
| | 06:10 | Again, see how much we think we can cheat,
lock that again, and then let's start
| | 06:16 | pulling the hairline.
| | 06:19 | And now I want to go into
outline to select this point here.
| | 06:29 | Oops, let's take Snap off.
| | 06:31 | It's being unruley again.
| | 06:32 | Okay, see if that works, great.
| | 06:37 | No need to shape tween anything.
| | 06:39 | That's always a bonus.
| | 06:41 | So now we are going to go
into the outer turn. Great!
| | 06:47 | There is one last little detail we can add.
| | 06:48 | I think that will help. We're going
onto a down position on the head here,
| | 06:53 | snapped to here and up.
| | 06:54 | But on here I'm going to actually
push this up pose a little more.
| | 06:58 | You can see from here to here it's not
really changing very much, so I'm going
| | 07:01 | to take that head, just tilt it a little bit.
| | 07:05 | Free Transform, it's great
little tool. frameEDIT into this.
| | 07:09 | This should be our up point and that will
be the tilt that we want to face to be up.
| | 07:13 | So that's keyframe, because our end
position, this is really our end position.
| | 07:17 | So let's go into here.
| | 07:19 | I'm going to tilt up.
| | 07:22 | Mostly the near eye, I think maybe.
| | 07:31 | Everything you do to help sell
the range of motion. I'm going to
| | 07:34 | bring that nose up a bit.
| | 07:37 | And oops, I've locked that forelock
and I'm going to push that up as well.
| | 07:50 | Again Free Transforming all the way,
and let's bring those eyebrows up on the inside.
| | 07:58 | And also this line here join to there.
| | 08:03 | And make sure everything is shape
tweening. This is the one where you might
| | 08:05 | have problems, but no.
| | 08:06 | I'm getting tired of using keys
through this Insert, so as you saw in the
| | 08:10 | earlier class we created our own tweens and
you can continue to use these if you prefer.
| | 08:15 | But I'm going to use these commands,
which I have mapped to the numeric
| | 08:18 | keypad, so let's do that.
| | 08:21 | That's tween out 50, shape tween,
motion tween and shape tween. As you can
| | 08:26 | see this is faster.
| | 08:29 | Let's see what that looks like.
| | 08:37 | Now it's especially going to slow
and we're really starting to feel that.
| | 08:41 | One final detail, is I really
want people to notice those eyebrows.
| | 08:47 | This is the high point of the eyebrows.
| | 08:49 | Let's see if we can just
yank them up a little. Nice!
| | 08:52 | Giving a little change of
expression, just a little reaction like, oh, what's that?
| | 09:08 | That's great.
| | 09:14 | And you can push this further.
Don't by any stretch think
| | 09:17 | this is as far as you can go with this,
and I'd advise you to play with it and see
| | 09:21 | how far you can take it, but that's as
far as I can take it, time permitting.
| | 09:25 | In the next chapter we'll take these
very same principles and we're going to
| | 09:29 | apply them to a walk cycle.
| | 09:30 | I'll show you how to do that in Chapter 5.
| | Collapse this transcript |
|
|
5. Animating a Walk Across the ScreenIntroducing the walk| 00:00 | So, now we're going to do the profile
walk cycle and before we begin that, I'm
| | 00:04 | going to show you exactly what it is that
we're going to be attempting. So, there we go.
| | 00:09 | This is the walk that we're going to
replicate during this chapter and as you
| | 00:12 | can see, we have some really nice
squishing going on, especially on the feet;
| | 00:16 | I'm happy with them.
| | 00:17 | That's a really nice example of a
shape tweened animation nested inside a
| | 00:21 | motion tween symbol.
| | 00:22 | Same with the legs.
| | 00:24 | It's also happening in a much
more subtle level on the arms.
| | 00:26 | If you look at the head, we have the
nested animation on the head, which allows
| | 00:31 | us to move the hair.
| | 00:32 | The forelock is dragging and
overlapping nicely and there is a little bit
| | 00:36 | of wind resistance.
| | 00:38 | So this is our walk and this will be the
profile position that we're going to be working from.
| | 00:43 | So, before we can proceed, we have to
take our existing three-quarters rig and
| | 00:48 | adapt it into this profile pose, so
that we can work from it. So that's it.
| | 00:52 | So, if we go into the Exercise
Files folder and click on your
| | 00:56 | character_rig_profile_01 file,
and here is our three-quarters chap.
| | 01:00 | We're going to turn him into a
profile position and we can now move onto that step.
| | Collapse this transcript |
| Creating a profile view| 00:00 | Let's continue and move
on to doing the walk cycle.
| | 00:05 | Now, we go to the Exercise Files,
Chapter 5, walk across screen folder, and
| | 00:08 | inside here we have our
character_rig_profile_01 file.
| | 00:11 | Let's open that and here we go.
| | 00:13 | So, one issue that we need to deal
with is the fact that we're working in
| | 00:17 | three-quarters and we really
should be working in profile.
| | 00:19 | Profiles will be much better for
beginning our first walk cycle.
| | 00:23 | What I'm going to do is create a
profile rig that we can work from.
| | 00:26 | So let's go select our bd file. I'm going to
duplicate i, and I'm going to call it profile.
| | 00:34 | So let's go into that and there we go.
| | 00:37 | I'm going to make a new layer for our
familiar reference image that we used in
| | 00:45 | the previous rigging chapter.
| | 00:48 | So, this should look strangely familiar.
| | 00:50 | So let's make our upper layer
outline and line up the three-quarters view
| | 00:55 | with our character.
| | 00:57 | That's good, right alined.
| | 00:59 | So, what we're going to do is change
this into this and I think you'll be
| | 01:03 | surprised by how quickly this procedure can go.
| | 01:06 | I mentioned earlier that the best way to
rig a character is to do it in an ideal
| | 01:11 | world with lots of time.
| | 01:12 | You don't always have time. Do it in
the front view and then you can twist and
| | 01:16 | deform these front view assets
into your three-quarters in profile.
| | 01:19 | It's also easy to go from three-
quarters directly into profile view.
| | 01:23 | So let's do that and we'll see how it works.
| | 01:24 | So, I'm going to break apart, Ctrl+B,
break apart the reference layer and then
| | 01:29 | delete all the crude and get rid
of that, and all the little bits.
| | 01:35 | So that's getting close, here we go.
| | 01:37 | So, padlock the reference
layer and hide everything.
| | 01:41 | We're going to go through this bit by bit.
| | 01:43 | So let's start with the right foot.
| | 01:45 | So, we'll go in tight and
let's just move it into position.
| | 01:52 | Let's pick the heel and the ankle
joint as our constant positions.
| | 01:57 | Now let's double-click.
| | 01:58 | You can tell obviously it's
not quite matching that layout.
| | 02:02 | So, let's go into outline mode.
| | 02:04 | I'm going to make a second
keyframe here, hit F6, and let's hit the
| | 02:09 | Free Transform button.
| | 02:11 | Down here at the bottom, you'll see
the Distort widget and click that and this
| | 02:15 | allows us to go crazy.
| | 02:17 | So, let's distort the foot and just try
to line up the front of the toe to that,
| | 02:22 | and do as much as you can
within this and then let go.
| | 02:26 | So, I'm going to change the
outline color to something a bit darker,
| | 02:29 | because it's hard to see.
| | 02:30 | So let's go to dark green
and let's start pulling.
| | 02:34 | I've been harping on about keeping the
geometry clean and simple and here is why.
| | 02:40 | It's because it's much easier to do
this kind of transformation when you only
| | 02:44 | have the smallest number of points
making up your symbol. So, there we go.
| | 02:52 | That's one of the realities of Flash,
that as you work and especially you notice
| | 02:55 | as we used the Distort tool, it
actually did generate some extra points.
| | 02:59 | So, you may end up later on
| | 03:00 | there's one or two there, and there's
an extra one here that we don't need.
| | 03:05 | But that's possible to ignore this for
now, but later on if you feel that you
| | 03:09 | need to clean this up, you can
certainly take this as reference and redraw it.
| | 03:13 | But for now, this is more than enough.
| | 03:15 | So, we go back to the main layer.
| | 03:20 | The reason why you're still seeing
the wrong foot is because the Properties
| | 03:23 | panel is telling that you are number 1.
| | 03:26 | So let's go and tell it no, you're frame
number 2, and set this to Single Frame,
| | 03:31 | so it doesn't loop back and forth.
| | 03:33 | Unfortunately, Flash seems to like, as
a default, setting everything to Loop
| | 03:37 | and I wish it didn't.
| | 03:38 | It will be much nicer if it just
give us the option of a default.
| | 03:42 | So, here is the blue foot and the same
process here, make it Single Frame, frame 2,
| | 03:47 | and that's now our profile foot.
| | 03:51 | That's that part on.
| | 03:53 | Let's reactivate the right
foot and let's look at the right leg.
| | 03:57 | Okay, and now Shift and the numeric
arrow keys just to move it around in big
| | 04:01 | chunks, Free Transform, hitting Q on the
keyboard to skew the leg into position,
| | 04:08 | and we'll repeat the process with the Left leg.
| | 04:10 | We'll see how quick we were
already moving through this thing.
| | 04:19 | The torso, I'm working from foot to up.
| | 04:21 | They're already working and could vary
from model to model and whatever psuits you
| | 04:25 | as being the quickest and most efficient.
| | 04:27 | It's nice being able to reuse the same
symbols because it makes tweening between
| | 04:31 | one angle and another much easier
when you get into more advanced scenes.
| | 04:35 | Let's do the torso, torso upper.
| | 04:41 | So we get it as close as we can.
| | 04:43 | This, obviously it's too thick at the top,
so we're going to have to modify this
| | 04:46 | one as well. Double-click on that.
We'll make a second keyframe here.
| | 04:51 | Let's go into outline and just pull that in.
| | 05:01 | Don't forget, Single Frame in the Properties
panel. You're now frame number 2, and lock it.
| | 05:08 | The reason why I like to go through this
methodically and lock things, I can tell at a
| | 05:11 | glance from the other side of
the room, okay half of them done.
| | 05:13 | So that gives you a good idea about your
progress and how much is actually left.
| | 05:18 | So, here is the arm.
| | 05:19 | Now, a couple of ways we can handle this.
We can keep the arm in this vertical
| | 05:23 | position and shift the entire frame 2
into this position, or we can try to
| | 05:28 | rotate it, but there's pros and cons of each.
| | 05:34 | In this case, let's just see if we can
get there by keeping the motion tweening
| | 05:38 | more responsible for it than the shape tweening.
| | 05:42 | So, obviously there is
still a little defect here.
| | 05:44 | So, click in. Make a second frame.
| | 05:47 | Don't forget Layer 2
down there is our wrist area.
| | 05:51 | So, just lock that, don't mess with that.
| | 05:56 | And then, just reposition the arm layer
and again, the default random color
| | 06:00 | that Flash gave us is kind of nasty.
| | 06:02 | So, let's make it dark
green. That's much nicer.
| | 06:05 | Great!
| | 06:06 | So, again, you find that's
the same thing over and over.
| | 06:10 | At least it's consistent.
| | 06:14 | Let's see the arm right hand,
and this is going to be separate.
| | 06:18 | So that we'll have to worry about later.
| | 06:20 | So, hand redraw, I'm going to cover that
in a separate lesson, because I want to
| | 06:25 | show you how to make the hand a series
of separate layers for the fingers and
| | 06:30 | the thumbs and that'll allow
you to do some very cool things.
| | 06:34 | So, you've got that for now and the
neck with the torso, this is a simple one.
| | 06:38 | Bit of scaling perhaps,
and a slight skew. Good!
| | 06:46 | The left arm, the hand should go together.
| | 06:49 | Let's Shift+click and select both of
them and we'll just bring them inside,
| | 06:56 | maybe rotate them a little bit, kind of
just hide them as best we can behind the body.
| | 07:01 | Okay, you got for now, padlock it
again, and the lower level for the hair.
| | 07:11 | We'll just stick that there for now.
| | 07:13 | So let's look at this in color.
| | 07:14 | This is kind of the acid test, looking at
the stuff in color. Mistakes will pop out.
| | 07:19 | So, as you can see, the layer
hierarchy of the profile, these are a little
| | 07:23 | different from the three-quarters.
| | 07:23 | We've got the hand on the wrong layer now.
| | 07:25 | So, simple enough. Let's grab the left
hand and drag that down to the bottom,
| | 07:30 | and the left arm, arm left,
that should go just above it.
| | 07:33 | Let's hide that layer for a second,
the reference layer, and you can see that
| | 07:38 | we're having a hard time telling the
difference between that right leg and the
| | 07:42 | left leg and the foot.
| | 07:43 | So, I'm going to select those two
layers, and in the Properties panel, make
| | 07:46 | their Brightness lower, maybe 9%, 10%;
| | 07:50 | Not much. Just enough to give
this a bit of a color definition.
| | 07:54 | And I think that pretty much covers the
rigging of the body in the profile position.
| | 07:59 | If you see the head, clearly
the head's in the three-quarters.
| | 08:05 | So, we can now proceed to, in the next
section, I'm going to go into the head layer,
| | 08:11 | and you can see-- also do
notice how the three-quarters head looks
| | 08:13 | beautifully over the
profile body and vice versa.
| | 08:17 | So you want these symbols to be interchangeable.
| | 08:19 | That'll really really help you when you
start doing more advanced acting scenes and such.
| | 08:24 | Let's save this and we'll move on
and we'll do the head in the next one.
| | Collapse this transcript |
| Creating the head in profile| 00:00 | So let's finish off our profile rig
and at that point we will be able to move on
| | 00:05 | and animate the walk.
| | 00:07 | So they character_rig_profile_2 open that.
| | 00:11 | Here we go. We have got the body and profile.
Let's finish the thing and do the head.
| | 00:16 | So let's double-click on bd profile
and just as we made a duplicate of our
| | 00:22 | three-quarter rig to create our profile,
we will do the same thing with the head.
| | 00:25 | So let's click on the head in the bd
profile symbol and duplicate it and we're
| | 00:31 | going to call head profile.
| | 00:35 | So let's activate the reference image beneath.
| | 00:39 | I'm going to hide all the body
layers make it easier to see and let's
| | 00:42 | double-click on the head
and start working on it.
| | 00:46 | So let's begin. There's a big layer at the top.
| | 00:49 | We don't need that purple thing.
| | 00:50 | It's empty. Get rid of it.
| | 00:52 | So the hair upper layer is a good
one to start. Let's zoom in tight.
| | 00:56 | And go into Outline mode and
usually working around the pivot is good.
| | 01:02 | So Shift and numeric arrows so we can
click that over to here and I'm going just
| | 01:07 | go directly in and do the rest of
the work by just pushing the points.
| | 01:12 | So let's make second keyframe, hit F6, grab
the point to the hair, pull it over to match.
| | 01:17 | And just yank the other points over,
until you get a fresh forelock for the character.
| | 01:40 | Great! So same as ever. We need to reset the
Properties panel to Single Frame, frame
| | 01:46 | number 2, so that we call the right symbol.
| | 01:50 | So let's move down the
stack. We will padlock that icon.
| | 01:52 | We're on the earmark this one. Should
be simple enough. Shift and numeric click
| | 01:58 | over and then Free Transform. You'll
find we're using the same small set of
| | 02:05 | tools over and over again, which
makes this easier to pick up and learn.
| | 02:10 | It's not like 3-D where you have to
learn dozens of different elements.
| | 02:14 | So I'm going to do the same thing with
this hair. I'm going to make a second
| | 02:17 | keyframe, F6, and pull this points to
match the original. This hair is going to go
| | 02:23 | beaneath the ear levels so
I want to give it the room.
| | 02:25 | So maybe draw through a bit,
match that point closely to there.
| | 02:31 | I think on this one, because the profile,
the layer structure's slightly different,
| | 02:34 | I think we can actually create draw
right through. I think this will work.
| | 02:38 | If you can remember on three quarters
view this part of the hair had to go in a
| | 02:46 | completely different layer outside the
head because it was beneath the neck but
| | 02:50 | in this case it's above the neck.
| | 02:52 | So we don't have to worry about that.
We can actually keep it inside here.
| | 02:56 | So let's do the same thing as ever.
I will make it number two, make it Single
| | 03:00 | Frame because we don't want
the timeline looping through.
| | 03:03 | So let's move that to
outline and we will keep going.
| | 03:07 | So the beauty of this again you notice
these points, which are connecting to one
| | 03:10 | another, we don't have to change them.
| | 03:13 | So I'm going to go to outline here and
change this hair to match the one beneath
| | 03:20 | and see if we can get this to roughly
line up with the line of the skull.
| | 03:27 | Because you can imagine what's
going to happen when you begin animating
| | 03:31 | and this hair flaps up. We want
to be able to see hair beneath it.
| | 03:35 | So you have to try to think ahead of
the range of motion of the different
| | 03:40 | symbols and comps are
going to be. Lock that.
| | 03:45 | I don't think we need this one anymore.
We would need it in three quarters view,
| | 03:49 | but really it's on the wrong side of the
head right now so I'm just going to delete that.
| | 03:53 | I want to leave that level there, even
though it's empty, and you make it easier
| | 03:58 | if we have the same number of levels on
the profile and three-quarters view, if
| | 04:03 | we want to try to tween between one
of the other, which we maybe want to do.
| | 04:06 | So let's do the right eye. Move that over.
Again we want to be pretty close for this.
| | 04:13 | Always be very careful when
you're working with the eye. Okay.
| | 04:21 | So I want to duplicate this eye
because that's the three quarters one.
| | 04:25 | I'm going to make one specially for
this profile and I want to use the Free
| | 04:32 | Transform tool to get as close as we
can and go in, and the pupil is the one that's
| | 04:40 | really standing out as looking not quite right,
so let's do that and see what that looks like.
| | 04:46 | When we go back out, that's better.
We might even give it a fresh pupil there
| | 04:53 | with the black layer and the white and blue
all on different layers. We can easily do that too.
| | 04:58 | So but for now I think it looks pretty good.
| | 05:01 | The nose, again I'm just moving things
horizontally. I am not doing anything too drastic.
| | 05:10 | That's great, the eyebrow. Now here is
the thing. The eyebrow in theory we
| | 05:16 | should really just not have been able
to see much, but I think it's important
| | 05:20 | that there should be some little hint.
| | 05:22 | So I'm going to carve this and
just move it there, just so we see the
| | 05:29 | slightest little outline, just a hint,
that we would not in a pure three quarters view,
| | 05:36 | which can look very flat.
It's a big danger with an absolute flat-on
| | 05:40 | three-quarters view, so it's sometime
just a slightest hint that we are already--
| | 05:44 | The head is just tilted
towards us by a couple of degrees.
| | 05:49 | And now the far eye, I don't see anyway
that we can elegantly incorporate this eye
| | 05:56 | without it looking weird, like a tiny while slice.
| | 06:01 | But what I'm going to do is leave it on
the rig here and that will guide it out.
| | 06:08 | So it'll be there if it's ever needed.
| | 06:10 | If we have to rotate this head towards
us, it's nice to have the symbol there
| | 06:14 | on its right layer.
| | 06:15 | So let's right-click on the eye
layer and go Guide. Let's guide it out.
| | 06:19 | So you won't see, it wont export, but
its there and it's accessible, like I said.
| | 06:23 | If we ever want to rotate the head
to the screen left, you have access to it.
| | 06:27 | You won't be hunting it down in the
library, which is a really dismal thing to have to do.
| | 06:32 | So let's get the jaw, fix this, and as
you can see the jawline really should be
| | 06:38 | going up to the ear, so let's try
to make this as close to anatomically
| | 06:42 | accurate as we can, okay.
| | 06:47 | Now the one thing that you're really going
to notice is that the profile mouth is a
| | 06:50 | different animal completely from the
recorders mouth, so we're probably going have
| | 06:54 | to make a new one of those things.
| | 06:56 | So let's make sure the
skull level is lined up with the jaw.
| | 07:00 | That looks good. A slight tweak
here on the upper level of the skull.
| | 07:06 | Now you can see me flying through this.
Feel free please to take your time. I mean I
| | 07:11 | have done hundreds of these, but the
basic principles are pretty simple.
| | 07:16 | Once you get into the habit you start
throwing the stuff around like it's confetti.
| | 07:20 | We do one and the principles are
applicable to most of the things you will work on.
| | 07:28 | So now I just take the mouth and the
three-quarters mouth is, you see, it's not
| | 07:34 | going to work here. So what I'm going
to do to rig a mouth on this is a totally
| | 07:39 | different architecture and really it's
a little bit beyond the scope. It would
| | 07:43 | involve cutting a hole in the jaw area
here and it's an angle that you really
| | 07:48 | don't actually talk from very much to
be honest. Most of the dialogue will come
| | 07:53 | from the three-quarter front position
even, but if you did, you are into more or
| | 07:56 | less do the same process that you did
in the three-quarters mouth, which you
| | 08:00 | have curve a hole through here and paint
this out and shape between the entire jaw area.
| | 08:06 | It still uses the same principles
that we have already applied, but it's
| | 08:09 | something for another day and another course.
| | 08:13 | So for now, instead of doing that, I'm
going to simply take this mouth and just
| | 08:17 | create a static mouth that will look
just like this, but it won't have this area
| | 08:23 | and this lip floating around in free space.
| | 08:26 | So let's select the Rectangle tool.
I'm going to pull it over the area that I
| | 08:33 | want to cover, and add a curve there,
Alt/Option to pull this in here. That's the
| | 08:44 | quickest way to make this particular
shape inside the mark beneath and I see all
| | 08:49 | the colors as well.
Let's paint that. Great.
| | 08:52 | Double click on the line, Ctrl+X
to delete it. Nice. There we go.
| | 09:02 | So let's pick the old mouth, Ctrl+X,
get rid of that, pick the new one,
| | 09:07 | drag-and-drop it in, delete the temporary
layer, and there we go. He looks friendly.
| | 09:14 | So let's see if the rest of the body
looks fine. The one thing that jumps out?
| | 09:19 | The old tuft of hair that I mentioned
earlier. We don't need that any more.
| | 09:23 | I still leave the layer in.
| | 09:25 | It's not be taking up much space. I think
we can probably loose the guide layer now.
| | 09:32 | The only thing we might need for
later will be this hand. I'm going to leave
| | 09:35 | it for now, but I might remove it
later. I'm not 100% sure on that here.
| | 09:39 | We can walk with this hand. I would
like to show about some point how to
| | 09:44 | customize these hands. That's a separate lesson.
| | 09:47 | I would like to be able to split these
fingers off and move them separately.
| | 09:50 | That would be the nice. It's a subtle detail.
| | 09:52 | But for now we are more than capable
of getting on with this rig here.
| | 09:55 | So we'll save this, call
it number 3, and we are done.
| | 10:04 | Next we'll move on to fine-tuning
the hands detail and then the walk.
| | Collapse this transcript |
| Creating the hand| 00:00 | So it's time to take our hand and
correct the three-quarters hand that we
| | 00:05 | created and turn it into the profile hand.
| | 00:07 | So let's open our file, character_rig_03.
| | 00:11 | That's where we left this thing off.
| | 00:14 | So let's just move out a bit first and
let's delete the body profile and we'll
| | 00:18 | hide everything except the
reference image and the hand image.
| | 00:26 | So, let's fine-tune this a little bit,
because as we were throwing down the
| | 00:29 | symbols when we were rigging the
body, things were a little loose.
| | 00:31 | So, what I want to do is
just firm it up a little.
| | 00:34 | This is going to be our pivot point
that the hand's going to move around.
| | 00:37 | So let's just make sure that we have
our three-quarters hand in the same
| | 00:40 | position, and let's have a look at
the right arm and I want to make that a
| | 00:45 | little more precise as well.
| | 00:46 | So this area of the wrist should
align with this little crosshair.
| | 00:50 | So, using the Free Transform tool we'll
rotate the hand, and as you can see the
| | 00:55 | upper arm now isn't quite matching.
| | 00:57 | Let's look at this thing and color
this thing. So it's a little off.
| | 01:01 | So let's correct that.
| | 01:03 | Here's something to remember from
the previous. You may have forgotten.
| | 01:06 | When we created the profile symbols,
we did so by adding a second frame.
| | 01:11 | So the first frame that you're looking at now,
| | 01:13 | that's the three-quarter hand
position, and frame two on the comp or the
| | 01:18 | internal arm symbol,
that's the profile position.
| | 01:22 | You can check this in the Properties
panel under the Looping Options. So we
| | 01:26 | have our arm set to Single Frame and
we're looking at frame 2 of the arm symbol.
| | 01:32 | So, if you double-click on
that, you'll default to frame 1.
| | 01:35 | So be sure you're on the right frame,
you're on frame 2, and if you do your work
| | 01:38 | in here you'll start creating problems.
| | 01:42 | So, the thing to do now
would be just to fine-tune.
| | 01:45 | Now we've rotated the outer symbol, so
I'd like to be a little picky about this
| | 01:48 | and make our arm match as close as we can.
| | 01:51 | That's pretty sharp.
| | 01:52 | So, let's go back out and I
want to look at this in color again.
| | 01:57 | We've made some changes to the
cuff and that's already affected.
| | 02:01 | That's opened up a possible problem area here.
| | 02:04 | So let's move the cuff down slightly,
and we have our wrists on the lower layer.
| | 02:09 | So one thing I want to do with
that is just pull it up a little bit.
| | 02:12 | Give ourselves a bit of a safe area.
| | 02:14 | Now, we've also got a little piece of
gap opening here, but again this is the
| | 02:21 | three-quarters hand.
| | 02:22 | But nevertheless, it might be a good idea
to maybe round out the wrist a little better.
| | 02:27 | Let me move the hand up slightly and
again this isn't the hand that'll work
| | 02:36 | with this particular frame.
| | 02:37 | So, I think we can tunnel into the
hand and we're going to create an empty
| | 02:41 | second frame, and we're going to make
new hand layers that look like this, on
| | 02:46 | top of this reference area.
| | 02:47 | So let's make some layers.
| | 02:48 | We could do it all on one layer, but I'm
going to be a little more advanced with
| | 02:52 | this one and create
different layers for the finger.
| | 02:55 | So we can then, later on,
we can animate these fingers.
| | 02:58 | So, I think we need about five layers for this.
| | 03:00 | I'm going to work on them directly
over the original hand layer for now.
| | 03:04 | So we'll need a layer over
the palm. That's this area.
| | 03:07 | Let's hide the green.
| | 03:08 | So we'll need the palm
area and four for the fingers.
| | 03:11 | So the top layer will be this,
the pinky, that little finger.
| | 03:15 | Label the fingers with thumb,
finger one, two and three.
| | 03:17 | It's easier to call them by numbers I think.
| | 03:20 | I'm going to call the pinky finger 3,
the middle finger will be finger 2, and
| | 03:25 | the index finger is finger 1.
| | 03:28 | Then beneath them will be the palm.
| | 03:29 | I call it the palm rather than the hand,
or I can call it the body of the hand,
| | 03:34 | but palm is I think the
least confusing. And then thumb.
| | 03:37 | The other thing we can probably do is
correct some of these color outlines.
| | 03:42 | Just pick some nice colors from the top
line of the new color palette.
| | 03:52 | Something reasonably dark and strong that'll
stand out from the white background.
| | 03:55 | As long as they're all different then
you'll be able to see at a glance that
| | 04:03 | you're working on
different layers. These are good.
| | 04:05 | So, at this point, I'd like to work in
Outline mode and the other thing to do,
| | 04:10 | since we're working like this, let's
just make sure that we use the Eyedropper
| | 04:13 | tool and select the skin color and
that'll activate in the color area.
| | 04:18 | That way as we begin to create the
shapes, we'll be working the right color.
| | 04:22 | It'll save us a step.
| | 04:23 | So let's select the Rectangle tool,
and let's begin in the palm area.
| | 04:27 | Of course, don't forget too that
the Rectangle tool creates a line.
| | 04:33 | So I'm going to Ctrl+X and get rid of that.
| | 04:35 | So, let's move this into position,
snap on, so that we snap to this point and
| | 04:40 | then back off again.
| | 04:41 | We can hide that, the green layer.
| | 04:48 | That's a little, the nice arc, okay.
| | 04:53 | Okay, that's the palm area done.
| | 04:55 | Let's do the thumb.
| | 04:56 | Again, I'm going to use the Rectangle tool
for this and double-click on that line, get rid of it.
| | 05:15 | Great! So we padlock them as we do them.
| | 05:18 | Finger one, we'll start working on the
lower one, work our way oup. Again Snap on
| | 05:24 | because I want to snap to
this point, back off again.
| | 05:36 | Get rid of that line again.
| | 05:38 | Just double-click around the line area,
and Ctrl+C, Ctrl+V, and just take the
| | 05:45 | duplicate finger and just again
match it to the lower one. Oops!
| | 05:49 | We lost a point there. Bring that back.
| | 05:52 | Keep hitting Undo if that happens.
| | 05:54 | I've said before Flash likes to combine
your points and that's the kind of crazy
| | 05:59 | stuff that can happen as a result.
| | 06:01 | Again we'll copy that and paste into
the final layer and again I want this
| | 06:06 | to snap to this point.
| | 06:07 | So put Snap to Objects on, then back off again.
| | 06:10 | I'm going to Free Transform this one to
scale it in a bit, and now start pulling
| | 06:15 | the points in again.
| | 06:16 | We have a little bit of an overlap
here for the middle finger is going to be
| | 06:21 | seen on top of the small one. Don't forget.
| | 06:24 | It's all on layers.
| | 06:24 | So, we would like the layers to be
correctly structured, so that one won't be
| | 06:30 | visible on top of the other. Great!
| | 06:31 | So now, if you look at this in Color
mode, you see the immediate problem. All the
| | 06:38 | fingers are the same color.
| | 06:39 | So they all blend into one homogenous area.
| | 06:42 | So, in the next section, what we're
going to do is add some little highlights
| | 06:45 | and shadow areas, so that we can
differentiate these different forms.
| | 06:48 | Then we'll symbolize and pivot the
different fingers so that you can motion
| | 06:52 | tween them and create some
animations on the fingers to make lots of
| | 06:55 | different hand shapes.
| | Collapse this transcript |
| Creating hand symbols| 00:00 | So, we are in character_rig_profile_
04. This is where we left off from
| | 00:04 | the previous section.
| | 00:06 | So, we have our line arc created for
the hand in its profile position, and the
| | 00:11 | next step will be to help to
differentiate between these different layers.
| | 00:14 | Some of this is more easily done than
others, so the thumb for example, let's
| | 00:17 | just make sure we have
selected the right color for that.
| | 00:21 | In the Color panel, go and make sure
you have H selected and just drag the
| | 00:25 | color down and you can see you can --
you'll watch on the stage where I'm
| | 00:29 | going crazy with the color.
| | 00:30 | So, let's just bring it down to
something that's a little easier on the eye,
| | 00:34 | just by making that one
color change to the thumb.
| | 00:36 | That's the simplest way
of making this alteration.
| | 00:39 | If we can do it like this,
it's also advisable to just do it with
| | 00:43 | simple change in tone.
| | 00:46 | The next thing is how it will help
differentiate these fingers and this can be
| | 00:49 | done quite so easily because obviously
this is a continuous shape and if we
| | 00:54 | were to do that, then this
could look quite peculiar.
| | 00:58 | So, the solution here should be
to add a little highlight area.
| | 01:02 | Like imagine there is light coming
from the top-right and we are going to
| | 01:05 | see a lighter tone.
| | 01:07 | Let's start with the small finger
first, Snap on, and thenSnap off again
| | 01:17 | because I want to make a very thin,
narrow shape here and make it fine.
| | 01:22 | Let's put the color back on so
we can separate this area now.
| | 01:25 | So, I want to go back into that
original skin color, select the area that we've
| | 01:28 | just closed off, and brighten this.
| | 01:34 | Let's double-click in that
line. Ctrl+X to delete it.
| | 01:39 | Now, sometimes how readable this is
could depend on the brightness of the color
| | 01:44 | you've chosen or the size of the area.
| | 01:47 | It usually depends on the combination of two.
| | 01:49 | So, if you think it's not a strong
enough separation, you might want to punch it
| | 01:53 | up a little bit or make the space a bit bigger.
| | 01:57 | So let's go into outline on the middle finger.
| | 02:00 | We'll Snap on, same process here, and
Eyedropper to make sure we're using the
| | 02:12 | same color. Double-click on that
line, delete it, and there we are.
| | 02:18 | That's probably the simplest way of doing it.
| | 02:21 | We could also add, as we did on the
previous hand, this shadow area on this side.
| | 02:26 | I don't think it's
strictly necessary on this one.
| | 02:29 | It's a good idea to keep things as
simple as possible and not add too much
| | 02:32 | complexity if it's not required.
| | 02:33 | So, I'd be conservative with
this and just keep it like this.
| | 02:36 | I am going to drag all these keyframes of
the new hand and just drag them over by one.
| | 02:42 | Layer 1, I am just going to call hand
all to differentiate that between this.
| | 02:46 | So now, we can move from this to that.
| | 02:48 | Definitely a slight style change
because of the absence of that dark area.
| | 02:54 | So, I am actually going to add it
because that'll help keep it consistent.
| | 02:57 | Okay, just make sure we're
working in the right layer here, yeah.
| | 03:08 | And if you look in Outline mode again,
I have just a slight slippage there.
| | 03:11 | We need those points to line up properly.
| | 03:13 | Okay, so now, if we go into the
earlier frame, let's use the Eyedropper again
| | 03:21 | and select that dark area, because I want these
colors to match exactly. Hit the Fill tool.
| | 03:28 | Now, in this case we are kind of
limited by the geometry of the shape.
| | 03:31 | So I am pulling the shadow into a point here,
and we'll do the same thing on this layer.
| | 03:36 | Again, notice how I select that
layer by clicking on the outline, and you
| | 03:41 | can tell with the different layer colors
too that you're working in the correct layer.
| | 03:44 | So now let's create that line and fill this.
| | 03:52 | Now, we can do that back and forth test again.
| | 03:54 | It's a little better.
| | 03:57 | We're not seeing that kind of pop quite so bad.
| | 03:59 | I'll also add the shadow
area onto the other two fingers.
| | 04:02 | We need to hide this one first,
because we're working beneath it.
| | 04:05 | This way if and when this finger
rotates and moves, you'll be able to see
| | 04:09 | that color area beneath.
| | 04:10 | I am now going to add it in here
too, outer lining, the outlining.
| | 04:20 | Again, see the advantage of working in
your own outline colors, because you can
| | 04:24 | tell at a glance which level
you're working on. So, there we go.
| | 04:28 | Again, don't forget.
Get rid of these lines.
| | 04:29 | Just click and remove the lines
that you've created the spaces with.
| | 04:34 | It's looking better.
| | 04:35 | It's stronger to have the dark on one side
and light on the other, and now we go back.
| | 04:40 | Okay, that's not going to catch the eye. Good!
| | 04:43 | Now that we have lined the shadows of
the different layers, we will now pivot
| | 04:47 | the areas of the symbols.
| | 04:54 | One important aspect of this is to
name it so that it lives in the right
| | 04:58 | area in your Library.
| | 04:59 | So let's call it arm
right and it'll be finger 3.
| | 05:02 | So, F8, arm right hand will be better.
| | 05:09 | Now, when we drag that into the
correct part, you'll see that's really nice.
| | 05:13 | Whereas if I call that finger 3,
it'll be down here somewhere and as your
| | 05:16 | Library gets bigger,
it gets hard to find things.
| | 05:18 | This'll be arm right hand
finger 2, arm right hand finger 1.
| | 05:29 | We'll again do the housekeeping and
just drag these new symbols into the body
| | 05:34 | parts folder, and there
they are, very nicely sorted.
| | 05:36 | I think we'll keep the palm
as a flat image right now.
| | 05:40 | Now, I am not sure that we
need to symbolize the thumb.
| | 05:42 | We might be able to shape between the thumb,
and that might give us more flexibility.
| | 05:45 | So for now, let's not bother with that.
| | 05:47 | So the next thing I want to do
is to correct the pivots on this.
| | 05:50 | The quick and dirty way is Free
Transform and drag to there, but as you know,
| | 05:53 | I like to make it a little more rugged than that.
| | 05:55 | So what I am going to do is make a
temporary layer, Shift and click, copy these
| | 05:58 | layers, Ctrl+C, put them into a blank
layer up here, break them apart, put them
| | 06:04 | into Outline mode, and then
this will be our reference layer.
| | 06:08 | So then as we go into each of these
symbols, double-click on them, I want this
| | 06:13 | finger to pivot around here.
| | 06:14 | View > Snapping > Snap to Grid. Great!
| | 06:20 | And now as you can see,
that's our primary pivot.
| | 06:22 | That's by far the strongest ways
of doing this. So there we go.
| | 06:28 | That finger is now
corrected pivoted and can rotate.
| | 06:31 | We can fix these gaps and breaks
later on as we begin to animate the form.
| | 06:35 | So let's repeat this process.
| | 06:39 | The middle finger will
pivot around this point instead.
| | 06:41 | If it pivots around the other,
it'll not be as strong I think.
| | 06:45 | Let's correct the pivot on
this symbol here.
| | 06:50 | Great! And that snapped in there very nicely.
| | 06:55 | So delete the guide layer and there we go.
| | 06:59 | That's out three-quarter hand on one layer.
| | 07:01 | We could separate this onto layers like the
other one, and that's the beauty of Flash.
| | 07:05 | You can do that later on, you can
create everything on one layer as a first pass,
| | 07:08 | and then begin animating with it,
and then later on, if you think, I want
| | 07:11 | to break this into multiple layers so
that I can do really cool stuff with the
| | 07:16 | hand and splay out the different
fingers and get more expressive with it, then
| | 07:21 | you can do that too.
| | 07:22 | You're not padlocked into one,
especially on a smaller project where it's not
| | 07:26 | going to be duplicated a thousand times.
| | 07:28 | So, that's the right hand.
| | 07:30 | Okay, so that's it.
| | 07:31 | There's one last thing I want to do and we
did this earlier too. This is right now,
| | 07:35 | if you look in our Properties panel--
dDouble-click on that to move that down so
| | 07:39 | we can see it more clearly.
| | 07:40 | The Properties panel is currently calling on
frame 1, and we did our new hand on frame 2.
| | 07:45 | So we'll set this hand not from Loop,
put to Single Frame, and we'll say you are
| | 07:49 | now on frame 2, hit Enter, there we go.
| | 07:53 | Let's just do a little
quick check on the left hand.
| | 07:57 | I am going to go into Outline mode and
see if we need to make any changes to the
| | 08:01 | left hand, because again this
is going to be a profile hand.
| | 08:04 | Even though we made that hand in our
three-quarters position, it looks really
| | 08:09 | good in the profile position as well.
| | 08:12 | That's nice and natural looking.
| | 08:13 | Like the other hand, it's all in one level.
| | 08:16 | If we do need to, we can break these
fingers up, but I think for now we are good.
| | 08:19 | So let's go back into our outer layer,
and we will switch everything to full color,
| | 08:24 | and we'll save this as 05, and
then we will move on and we will begin
| | 08:30 | doing the walk cycle.
| | Collapse this transcript |
| Reviewing the walk| 00:00 | So before we start diving into the
walk cycle, I am going to give you a quick
| | 00:04 | overview of the poses that we will be
positioning and using to create the walk.
| | 00:09 | So the first image in your reference_
images folder is walk_cycle_poses_01.
| | 00:13 | And we can make this a bit bigger.
| | 00:15 | You can see that we have what
looks like eight poses or nine poses.
| | 00:18 | It's really just four major keys.
| | 00:20 | The first and most
important is the contact pose.
| | 00:23 | And this is where the leading foot
first contacts the ground with the heel,
| | 00:26 | smacks into the ground.
| | 00:27 | And the recoil, this is
the low point in the walk.
| | 00:29 | We move though in the passing position.
| | 00:31 | This is the midpoint.
| | 00:32 | Then we reach the high-Point point.
| | 00:34 | Just proceeding, the next contact position.
| | 00:36 | And then the pattern repeats
identically, and that's it.
| | 00:40 | So once you establish your contact
positions, that's really done a lot of the work.
| | 00:44 | Let's look at this third image
and you will see what I mean.
| | 00:46 | How once you create the first contact
pose, it dictates the position of the
| | 00:50 | second contact pose, and the stride
and the distance that your character can
| | 00:54 | cover in the walks cycle, and each
contact pose should have the same base to be
| | 00:58 | at proper cycle, head should be at the
same level, body of the same level and
| | 01:02 | the arms, although they have moved
into opposite positions, should more or
| | 01:04 | less occupy the same basic unless your
character has a limp or is defect in some way,
| | 01:09 | then these two poses should be the same.
| | 01:11 | That's essentially the structure.
| | 01:13 | If you look at the entire sequence roughly
overlaid, you can see how it seems to work.
| | 01:18 | So, for example, follow the right foot,
and you can see how it arcs nicely through
| | 01:22 | the complete step and same
with the foot on the other side.
| | 01:25 | You can pick any given body part here.
| | 01:27 | You can see through the layers, or
watch how the arms arc through, the head in
| | 01:31 | particular. We would have like a
nice bouncing ball action on the head.
| | 01:35 | We want these to be nice and curved arc
patterns all the way through. So that is it.
| | 01:39 | These are the four primary poses.
| | 01:41 | Now when we begin to animate a
walk cycle, we have two approaches.
| | 01:45 | The way that you would probably
begin walking and the way most animators
| | 01:48 | begin when they do their first walk cycle is to
animate the character walking across the screen.
| | 01:53 | The other way is to have the
character walking in place.
| | 01:55 | And I am going to show you the
difference between those two.
| | 01:57 | Inside your project folder, in the Chapter-5
walk cycle, there are two SWF or SWF files:
| | 02:04 | walking across the screen and walking in place.
| | 02:06 | And if you open them, you
will see the comparison.
| | 02:08 | So on the right side, we have our guy
walking across the screen as he would in
| | 02:12 | the normal live-action shot.
| | 02:14 | On the left side of the screen, we
have him cycling in place, and you got to
| | 02:17 | imagine that the
background is moving behind him.
| | 02:20 | So the ideal way to animate I think, I
much prefer to animate in place because
| | 02:24 | you can simply loop the walk cycle
over and over again, and you can move
| | 02:28 | the background at a different speed,
and all kinds of wonderful stuff.
| | 02:31 | The only problem with that is it's a bit harder
if it's your first time to do a walk cycle.
| | 02:35 | Anytime you are using the new program,
even you are doing certainly a walk
| | 02:38 | from the first time,
| | 02:39 | I would always recommend that we do it
across the screen, simply because you
| | 02:43 | don't have happen to
worry about spacing the feey.
| | 02:45 | A lot of the business is taken
care of for you and it also allows you to
| | 02:49 | see the arcs and to see how your
character is actually working in real space,
| | 02:54 | instead of what I would think
about as imaginary space here.
| | 02:57 | This would be something that we will do after
we've done the walk, across in the screen.
| | 03:01 | We are going to do the less difficult
one first and then we'll do the walk cycle
| | 03:04 | in place after that.
| | Collapse this transcript |
| Prepping the walk| 00:00 | So it's time to set up our
character for the walk cycle.
| | 00:02 | And first, that means opening up
our project, Rig_profile_05 file.
| | 00:09 | So the first thing we need to do
before we do anything is prep this symbol.
| | 00:13 | We could, if you want, to begin animating.
| | 00:16 | The only problem is we will be working
inside our primary bd profile symbol.
| | 00:20 | And we might want to do other things
with this other than the walk cycle.
| | 00:23 | So let's duplicate it first.
| | 00:25 | So I like to right-click on this, hit
Duplicate Symbol, and let's call it bd walk
| | 00:32 | and that's just that.
| | 00:33 | Let's duplicate all of the other symbols
inside it that we are going to animate.
| | 00:37 | So that means the head, the arms,
the leg symbols, and the feet.
| | 00:41 | It's a little bit of busy
work but it's important.
| | 00:43 | So let's right-click on the
head and call it hd walk.
| | 00:49 | And we will see them be generated in here.
| | 00:53 | Right-click on the arm.
| | 01:02 | So I am going to keep moving through
all these symbols, just doing one after the other.
| | 01:06 | This shouldn't take about a minute.
| | 01:11 | Oops, wrong one.
| | 01:12 | So what I am going to do is, these
are the same symbols and I want to make
| | 01:15 | these different symbols.
| | 01:17 | So I am going to duplicate
this one and call it leg left walk.
| | 01:25 | And I already have one that's done.
| | 01:26 | I am going to duplicate it
again, leg right walk2.
| | 01:31 | You can clean up the unused
symbols later on if you need.
| | 01:36 | I think we have the same issue with the foot.
| | 01:37 | We have the same foot used for both of these.
| | 01:39 | So I am going to duplicate the
right one. Call it leg right foot walk.
| | 01:46 | And let's duplicate the left foot.
| | 01:48 | I am going to call it leg left foot walk.
| | 01:53 | And we also have probably-- you
may be doing animation on the torso.
| | 01:57 | So I am going to duplicate that
and call that walk as well and
| | 02:02 | don't forget we also have the
background arm, the arm left. I think the hands,
| | 02:12 | we may be animating.
| | 02:13 | I am not sure but for now,
well, if in doubt, duplicate.
| | 02:16 | So I will just do that.
| | 02:27 | Okay. And then one more task to do.
| | 02:30 | And that's to make sure that all of
these symbols are set to their right format.
| | 02:33 | We are going to have them playing.
| | 02:36 | Because we have duplicates now, we can
start altering the contents and not worry
| | 02:39 | about damaging our original profile rig.
| | 02:42 | Now the thing to bear in mind about
the walk cycle is that it's going to be
| | 02:46 | about just over a second long.
| | 02:48 | So I need a keyframe the contact
position, as we covered in the previous
| | 02:52 | demonstration, a recoil position, the passing
position, high-point, and back to the contact.
| | 02:57 | So lfor now, we
will space these our evenly.
| | 03:00 | So there is 3 in between
frames, between each of our keys.
| | 03:04 | And so this will go from contact, recoil,
passing, high-point, contact, and to
| | 03:09 | get right back to the start we have
to go through one more complete cycle.
| | 03:12 | So let's copy these.
Alt+drag, Option+drag.
| | 03:15 | So that's going to be the duration of our cycle.
| | 03:18 | So let's make sure that all
of these symbols are this long.
| | 03:21 | So I am going to call this level keys.
| | 03:26 | So these are little
placeholders, just notes essentially.
| | 03:28 | And let's actually put a bit of detail
in here and then put letters on them,
| | 03:31 | contact, because it's easy to
forget which one I am looking at.
| | 03:34 | In the Properties panel, I am just
calling it c and this will be r for recoil,
| | 03:40 | or the down, the squash pose.
| | 03:43 | This will be the h pose for high-point and
the passing position we will call that p. Okay.
| | 03:54 | So let's copy these.
| | 03:55 | Edit, Timeline, Copy Frames, Ctrl+Alt+C.
I am going to copy that into, for
| | 04:04 | example, we will take the head, make a
new layer, and paste, and make sure our
| | 04:12 | internal head timeline is that long.
| | 04:13 | We will repeat this
procedure for all the other elements.
| | 04:20 | Now we may have to make some little
alterations in here. For example, this is
| | 04:25 | the first key, if you remember from
our previous class, this is our three
| | 04:28 | quarters position for the arm
and this the profile position.
| | 04:31 | We are not going to need the three
quarters position for any part of this timeline.
| | 04:34 | So I am just going to grab our second key
and drop it over the first and delete it.
| | 04:39 | So this is our profile arm.
| | 04:40 | We do it again so you see exactly what happened.
| | 04:44 | What I am doing is deleting this key
and I am dragging this one there.
| | 04:49 | So we have a clean timeline for the left-arm
or the right-arm and all these other parts.
| | 04:53 | So the left arm is fine.
| | 04:54 | That doesn't need any
alteration other than our notes.
| | 04:59 | Sometimes you get a little defects
when you copy these frames.
| | 05:07 | Paste them back in again.
| | 05:08 | Let's see if this is still a glitch.
| | 05:12 | It can be difficult sometimes to
copy multiple layers. It won't work.
| | 05:19 | You cannot copy over multiple
layers if they're different lengths.
| | 05:22 | If you're going to do this copying, be sure
that all the layers are the same duration.
| | 05:27 | So I am going to continue.
| | 05:28 | I am going to have an animated leg in here.
| | 05:33 | So we want to have this fully laid
out again, same with the other leg and the shoes.
| | 05:45 | Again, we have two frames for the shoe.
| | 05:47 | And first one was our three-quarter shoe.
| | 05:51 | We are not going to be using that I
think in this walk. We could but I
| | 05:53 | don't think we will.
| | 05:54 | We will be using this flat one.
| | 05:55 | So Ctrl+X or just drag-and-drop the
second frame on top of the first and we
| | 06:01 | repeat that process with this.
| | 06:02 | Our key seems to be disappearing
sometimes. So just repeat the Copy Frames
| | 06:10 | process if that happens.
| | 06:17 | We will extend that out.
| | 06:21 | The last step is to select each of
these symbols, make sure it's set to Play Once,
| | 06:26 | and it's all set to frame number 1.
| | 06:29 | Now the torso is well. I forgot that one.
| | 06:32 | Not the end of the world
if you forget one of these.
| | 06:35 | You can add it later.
| | 06:36 | It just means you have to tweak
some numbers in the Properties panel.
| | 06:39 | Your work will be much smoother if you
set them up right in the first place.
| | 06:44 | So again torso should be set to
Play Once and set the frame 1.
| | 06:49 | That way when you begin setting
secondary keys and you have all your internal
| | 06:52 | timelines, all the frame
numbers will lineup here.
| | 06:55 | Any key on this column should be ideally
set to one so that this one will be on five,
| | 07:00 | this will be on 10 and so forth.
| | 07:04 | Same with the leg, Play Once, you are
on frame 1, Play Once, frame 1, same with the feet.
| | 07:13 | Some of these were set to Single Frame
earlier on because they are just going
| | 07:16 | to be in a static rig.
| | 07:17 | So this is just a part of the process.
| | 07:18 | There is no perfect state
for all possible combinations.
| | 07:27 | So this is the three-
quarters hand you may remember.
| | 07:31 | So let's get rid of that.
| | 07:32 | I don't think we need it in here, and I
am going to add our frames in because
| | 07:40 | we are going to be using this hand for the walk.
| | 07:41 | So let's track that on to position one,
and I am just going to delete this frame.
| | 07:46 | So this is now set to Play Once from frame 1.
| | 07:51 | We're having trouble selecting that left hand.
| | 07:53 | Let's zoom in a little it, and Play Once again.
| | 07:57 | So I think we got them all.
| | 07:58 | So every symbol is set to Play Once.
| | 08:00 | It's all set to frame 1.
| | 08:01 | They all have internal timelines that
are duplicates of the external of the
| | 08:05 | master timelines on the body
layer, right down to the head.
| | 08:09 | We might even add, if we are going to
do something fancy with the mouth or
| | 08:12 | the eye, you might have the same in there but
for this walk they will be not doing anything.
| | 08:17 | So I am just going to
leave them as static images.
| | 08:19 | If you are going to do like a very
complicated scene with a lot of keyframes,
| | 08:22 | it's always worth doing a
little double-check over this.
| | 08:25 | So with that done, we are ready to
move on and establish the contact pose of
| | 08:29 | the walk cycle, and that will begin
the process of actually making this kind guy move.
| | Collapse this transcript |
| Setting up the contact poses| 00:00 | Now it's time to set up our character's
contact position to begin the process of
| | 00:04 | posing out the walk cycle.
| | 00:05 | So let's open up our previous file,
number 6, zoom out a bit, and what I want to
| | 00:13 | do is to just so we have a visual reference,
| | 00:15 | I think you'll find that helpful if we
can bring in some of our reference images.
| | 00:19 | I'll go Import to Library.
| | 00:21 | Let's just bring in all of these
three so we have them, and that just
| | 00:26 | kindly symbolizes them all.
| | 00:27 | So let's just drop the images into our
reference folder and let's rename this
| | 00:35 | as 1, 2 and 3, and drop them into
the reference folder as well. Keep our
| | 00:41 | library nice and clean.
| | 00:42 | One thing I want to do actually is
size our guy on the stage a little more.
| | 00:48 | This will be important to make him
fit on the stage and just set up the
| | 00:51 | stage for the animation.
| | 00:52 | So right now he is at
100% and he's a bit too big.
| | 00:55 | So let's bring him down to 50%, so
Ctrl+Alt+S, and that's half his size and
| | 01:01 | maybe even a bit smaller.
| | 01:02 | I'll just do it in freestyle,
just what I think looks good.
| | 01:06 | He's going to do a complete step from
here to here. So we can change this later,
| | 01:09 | but this would be a better fit.
| | 01:12 | Now we can zoom in, making sure that
we are working inside the bd walk symbol.
| | 01:18 | So let's double-click on that and we
have all of our layers and we have beneath
| | 01:24 | that our old reference image.
| | 01:25 | I think we can now actually get rid of
this now. I don't think we need that here.
| | 01:31 | So we have our character.
I want to change the timeline.
| | 01:33 | I want to go into Animation.
| | 01:34 | I am not rigging anymore.
| | 01:36 | I like to have a horizontal timeline.
| | 01:38 | So we have our Workspace layout.
Let's go to the other one. I've made two of these,
| | 01:41 | one with a longer timeline
and one with a vertical one.
| | 01:48 | So let's see the rulers. I want to make
guidelines now for the feet. This is very important.
| | 01:52 | We go View > Rulers and just click and drag.
| | 01:56 | Make sure we don't have snapping on.
| | 01:57 | I thought Snap to Grid was there and
felt snappy, so let's get that off and
| | 02:02 | just make two lines, go in nice
and close, and I would line them up with
| | 02:10 | the heel or the toe of the foot.
| | 02:12 | As long as you are consistent in, okay,
this is the one that the heel will always
| | 02:16 | be planted whenever he is on the ground,
| | 02:18 | that's the position point that we are
going to lock the heel to for each of these.
| | 02:22 | Then let's get rid of the rulers.
They take up screen's space you don't need
| | 02:26 | to worry about, okay.
| | 02:28 | So the lower line will be the placement for the
right foot and the upper will be for the left.
| | 02:34 | So the next thing I would like to do
would be to bring in some reference images.
| | 02:38 | This will really help you if you
haven't done a walk before and it is very hard
| | 02:41 | sometimes to keep all this
new information in your head.
| | 02:44 | So let's grab the reference frame of
the first one, make it a bit bigger, not
| | 02:48 | too big, but big enough so that you
can see it right above the stage or
| | 02:52 | whatever works for you.
| | 02:53 | You might have a second
monitor and maybe drop it over there.
| | 03:00 | So what we are going to do is
converting our chap into the contact pose.
| | 03:04 | That's the first one that we have to do.
| | 03:05 | You might find that's easier if you have it
positioned here, and maybe bring it in a bit tight.
| | 03:12 | We are going to spreading the legs so
that they are occupying about this space
| | 03:15 | here, so we have a better room to play with.
| | 03:18 | Actually I think we can go back to the
vertical timeline now. Let's do that.
| | 03:21 | Because we're only working on this contact pose.
| | 03:29 | That's better.
| | 03:36 | I think we are going to
move the left leg forward.
| | 03:38 | That will in the leading position.
| | 03:42 | Just selecting and
using the Free Transform tool.
| | 03:47 | At this point don't worry
about bending the leg so much.
| | 03:50 | That will be part of a later step.
| | 03:51 | The other thing to remember the
physical left side of his body is shaded out.
| | 03:58 | That's because when you do a walk
cycle you counter pose. In words, when your
| | 04:02 | left leg is forward, your left
arm is backwards and vice versa.
| | 04:05 | So you don't move with the same limb and
the same direction at the same time.
| | 04:10 | The body is in a constant state of
opposition to maintain its balance.
| | 04:14 | So in this case we have the left leg
forward, so that means that the left arm
| | 04:18 | will be moving backwards, and here
you'll begin to appreciate the advantage of
| | 04:22 | having a color-coded
structure that we set up earlier.
| | 04:26 | So you can see if it's green on one end,
then it'll be moving out of the other.
| | 04:32 | So you can see in an instant that my
right foot is out here; my right arm must
| | 04:35 | be out in this direction.
| | 04:36 | Let's just move that up there and lock it in,
so we are not selecting that by mistake.
| | 04:43 | You can see that there is a little
issue here with the arm kind of being lost
| | 04:46 | against the gradient, so
we can expand this gradient.
| | 04:49 | I am going to play with that a little
bit later on to help define that arm area.
| | 04:56 | So this is the left shoe and that
should be contacting this line exactly. Also,
| | 05:01 | the leading limb will be thrusting
forward, so it will be, if you imagine the
| | 05:06 | hip is pivoted, the left hip is further
forward. So we can move this leg forward as well.
| | 05:11 | And let's just use the Free Transform
tool to stretch out the leg a little
| | 05:17 | bit to make up the gap.
| | 05:24 | Okay, now as you can see this right
foot has to bend and tilt. So what we are
| | 05:28 | going to is I find this as your first pass,
| | 05:32 | we have to get okay before we get pretty.
So I am going to act like the foot can
| | 05:36 | slice through the ground plain and I
am going got let the position of the foot
| | 05:40 | be determined by the anatomy of the leg.
| | 05:43 | So let's bring this in a little.
I want to see a little bit of that and let's
| | 05:47 | keep that foot like that.
| | 05:48 | It's asking us simply too much to stop
bending the foot, so again we have to
| | 05:52 | imagine that this is what
is going to crease here.
| | 05:54 | We are going to add this detail
to this inner foot comp later on.
| | 05:59 | Imagine the left hip thrust forward.
| | 06:01 | We counter pose, so that means the right
arm is going to move further forward than
| | 06:05 | the left, so let's push that out a little bit.
| | 06:07 | We're going to have to make some changes
to the internal structure of the left arm.
| | 06:18 | But for now, again, this is our first
pass, so we just want this thing to do the
| | 06:23 | major, the gross moves.
| | 06:25 | Let's have a look at that.
| | 06:28 | Okay, that's a contact pose.
| | 06:30 | So there are obviously many
things that we can improve and fix.
| | 06:33 | Okay, so this is a really great place
to save our project, because this is
| | 06:37 | a good block of work.
| | 06:38 | So let's save this and in the next
one we'll move on and start tweaking and
| | 06:42 | fine-tuning our contact position.
| | Collapse this transcript |
| Creating secondary contact poses| 00:00 | So, let's fine-tune our
contact position in the walk cycle.
| | 00:03 | It's our previous file 07
in your Chapter 5 folder.
| | 00:07 | So as you can see this
is clearly a contact pose.
| | 00:10 | It's looking lot like this.
| | 00:12 | There are some things that we should
probably fine tune before we go much
| | 00:14 | further and that left arm is looking
very grizzly because that was designed for
| | 00:18 | the normal hanging down position.
| | 00:21 | Don't mess with the pivot point. That's
the master pivot point inside there, but
| | 00:24 | let's move the shoulder up a
little and see what that does.
| | 00:29 | We can be pretty flexible at this
point because we only have the one contact
| | 00:31 | position that we are working on.
| | 00:32 | I am going to move this arm in back a
little bit and we should probably put a
| | 00:39 | little bit of bend in these legs.
| | 00:41 | We have separate symbols.
| | 00:42 | If you click on any of these symbols,
you'll see the name in the Properties panel.
| | 00:46 | This is our leg right, our walk
symbol, and this is leg left walk.
| | 00:49 | So we can do things in here
that won't affect the other.
| | 00:51 | That's very important.
| | 00:53 | So in this leg left symbol, let's
give it up a little bit of bend.
| | 00:55 | Again if you look at the contact pose, the
trailing leg is bending more than the front.
| | 01:00 | The front leg can actually be pretty
straight, if you like, but the back leg
| | 01:04 | needs to have a little bit of a break in
it. It gives us a nicer looking pose as well.
| | 01:08 | This foot will ultimately
wrap to follow the ground.
| | 01:12 | For now it's not the thing I
would like you to worry about.
| | 01:16 | Also realize too that the right arm or the
leading arm should have more of a break on it.
| | 01:21 | Realize too where we're coming from.
| | 01:22 | This arm is swinging forward and so you
would also expect to have a little bit
| | 01:26 | of a drag on the hand. Let's do that.
| | 01:31 | I wouldn't advise against being too
concerned about fussing about these
| | 01:35 | joins at this point.
| | 01:37 | It will really make you just
obsessed about things that I'm going to be
| | 01:40 | changing many times anyway.
| | 01:41 | So this is the point where we would
like to be more open and fluid about it.
| | 01:45 | So also don't forget too,
inside your arms, we have two layers.
| | 01:48 | We have one for the upper arm and one for
the wrist, which you can see here in purple.
| | 01:52 | So we are going to be sliding this arm
around and tweening things a lot and I
| | 01:57 | think it will help us a lot too if
we go in and symbolize this wrist.
| | 02:02 | I am going to symbolize it,
just a very quick one.
| | 02:05 | This will be the arm right wrist and do
a quick and dirty pivot fix, here we go,
| | 02:13 | and now we can motion tween this thing,
but we'll be shape tweening the arm.
| | 02:21 | Let's put that in Outline mode and you
see there is more of a break on the arm there.
| | 02:24 | So let's do that
and hide the wrist for now.
| | 02:42 | Let's look at the wrist again, and
you might find that the wrist isn't long enough.
| | 02:51 | Even at this point it's possible to
go in and make your own wrist, or
| | 02:55 | duplicate it or extend it a little bit.
| | 02:56 | I wouldn't go too crazy with it.
| | 03:01 | You might break something in another scene.
| | 03:02 | If you're ever in doubt, make a
duplicate and then you won't be affecting any of
| | 03:09 | the preexisting symbols.
| | 03:14 | So let's fix the right arm now.
| | 03:24 | Now that might be overkill for the walk,
so maybe bring the arm down a little bit.
| | 03:29 | We can overdo it and then
pull it back in if we have to.
| | 03:31 | Okay, let's try that.
| | 03:33 | So it's not a bad contact position.
| | 03:36 | I am going to hide the reference
image now, so we can have more of a range.
| | 03:40 | Now at this point I am going to
duplicate the contact position.
| | 03:43 | Let's go into our alternate workspace
layout with a longer timeline and I like to
| | 03:51 | see if I can have all of my layers visible.
| | 03:53 | So let's just duplicate it over here and
this will be the first frame and the
| | 03:56 | final frame should be the same and this
contact frame here will be the same, but
| | 04:01 | with limbs on the other side.
| | 04:03 | So let's just keyframe
that for now as a first pass.
| | 04:06 | So now the next thing to do is to
position these secondary contact positions
| | 04:10 | where they should be
physically on physical space.
| | 04:12 | So the second, if we look our reference
images that we brought in earlier, when
| | 04:16 | you do a contact position, the second
contact would be driven by the position of
| | 04:21 | the leading foot. So the front foot on
the first contact will be the same as the
| | 04:24 | trailing foot on the second contact position.
| | 04:26 | So we'll see this very clearly now.
| | 04:28 | Let's just copy all of our first pose,
Ctrl+C and Ctrl+Shift+V, onto a reference layer
| | 04:35 | and then what I am going to do is
just drag this over, Shift+click on the
| | 04:39 | numeric keypad, and so this
is the left foot in purple.
| | 04:43 | So now that we have this, let's go in
a little closer and you can see that as
| | 04:49 | this hip and this heel hit the ground,
all we want him to do is to align with
| | 04:53 | the purple one and I think
we are not far enough over.
| | 04:56 | Imagine the foot hitting the ground,
pivoting around this point here.
| | 05:01 | I am going to do a temporary
move, so you see what I mean.
| | 05:03 | That foot should come down to there, smack
into the ground, and then tilt up on this axis.
| | 05:11 | That's the physical process
that's going to drive the position.
| | 05:15 | I am going to undo all that.
| | 05:16 | So I think we are not too far away from that.
| | 05:21 | Actually, I think we are very close,
because we can see the heel of the foot is
| | 05:24 | matching that position here at that overlapping.
| | 05:26 | So I think that's excellent.
| | 05:27 | So let's go with that.
| | 05:30 | So the next step will be to use this
purple guide layer. Let's padlock it.
| | 05:35 | We don't want this to move.
| | 05:36 | We are going to the second keyframe now.
| | 05:38 | This would be the alternate.
| | 05:41 | We match our keys to that. Go in bit tighter.
| | 05:44 | Let's make this fairly precise, using
the arrow keys to get the position and
| | 05:49 | there we go, and then we repeat
this procedure for the second contact.
| | 05:53 | There is couple of ways. We can just
repeat the identical process or we can make
| | 06:00 | a note of the amount of horizontal
motion from the first contact position to the
| | 06:05 | second contact position and just replicate that.
| | 06:08 | That's probably the more reliable
mathematical way of doing it rather
| | 06:11 | than eyeballing it.
| | 06:12 | So let's just make a new layer, draw a
line for the chin, second line, and just
| | 06:21 | grab that and then match our chin
position on the third contact pose to there.
| | 06:30 | Now we can delete these two little
temporary note layers, get rid of them.
| | 06:34 | Let's go in and activate classic tweening.
| | 06:39 | Okay, now we have a slide.
| | 06:44 | Nothing is moving. The reason being
that the right leg hasn't moved into
| | 06:47 | the correct position.
| | 06:48 | So again, what I'm going to do is make a
new reference layer, copy these, Ctrl+C,
| | 06:54 | Ctrl+Alt+V, do that and then overlay
an outline ,and what we are going to do is
| | 07:00 | I am actually going to go back
to the other workspace layout.
| | 07:03 | I'd like to have a more
vertical timeline for this one.
| | 07:06 | I am going to take their left hand
and move it into the position currently
| | 07:12 | occupied by the right-
hand and same with the legs.
| | 07:15 | It might seem a little confusing and if
I find them getting a little overwhelmed
| | 07:18 | by the number of layers,
I just pull the whole thing apart.
| | 07:23 | Okay, so now what I'm going to do is move
this hand into the opposite hand position.
| | 07:30 | It won't be exactly right of course
because we have to do the bends and some of
| | 07:33 | the internal work, but let's
just get into its physical place.
| | 07:37 | That's step one, to grab Shift+
click both of the arm layers.
| | 07:43 | I just worry about matching
the upper arm position for now.
| | 07:52 | So again, I am using Shift+click
and using the Free Transform tools to
| | 07:56 | get everything close.
| | 07:58 | It doesn't have to be exact, but within 80%.
| | 08:08 | Don't worry about the foot not being
joined to the lower leg and worry more
| | 08:12 | about getting the feet precisely
positioned, because we can make really big
| | 08:15 | changes to the internal leg symbols.
| | 08:18 | I don't worry about the lower leg.
| | 08:19 | We are going to be tweening them
internally and doing some really nice stuff in
| | 08:23 | there to make them work properly.
| | 08:24 | So let's just get the upper parts of the
legs in position and the same with the arms.
| | 08:29 | Just worry about the upper arm position.
Don't worry about the lower arms. And this hand,
| | 08:35 | it will break from the lower
part. Don't worry about that.
| | 08:42 | Let's go into Outline mode to make
sure that we're lining up. There we go.
| | 08:46 | The left arm, the blue, is a little
bit out of place so let's just do that.
| | 08:51 | This probably looks like junk, right now.
| | 08:53 | But let's have a look and
see what it's giving to us.
| | 08:55 | So you can see already we are getting
into a zone where it's starting to look
| | 09:00 | like some kind of a walk is happening.
| | 09:02 | So the next step will be to correct the
internal comps and then I think you'll
| | 09:07 | start to get a much more concrete idea,
once we start lining up the lower arms
| | 09:13 | with the hands and the feet and the
lower legs with the feet, we start to
| | 09:16 | get some inkling of the mechanism that's
going to make the walk a coherent animation.
| | 09:23 | So we'll move onto that next.
| | 09:24 | So let's delete this temporary layer.
| | 09:26 | I am going to save this as and you'll
find when you start getting into this
| | 09:31 | level I recommend you save
probably more than you think you need.
| | 09:35 | So we'll save this as 08
and we're ready to move on.
| | Collapse this transcript |
| Finishing up the contact poses| 00:00 | So now we're ready to start to fine-tune
our contact position for the walk cycle.
| | 00:04 | So let's open up our previous file 08 in
Chapter 5 of the Exercise Files folder.
| | 00:11 | Let's double-click on the stage, and
because we have our little reference guide
| | 00:15 | image here, if you feel like
you're getting lost in all this.
| | 00:17 | So let's have a look at where we are.
| | 00:19 | I'm going to zoom out so we can see more
of the space for the walk, our guidelines.
| | 00:25 | We began to crudely create
the different contact positions.
| | 00:29 | So as you can see, they're
not really lining up too well.
| | 00:32 | That's because we've just
made very broad movements.
| | 00:35 | So let's take just one of these and
if you feel like it's getting too much
| | 00:39 | like what is going on,
| | 00:41 | let's start switching off say a few of
these limbs and just pick one of them.
| | 00:45 | Pick the upper right arm and I'm
going to see if we can fix this.
| | 00:50 | Little check to make sure that all of our
nested symbols are correctly labeled. Oh!
| | 00:55 | See? A mistake.
| | 00:57 | It should be set to frame 1.
Not the end of the world.
| | 00:59 | You'll find this happens naturally.
| | 01:01 | It doesn't matter how careful you are.
| | 01:03 | So you want all of your symbols to be
set to frame 1 on this column and all of
| | 01:08 | these frames to be set to frame 17, or
the current frame number on this one.
| | 01:13 | If you make any changes, then you must
correct all the internal frame numbers.
| | 01:17 | So I'm going to set this one to
Play Once and this will be frame 17.
| | 01:23 | That one escaped me. I thought
we'd set all this up earlier.
| | 01:26 | I've never had one of these go perfectly.
Play Once, and then the end just to be consistent.
| | 01:32 | The right arm there we will also make it Play Once.
| | 01:34 | The last frame is currently set to 33,
so make that 33. So there we go.
| | 01:40 | So let's go into this frame.
| | 01:41 | I've mentioned earlier too if you double
-click for example on this symbol, you
| | 01:45 | will jump back to frame number one.
| | 01:47 | I don't want to be on frame number one.
I want to go in at the same frame that I'm on.
| | 01:51 | Luckily, there is a third-party plug-in
called frameEdit. We've covered this previously.
| | 01:57 | It's available on a great web site
called toonmonkey.com and I've mapped it onto
| | 02:03 | the Forward Slash key on the keyboard.
| | 02:06 | It's to the right of the Comma and the
Period at the bottom of the keyboard.
| | 02:10 | So when you see me doing this
and going into the right frame,
| | 02:12 | that's what's happening.
| | 02:13 | Now if you don't have that command,
then you're going to have to just go into
| | 02:16 | frame 1 and grind forward to the right frame.
| | 02:19 | But this will really speed up your workflow.
| | 02:21 | Let's add our keys in here.
| | 02:24 | We're going to correct this frame, and
basically correct these frames as we go one at a time.
| | 02:28 | I'm going to pull that to here.
| | 02:40 | And same thing with the wrist.
| | 02:42 | So the pivot should be at the top of
the point. Go into Free Transform and
| | 02:49 | grab the wrist down.
| | 02:51 | So now it's roughly in the right place.
Again it can be rough at this point.
| | 02:54 | We're not making the final animation yet.
| | 02:56 | But now you can see on this
frame that we're a little bit closer.
| | 02:59 | I'm going to just tweak the
position of the hand a little bit.
| | 03:02 | Now let's see what happens.
| | 03:12 | You see it's popping into
the right position right there.
| | 03:14 | Of course, we'd like it to
meet between back and forth.
| | 03:17 | However, there are other keyframes
that are going to have to happen first
| | 03:20 | before we get there.
| | 03:21 | I don't want to overstep the mark here.
| | 03:25 | I'm going to just go in
and correct these one by one.
| | 03:29 | So let's switch off this layer,
and we will activate right leg.
| | 03:36 | Again, we want to make sure on the
right frame this is correctly set.
| | 03:39 | We're on the frame 17 down here,
frame 17 here. Let's tunnel in.
| | 03:44 | Set a keyframe here.
| | 03:45 | I'm also going to set a keyframe here,
because we should end and start as with
| | 03:49 | everything else in the same
frame, because this is a cycle.
| | 03:51 | Let's drag that leg over and
the same process for the opposite.
| | 04:10 | You might find this easier if you set
Preview mode to Anti-Alias, because that way
| | 04:13 | when you're actually inside a
symbol it'll fade out the others.
| | 04:16 | It'll help you visually hold your position.
| | 04:18 | Let's switch that off and the
other limb we have to worry about.
| | 04:26 | Never forget to set keys; otherwise you'd
be changing your first keyframe ad
| | 04:29 | that wouldn't be good.
| | 04:40 | This wrist will be easier
if we can motion tween it.
| | 04:44 | So I'm going to call it arm left wrist.
| | 04:48 | That should of course be
the same all the way through.
| | 04:50 | So I'm just going to move it all
the way back and delete the others.
| | 04:55 | So it's in this correct position here. Let's
go in and make sure it's pivoted properly.
| | 05:00 | Then move it back.
| | 05:01 | Then well, again repeat the
same process, to be consistent.
| | 05:07 | Drag and drop it up here. There we go.
| | 05:20 | So now if we look at the entire body,
we have a contact position that looks
| | 05:24 | much like the first one.
| | 05:25 | So we go from a contact A to contact
B with the left leg now in the back
| | 05:30 | position, not the front.
| | 05:31 | If we animate this, you will
still see some glitchiness of course.
| | 05:36 | Now it's more localized. The
glitchiness is now happening in these two areas.
| | 05:43 | So before we can really begin to tweak
this much further, we have to begin to
| | 05:48 | add the central pose, the passing
position, and let's look at what that looks
| | 05:52 | like in the reference image.
| | 05:55 | So the question that would come up,
we now have our contact positions.
| | 05:59 | We're pretty close to that final area.
| | 06:02 | People would wonder which would be the
next most important position to animate
| | 06:06 | and I used to think the down position
was nicer to work into, because it gives
| | 06:09 | you a good squashing point
to feel the weight it happening.
| | 06:12 | But actually, it's kind of
counterintuitive, the passing position.
| | 06:15 | That's this guy here.
| | 06:17 | That's the one that we should do next.
| | 06:19 | You will see very quickly why,
because it's the halfway point between the
| | 06:22 | contacts and by making even
slight changes on this keyframe,
| | 06:26 | such as bending the spine, or
making small alterations to the characters
| | 06:31 | emotional state, or the flexibility of the body,
| | 06:34 | you can have it really dramatic and
wonderful possibilities with adding
| | 06:37 | personality to the walk.
| | 06:39 | So we're going to save this project now.
| | 06:42 | We'll move on, and start playing with
the passing position and at this point,
| | 06:45 | we're going to start seeing
the walk really come together.
| | Collapse this transcript |
| Creating the passing poses| 00:00 | So we've blocked in our walk cycle's contact
poses, the most important poses in the walk.
| | 00:05 | So now let's do the passing position.
| | 00:07 | The passing position will flash out the
walk, and start to tighten that up a lot.
| | 00:12 | So in your Exercise Files folder,
version 9 should be the last version
| | 00:15 | we're working from.
| | 00:16 | Let's double-click on the walk cycle and
let's have a look at it, see where we are again.
| | 00:22 | Okay, as you can see, not perfect by any means.
| | 00:25 | But their contact positions
have been tied down pretty well.
| | 00:28 | So the next step is the passing pose.
| | 00:30 | Now let's look at the passing pose again.
| | 00:31 | So the passing pose is the
midway point between the contacts.
| | 00:36 | You could do the recoil at first. The
only problem within from contact to recoil
| | 00:40 | is that it doesn't give you such fine
control over oscillations or changes in
| | 00:44 | the spine or the attitude of the walk.
| | 00:46 | So the best way I think of doing that
is by doing the passing position.
| | 00:49 | That would be the way it was done in the Disney
Studios in the good old days. Let's do that.
| | 00:55 | So the automatic tweening that
we've established is very crude.
| | 00:58 | It hasn't given us too much to work
with, but what it has given us is the
| | 01:03 | horizontal travel of the character.
| | 01:05 | So we're going to use that
information and set a keyframe.
| | 01:08 | Then we will of course fine-tune
all these positions and do the rest.
| | 01:12 | Let's just extend our Timeline a little bit.
| | 01:14 | I'm going to try and start playing with this.
| | 01:17 | One thing I find that is very useful is to
make sure when you're in your preferences,
| | 01:23 | to absolutely make sure that you
have Contact-sensitive Selection and
| | 01:27 | Lasso tools deselected.
| | 01:29 | This is going to make your
selection of all objects much easier.
| | 01:32 | So do not have a tick mark on there.
| | 01:34 | Be sure you're set to Object-level Undo.
| | 01:36 | That means that your undos will happen
contained inside the comp or the symbol
| | 01:41 | that you are working inside.
| | 01:43 | You don't need to be taken out of your
comp into an external one or an internal one.
| | 01:46 | That's what will happen by default.
| | 01:48 | So those two things are
critical before we go any further.
| | 01:51 | So let's select the upper
body on the passing position.
| | 01:55 | Just drop a bounding box around that.
| | 01:56 | You can even go a little bit over the legs.
| | 01:59 | I like to do this to make sure
that everything is properly selected.
| | 02:02 | It doesn't always happen.
| | 02:03 | I'm just going to put a little tilt.
| | 02:06 | There is this slight tilt on the
passing pose. Nothing too crazy.
| | 02:09 | But just a little bit more
than the normal position.
| | 02:13 | You'll see that it doesn't happen from
here to here,and like he is completely
| | 02:19 | vertical, but on the first part of the walk,
I think we can push it a little bit more.
| | 02:23 | Let's go in, select
everything again, Free Transform.
| | 02:26 | Let's bring down a little further.
| | 02:33 | Now you can see there is
a slight little dip on the walk.
| | 02:35 | That will give him a lot more of a natural feel
and then a bit less flashy. So that's that.
| | 02:42 | Now let's look at the feet.
| | 02:43 | What should be happening here is this
forward foot hits to the upper blue line.
| | 02:49 | That heel should snap and plant down.
| | 02:51 | So I'm going to hide this foot,
because they're all getting obscured.
| | 02:55 | So as you can see, it's not pivoting
the way we would like it to do.
| | 03:03 | The horizontal position. That's great.
| | 03:06 | But the vertical position is wrong.
| | 03:08 | That needs to be corrected.
| | 03:09 | Let's go ahead and undo that first. Let's
grab that key, click it down. We can go in.
| | 03:13 | I should be pretty picky about this.
Go in fairly close. That heel point should align.
| | 03:19 | Then I'm actually going to pull the
all the corner down slightly, so that the
| | 03:22 | front and the back are both on that axis.
| | 03:25 | Let's take the look at our reference
image, so we don't get lost inside the
| | 03:30 | overall chaos of the frames and tweens.
| | 03:33 | So the leg will working on this forward
facing leg, which on the recoil position
| | 03:37 | here snaps into the ground and
stays there on the passing position.
| | 03:41 | It begins to lift off the
back of that on the high-point.
| | 03:44 | So that's this pose here.
| | 03:47 | So it should actually be
contacting the ground here.
| | 03:51 | Let's just hold down Alt or Option,
and copy that to the high-point.
| | 03:55 | Now that'll give us a much nicer feel.
| | 03:58 | If you look at that foot now bang!
| | 04:00 | It's hitting the ground.
It's staying there.
| | 04:01 | It's not wiggling, or moving,
or doing anything weird.
| | 04:03 | That'll give us our access point that
we can use to position the leg with.
| | 04:07 | We can do something
similar with the opposite foot.
| | 04:09 | Now, have a look at that.
| | 04:10 | This is where it is on the passing position.
| | 04:12 | That should be lifting well off the ground.
| | 04:14 | That's this guy here.
| | 04:16 | So let's rotate him. Get him into a
position that's a little more natural.
| | 04:19 | Let's hide that leg, and this leg too.
| | 04:22 | That is getting in our way right now.
| | 04:27 | Much better. So we're
going from follow this foot.
| | 04:32 | It's going from here to here to here.
Maybe even higher on the high-point.
| | 04:38 | We won't worry about that now.
| | 04:42 | The other thing to worry about
will be the position of the hands,
| | 04:44 | the right-hand for example.
| | 04:45 | I will just watch where it's going and
where it's coming from, where it's going to.
| | 04:50 | It's here.
| | 04:51 | Then on the passing position, that will
be swinging down, somewhere around this
| | 04:55 | direction, so see where it's been put.
| | 04:57 | I think we can bring it in a bit lower.
| | 04:58 | Let me drag up back a little bit.
Let's hide that up around for a second.
| | 05:03 | We can't see through the body, so
let's put the body into outline.
| | 05:07 | I'm going to hide that arm as well.
| | 05:08 | We have a bit of surgery yet to do there.
| | 05:10 | I'm going to pull the left arm
down to the passing position.
| | 05:13 | The left arm is also swinging on the
big axis like thing, like a pendulum back and forth.
| | 05:21 | So there we go.
| | 05:23 | So what I'm going to do now,
| | 05:24 | I'm actually going to
ignore the arms and legs for now.
| | 05:27 | I really wanted to help you focus on
looking at just the feet and the hands,
| | 05:30 | because that'll help.
| | 05:32 | You big challenge here, if you haven't
done a walk before or haven't done it in
| | 05:34 | Flash, is just getting over the
visualization of where all the bits are and
| | 05:38 | where they're going.
| | 05:39 | So let's make the second passing position here.
| | 05:42 | What I want to do is make a
reference image that we can use as well.
| | 05:46 | Because don't forget, the second
passing position should be much like the
| | 05:49 | first one, but just over here.
| | 05:52 | We titled the body, and
did another bunch of stuff.
| | 05:54 | So let's make a reference image. Copy
all those, Ctrl+Shift+V. So we snap them
| | 05:59 | into place and then take this reference image.
| | 06:03 | Let's put it in outline mode and
just drag it over until it's in the same
| | 06:08 | horizontal position as our new key
is going to be here, and padlock it.
| | 06:12 | Then make a stock of keyframes. Hit F6.
| | 06:15 | I'm going to hide that reference image again.
| | 06:19 | A big bounding box once
more, over the upper body.
| | 06:23 | Then just tilt it until it
lines up with the earlier version.
| | 06:27 | It doesn't have to be
100% exact, but near enough.
| | 06:31 | Now I think we can actually get
rid of that temporary guide layer.
| | 06:39 | Once again, I'm going to hide the
layers that needed further attention.
| | 06:43 | That's the legs and the arms.
| | 06:47 | I need to repeat our actions on the feet.
| | 06:52 | Let's just follow it like one foot.
| | 06:57 | So the problem foot this time is the right foot.
| | 07:07 | Actually, on that contact position
I think it should be a bit lower.
| | 07:10 | It should be on that lower line.
| | 07:12 | Let's look at the whole
thing again. Yes, indeed.
| | 07:16 | It's actually a little too
low on the alternate position.
| | 07:19 | So let's pull that down, pull
that one up. Glad we caught that now.
| | 07:31 | Let's hide the other foot.
| | 07:32 | It's kind of distracting.
| | 07:34 | It's good to do one thing at a time.
| | 07:35 | So here is our right
foot. It smacks into the ground.
| | 07:39 | Now we should do the same thing. It
should plant itself down on that lower
| | 07:43 | line and stay there.
| | 07:44 | So I'm going to drag this back to
the recoil position and forward to the
| | 07:47 | high-point, which we did.
| | 07:49 | Remember, on the
opposite foot at the same point.
| | 07:51 | F6 for a new keyframe here,
zoom out and see how that feels.
[00:07:57.62 Great!
Much better.
| | 08:00 | So you see you found, as you're working in
passing position, we're already getting the
| | 08:05 | feel of the actual walk
cycle even with just one key.
| | 08:08 | We're actually missing the recoil and
the high-point and we're already getting
| | 08:12 | a nice walky feel to things.
| | 08:14 | So I'm going to hide the
arms and the legs again.
| | 08:16 | I want unhide the other foot level,
because remember on the opposite passing
| | 08:20 | position it would look
like this, dragging forward.
| | 08:22 | Let me show you again on the reference image.
| | 08:26 | So the foot that we're going to be
working on now is this guy here.
| | 08:29 | So let's move him up.
Free Transform and drag him.
| | 08:36 | We've lot of freedom with the foot once
it's off the ground. You can really go
| | 08:39 | crazy with your position of it.
| | 08:40 | But this is going to be a
little more conservative.
| | 08:43 | The further you push it,
the harder it is to pose.
| | 08:45 | But it is possible to do crazy
things with walks. So here we go.
| | 08:49 | It's pretty standard,
stable passing of feet and hands.
| | 08:55 | So just one last double-check.
| | 08:57 | We check the contact,
contact, contact. Looks good.
| | 09:02 | Passing position, passing position.
| | 09:04 | The hands look pretty consistent, the
position of the feet looks consistent,
| | 09:07 | other than that they're reversed.
| | 09:10 | If we reactivate the limbs, we can see
they are perfect on the contact of course.
| | 09:15 | On the passing position, they
need to be polished and tweaked.
| | 09:19 | So I'll do that in the subsequent section.
| | 09:22 | And we will correct all these
little errors on the limbs.
| | 09:25 | Then at that point, the walk will then
have a few little gaps that will be fixed
| | 09:29 | on the recoil and high-point.
| | 09:30 | But it will start to feel a lot less
disjointed and a lot more solid at that point.
| | 09:36 | So let's move on and correct the arms and legs.
| | Collapse this transcript |
| Finishing the passing pose| 00:00 | In the last section we did the passing position.
| | 00:02 | We actually went in and fixed the
positions of the feet and the hands.
| | 00:06 | So now we are going to go in and make the
arms work with them. So let's see that.
| | 00:11 | It's in your Chapter 5
Exercise Files folder, file 10.
| | 00:13 | Let's tunnel in here.
| | 00:17 | We can hide the reference image.
| | 00:22 | Quick through, so you can see the
walk is starting to get a little better.
| | 00:25 | But we still got some broken parts and
that's where the limbs are intersecting
| | 00:29 | and not quite working.
| | 00:31 | So, one way of doing this, if you don't
like the layer horrors, is simply hide
| | 00:36 | everything except the arm or
the leg that you are working on.
| | 00:40 | So we treat the hand position
as the more stable and permanent.
| | 00:43 | So let's keep that. Make sure that
you are set to work in Preview Mode >
| | 00:48 | Anti-Alias, so it shades out the
other level. I find that's helpful.
| | 00:52 | And critical always when you work,
| | 00:54 | you select your frame number.
| | 00:56 | You are going to be working on
whatever frame this is, frame 9 in this case.
| | 00:59 | Check that you set the frame 9 in the
Properties panel and when you are going
| | 01:02 | to your symbol, make sure that you are
working on frame 9, so that everything
| | 01:06 | matches up. Otherwise you'll
start seeing crazy glitches.
| | 01:10 | If you see glitches and things popping,
it's a pretty good sign that you have
| | 01:14 | one of your numbers set incorrectly somewhere.
| | 01:17 | So let's pull this.
| | 01:18 | Try not be too crazy with moving the upper part.
| | 01:22 | I like to keep that as close
to the same axis as possible.
| | 01:33 | And it's that simple.
| | 01:34 | So we take a quick peep
at the overall body. Okay.
| | 01:39 | So then we can pick another part.
| | 01:42 | The leg left, the leg foot, same thing
there, so a couple of ways we can do this.
| | 01:47 | I am going to again, don't forget, keyframe.
| | 01:51 | You can squash the entire thing or
I prefer do a little bend if I can.
| | 01:54 | That makes it feel more
anatomical and much richer.
| | 02:03 | In this case we might be able to get it
through just rotating the outer symbol.
| | 02:08 | Do as much as you can by
working in the outer symbol.
| | 02:11 | And now the leg right and the leg
right foot, this is the big one so
| | 02:15 | that's, it's a big change.
| | 02:19 | So if you remember, we were having to
lift that foot into this position here.
| | 02:25 | That means the leg has to bend quite
a bit. Go into outline. Except for the
| | 02:31 | right foot and the right leg, so we
can may be lift the leg up a little bit.
| | 02:40 | Don't forget to keyframe.
| | 02:41 | Let's see what we can do there.
| | 02:46 | We did something the other side, but
it's feeling a little more extreme here.
| | 02:52 | So the other solution is if you feel
like you're hitting a limb as to how
| | 02:55 | far you can deform this, then you can always go
back into your foot and put it down a little bit.
| | 03:00 | This time there is reason to be close to
the, I will turn them to the other side.
| | 03:05 | Okay.
| | 03:06 | So now let's take a good look
in outline. It looks clean.
| | 03:09 | Put in a different color, looks good.
| | 03:14 | So that's our first passing position,
and of course the in-between frames are
| | 03:19 | still a little disjointed.
| | 03:22 | So we will do them next, but for now
we are just taking care of this guy and
| | 03:26 | this guy, so repeat the process over here.
| | 03:31 | Same thing if you feel the layers are too
much. Just hide what you don't need. Hit F6.
| | 03:40 | And I am working inside the
internal arm comp or composite frame.
| | 03:43 | Ultimately we are going to tween many
of these spaces, so we won't be popping
| | 03:52 | from one shape to another.
| | 03:53 | This whole thing will blend
into itself very nicely.
| | 03:55 | Don't be surprised when you start doing
this, if you forget to make a keyframe
| | 04:06 | and you start making changes here, but
then you realize, "Oh no, I've been making
| | 04:09 | the changes to the wrong frame." It happens.
| | 04:13 | That's why you like to have undo available.
| | 04:16 | And also save your files, save them often.
| | 04:19 | There is the other big one,
so let's fix this too.
| | 04:22 | I think on the other we brought the
foot down a little bit, make this a bit
| | 04:25 | easier, and also set the key.
| | 04:42 | And on this one, we need
to straighten up the arm.
| | 04:44 | That gives a nice swing on the arm too.
| | 05:03 | Okay, let's have a look at that. Much better.
| | 05:13 | So right now I am trying to focus on
the best of the work and ignore the bits that don't.
| | 05:17 | The things we are watching out for
are our foot placement. The feet should be solid.
| | 05:21 | Even though they are at the
moment, as you can see, sliding.
| | 05:24 | In this case, this foot here is
sliding to the ground. We'll fix that later.
| | 05:28 | There is no reason to
worry about that right now.
| | 05:30 | We are looking at the overall larger movement.
| | 05:34 | As you can see even without the
recoil on the high points added, we have a
| | 05:38 | nice feeling of a walk.
| | 05:39 | So when they go in, that's
really going to start coming to life.
| | 05:43 | That will also tie down these
ugly little gaps and breaks.
| | 05:48 | So let's save this and we will move
onto the walk cycle where we impact this
| | 05:53 | character into the ground
and really give him some weight.
| | Collapse this transcript |
| Animating the recoil position| 00:00 | So we have our contact positions and
our passing positions all laid out.
| | 00:04 | So it's time to continue to the recoil position.
| | 00:06 | So go into our Chapter 5 Exercise
Files and open file number 11, and let's
| | 00:13 | tunnel into our symbol.
| | 00:14 | Let's take a little peep
again at the sample image.
| | 00:18 | So here we have our contact position,
our passing positions, and our contact
| | 00:21 | positions, they are all done.
| | 00:22 | So the recoil is next.
| | 00:24 | That's where the character actually
impacts into the ground and this will give us
| | 00:27 | the feel of weight and of mass.
| | 00:30 | So how far we push this will give the
character's weight a greater amount.
| | 00:35 | As a less extreme recoil
position, he will feel a bit lighter.
| | 00:39 | Just bear in mind that this foot is
going to be flat on the ground and this rear
| | 00:44 | foot will be completely off of the
ground and ultimately in the final version,
| | 00:48 | this rear foot will actually be
slightly curved and right now it's slicing
| | 00:52 | through the ground layer.
| | 00:53 | We are not going to worry about that just yet.
| | 00:55 | So let's hide this
preview. Center our character.
| | 00:59 | A couple of things that are worth saying
more than once. Go into your Preference
| | 01:03 | panel and make sure the Contact-
sensitive Selection and Lasso tools is off and
| | 01:07 | that you are on Object-level
undo, not Document-level Undo.
| | 01:10 | This will actually control your
undo's to the symbol you're working on, and
| | 01:14 | that's much easier to follow the undo's.
| | 01:16 | And contact-sensitive means that it
will only select an object if you are
| | 01:20 | completely surrounded with your selection area.
| | 01:24 | Whereas the other way, you'll select that
just by doing that and that's too sensitive.
| | 01:28 | It's hyper sensitive.
| | 01:29 | So let's start adding in our recoil position.
| | 01:32 | So I am going to draw an F6 to make a keyframe.
| | 01:39 | Now the next step will be to select
the upper body, just a big box around all
| | 01:44 | the upper body layers.
| | 01:46 | Sometimes you can miss levels so that
they don't get selected properly, so I
| | 01:49 | also like to just drag everything.
| | 01:51 | Move the down arrow, five or
six clicks, maybe one more.
| | 01:56 | Now let's pretty quickly test this.
| | 02:00 | You see, he seems to float
from the second step from here on.
| | 02:07 | He doesn't have a recoil yet, but here, boom!
| | 02:09 | We are already seeing a bit of a bounce.
Sso I am actually going to push this a
| | 02:15 | little bit further, a couple more clicks.
| | 02:17 | But further down you go, the more weight
he has, but the more difficult it can be to
| | 02:21 | make these legs line up.
| | 02:23 | So bear that in mind.
You have to balance that out.
| | 02:27 | The other thing to remember about the
recoil -- let's look at this position here.
| | 02:31 | I am going to put a sample image back on.
| | 02:33 | The recoil is the point of maximum
impact and the arms being swinging, they are
| | 02:38 | more prone to reacting to that, so
they'll flare out slightly on the impact.
| | 02:44 | So let's go into the arms and from
the contact to the recoil, I am going to
| | 02:50 | actually push them out a
little bit further from the body.
| | 03:07 | Much harder to do this with a nice angle on the rear
arm so we'll just concentrate more on the leading arm.
| | 03:13 | And we will change the bend of the arm
later now, but for now I'm more concerned
| | 03:18 | about the position of the hand and
seeing how much we can get away with.
| | 03:22 | This might be too much, but it's good
also sometimes to over animate these
| | 03:25 | things and then pull them in,
to under animate them. Okay.
| | 03:37 | And you might want to tilt the head
a bit down on the recoil, because it's
| | 03:40 | shocking a little bit. Now I can feel it.
| | 03:45 | So let's go in here and I am going
to fine-tune the legs. I am using the
| | 03:52 | Shift and the numeric arrow keys for
these big crude movements just to get us
| | 03:55 | into a rough position.
| | 03:56 | We can use the regular keys after that.
| | 04:00 | So let's look at this in outline. Okay.
| | 04:07 | So also it's good to have
your sample image up here.
| | 04:11 | To give you an idea about
what the legs are going to do...
| | 04:14 | So for example, we are going from
the contact pose, this, into the recoil.
| | 04:18 | So look at the recoil leading leg, the left leg.
| | 04:21 | It's actually going to be bending at
the knee, so rather than trying to deform
| | 04:25 | the entire leg, I am just going to
tween the lower leg on the internal symbol.
| | 04:30 | So make sure again we are on the right frame.
We are on frame 5 of the outer timeline.
| | 04:33 | I'm going to also on frame 5 of the leg symbol.
| | 04:36 | So when we go into the leg. Be sure
that we are working on frame 5 of the leg.
| | 04:40 | Let's go in closer, let's go into
outline, and let's see if we can put a better
| | 04:47 | outline color on this to make it easier to see.
| | 04:56 | Try not to change the direction of the upper
part of the limbs. Just work on the lower part.
| | 04:59 | That's flexible a bit.
| | 05:00 | And then we will do
something similar for the right leg.
| | 05:04 | I'm looking at something where the leg
is reasonably down. It will bend at the knee.
| | 05:08 | So I am going to move the leg forward
a little bit, and use frameEdit,
| | 05:13 | our favorite third party
extension from toonmonkey.com.
| | 05:18 | Always remember make a new keyframe or
you will be changing the wrong keyframe.
| | 05:22 | That will cause problems.
| | 05:23 | So pull this up, and you can bend this too.
| | 05:31 | We will do more work, actually changing
some of these curves a little later on.
| | 05:41 | Okay. Now to give you a foretaste of what
we are really going to be doing at the
| | 05:46 | final stage of this, I am going to
go into this symbol and activate shape
| | 05:51 | tweening, and you can see it's working.
| | 05:54 | That's nice and have look at what the final
result is as we are looking at this leg here.
| | 05:58 | Let's do with the other one, and that's moving.
| | 06:04 | It's not getting jittery or anything.
| | 06:07 | So no need for shape
hints at least for this case.
| | 06:11 | So that's going to be the technique.
We have a shape tween inner comp doing
| | 06:17 | this action in place, which when it's
on the outer symbol, this motion tween to
| | 06:23 | line up with the foot.
| | 06:24 | So we can still do things with the
float like position it, move it, we can
| | 06:27 | still control or skew to affect the
outer symbol, but we do have the shape tween
| | 06:34 | in our form, which is taking care
of all the joints. So that's that.
| | 06:41 | I think we are okay there.
| | 06:43 | Now we need to do the second recoil.
| | 06:48 | So I am going to do a familiar process,
I am going to copy all of these, Ctrl+C,
| | 06:54 | Paste them over here,
turn them in to an outline.
| | 06:57 | This is a temporary level.
| | 06:58 | It's just here as a guide to give us an idea.
| | 07:00 | Switch off the background and that will
give us an idea of the pose that we have
| | 07:04 | to copy, because we want both recoils
on each side to be pretty much the same.
| | 07:09 | The arms will be in opposite positions,
but we want the upper body and the rest
| | 07:13 | of the poses to be as similar as possible.
| | 07:16 | So let's draw a box around the upper
layers and again just test that we
| | 07:20 | have selected everything. Pull it down a bit.
| | 07:22 | There we go, and I would still use the
reference layer for our positions for our hands.
| | 07:28 | Let's see. It's easier if you
just pull these completely free.
| | 07:32 | I want to make sure we are
working on the correct arms.
| | 07:37 | On the original, the right arm, is out
and to the up and so we want this arm to
| | 07:42 | do the same thing on the opposite side.
| | 07:45 | So I want to match it as close as we can.
| | 07:47 | Again, it doesn't have to be exact.
| | 07:48 | It can be slightly off
centered or at a different angle.
| | 07:53 | As long as the pose is the same
and the height is close enough.
| | 07:55 | And the same thing with the
feet. Let's zoom in on that.
| | 08:02 | I am going to pull these legs apart.
| | 08:07 | Make sure that the foot is on the right
line. So we are going to outline mode.
| | 08:19 | The green is the right
side and that's nearer to us.
| | 08:27 | And the green should be
a bit lower here. That's right.
| | 08:30 | So let's pull that in.
| | 08:31 | We will keep this reference layer for now.
| | 08:35 | It's still good for
helping to position the legs.
| | 08:37 | Let's go and rotate it, so again, most
of our work will be on the inner symbol.
| | 08:46 | frameEdit in, and don't forget.
| | 08:48 | Make the keyframe here. Done.
| | 08:56 | And let's position the leg,
frameEdit again. Make a keyframe.
| | 09:05 | If you add anything new in
here, add a keyframe first.
| | 09:19 | Okay, so now we can delete that.
| | 09:28 | We will find all these shapes later on.
| | 09:31 | This is a blocking pass.
| | 09:32 | This is still in the process of making
sure everything is basically correct,
| | 09:37 | fine tuning can happen and
all this is sorted and clean.
| | 09:40 | Okay, we are still seeing the pops,
but those are happening where the pipe
| | 09:44 | points would be on the next part of the course.
| | 09:47 | So I am going to go through it
a bit more slowly. It's good.
| | 09:51 | That's good.
| | 09:53 | We are all connected, good.
| | 09:57 | Same here, same there, and there.
So let's save this, and then in the
| | 10:04 | next episode we will move on and we
will add the final of the four keys,
| | 10:07 | to high point.
| | Collapse this transcript |
| Animating the high point of the walk| 00:00 | So now comes the final of
our four walk cycle poses.
| | 00:03 | That's the high-point, pretty self-descriptive.
| | 00:06 | So let's go in and add the
high-point to the walk.
| | 00:10 | So again, a reminder, we have our
contact, recoil, passing poses done.
| | 00:14 | So the character is in the recoil
position, smacks into the ground, begins to
| | 00:17 | move through, recovers from this,
goes into their highest position where
| | 00:21 | their body is at maximum stretch, and then
they move back into the contact, then it repeats.
| | 00:26 | So depending on how high we make the high-
point, it's like the opposite of the low point.
| | 00:31 | This is how we control the weights of the
character, how light footed they are. So let's do that.
| | 00:40 | I think the easiest way is just let's
make a keyframe stack, F6, and draw our
| | 00:46 | bounding box around the upper body.
| | 00:48 | I'll repeat from the last one.
| | 00:50 | Make sure that your Contact-sensitive
Selection is off and Object-level Undo is on.
| | 00:55 | So let's select these, pull them around,
just make sure that you grab them all. Undo.
| | 01:02 | And now let's just click the arrow and
pull it up, by a bit. Not by too much.
| | 01:05 | I'm going to use 1, 2, 3, 4, maybe
5 clicks of the numerical arrow key.
| | 01:10 | Maybe bring the head up a little,
just to give it a bit of a joint feel.
| | 01:15 | And we can actually probably bring the
legs up too, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5.
| | 01:18 | And it's good to keep a mental
tally of the number of clicks.
| | 01:24 | It helps to line things up if you are
going to push them around like that.
| | 01:27 | Now you can see already.
| | 01:29 | You see it's not doing it here, so the
first step has a bouncier feel to it.
| | 01:40 | So as you can see, of course we have
some issues with the positions of joining
| | 01:44 | the legs with the feet.
| | 01:45 | Again, look at our reference
material to see what we're shooting for.
| | 01:50 | So the thing to bear in mind about
the high-point is that we have a lot of
| | 01:52 | flexibility with the position of the foot.
| | 01:54 | It's floating in the air, so there is
a huge amount of choices as potential
| | 01:57 | positions that we can use for the foot.
| | 01:59 | So we're not limited to
this position by any means.
| | 02:02 | We can play with it.
| | 02:03 | So let's have a look.
| | 02:04 | I'm going to take a look at this high-point.
| | 02:08 | So let's push that foot off for a
moment and see what's happening.
| | 02:13 | So we can actually slide this leg around.
| | 02:17 | If we wanted to layer it slightly
differently, we could bring it right up.
| | 02:20 | We could do really crazy things with it.
| | 02:22 | So I am going to try to be reasonably
conservative and just pull it out to here.
| | 02:27 | Don't forget, we're going to have
access to the inner position as well, so all
| | 02:32 | this will be shape tweened.
| | 02:34 | So let's just do something a
little maybe bolder with it.
| | 02:40 | Now we apply the foot.
| | 02:41 | So we can do that for example.
Make it a bit more dainty.
| | 02:47 | What I'm going to do now is activate
shape tweening, so that we can see this
| | 02:53 | thing properly tweened.
| | 02:54 | I haven't bothered now, because I've
been more worried about just getting the
| | 02:58 | thing positioned at the main points.
| | 03:01 | And you can see here there is a
little bit of a point here that's going to
| | 03:04 | need some shape hints.
| | 03:06 | So the first part of this is working great.
| | 03:08 | Let's look at that first.
| | 03:09 | And we're just looking at his physical
right leg right now and here it breaks.
| | 03:16 | At this point we have to have shape tweening.
| | 03:17 | So let's use the frameEdit
in or the question mark key.
| | 03:24 | So before we add shape hints, let's say
this. Save your project and go Modify >
| | 03:29 | Shape > Add Shape Hint, and let's pick
another high corner up here and now we'll
| | 03:36 | use the scrub through.
| | 03:37 | It's a little bit better.
| | 03:38 | Let's add another one, Ctrl+
Shift+H. Already more stable.
| | 03:48 | We'll add another.
| | 03:54 | Just add a couple more.
| | 03:55 | We'll tie this one down.
| | 03:59 | Oh, that one broke it, so I'm just
going to put this one here instead.
| | 04:03 | This is the point where I've found that
the program can be a little weird and it
| | 04:07 | can crash, so that's why we saved it.
| | 04:10 | It's possible that you create a
shape that Flash just can't tween, so it's
| | 04:13 | response is to crash, but as long as you
backup your previous version, you're safe.
| | 04:18 | So that's good now.
| | 04:19 | Well worth the effort. So there we go.
| | 04:24 | That's a pretty cool looking step. Good!
| | 04:30 | So now that's our high-point and we
need to make a couple of more little tweaks.
| | 04:34 | This leg, we can make that reach
this foot by a couple of means.
| | 04:36 | We could stretch it up.
| | 04:37 | But bear in mind, look at the foot.
We're actually going to bend the foot.
| | 04:40 | So to reach this point here, the foot
is beginning to peel off the ground.
| | 04:45 | To work it back into the contact pose,
and we're going to do that as well,
| | 04:48 | this foot here is going to be
slightly different shape.
| | 04:51 | So I am going to leave that for now.
We'll move ahead and deal with the rest of
| | 04:59 | the parts first. I'm going to
come back and deal with that last.
| | 05:02 | Let's undo that little move.
| | 05:02 | It's going to line up with the feet, the hands.
| | 05:06 | Let's go into Outline, because I want to
make sure that the left hand is moving properly.
| | 05:11 | That's this guy.
| | 05:17 | Seems to be enough.
I think we can pull it down a bit.
| | 05:27 | Notice as well that the left hand and the
left limbs are moving opposite to one another.
| | 05:32 | So as the right moves forward, the
right arm goes back, and as the left leg
| | 05:37 | moves forward, the left arm moves back.
| | 05:41 | So that's our character, pretty much posed.
| | 05:43 | We still have to go in and fix some of these
inner shapes, but for now this is sufficient.
| | 05:48 | So now I want to create the opposite
of that shape, and again, we'll make
| | 05:51 | a placeholder here.
| | 05:53 | I'm going to copy the first high pose
position, Ctrl+Shift, and paste it to the
| | 06:00 | temporary layer, and then move this over.
| | 06:03 | And this will be our positional guide,
so that both high-points look as close to
| | 06:07 | one another as we can get.
| | 06:09 | Now we can make our keys here, F6,
bounding box around the upper body.
| | 06:15 | Actually I'm going to include the
legs as well, take that photo. Good!
| | 06:19 | Now I'll just use the arrow key to
roughly line up to the height I want, maybe
| | 06:24 | Free Transform to tilt the head
back a little, match the other.
| | 06:29 | And the other thing that's important
to match is the position of the foot.
| | 06:33 | That should be the same.
| | 06:37 | Not so much the physical position as
the angle. Move them off to one side or
| | 06:40 | here, but definitely the angle
details should be as close as possible.
| | 06:44 | And we want to make sure that
the foot is on the right line.
| | 06:47 | We have one line for the left
foot, one line for the right foot.
| | 06:51 | Very easy for these to slip.
| | 06:52 | So the one closest to us is green and
the one farthest away is blue and that
| | 06:57 | seems to be solid enough. So that's good.
| | 07:02 | And then the other thing
would be to position the leg.
| | 07:06 | So I'm moving the left leg to match the one
opposite, and I think that should be fine.
| | 07:12 | So let's get rid of this
now. Delete that layer.
| | 07:15 | I was a bit premature. I'm going to
put that back in for a second. I want to
| | 07:20 | check for the hands as well. There we go.
| | 07:26 | Now we can get rid of it.
| | 07:39 | So we have the same issue with this
foot. This foot should be peeling off to
| | 07:42 | join this back leg, but
there's some internal issues here.
| | 07:46 | So let's make a keyframe there and we
will just bend the lower trouser leg or
| | 07:54 | the lower leg to match that.
| | 08:02 | And go to Outline for a second.
I want to make sure that the arms are
| | 08:07 | all properly aligned. Close enough.
| | 08:11 | We're not in the game yet of being
completely accurate. This just needs to get close.
| | 08:19 | So if we look at each key by itself for
a moment, don't worry so much about the
| | 08:23 | in-between frames, and check all the
poses are solid, nothing is drifted, or not
| | 08:29 | worrying about this just yet. And that's good.
| | 08:32 | Our recoil pose is good.
| | 08:33 | A little gap there, easy to fix.
| | 08:36 | Passing pose is solid.
| | 08:38 | High-point is good. That's good!
| | 08:41 | And if you want to be very thorough,
just check recoil against recoil.
| | 08:46 | Close enough, not too far away.
| | 08:48 | The passing pose to the second passing
pose. Make sure they're at the same height.
| | 08:53 | The same general pose, even
though they're on opposite sides.
| | 08:57 | The high-point to the high-point. Fantastic!
| | 09:01 | So let's save this. We call it 13.
| | 09:07 | So with the file saved, it's time to
move on and the next step will involve
| | 09:11 | shape tweening the legs and the inner
timelines of the legs and the arms to make
| | 09:16 | sure that they're not popping, which is
what we're seeing right now, so that way
| | 09:19 | all the keys and all the in-
between frames will be smooth.
| | Collapse this transcript |
| Adding in-betweens| 00:00 | It's time to add in-betweens to the
inner timelines of the arms and the legs of
| | 00:05 | our walk cycle to smooth out the entire walk.
| | 00:09 | So let's open 13 in your Exercise File,
double-click on our symbol and then
| | 00:14 | quick run through and you'll see we
still have things popping on some of
| | 00:17 | these in-between frames.
| | 00:18 | So now I think it's kind of a fun part.
| | 00:20 | What we'll do is hide some of the
other legs and we'll take that leg layer.
| | 00:24 | And then we'll take that back
arm and just hide them for now.
| | 00:27 | Let's just work with one side. Great!
| | 00:30 | Now, let's take this leg for example.
| | 00:32 | I'm just going to start adding
shape tweens and I'm going to use my
| | 00:38 | numeric keypad shortcut.
| | 00:39 | And as you can see, it's all smooth.
| | 00:44 | There is still a little bit area and
that's because we need to animate this foot
| | 00:54 | curling to meet that.
| | 01:00 | So what I'm going to do--
That's a little bit distracting.
| | 01:01 | So I'm going to hide that foot layer,
so we can choose focus on the pant leg.
| | 01:05 | Good, it's getting very close.
| | 01:10 | So we'll do the same process for this upper arm.
| | 01:19 | So it seems that I want to
shape tween beginning from frame 5.
| | 01:26 | So what I'm going to do is add a
keyframe here and don't forget we have our
| | 01:32 | wrist area that's going to be
motion tweened. Now let's go out.
| | 01:38 | It's be slight offsets here,
because the hands on a different layer.
| | 01:43 | It's not arcing quite the same,
but I'm not worry about that just yet.
| | 01:50 | So we need to add a little tween here.
| | 01:52 | Wherever the hand breaks, that's where
we tunnel in, make a keyframe and then
| | 01:58 | add our tweens there.
| | 02:02 | Now the tween process is breaking a little,
so we have to help it out, give it some hints.
| | 02:07 | Again always before you add
hints, save your project file.
| | 02:19 | So the first hint helps, so
that's good. Leave where it is.
| | 02:22 | Sometimes one hint will be enough.
| | 02:23 | Sometimes you have to add a lot more.
| | 02:33 | Okay, so that looks good.
| | 02:34 | So again test the outer symbol, nice.
| | 02:37 | I think we should have a tween here.
| | 02:42 | It seems to be breaking off a little bit.
| | 02:44 | So again, just don't keyframe from
here. Just add a key there, much better.
| | 02:53 | And then definitely from here to here.
| | 02:56 | That should be tweened. Again add a key.
| | 03:02 | Shape tween, motion tween, huh!
| | 03:03 | It's breaking it again, so more shape hints.
| | 03:10 | Modify > Shape > Add Shape Hint or
your shortcut for that.
| | 03:24 | Still a little wonkiness at that
corner, so I'll add one more at least.
| | 03:31 | It's still a little bit, but I don't
want to let that go, because we might be
| | 03:34 | playing with this still. There we go.
| | 03:36 | So now as you can see, properly tweened.
| | 03:41 | So let's unhide the other leg and the other arm.
| | 03:52 | Actually, I'm going to put the torso on
outline as well as the lower torso, so
| | 03:57 | we can probably see through them.
| | 04:00 | Lots of breaks happening here
still, so I'm going to go in here.
| | 04:02 | It looks good from there, fine.
| | 04:05 | I'm looking at the arm now.
| | 04:11 | Definitely from here we're going to
start tweening the arm, so going into that
| | 04:14 | same frame, F6, Shape Tween, Motion Tween.
| | 04:19 | Good!
| | 04:28 | Move from here to here, definitely
you'll see it's breaking, so F6 for keys,
| | 04:36 | Shape Tween, Motion Tween.
| | 04:37 | And then again we're going to have to
add some extra keys for the hand position.
| | 04:47 | Definitely we should have some
kind of tweening happening here.
| | 04:51 | So as you can see it doesn't happen on
some of these keys, because between some
| | 04:54 | of these keys in the outer symbol, we
didn't do anything drastic with the arm.
| | 04:59 | Simply put these where
they're needed, there we go.
| | 05:00 | So I'm going to actually switch off at
legs, so we can focus entirely on the arm.
| | 05:05 | There is a little bit of
sticky that's happening here.
| | 05:10 | You can see right on this frame.
| | 05:15 | It's moving either too much before that.
| | 05:18 | So I'm going to do is give
it a bit more room to travel.
| | 05:24 | We can't change the first frame, not
the last frame because it should be the same as this.
| | 05:32 | These two frames have to line up.
| | 05:33 | So any changes that we make, any
doctoring, has to happen sooner than that.
| | 05:42 | I find sometimes too the easiest way to
correct this is something to delete the
| | 05:47 | sticky frames, clear the keyframes,
make a new one, let Flash worry about the
| | 05:53 | rotation and the overall positions,
and then you can fine-tune it.
| | 05:56 | It's probably the smoothest way
of doing it. Now let's check.
| | 06:01 | It's much better.
| | 06:03 | So let's hide that hand.
| | 06:04 | It's getting in the way. Yes, that's fine.
| | 06:11 | So let's unhide some of the other layers and
see, choose the other one we wanted to work on.
| | 06:21 | Oh yes, the right leg,
hide the other.
| | 06:30 | Then go through
frame by frame, there we go.
| | 06:35 | So from frame 17 through,
we have to add something.
| | 06:40 | Shape tween that, and we
need to add a shape hint here.
| | 06:43 | Don't forget, save your project.
| | 06:44 | I'm going to add more hints.
| | 06:51 | Clearly we've already assigned hints on
our previous pass, so I'm going to add
| | 06:55 | them in the same position.
| | 06:56 | They usually seem to like the same position.
| | 06:59 | If they work on one key,
they tend to work on the other.
| | 07:03 | Okay, it's good enough.
| | 07:09 | There is a little bit of
wiggling in the corner there.
| | 07:11 | Let me add one more.
| | 07:22 | Okay, that's much better.
Some more hints needed here.
| | 07:27 | As you can see it's not
matching the outer movement.
| | 07:38 | And we should probably add
them here too at the end.
| | 07:40 | So let's add one more key
and one more shape hint.
| | 07:43 | Basically, anytime it's moving
between two of these, you can make the whole
| | 07:47 | thing a shape tween and keyframe all of
these points and shape tween the entire
| | 07:51 | timeline. That would probably work.
| | 07:54 | So let's look at the entire
thing with all the layers and see if
| | 07:58 | we've forgotten anything. Pretty close.
| | 08:01 | So we've come a long way already.
| | 08:05 | Zoom out and watch it. Sometimes I
find it easier to look at the things from
| | 08:07 | a bit of a distance. So that's great.
| | 08:12 | So the last correction, I'm
sure you can tell, is that foot.
| | 08:14 | We need to do some surgery on that shoe to
make sure that it wraps and curves to the ground.
| | 08:19 | That's really going to sell the character
living in his environment, so let's save that.
| | 08:29 | Now we'll move onto correcting the shoe.
| | Collapse this transcript |
| Rigging the shoes| 00:00 | The final step of the basic pass of our
walk cycle is going to be fixing the feet.
| | 00:05 | So let us open the
previous file and it's number 14.
| | 00:12 | So click on here and again just to
look at the feet action on the reference image.
| | 00:18 | Let's just watch this light
colored foot, just see it bends and twists
| | 00:23 | and adopt different positions in the
curves around the ground and obviously
| | 00:26 | we think a Flash symbol probably wouldn't be
able to do that because it's one big static shape.
| | 00:32 | I am going to show you how to do that
and how to make this look like it's made
| | 00:36 | of leather or something flexible.
| | 00:39 | So the first thing I'd like to do is
right-click, just go right into the symbol.
| | 00:43 | I don't know if you remember our
creation of this but we took an earlier three
| | 00:48 | quarters foot and used the Distort
tool to create this image and with the
| | 00:53 | Subselection tool I'll show you what
happens. You end up with a couple of extra
| | 00:56 | points that you don't need.
| | 00:57 | It's still pretty clean but I would
never want an image to have a point there.
| | 01:02 | This curve could probably be made with one
line but preferably just two to bend here.
| | 01:07 | So let me see what happens if I try to
bend this shoe to make it look like it's
| | 01:14 | wrapping onto the ground.
| | 01:16 | So let's see second point here is already
misbehaving, twisting into weird shapes.
| | 01:21 | So now I've got to pull this
other weird point here, pull this up.
| | 01:28 | It may work, okay that worked, but as we
begin to pull this thing, I'm not having
| | 01:36 | much fun pulling this line. Adopting
these weird little curvy S-shapes.
| | 01:40 | It's very annoying and at some
point in the process of doing this I
| | 01:45 | guarantee you this thing will break
and you will pull it into a shape that
| | 01:51 | the program doesn't like.
| | 01:53 | You've already seen shape tweening
acting up with very simple forms.
| | 01:58 | This kind of thing will happen.
| | 02:00 | It will drive you bonkers.
| | 02:02 | So even just to do like a
small move. Let's undo all that.
| | 02:07 | The solution to this isn't too difficult.
| | 02:10 | All we want is to give shape
tweening every chance of doing its job.
| | 02:16 | So having everything for one first
problem is we have too many points and we
| | 02:20 | are going to redraw this and remove
this point and we are going to remove this
| | 02:23 | symbol here and the other thing we
are going to do is to create this object
| | 02:27 | not on one layer but on 3.
| | 02:29 | One for the dark area, one
for this one, one for that one.
| | 02:32 | There are a couple of different
approaches we can use for this, so let's try to
| | 02:36 | find the one that's going to be
the most stable and Flash friendly.
| | 02:39 | So let's make three layers and the
lower layer will be our reference layer,
| | 02:46 | which I'd like to color something like this.
| | 02:50 | So our choice now is how to split up
this shape onto three separate layers.
| | 02:55 | What we could do is one strategy is
have a single black shape, that's this
| | 03:00 | outline color, and then have simply
the brown layer on top of that and this
| | 03:04 | layer on top of that.
| | 03:06 | So that we would have a three
pointed light brown layer, a 1, 2, 3, 4, 5, 6
| | 03:10 | pointed dark brown layer and about same number
of points, seven points, for the black layer.
| | 03:16 | The only problem with that might be
that the black would overlap on this.
| | 03:20 | So I think we should definitely have
the light brown layer on the top and I am
| | 03:24 | going to pick this dark brown
layer as the largest part of the shoe.
| | 03:28 | So let me show you how we begin this.
| | 03:30 | So I am going to pick the Rectangle
tool and click that line off. I am going to
| | 03:36 | work in Outline mode and may be pick a
brighter color so we can see the outline. Better.
| | 03:43 | So I am now going to put Snap on because I
want Snap to work exactly to these points.
| | 03:56 | Hold on Alt/Option to snap to this point.
| | 03:59 | Actually I am going to go a little
beyond. I am going to have black sole be an
| | 04:02 | overlay. I am going to actually go
over this, so we can move a little outside
| | 04:06 | that but keep this point alive. We
don't want this point to be disappeared by
| | 04:10 | Flash, so you can keep that as a
sharp point somewhere in this black area.
| | 04:17 | This area here is going to be
covered up by that light brown.
| | 04:21 | Hold on Alt/Option again to make this
curve and don't make too many of these
| | 04:25 | curves in here. These
should be as few as possible.
| | 04:29 | Okay, so that's going to be that area.
| | 04:34 | Now I am going to make the three
pointed light sole of the shoe. Let's click
| | 04:39 | the Eyedropper, padlock that off,
eyedropper to there, and same thing. We are
| | 04:45 | going to outline the lower layer so we could
see this better and create our shape in here.
| | 04:51 | Double-click the line. We
don't need that, delete it.
| | 04:55 | Snap on again and this time I am
going to keep the lower layer on too.
| | 04:59 | So this point will come exactly to
here, to there, make this a triangle,
| | 05:06 | then map that to this.
| | 05:08 | Go in to outline for a second,
let's see what that looks like.
| | 05:15 | So that's it and then the final
phase would be the sole of the shoe.
| | 05:19 | Again, I think the rectangle shape
will be good for that. I am going to get
| | 05:25 | rid of that outline.
| | 05:29 | That's a dark gray, so we paint that dark gray.
| | 05:32 | Just put on all our previous
layers in outline and lock them.
| | 05:37 | Outline the upper layer. Make sure
Snap is on so we line to these points
| | 05:41 | precisely and I want to Alt+Click,
Option+Click so that we make an extra point here,
| | 05:47 | because we only want to bend
the foot roughly around this point.
| | 05:53 | So it matches this curve of the front of
the shoe and then wrap these curves and
| | 06:01 | the last step will be to reactivate all
our layers and check and make sure that
| | 06:07 | they clearly overlap, because obviously
if you pull this too far you might start
| | 06:10 | seeing white caps like this.
| | 06:11 | So this is really-- you can never
quite get this exactly the first time so
| | 06:16 | sometimes you have to add little areas
of overlap so that you have a bit of give.
| | 06:23 | Now we can get rid of the earlier layer and
if you look at this in the Subselection
| | 06:29 | tool it will show you the geometry.
| | 06:31 | So for example, here we have six points.
| | 06:33 | That's a very clean shape and on
the front of the shoe, three points.
| | 06:39 | That will be much easier to
tween and this is a tricky one.
| | 06:42 | Let's go one two three
four five six seven points.
| | 06:45 | So that is pretty good, so let's first
of all save this and I'm going to try a
| | 06:56 | quick experiment and we
will see how much easier it is.
| | 06:59 | We are going to have to twist the shape
of this foot to match the ground plane
| | 07:03 | for example and already you remember
how difficult it was to manipulate this
| | 07:07 | foot shape and now it's just two points.
And I have already disappeared the line
| | 07:12 | break here, so that happened
during the creation process.
| | 07:15 | Easily fixed. We could actually redraw it.
| | 07:18 | There is still a point there.
| | 07:20 | So what I want to do is re-create that.
I really want to have easy access to that.
| | 07:23 | So I want to draw a box over
that and hit X to delete it.
| | 07:26 | Make sure Snap is on, pull that point back
to where we want it, and now we have it again.
| | 07:32 | This time I am going to keep a slight
break there and that will help to work with.
| | 07:37 | So now if I wanted to for example put a
break on the shoe, you see how easy it's
| | 07:43 | going to be at this point to
create radically different shoe shapes.
| | 07:50 | So imagine this rotated a few degrees
and we are going to be able to do amazing
| | 07:55 | stuff with that and we'll look at that the tweens.
| | 07:59 | So little piece sticking out there but
that's easy to fix and that's going to be fun.
| | 08:06 | So let's undo all that for a second or
actually just delete these. Clear Keyframe.
| | 08:11 | That's a really great stable shoe.
Like I said, a lot of fun with this one.
| | 08:17 | So let's save this again and we will now
move on to actually animating and shape
| | 08:24 | tweening the foot to fit the walk cycle.
| | Collapse this transcript |
| Animating the shoes| 00:00 | So we've got everything done now but
our shoe and we need to bend the shoe and
| | 00:05 | make it a more animatable object so
let's open our previous file. That's 15.
| | 00:13 | Double click on the body and let's work
on this one because it's starting in the
| | 00:20 | contact post so we would be able
to animate the bending of the foot.
| | 00:25 | So, it might just help just to hide the
other leg so we can focus on this one. Okay.
| | 00:32 | So, the thing to bear in mind is that
when this foot hits the ground it should
| | 00:37 | stay there and only do the
things that we want that to do.
| | 00:41 | That means on this frame here it
really shouldn't be sliding through the foot
| | 00:44 | plane and we put that in as a working
position really but it's not what we
| | 00:48 | want to have happen.
| | 00:49 | So I am going to show you the
reference sketch on our bottom layer.
| | 00:55 | We want the foot to bend, going
from on the passing pose, still flat.
| | 00:59 | Moving it to the high point and
the contact. It's here and here.
| | 01:03 | That foot should be beginning to twist and
bend into a proper shape, so let's do that.
| | 01:10 | So the first thing I am going to do is
get rid of this overall foot position.
| | 01:14 | Let's go back to where the
foot was still flat and copy it.
| | 01:19 | So, at this point the foot will be at
its maximum flexing before it lifts off on
| | 01:24 | the subsequent key and that
leg should be flexing here too.
| | 01:28 | So beginning on this frame and on this one,
it will be tweening into this bend foot shape.
| | 01:33 | Don't forget any alterations we make to
one foot, we have to make to the other.
| | 01:38 | We'll do that after we animate this section.
| | 01:41 | The other thing we want to make sure is
that any time you work with the nested
| | 01:44 | scene with a timeline inside a
timeline you want this to match.
| | 01:49 | So let's make sure that this is on
frame 1. The next key as you can see here is
| | 01:54 | on 5, so we click the foot and see an
error has crapped in. This happens a lot.
| | 01:59 | So, let's click on the foot.
| | 02:01 | This next one should be frame 9, as the
outer timeline is on frame 9, and we are
| | 02:07 | going up by four times. This should be 13.
| | 02:09 | The next key should be 17, I am
looking down here, and then we are at 21.
| | 02:19 | That's correct, 25, slide over,
29, 29, good and 33, 33. Excellent.
| | 02:29 | So, let's go back to our point where we are
going to start tweening this. We have two feet.
| | 02:36 | This is the old design that you may
remember when we were first rigging.
| | 02:39 | Let's look at the other one.
| | 02:41 | This is the one that we separate on to
three layers for much more easy shape tweening.
| | 02:45 | So let's copy these layers, Ctrl+Alt+C,
and we'll copy that artwork into this
| | 02:51 | symbol, so now this is the same as the other.
| | 02:54 | Great. Well let's find the position of
the maximum twist for this foot and that
| | 02:58 | is frame number 17. Click in here.
| | 03:01 | I move to frame number 17 and let's set
a keyframe. And the bending begins here
| | 03:07 | and we'll snap back to
our recoils position here.
| | 03:10 | So, let's make this a little larger,
and we discussed this before. Flash really
| | 03:19 | likes to take our points and merge them.
| | 03:22 | I have a point here that I created and
if I tried to select this shape and with
| | 03:26 | the basic Selection tool I can't do it.
| | 03:29 | So, let's go in and
recreate that. Very simple.
| | 03:32 | This is how I usually do it.
| | 03:33 | So, just make a new hole in the rig.
| | 03:37 | I just want a single point here
between the two that I can use to snap off.
| | 03:42 | So we are going to break the shoe there.
| | 03:43 | It's going to bend at that point.
| | 03:45 | So, there we are, still there.
| | 03:46 | It looks like it won't continue with this
curve but I want to have a break right there.
| | 03:50 | You'll see why now.
| | 03:52 | So, let's just hide the two lower
layers and that's where we are going to
| | 03:56 | bend the shoe to match.
| | 03:57 | This is the value of having the outer
clip in place with no rotation. You can
| | 04:01 | see the point of transformation,
the way it relates to the outer symbol.
| | 04:09 | So, don't worry about that for now.
Then the next most important symbol is the
| | 04:13 | large brown area of the shoe. Padlock that off.
| | 04:16 | Let's twist that up so it's
inside the lower cuff of the pants.
| | 04:24 | Oops! Padlock that sole now.
| | 04:26 | Make sure Snap is on so that this corner
matches exactly that one or we'll have
| | 04:34 | strange arcs and shapes happen.
| | 04:39 | So, let's put shape tween on right now
and see if this works. Very nice and then
| | 04:45 | the last element would be this.
| | 04:46 | A slight little bend and twist on
the toe of the shoe, just to make it feel
| | 04:53 | like there some squash and stretch happening.
| | 04:56 | Now, let's see how this
interacts with the outer clip.
| | 04:59 | All right, so let's switch off the other shoe.
| | 05:09 | Not quite all the way there yet but close.
| | 05:11 | So we need to go in to this symbol,
maybe stretch it a bit to cover over the gap
| | 05:18 | that's opening up there.
| | 05:32 | Now, some of these in-
betweens are looking strange.
| | 05:35 | There may be an error in your
frame information, again on your symbol.
| | 05:41 | This is frame 1, this is 5.
| | 05:43 | Let's check these first.
| | 05:45 | This is frame 9, this is frame 9.
| | 05:46 | Again, I am checking the frame
numbers in that Properties panel.
| | 05:50 | Frame 13, frame 13, frame 17, frame 17.
| | 05:55 | Okay, so all our numbers
line up. Now here we go.
| | 05:58 | The problem is there
should be a shape tween here.
| | 06:00 | So, I am going to add a shape tween there.
| | 06:02 | That's where we are having the pop effect.
That's was an oversight from a previous part.
| | 06:08 | Great, a couple of little things now.
Just to readjust the pants. Make sure they
| | 06:19 | are nicely centered over the ankle.
| | 06:28 | Okay, it's looking pretty good, and the
thing to watch out for, focusing on this
| | 06:37 | area, and when we start fine tuning
this to make sure that the pant leg isn't
| | 06:42 | fluttering too much.
| | 06:43 | When we lift the leg off here, it's
sliding a little bit, as we're moving from the
| | 06:50 | high point and from the contact to the recoil.
| | 06:54 | Basically, once the contact
pose ends we really should be off the
| | 06:57 | ground without foot.
| | 06:58 | So, there are three
different ways we could tackle this.
| | 07:01 | We can move the other leg up a little
higher to lift it clear from the ground.
| | 07:05 | Now, the other thing I would do is
the return from the stretch into the recoil,
| | 07:12 | it's quite slow.
| | 07:13 | So, we can make that snappier by
pulling this back and then we will recoil
| | 07:17 | from that into that.
| | 07:19 | So seewhat that looks like.
| | 07:23 | So all these tween case that you are
seeing here. We can ultimately end up
| | 07:27 | adding secondary keyframes or
changing this leg position.
| | 07:33 | Whatever it takes to snap us out
of this stage clean off the ground.
| | 07:48 | That's a lot better already.
| | 07:49 | I wouldn't say that's the final by
any stretch but that's gotten rid of that
| | 07:52 | big nasty sliding.
| | 07:57 | So, now we apply the same process to the
other foot and don't forget this symbol is wrong.
| | 08:02 | That should be flat.
| | 08:06 | Basically the same
as this but with a bend.
| | 08:08 | So we want that same flat foot here and
we also want it in its other position here.
| | 08:15 | Let's see what's the best way of doing
this. Wwe can click and eyeball it.
| | 08:19 | I am going to copy it and paste it in
place and just slide it back along the line.
| | 08:26 | We want to make sure it's in the same
relative position to the foot as these.
| | 08:30 | So, let's make a quick
reference layer. I do this a lot.
| | 08:33 | It's a nice way of making sure that
we are perfect in our positioning.
| | 08:39 | So, the position of the foot
relative to that is this, which tells
| | 08:43 | us we are a little bit off and
that'll get rid of our reference layer.
| | 08:49 | Last step of this part will be just
to check our frame number and it's again
| | 08:53 | this is a unique image.
| | 08:54 | It doesn't have any animation in it yet.
| | 08:56 | Let's make sure this is set to frame 1 of
the start and frame 5 and all the way through.
| | 09:15 | That should be 21, 25 is here. Little
mistakes that crept in along the way.
| | 09:26 | It should be 29 and 33, great.
| | 09:33 | So, what we will do now is
duplicate the animation of this part.
| | 09:38 | I am just going to copy all of these frames
and we want this animation to happen in here.
| | 09:44 | Let's move him down to this area,
put a little gap between them so we can
| | 09:49 | see the difference.
| | 09:51 | So, on the passing position to the
high point to the contact we want the same
| | 09:56 | thing to happen here but on the opposite frames.
| | 09:58 | So not from this passing to
this contact but this one.
| | 10:01 | So, let's duplicate them.
| | 10:05 | Actually, I should hold down the
Alt key and keep our original over here in
| | 10:09 | case anything breaks.
| | 10:11 | Let's see if that works.
| | 10:13 | I think we should also
duplicate let's see here.
| | 10:18 | Yes, this post should be there too.
| | 10:22 | As we bend on the first frame.
| | 10:29 | Okay, so it's curving and
then just slight error in here.
| | 10:36 | There we have an example. If the frame
number of your symbol doesn't align with
| | 10:40 | the outer frame number and you are
trying to keep everything on the same track.
| | 10:43 | So you see little pops like that.
| | 10:45 | So, often times to check your numbers.
| | 10:48 | Good, now we are getting there and
remember we made a little change here on
| | 10:52 | the recoil position.
| | 10:53 | So, we would, I think, eyeball a
similar change here where we drag this up.
| | 10:58 | We lift it off the ground a little faster.
| | 11:01 | It will snap here. That's good.
| | 11:04 | Okay, so that was a bit of
work. A little fine tuning.
| | 11:13 | Very hard to avoid.
| | 11:14 | The feet are usually tricky. As I see
a little gap there opening up, and this
| | 11:20 | spot here so we can pull that down.
| | 11:21 | Always be vigilant for
the gaps between the layers.
| | 11:27 | It's very common and I think
that is the basic walk complete.
| | 11:32 | Now, we proceed to the next phase,
which is taking our existing walk cycle and
| | 11:36 | doing what in the good old days was
called plussing, adding details and touches
| | 11:41 | that will really enhance and improve it.
| | 11:43 | The first thing I am going to do is move
into the head and move the little piece
| | 11:47 | of hair around, try to make it feel like
| | 11:49 | it's reacting to the
secondary motion on the hair.
| | 11:52 | So let's save this file and we will
then move on and proceed to the hair.
| | Collapse this transcript |
| Animating the character's head movements| 00:00 | So, we've animated the basic walk
cycle and now it's time to add a couple
| | 00:04 | of little details to the head symbol to
make it look like it's a part of the action.
| | 00:09 | So let's open up our previous saved file,
number 16, and go into our symbol,
| | 00:18 | and actually let's look at
it from the outside first.
| | 00:25 | As you can see, the hair should be
moving around a little bit, reacting to the
| | 00:28 | motion and the jolt of impact and such.
| | 00:30 | So, it looks like quite what
it is, a single static symbol.
| | 00:36 | So, let's find the places where we
think it should move and definitely on this
| | 00:39 | recoil, you'll expect here, as the
body is moving down, the hair should be
| | 00:44 | catching the air and dragging up a little bit.
| | 00:45 | So let's go into this.
| | 00:47 | We're using the frameEDIT in command.
| | 00:51 | Extremely useful and I'll be using that a lot.
| | 00:53 | So let's zoom into this.
| | 00:57 | This is our hair upper layer.
This is the one we'll use.
| | 01:00 | Actually one where that's quicker, you
might find this, is a locked layer and you
| | 01:03 | just keyframe all the major positions
on this Timeline, and it's a symbol so
| | 01:09 | we'll motion tween these.
| | 01:13 | So, on this frame, I am making sure snap is
off because I just want to make fine movements.
| | 01:18 | I might drag it back a bit and maybe skew it.
| | 01:20 | I find skewing is very useful for this.
| | 01:22 | Now, we want to make sure with that,
bear in mind, that if we bring this up
| | 01:27 | too much, it will reveal some of the
potential problems with the underlying hair level.
| | 01:32 | So let's go into this part and
just pull thar forward a little bit.
| | 01:40 | You can modify, in some small
instances like that, if this is a personal
| | 01:43 | project and nobody else is using this,
asset of artwork, then making a change
| | 01:48 | like that is very unlikely
to cause any kind of problems.
| | 01:51 | If you are in a big production where
other people might be using the same rig
| | 01:55 | and sharing assets with you,
it could be a huge problem.
| | 01:58 | So, these kinds of changes to the rig do
depend on your context and your work environment.
| | 02:02 | So, I would be very careful.
| | 02:03 | If it's your project, then you can
pretty much be freewheeling with it.
| | 02:08 | Do be cognizant of the fact that if
you are sharing these with friends and
| | 02:11 | coworkers, you might want to just
duplicate a symbol before you make a change,
| | 02:15 | give it a name of your own.
| | 02:16 | So if somebody pulls in your walk cycle,
they won't be corrupting an existing
| | 02:21 | symbol in their library.
| | 02:23 | So, anything we do on one recoil,
| | 02:25 | the beauty of doing that, is just a
simple case of holding down the Alt or the
| | 02:29 | Option key and dragging
your keyframe to the opposite.
| | 02:34 | Now, let's see what that little change has done.
| | 02:40 | It might not be too noticeable.
| | 02:41 | Let's look at that from a distance.
| | 02:42 | You can see there's some kind of movement there.
| | 02:45 | Let's look at it frame by frame.
| | 02:48 | Quite subtle, but we can certainly
accentuate it because on the move to the
| | 02:52 | passing position, the opposite should happen.
| | 02:55 | That little forelock of hair should drag down.
| | 02:57 | So let's see what we can get away within here.
| | 03:04 | That'll give a much stronger transition.
| | 03:07 | So again, hold down your Alt
or Option key, copy that over.
| | 03:10 | Now let's look at it.
| | 03:14 | Again, let's go into slow motion,
we'll go frame-by-frame, and drag, and
| | 03:22 | now it's pulling down.
| | 03:23 | So, on the way up, we can
actually increase the drag a bit further.
| | 03:32 | So for example, we have the hair
at the maximum drag at this point.
| | 03:36 | There is no reason to why we couldn't push it
even further, maybe all the way to the high point.
| | 03:40 | Let's just try it and see what happens.
| | 03:41 | We can always change back.
| | 03:46 | That's better.
| | 03:48 | It's a much softer feeling now.
| | 03:49 | Changing the timing also
changes the feel of the material.
| | 03:54 | If you made the hair snappier, it'll be
like he has got some crazy gel in it or
| | 03:59 | it would make it feel it more like a wire.
| | 04:01 | The slower these movements, the
fuller, more like a soft puffed-out texture
| | 04:07 | you're seeing or feeling on the hair.
| | 04:09 | Same thing goes for any other property.
| | 04:12 | So just be aware that that timing of your
object does affect the perception of the material.
| | 04:17 | But in this case certainly, the
slower movement really looks nice.
| | 04:21 | It's subtle but it's there.
| | 04:22 | We could add a few more little tiny details.
| | 04:24 | I am not sure how well they'll
read, but let's give them a go.
| | 04:28 | So, this area may be tweenable at
the hair at the back of the head.
| | 04:31 | Let me un-padlock this.
| | 04:33 | Now, you may remember we made this
thing into a symbol and it's got everything
| | 04:39 | we've done so far in this course.
| | 04:41 | It should have just a small number of points.
| | 04:43 | So this thing should be able to shape tween.
| | 04:45 | It won't be able to shape tween here.
| | 04:47 | So, for simplicity's sake, I am going to
break it apart, Ctrl+B. So now we should
| | 04:51 | be able to shape tween it,
and let's drop some keys in.
| | 04:54 | We get the same timing I think as on the
upper hair, and let's shape tween all of these.
| | 05:01 | I am now using my commands for shape
tweening, which are on the numeric keypad.
| | 05:06 | So, let's go through
this frame-by-frame and see.
| | 05:10 | So, on this, you might be able to pull
that hair up a little, and on this frame,
| | 05:22 | let's see if we can drag it in slightly.
| | 05:23 | Yeah, and it's shape tweening very nicely.
| | 05:28 | Again it's a subtle thing.
| | 05:31 | It may not make too much of a difference,
but it's certainly a lot better than
| | 05:37 | having a big stiff static shape, and
it also shows you how you can take a
| | 05:40 | symbol in your Timeline that is
designed to be motion tweened and sometimes
| | 05:44 | suddenly just break in apart, and it can
become a shape tweened object on the same Timeline.
| | 05:49 | You can have it motion tweened
for apart, then break it apart.
| | 05:51 | Shape tween this for another few frames.
| | 05:54 | One more little thing we'd maybe
like to do here, and I wouldn't go
| | 05:58 | crazy with this because it might look
odd, but certainly the head is tilting
| | 06:04 | very much on this high point and it would be
nice if we can do something with the eyebrows.
| | 06:09 | So let's do that and I am going to
very conservative again and just do it on
| | 06:14 | the same timing as the rest.
| | 06:15 | So from here, this is the
recoil and this is the high point.
| | 06:20 | So we are going to shape tween from
here to here, and from here to here, and
| | 06:25 | just move the eyebrows up a little.
A few clicks with the arrow keys.
| | 06:28 | Let's see if that works.
| | 06:30 | Well, I made a change there without keying.
| | 06:33 | This eyebrow should be keyed as
well if we are going to animate that.
| | 06:38 | Let's drop them in. Set
them to shape tween, okay.
| | 06:47 | So, let's move up again and
we should go in a little closer.
| | 06:50 | This is a very subtle movement.
| | 06:51 | So, when he is in his up
position, he will do this.
| | 06:57 | And actually he'll do the
same thing on the other one.
| | 06:59 | So hold down Alt or Option and
just copy that over here.
| | 07:04 | Oops! There we go.
| | 07:08 | So let's see if that's even readable.
| | 07:13 | I think it does, very slightly, and
we can make an even more subtle change.
| | 07:18 | Again, I wouldn't go nuts with this
because we're going to be making him
| | 07:22 | walk over and over.
| | 07:24 | So it might be eye-catching.
| | 07:28 | All I want is this to look like his head is
tilting back up a little bit as he walks.
| | 07:33 | So let's just leave it at this and then
copy anything you do him on step of the
| | 07:40 | walk onto the other.
| | 07:49 | I am feeling it. I don't know about
you but I am certainly detecting that.
| | 07:54 | I don't know if I would notice that if
I was looking at this cold, and a lot of
| | 07:57 | times these effects are subconscious.
| | 08:00 | Nobody is going to go "Wow, did you
see that crazy movement on the eyebrow,"
| | 08:03 | but it'll certainly give a feeling
that we're looking at something that's a
| | 08:06 | little bit more than just a flat
symbol that's been shape tweened in a very
| | 08:11 | boring way across the
screen. So, this is great.
| | 08:14 | I am going to save this, and when we
come back we will do a little beauty pass
| | 08:19 | over the entire walk.
| | 08:20 | Take a little closer look at some of
the other parts of the body and make sure
| | 08:24 | that everything is nailed down.
| | 08:26 | Let's save this and we'll move on to the next.
| | Collapse this transcript |
| Fine-tuning the animation| 00:00 | By this point, we have animated our
character and it's time to do some little
| | 00:05 | fine-tuning on the walk.
| | 00:06 | So let's open our file, number 17.
| | 00:13 | Let's have a look inside.
| | 00:15 | Now, when you do an animation in 3D or
traditionally, you are always told and in
| | 00:20 | 3D it's kind of done for you to
a degree, to move things in arcs.
| | 00:24 | So, things in nature, they do tend to
move in arced paths of various kinds.
| | 00:28 | So, in this case what we should be
seeing for the head is a kind of a bounce.
| | 00:32 | So let's just look at the head layer,
and I am going to onionskin the whole thing,
| | 00:37 | and it might appear that it's
moving in a sort of an arc, but really if
| | 00:42 | we look a little closer, it's
not quiet as good as we would like.
| | 00:46 | So, let's just look inside the head and
I am going to guide out all of these layers.
| | 00:50 | Actually what I am going to do is
temporarily delete them. Don't worry.
| | 00:54 | We'll undo this in a bit.
| | 00:56 | Let's just draw a crosshair
around close to the center of the head.
| | 01:01 | So this is the path that we
created when we animated the head.
| | 01:05 | So, let's hit F6 and now we'll look
at the onionskin, and you know, that
| | 01:12 | is not an arc path.
| | 01:13 | that is a series of zigzags.
| | 01:16 | So, what we need to do is to try to
make this more arcing and less straight.
| | 01:22 | So, if we look at the
points, there is our contact.
| | 01:27 | Let me lock this down.
| | 01:30 | If we select Anchor Onion, now we can
move through this without changing it.
| | 01:35 | So there is our contact pose with the blue line.
| | 01:37 | There is our recoil position.
| | 01:39 | There is the passing position.
| | 01:41 | There is our high point.
| | 01:42 | So as you can see, we have a couple of options.
| | 01:45 | We can reposition each one by hand or
we could put in a motion guide, lots
| | 01:49 | of different things.
| | 01:50 | It's important to figure out which
one we get the most for our effort.
| | 01:55 | So, if we did some certain extra
smaller keyframes and just tweaking some
| | 02:03 | of these positions.
| | 02:04 | So let's say on the first step,
we might take our passing position, which is here,
| | 02:15 | just move it up a little
bit, and there is our high point.
| | 02:19 | That should be fine.
| | 02:20 | There is our contact position.
| | 02:22 | We might even add a second
keyframe in here to round these lines off.
| | 02:26 | Now, if we add keyframes into this part,
we are starting to see something that's
| | 02:30 | much more natural looking.
| | 02:32 | We achieve that simply by adding and
playing with some other positions here.
| | 02:38 | So that's how we are going to do.
| | 02:40 | So let me hit Undo a lot.
| | 02:42 | I am going to Ctrl+Z and
get rid of all this. Okay.
| | 02:51 | So let's click on our strange little
crosshair shape right now and this is very
| | 02:56 | important to work like this.
| | 02:58 | Go to your Preferences panel and to
work in this method, make sure that
| | 03:01 | your Contact-sensitive Selection and Lasso
tools is off and that you are at Object-level Undo.
| | 03:09 | That'll help when you are working on this.
| | 03:11 | Your Undo History is now isolated
inside each symbol and that means you can do
| | 03:16 | drastic things inside it, like delete
the entire layer set. Don't worry.
| | 03:20 | They're one Undo button, Ctrl+Z, Ctrl+Z,
away from being back again and then
| | 03:27 | now we can Ctrl+Y to bring the crosshair back.
| | 03:30 | We can work independently of -- let me
get the cross back again. There we go.
| | 03:36 | Okay, so, Ctrl+Z and Ctrl+Y. So
now we can work with this crosshair.
| | 03:44 | It might be a little bit
easier to visualize this.
| | 03:46 | So, what I am going to do is just make
a few of these and this way I can see
| | 03:54 | the overall arc pattern a little bit better
between the contact position and the recoil.
| | 04:01 | That seemed to be a really nice spot
for fine-tuning this using the numeric key,
| | 04:06 | and remember, any change you make to
the first pose must be made to the last one.
| | 04:10 | So, be very careful with that.
| | 04:14 | Okay, so let's keyframe everything.
| | 04:17 | Well, first of all, we will activate
Edit Multiple Frames and now let's hit F6
| | 04:26 | and now we can see that that's much nicer.
| | 04:28 | I hit Ctrl+Z. We might even add- -
We wanted possibly one more in here.
| | 04:35 | Now, as you can see, as you add the
keyframes, they appear in the multiple view
| | 04:38 | that we've selected. Here is another.
| | 04:43 | So the more of these you add, the more
you round it, but I don't want to have to
| | 04:46 | add that unique keyframe
for the entire timeline.
| | 04:50 | That is going to be beyond tedious.
| | 04:53 | So, I think that is a vast improvement
already over the first pass that we had.
| | 04:58 | Once we have that, let's go back
into the head symbol, hit Ctrl+Z until
| | 05:05 | we resurrect our head. There he is.
| | 05:07 | Okay, we can delete that temporary cross layer.
| | 05:11 | Now, let's switch off the Edit
Multiple Frames, have a look at this and see
| | 05:15 | what it looks like.
| | 05:16 | Okay, that's looking nice.
| | 05:20 | Now let's see how it integrates with the body.
| | 05:24 | Now, you are going to find that by
doing this that the head no longer
| | 05:29 | cooperates with the body.
| | 05:31 | It seems to be a little too high, because
we have been pushing these arcs a little bit.
| | 05:35 | So, either we bring the head down, or we
push the body and neck up a little bit.
| | 05:39 | So I think the lesser of two evils
here is to select the entire head, Edit
| | 05:44 | Multiple Frames, make sure you got
the entire Timeline, bring them down by
| | 05:47 | a couple of clicks.
| | 05:50 | Okay, that seems to be seated a little
bit better and we've got that alterations
| | 05:55 | we want to make here such as maybe move
the head forward a little bit. Either we
| | 05:59 | alter the neck symbol to
pull this back a little bit.
| | 06:16 | We could also do the same test on the body.
| | 06:18 | The body, don't forget, is also subject
to the same constraints arc-wise as the head.
| | 06:27 | So let's Edit Multiple Frames on that
and have a look at it, and if you follow
| | 06:30 | these corner points, you might see more of that.
| | 06:34 | You'll see little less of that
happening on the upper body because don't forget,
| | 06:37 | we've actually rotated it left and
right and that just create some natural arcing.
| | 06:42 | But let's test it.
| | 06:43 | It should be interesting, at least on
the core of the symbol, the same thing.
| | 06:47 | I am going to make a little
cross and a guide out to the body.
| | 06:51 | Let me put that little cross back in.
| | 07:05 | Now, if we hit F6, it's a little bit
less geometrical but not quite arcing enough.
| | 07:12 | So we can find these positions that
can be pushed a little bit, we soften
| | 07:19 | that straight line. Now, let's hit F6.
| | 07:22 | It's a small change but it
actually looks a lot nicer now.
| | 07:28 | So now, let's go back into the torso
body, get rid of that temporary cross
| | 07:32 | layer, and guide out the other.
| | 07:35 | You can keep the cross layer again
if you think you are going to be going
| | 07:38 | back-and-forth between these two a lot.
| | 07:40 | Let's switch off Edit Multiple Frames,
see what this looks like, and that's
| | 07:46 | going to affect the neck perhaps.
| | 07:57 | It doesn't seem too bad, and
now let's see the entire thing.
| | 08:01 | So now we have an arcing
torso and an arcing head.
| | 08:04 | Those are the big areas
that would catch the eye.
| | 08:14 | So that would be one fine-tuning,
call it arcing, and we can push this a
| | 08:21 | bit further. We can do the same thing on
the lower torso and watch how each leg pivots.
| | 08:26 | There is no end as to how much detail
you can add to a walk and we could keep
| | 08:30 | doing this for hours, making it finer and finer.
| | 08:34 | We have to draw the line somewhere,
but something to watch out for with your
| | 08:37 | walks, especially if your motions are this broad.
| | 08:41 | The other walk cycle that we'll be
animating later is animating in place.
| | 08:44 | It doesn't have quite so many of these issues.
| | 08:46 | Well, this is something that's going
to appear more when you animate your
| | 08:49 | character moving across the screen.
| | 08:51 | There are a couple of details I
want to correct on this, but for now let's
| | 08:55 | save this project and we'll
move on to another fine-tuning pass.
| | Collapse this transcript |
| Nesting the hand symbols| 00:00 | So we've added some arcs to our walk
cycle and to our character's head and his
| | 00:06 | body and now we're going to check some
of the other arcs where they're really
| | 00:10 | more of an issue enough and that's on the hands.
| | 00:12 | So, let's open up our file, number 18
in your Exercise Folder, and let's go into the symbol.
| | 00:21 | I'm going to actually hide because
there's a lot of motion that kind of catches
| | 00:25 | the eye on these different leg layers.
| | 00:28 | So let's just get rid of them.
| | 00:29 | Let's just focus a little better on the hands.
| | 00:33 | So he is moving across the
screen. Let's center this.
| | 00:38 | Okay, things are moving pretty fast so
you think it's all right, but let's take
| | 00:41 | a little closer look, and I'm going to
take this arm and put it in Outline mode.
| | 00:47 | Now, if you watch the behavior of the
hand as it supposedly connects to the wrist,
| | 00:52 | you'll see that's
got to be really painful.
| | 00:55 | So, let's see what we can do to correct this.
| | 00:57 | There's a couple of different
approaches to fixing this problem, depending on
| | 01:02 | which level of complexity you favor.
| | 01:05 | So, one way to do it, one way to do
it is simply find the frames where this
| | 01:12 | event happens and just grab it and
that automatically creates a keyframe.
| | 01:16 | When you have motion tweening
active when you do this, it'll generate a
| | 01:19 | keyframe automatically.
| | 01:21 | So, keep scrubbing through the Timeline
as you find these really outstanding areas.
| | 01:26 | There's one that's actually on
a key, so we certainly fix that.
| | 01:30 | Let's move back again, make sure
we're still okay, yes, forward.
| | 01:35 | I would have expected more breaks to have
occurred on this already, but there we go.
| | 01:40 | And definitely here, we should pull that out.
| | 01:41 | That's a better position.
| | 01:43 | So that's one way of doing it.
| | 01:44 | It still won't be 100%, but for most
purposes that you might need this might
| | 01:50 | be sufficient in accuracy. You could
always even add secondary keys in here for
| | 01:57 | certain troublesome spots.
| | 01:59 | There's always going to be some.
| | 02:08 | So, each time you do this, bear in
mind, if you have ease-ins or ease-outs,
| | 02:12 | you're going to be changing a lot
of business that happens in here.
| | 02:16 | So that's one way of doing it.
| | 02:17 | There is another way of
doing it, a little more elegant.
| | 02:21 | That involves nesting of course.
| | 02:23 | We'll do it on the opposite hand, so
you'll be able to compare the two systems.
| | 02:28 | So we'll copy this and
let's keep that layer visible.
| | 02:32 | I'm going to hide the right hand.
| | 02:33 | So, copy this hand,
double-click on the arm symbol.
| | 02:39 | So now we're inside the upper arm, and
let's make a new layer and we're going to
| | 02:44 | paste the hand in here.
| | 02:45 | Now, I'm not totally happy
with that pivoting position.
| | 02:52 | So for now, I'm just going to be on
the rough side and just pull that in a
| | 02:55 | little bit, pull that into here, and rotate
it until it matches the starting position.
| | 03:01 | Okay.
| | 03:03 | Now let's see what this looks like.
| | 03:05 | First thing though, you might want
to hide the other hand layer. Oops!
| | 03:11 | See, something's already going wrong
because we're swinging this hand internally.
| | 03:15 | we're moving it around.
| | 03:16 | So, first thing we should do is keyframe
these motions, just drop some keyframes in.
| | 03:29 | And just very quickly,
nothing too fancy just yet.
| | 03:33 | Oops! Let's just copy that.
| | 03:36 | Alt/Option+click to here, and actually
this keyframe will be the same as that one.
| | 03:40 | So I'm just going to make a copy of that.
| | 03:42 | So as you can see, we're just matching the
position of this hand to the other points.
| | 03:50 | See that one's going to go there.
| | 03:51 | Let's clear that to make a new keyframe.
| | 03:56 | Okay, so that should roughly work.
| | 03:58 | Won't quite be arcing totally correctly
inside, but it's a lot easier than the
| | 04:02 | big movements in the outside clip.
| | 04:04 | Now let's look at this and as you can
see, we don't have to worry about the
| | 04:15 | big arcing issues any more, because this
hand is, by definition, it's inside this clip.
| | 04:20 | So, when we swing this arm,
guess what? It's going to arc.
| | 04:25 | So, that's the other way of doing it
and you probably guess that I prefer
| | 04:29 | nesting it, because if you keep that on
this outer timeline, one thing it does
| | 04:34 | is it makes this timeline a little bit longer.
| | 04:36 | Whereas if we keep it inside the upper arm,
| | 04:39 | it's a little tidier.
| | 04:41 | So, what we can do in this instance is
keep our lower level to padlock and let's
| | 04:47 | go into the upper level, the arm, and
we can go through it frame by frame and
| | 04:55 | we can match our hand in here.
| | 04:57 | So let's just put this on the
bottom layer and we'll call it the hand.
| | 05:03 | Let's just make all these keyframes quicker.
| | 05:05 | We're not having to worry.
| | 05:07 | Okay, so let's use frameEdit in our
Commands menu from the toonmonkey.com
| | 05:12 | website. Use Free Transform.
| | 05:15 | If you don't have that extension,
scrub to the right frame by manually and we
| | 05:20 | move that out a little bit,
and let's move to here.
| | 05:24 | So I'm going in on the
exact frame of the outer clip.
| | 05:29 | This line here should not change
position as I use the frameEDIT in shortcut.
| | 05:40 | So by positioning the hand like this,
what I'm doing is just adding in the drag
| | 05:46 | and the secondary motion that we
had already animated on the outside.
| | 05:56 | Great thing about this too is you can
really be more flexible with the timing.
| | 06:01 | You can delay it so that
the drag can overlap slightly.
| | 06:05 | It's a much nicer way of working I think.
| | 06:07 | So let's just look at the arm by itself.
| | 06:09 | So I'm going to delete the lower hand layer now.
| | 06:15 | Okay, so let's go into this a bit tighter.
| | 06:30 | I'm going to hide this again.
| | 06:35 | So let's say we want to put up a bit
of more drag on that hand, go into that frame,
| | 06:41 | Simply drag it in here.
| | 06:49 | Same in this one.
| | 06:52 | The only pivot I have to worry about is in here.
| | 06:54 | So now we go to the outer point and
then here we might want a bit of overlap.
| | 07:00 | So maybe after this frame, as the hand
begins to move down, it might be nice if
| | 07:06 | we flip it back a little bit.
| | 07:07 | And we'll rough this in at the moment.
| | 07:08 | I have a bit of stick in here still.
| | 07:13 | So I'm going just move that back a little bit.
| | 07:24 | And there is a little flip at the top,
and look how clean the timeline is.
| | 07:29 | I'm putting some of that busywork on
this inner clip in here and it's keeping my
| | 07:35 | outer timeline clean.
| | 07:37 | It's fixing all my arc issues.
| | 07:39 | It's taking care of a lot of problems.
| | 07:42 | That is looking like a really nice
overlap on the end. It makes it feel like
| | 07:47 | an actual object and we're trying to
escape from that Flashy look, the effect
| | 07:55 | that we have, and we're just
pushing a bunch of symbols around.
| | 07:57 | So that's really nice and having that
nice arc on the hand, that really helps too.
| | 08:03 | So, the next thing I would do
on this, and it's a simple process.
| | 08:06 | Just so I want to repeat that process
on my own time on that right hand.
| | 08:11 | Just basically copy the right hand into
the right arm and nest it in there and
| | 08:15 | then delete this layer.
| | 08:18 | So the walk is done, we've smoothed out
everything, and the only thing remaining
| | 08:22 | to be demonstrated now is how to
reposition our walk cycle, so that we can make
| | 08:27 | it do more than just two complete steps
across the screen. Maybe we want to
| | 08:31 | repeat it so it does more than that.
| | 08:33 | So, in the next clip, I'll show you
how to do that and that will be the end
| | 08:37 | of the walk cycle.
| | Collapse this transcript |
| Repositioning the walk| 00:00 | So, one last demonstration remains on
the walk cycle and that consists of how
| | 00:05 | we position it and
it's amazingly simple thing.
| | 00:08 | So, let's just open our file, number
19 in your Exercise Folder, and I'll
| | 00:15 | zoom out for a bit.
| | 00:16 | So, at this point, we can
clean it up a little bit.
| | 00:18 | I don't think we need to have the
sample image floating around anymore and
| | 00:23 | let's just take one more look at it.
| | 00:27 | So, as I promised in the preceding clip,
I've just nested the right hand inside
| | 00:34 | the upper hand symbol.
| | 00:36 | So we have what looks like a little
weird magical gesture when you look at it
| | 00:40 | contained by itself, but when you see
it properly moving with the character,
| | 00:44 | that's pretty nice.
| | 00:46 | Okay, so here is how we would create a
longer walk out of what we've already got here.
| | 00:51 | So, I'm going to Free Transform,
make this guy a little smaller.
| | 00:56 | I'm going to give him more space to
move across and we should also extend our
| | 01:01 | Timeline much longer than the
Timeline contained inside the walk.
| | 01:06 | I'm going to make sure he's set just
to play once, make him a graphic in
| | 01:13 | the Properties panel, and Option, Play Once,
and also make sure he's set to the first frame.
| | 01:20 | That's nice. Great!
| | 01:21 | We're set.
| | 01:23 | So, this is what would
happen if we play him once.
| | 01:25 | What we want to do is to play
them over and over and over again.
| | 01:27 | So this is one way to do it.
| | 01:31 | So, let's say the walk cycle is this long.
| | 01:35 | So I'm just going to Ctrl+Alt+C to
copy those frames, paste this in here, and
| | 01:41 | actually let's just clear these frames.
| | 01:42 | So this'll serve us as a little sign
| | 01:46 | I like to use to copy these frames and
that will show me how long my cycle is.
| | 01:54 | So again, holding down the Alt,
Option key, drag that to here, and so we
| | 02:00 | see what we're doing.
| | 02:00 | We have our original walk
cycle from here to here.
| | 02:04 | I've copied that again onto
this layer back in this position.
| | 02:07 | So what I'm going to do is grab the
upper layer and simply move it over.
| | 02:15 | Let's go in a bit tighter, make sure
it lines up properly, and then where they
| | 02:19 | overlap, I'll just put the lower
level to a F7 to a blank image.
| | 02:23 | Now, when we zoom out, you can see the process.
| | 02:32 | So we would simply repeat this over and
over again, and a couple of ways of maybe
| | 02:36 | simplifying it is finding out just how
many pixels you move from left to right
| | 02:40 | and simply duplicating that.
| | 02:42 | But this will be a more basic way of
doing a repositioned walk and as long as
| | 02:52 | you don't have to do this too many
times, this is one way of doing it.
| | 02:55 | Not the optimal way of doing it, but it
certainly is functional. Zoom out again.
| | 02:59 | Now, let's go to color. There we go.
| | 03:16 | So those are two repositioned
cycles further along from the first.
| | 03:26 | Now of course, the ideal way will be
instead of having to do this, we can just
| | 03:28 | animate him walking in place around an
imaginary vertical axis and then we just
| | 03:34 | have to create two tweens.
| | 03:35 | We can make him walk, enter the screen,
and we have complete control at that point.
| | 03:40 | It's a little trickier with this.
| | 03:41 | So, we will now move on to the next
chapter where I will show you how to animate
| | 03:46 | a walk cycle in place.
| | 03:47 | If you've already worked through this
chapter, you'll find it a lot easier and
| | 03:51 | it'll also be good to do a second one
in a slightly format, and many of the
| | 03:55 | principles and the poses will all be the same.
| | 03:57 | But I think you'll enjoy the freedom of not
having to worry about your arcs and other factors.
| | 04:03 | I'm going to save this project file as
number 20 if you want to see the sample
| | 04:08 | of the repositioning.
| | 04:09 | And let's move on.
| | Collapse this transcript |
|
|
6. Animating a Walk CycleIntroducing the walk in place| 00:00 | In the previous chapter, we animated a
walk cycle or the character walked across
| | 00:05 | the screen from left to right.
| | 00:07 | In this chapter we will do the very
same animation, but this time we will
| | 00:12 | animate it in place, so the character
won't move from left to right. He'll be
| | 00:14 | fixed in the one position on the screen,
and this is going to allow us a much
| | 00:19 | greater flexibility in how
we use the final animation.
| | 00:23 | So I am going to show you
comparison of both of these approaches.
| | 00:27 | So on the left side again, we have a
guy walking across the screen and on the
| | 00:31 | right he's in place.
| | 00:34 | So if you imagine an imaginary
background moving behind him, like this, then
| | 00:38 | you can see how we can have a panned background
and reuse his walk cycle very, very easily.
| | 00:44 | It's much harder to do it with this.
We are constantly having to mess around
| | 00:49 | with the feet placement and
reposition them every 20 or 30 frames.
| | 00:54 | There are other
advantages to animating in-place.
| | 00:57 | Make some of the issues that
arise from the arcs created.
| | 01:02 | They tend to be in much more natural
flow to the in-place animation as it
| | 01:06 | turns out in Flash.
| | 01:08 | So what we are going to doing is
actually cannibalizing some of the work we did
| | 01:13 | on 5th chapter and this is now our goal.
| | 01:18 | And I think you probably won't want to go back
when it comes to working one way or the other.
| | 01:24 | It's a lot of fun once you get
your head around the cycling in place.
| | 01:28 | So let's move on.
| | Collapse this transcript |
| Setting up contact poses| 00:00 | So it's time to do our walk cycle in place.
| | 00:04 | Let's open our file, character_rig _walk_01.
| | 00:10 | So this thing should look familiar.
| | 00:11 | It's actually identical to the
setup that we created in Chapter 5.
| | 00:16 | And if you haven't seen Chapter 5,
you might want to, because we covered the
| | 00:19 | principles of the walk cycle in greater
detail in there, all the main poses of
| | 00:23 | the walk and so forth.
| | 00:24 | If you are kind of experienced with Flash or
walk cycle, you might not need to watch that.
| | 00:30 | But I am going to assume that you have
good understanding of all the theory and
| | 00:34 | these major poses and the
timing of the walk cycle.
| | 00:37 | So the first thing I would like to do is take
this file and just clean it up a little bit.
| | 00:41 | There are some stray symbols lying around.
| | 00:44 | These symbols will go
into the body parts folder.
| | 00:47 | I've made some alterations based on
what we did at the end of Chapter 5.
| | 00:52 | So you will find now that the hands
are nested inside the arm symbols, makes
| | 00:58 | posing a lot quicker.
| | 01:00 | It's another layer of nesting, but by
now we should be very familiar with that,
| | 01:04 | so that solves a lot of problems.
| | 01:06 | And I think at this point
we will be ready to go.
| | 01:10 | Now the only difference in approach you
are going to see here is that instead
| | 01:14 | of animating our character
horizontally, he will go up and down.
| | 01:18 | This creates one major difference in
the way we have to approach the scene.
| | 01:24 | When we move him across the screen
from left to right, we don't have to worry
| | 01:27 | about the foot positioning
We have plop it down
| | 01:29 | and we will leave it there.
| | 01:31 | In contrast, when we animate
in place, we move the feet.
| | 01:34 | That is the part of the body that we
didn't really have to concern ourselves with.
| | 01:38 | Now we are going to be moving the
feet in the series of our arcs and loops
| | 01:42 | to create the walk.
| | 01:44 | So any mistakes that we make in that
part of the process could cause problems
| | 01:49 | later on, so there are just a couple
of things we have to watch out for.
| | 01:52 | So I'll explain those as we go along.
| | 01:54 | The beauty of this is that having
cannibalized the previous symbols, they are
| | 01:58 | all set up with the labels for the
correct timing of all the internal animation.
| | 02:04 | We don't have to worry about any of
that; they are all numbered properly and
| | 02:09 | we can get into it.
| | 02:10 | Here we have our chap with his
timeline. Let's open this out a bit.
| | 02:15 | So I'd like to move from the contact
into another contact into the third contact.
| | 02:22 | So let's just keyframe our final one,
this will be the same as our first.
| | 02:26 | And as we did in the previous chapter,
we will keyframe this contact position
| | 02:31 | and then we have to move the legs and
feet into their alternate positions.
| | 02:37 | Look at this in outline.
| | 02:38 | we have the green for the
right, blue for the left.
| | 02:40 | So let's make a temporary layer.
| | 02:42 | Now I'll copy this contact pose, paste
it into here, Ctrl+Alt+V so it's pasted
| | 02:51 | exactly in place over the hair layer levels.
| | 02:54 | Now we will just move the various body parts.
| | 02:58 | Let's just grab them, so this green one
will move into this position and so forth.
| | 03:03 | So let's grab these and do a very big
move, just get them into the right area.
| | 03:08 | It can be confusing if
everything seems to be in the same spot.
| | 03:14 | So that's our left arm. That will
move to this side and our right arm.
| | 03:17 | Because this is locked to the top,
I am selecting the lower layers.
| | 03:19 | So let's just move them into the
general area and we will pick one whichever
| | 03:24 | looks least painful to position.
So let's bring this foot over.
| | 03:38 | And that's the right foot, so that
should be contacting the lower line.
| | 03:42 | The lower line represents the path
followed by the right foot, the upper line is
| | 03:47 | that followed by the left, which is in blue.
| | 03:49 | As we did before, pivot the legs
and that will favor the positioning of the upper leg.
| | 03:57 | Don't worry about the lower breaks yet.
| | 04:09 | Okay, same with the left leg.
| | 04:17 | I am going to move the right arm.
| | 04:20 | I'm positioning the upper arm here.
| | 04:22 | I am not worrying about
the lower arm at this point.
| | 04:24 | We will do that next.
| | 04:35 | We are still keeping this purple guide layer.
| | 04:37 | That's still very useful for
giving us good information.
| | 04:40 | I want to tunnel into each of these
symbols and then correct the positioning
| | 04:45 | that's fallen out of place.
These are kind of close.
| | 04:48 | So just check we are on
frame 17. We are on frame 17.
| | 04:51 | No reason, how we shouldn't, but
always get into the habit of checking.
| | 04:54 | So this is the frame that we need to
correct, so first of all I am going to
| | 04:58 | keyframe the end, because we are going
to work into a cycle. So first frame,
| | 05:03 | last frame should be identical.
| | 05:05 | Let's keyframe the contact
position for here.
| | 05:13 | There we go. It's that one.
| | 05:28 | See, I made a slight error
here. Hold on a second.
| | 05:33 | The guide layer on top is being
altered, so I am going to break that apart.
| | 05:36 | So now I can go and make a change to this
without affecting the guide layer. Cut.
| | 05:42 | There we go.
| | 05:51 | Oops! I made the change to the wrong frame.
I made the change to frame 1 instead of
| | 05:55 | frame 17, let's just hit Undo.
| | 05:57 | Okay. So make a new frame here. I want
to make sure that the purple layers are broken apart. Good.
| | 06:07 | Now I go to frame 17, make that change.
| | 06:12 | Okay.
| | 06:14 | It's very easy to make the change to
the wrong frame and you will see very
| | 06:22 | quickly when you tunnel back out that, oops!
| | 06:24 | Something has gone weirdly wrong.
| | 06:27 | So my advice is to save your project,
have many backups, and don't panic if
| | 06:34 | something goes wrong. Just very
slowly hit Ctrl+Z key or Undo and you
| | 06:38 | will find where it is.
| | 06:40 | This one here, I'm going to use my
favorite plug-in extension, frameEdit, which
| | 06:46 | is made by toonmonkey.com.
| | 06:48 | You can download it from there.
| | 06:49 | It's a free extension and we have
covered this before, so I'll mention it again
| | 06:54 | in case anyone forgets.
| | 06:55 | So I'm just going to go into frame
17 of this leg position, correct that.
| | 07:02 | So it's worth keeping an eye on to the
rest of the rig as you are doing this to
| | 07:05 | make sure nothing else has been changed,
if you are using multiple frames and
| | 07:08 | reuses the same symbol.
| | 07:10 | So now we go into the frame 17 of the
upper arm. Let's just set more keys.
| | 07:18 | It will become a mechanical habit of
yours to set a key every time you do
| | 07:21 | something like this.
| | 07:35 | And the rest, just drop that in and
same thing for the left hand, make a keyframe, F6.
| | 08:04 | And then bring that wrist up as well.
| | 08:13 | Okay, let me hide that
guide layer. See how this looks. Nice.
| | 08:23 | So you can see we are
toggling from one to the other.
| | 08:26 | Just tweak that on the foot and you
can see a slight gap in the over layer, that there.
| | 08:39 | Let's make that a little bit bigger.
| | 08:39 | Only problem with that is it will be
slightly bigger than these two and see if
| | 08:46 | we can do that by just bringing it down.
| | 08:48 | That's a bit easier. And one. It's better.
| | 08:53 | So now we have our two contact
poses set and let's delete our temporary layer.
| | 09:01 | Classic tween.
| | 09:03 | And now you can see there is a little
weirdness happening there. I think we have
| | 09:08 | an old hand layer that we need
to delete. Let's get rid of that.
| | 09:13 | That's from our earlier project.
| | 09:16 | So now we have what looks pretty
horrendous, but it gives you an idea of the
| | 09:19 | mechanism. I like to test our
walk at every stage of the process.
| | 09:23 | I want to change our frame rate.
| | 09:24 | Make it a bit faster.
| | 09:25 | Let's make it 30 frames per second.
| | 09:29 | Make it more like a video frame rate. Okay.
| | 09:36 | So we know that the hands are moving.
As we did in the previous chapter, we are
| | 09:40 | going to add the passing pose then
the recoil, the down pose, and the high
| | 09:43 | point, the up pose, and see this
thing coming to life and one of the
| | 09:47 | beauties of this is what I am going to
do is something slightly different, so
| | 09:50 | you don't get bored.
| | 09:51 | I am going to alter the passing pose a
little bit and we'll see what kind of
| | 09:54 | affect that has on the total walk pose.
So it will be as much of a surprise to
| | 09:58 | me as it will to you.
| | 10:00 | So let's move on next and we
will do the passing positions.
| | Collapse this transcript |
| Creating the passing poses| 00:00 | We have our walk cycle simply set up.
| | 00:03 | We have our contact pose done.
| | 00:05 | And we want to move onto
do the passing position.
| | 00:07 | So let's open our project from 02.
| | 00:13 | Let's see what we have so far.
| | 00:16 | So just the feet sliding, the arms
sliding back and forth, and lots of popping
| | 00:20 | of course, because we have to
add in the rest of the frames.
| | 00:23 | But what I want to do, if you remember
what we did in the previous chapter, we
| | 00:26 | created a passing position where our
character did something very simple.
| | 00:30 | He just leaned forward a little bit into
the walk to get him a bit of flexibility.
| | 00:33 | I want to do something a
little more experimental now.
| | 00:36 | I will show you the power of
making changes to the passing position.
| | 00:41 | You can make things like sneaks and all
kinds of different attitudes with your walk.
| | 00:45 | We'll not go too insane with this, but we will
try to do something a little more adventurous.
| | 00:50 | So I am going to draw our bounding box.
| | 00:54 | And again, I repeat this, make
sure that you're set to switch off
| | 00:58 | Context-sensitive selection
and you are on Object-level Undo.
| | 01:02 | And that'll make the selection
of these areas a little easier.
| | 01:05 | So let's use the Free Transform tool and
rotate the character back a little bit.
| | 01:10 | And what would happen if we do this? And
I of course tilt the head forward perhaps.
| | 01:16 | I am going to give him a dizzy walk.
| | 01:30 | So now he needs to-- even though in
this he will be a little off balance.
| | 01:40 | We still need to make sure that the limbs
are behaving and counteracting the forward lunge.
| | 01:46 | And the other thing I like to do, if
the legs seem to overlap and get a bit
| | 01:50 | messy here, I am going to
switch one of them off. Oops!
| | 01:53 | Let's go back to color.
| | 01:57 | Let's go with the left leg.
It seems to be in the better position.
| | 01:59 | So I am switching up the right leg and
that should be a bit lower than that.
| | 02:07 | This is the left foot.
| | 02:08 | So that should be on the upper line.
| | 02:10 | So I am going to just play around and
find a goofy pose, something a little
| | 02:18 | more, a little less conventional.
| | 02:28 | Now, the thing to watch out for,
when we created this keyframe over the
| | 02:32 | passing position, it created a
pose for this foot and one of the most
| | 02:38 | important aspects that you want to
remember with the animation cycle in place
| | 02:44 | is the position of this foot.
| | 02:46 | Once that heel contacts the ground, on
each subsequent frame the foot must move
| | 02:52 | by a fixed number of pixels.
| | 02:55 | If this number drifts, if you start
changing the position so that these frames
| | 03:01 | are closer than these frames, then
you're going to find it impossible to have
| | 03:07 | your character walk across the screen without
his feet slipping and sliding. It looks awful.
| | 03:12 | Just be careful when you make these
keyframes that you respect the horizontal
| | 03:15 | placement that the computer gave you.
| | 03:17 | You can move the foot up and down to
align it on this line, but never move it
| | 03:22 | left and right unless you're doing it
deliberately to really make it a precise placement.
| | 03:26 | We'll do this in much greater detail
later on, but you should know about it now.
| | 03:30 | So anyway, that's our position.
| | 03:33 | Let's see if we can do
something with the rear foot.
| | 03:36 | This one is now moving through.
| | 03:39 | So I am going to put it
somewhere a little more interesting.
| | 03:43 | Let's move it to here.
| | 03:44 | I am going to alter this leg a little
to make it join there or it'll make this
| | 03:54 | hard to follow.
| | 04:06 | Let's make a duplicate over
here as a repositioned guy.
| | 04:10 | Copy them, paste here.
| | 04:13 | If you remember from the previous one
where we happened to these duplicates
| | 04:15 | around, we don't have to do it now
because they're all occupying the same
| | 04:18 | vertical space. Break that apart.
| | 04:20 | Ctrl+B. And let's make a vertical stake of keys.
| | 04:26 | And let's line up the upper body to that.
| | 04:39 | And again sometimes it's good to pull the entire
selected area out and make sure nothing's been left behind.
| | 04:44 | Sometimes Flash doesn't
select everything properly.
| | 04:47 | So you have to be
conscious of these little errors.
| | 04:51 | Okay, let's take the head back.
| | 05:02 | I think, we can -- Oops!
| | 05:03 | Let's be careful with the feet.
| | 05:06 | We need to use this is repo-
guide for the feet as well.
| | 05:09 | Just look at this for now.
| | 05:23 | So the foot that is going to go into
this up position will be the trailing foot
| | 05:29 | that's here, this one.
| | 05:38 | Okay, and then this foot is the right
foot and that should be a bit lower, and
| | 05:42 | the tweening processes has moved it up a little bit.
| | 05:44 | We need to correct the vertical
position, but not the horizontal.
| | 05:49 | This is as much as I would like to do.
| | 05:50 | Even that might be a little risky,
but we will check this out later.
| | 05:54 | And then the other thing to do
would be to correct the legs.
| | 05:58 | Let's move this up a little bit.
| | 06:00 | Close enough for now.
| | 06:01 | And let's frameEdit on the keyboard into
this, make another key, F6, and then just
| | 06:08 | line up this leg here.
| | 06:12 | So now all of our internal
symbols are working with that.
| | 06:21 | So let's hide the purple reference layer.
| | 06:24 | See what this looks like.
| | 06:25 | So we are going from this contact pose
to this passing position to this contact
| | 06:32 | pose to this passing position.
| | 06:34 | This passing position should
be an opposite of that one.
| | 06:37 | So where the left hand is on this pose,
the right hand should be on that, and
| | 06:40 | vice versa, same with the legs. There we go.
| | 06:42 | So I am going to delete that
purple layer and that was just the temporary.
| | 06:48 | Let's save this as and then we
will move on and add the recoil.
| | 06:52 | As you can see we are moving a
little faster now than the first one.
| | 06:55 | So it should be interesting to see if
this walk comes together and is in any way
| | 06:59 | respectable, goofy or crazy.
| | 07:01 | The real intent of this is to show you
the difference it makes just by making
| | 07:05 | a single alteration, in this case one
alteration to the passing position and
| | 07:09 | now we're going to follow through on
that and see what it does to the rest of the walk.
| | Collapse this transcript |
| Creating the recoil positions| 00:00 | So let's move on and we'll begin the
process of fleshing out our walk, we have
| | 00:05 | our contacts and passing position switched on.
| | 00:07 | So, it's next keyframe to add in is
the down position or the recoil position.
| | 00:12 | So, we'll double-click on our stage,
on our symbol or double-click on the bd
| | 00:16 | walk symbol in the library and we are
going to go a bit tighter and let's begin that.
| | 00:22 | So, I am going to add
keys for the recoil position.
| | 00:27 | This orange layer has a bunch of
keyframes I will delete it we doesn't need.
| | 00:30 | Let's get rid of that.
| | 00:31 | That was our reference
image. Let's clean it up.
| | 00:33 | So, okay we are going from this to this
and some little breaks on the legs and
| | 00:40 | such, so let's correct that.
| | 00:42 | So, we will just draw a box again and
wrap the upper body and maybe the legs as
| | 00:47 | well and click it down a couple.
| | 00:50 | I am going to push it a bit more
this time, see if we can go make it a
| | 00:53 | little more eccentric.
| | 00:59 | So this is the recoil and let's bring
the head forward because we would imagine
| | 01:02 | this would be like his impact with the ground.
| | 01:06 | If its motions are going to be a
little more erratic then that's appropriate.
| | 01:11 | The other thing to remember is on the
recoil this is when the arms are at their
| | 01:14 | most outstretched from the body
because this is like an impact pose, bang!
| | 01:20 | The other thing that would happen also is
that the feet will hammer into the ground here.
| | 01:24 | Let's hide the leg.
| | 01:25 | It's getting the way that.
| | 01:27 | Don't move the foot left or right, just
move it up or down because we want the
| | 01:32 | foot placement to be as
consistent as possible across the screen.
| | 01:35 | We have to imagine that we are moving
by an equal increment by frame by frame.
| | 01:39 | We'll do this in more detail later
but I want to make sure that if we are
| | 01:44 | moving by 10 pixels from heel to heel
on one frame to the other is the same on
| | 01:49 | all of these frames.
| | 01:51 | Before we start getting into too much
detail that's one of the things I'll check
| | 01:54 | and I'll show you how to do that in
a way that's very straight forward.
| | 01:58 | So, we have our contact
and recoil position here.
| | 02:02 | I am going to bring this foot up a
little higher and I am deliberately trying
| | 02:13 | to over animate this.
| | 02:14 | To give you an idea that we don't
need to feel so constrained or trapped to
| | 02:22 | these poses, it is possible to break them
up and by playing with them you'll oops!
| | 02:28 | Classic mistake I am working in the
wrong frame, so we undo all that and
| | 02:33 | let's make a keyframe.
| | 02:34 | So, let's back track see how that happened.
| | 02:36 | So, I am moving to the frame number 5,
frame number 5 in the Property panel here
| | 02:41 | too, tunnel into that the Flash booms
you back to the first frame of your time.
| | 02:45 | So, be sure you always go
to the equivalent frames.
| | 02:48 | If you are working on frame 5 in the
outer timeline and this is the frame 5
| | 02:52 | being called upon by the
script and you tunnel into it.
| | 02:55 | Be sure you do your work on frame 5,
this is simplest mistake to make and it
| | 03:02 | doesn't matter how much
practice or how experienced you are.
| | 03:04 | It's just natural to forget and
overlook that one little step and because there
| | 03:10 | is a lot of redos so here we go.
| | 03:16 | Let's check that other limb here.
| | 03:19 | I want to tilt it out like
this and make a keyframe here.
| | 03:26 | So, again don't worry about these in-
betweens we are just going from -- try to
| | 03:33 |
| | 03:41 | image this if we are snapping
from passing pose to passing pose.
| | 03:45 | I think something went wrong with this
passing leg, so let's go into that and we
| | 03:51 | can easily fix it just make a
keyframe on the relevant pose. Its frame 9.
| | 03:55 | Just pull the foot back, done so no
reason to ever get freaked out if you
| | 04:03 | delete a shape or whatever, we have to
recreate this recoil frame and want to
| | 04:09 | repeat it on this frame here.
| | 04:11 | So, again make a temporary layer, copy
all these, F7 to make an empty layer,
| | 04:18 | Ctrl+Shift+V or paste in place.
| | 04:23 | Let's look at that in an outline and we can
maybe break it apart just to keep it simpler.
| | 04:29 | So, let's make a stack of keys F6 here and
make sure our reference layer is padlocked.
| | 04:40 | Select all the layers we want to move
down and bring it down to roughly match that.
| | 04:45 | The ones that we want to rotate will
primarily at first, the head and the neck
| | 04:51 | and the torso and the lower torso maybe.
| | 04:53 | So, I will rotate them to match the
purple outline, close enough and then just
| | 05:08 | slide the hands and
position the upper legs first.
| | 05:22 | I am using the frame editing, my
favorite extension and like a keyframe there
| | 05:32 | that takes me into the exact frame we
want to work on, minimizes mistakes too in
| | 05:38 | case you end up drawing on the
first frame of your symbol by mistake.
| | 05:41 | There we go and the frame end on this.
| | 05:45 | I have mapped the keyboard
shortcut onto the question marquee.
| | 05:49 | It's right beside the bracket
keys that take me to the Timeline.
| | 05:52 | It's pretty quick way to work.
| | 05:53 | Now the things got a bit
weird there so let's just undo.
| | 06:00 | If you think Flash has inserted any
kind of weird lines or it's starting to
| | 06:06 | make you shapes a little goofy look and then
just hit undo, go back a few steps and start again.
| | 06:11 | Okay, so let's see if we want the extra
foot here and see what that's all about.
| | 06:17 | These be position to match
the purple, great and this foot.
| | 06:21 | Again, be careful just
rotate it, don't do left or right.
| | 06:24 | We may need to later on but I think
for now we are okay and this is the right
| | 06:29 | foot so this should go on the lower line.
| | 06:32 | All right, let's see what this looks like.
| | 06:35 | He is like doing some crazy jive walk
and there is that little thing with the
| | 06:44 | other passing legs so let's just go
ahead and correct that, frame edited and
| | 06:48 | make a new key bring that down.
| | 06:57 | Okay, so let's just quickly check again.
| | 07:01 | I want to make sure all of major keys
are at least connected, contact, recoil,
| | 07:06 | passing and at the other contact seems
to be broken as well so let's given there
| | 07:11 | something I tweaked incorrectly.
| | 07:13 | Now I am going to conceal
this from you, this happens.
| | 07:21 | It's just a part of the process you are
working with symbols inside a symbol and
| | 07:24 | inside a symbol and that's very easy
to make an alteration to the wrong one.
| | 07:28 | So, that's where you go back and every
time you had something like this happen
| | 07:31 | test again from the beginning. Ah!
| | 07:36 | So here we go there is the culprit.
| | 07:38 | So there should be keyframe here.
| | 07:40 | I was making adjustments to the wrong key.
| | 07:43 | Again, I am going to go be thorough
back to the beginning, contact, recoil,
| | 07:55 | passing, high point, contact,
recoil, contact, passing, contact.
| | 08:01 | Good, let's save this and we
move on and at the high point.
| | 08:05 | We can do something else that's a
little crazy and see what this does to
| | 08:09 | the walk.
| | Collapse this transcript |
| Animating the head's high point| 00:00 | So we've proceeded with our in-place walk cycle.
| | 00:03 | We're going to add the high point, so we
have to finish this one before we can proceed.
| | 00:07 | So let's open our walk_04 file from
the Exercise folder. Click on this.
| | 00:14 | And we still have to do a lot of
internal patching and all these shapes and I
| | 00:18 | have deliberately made this walk very
strange, just to break us out of the
| | 00:25 | conventional student-oriented walk
cycle to show you that we can do something
| | 00:29 | that's completely off-the-wall and goofy.
| | 00:31 | So let's go and select our
high point to make it into a key.
| | 00:37 | Let's find the layers that we want to
push up first, and that would be pretty
| | 00:40 | much actually all of them apart from the feet.
| | 00:42 | So I'll just Shift+click to deselect
them and move that rest of the body up by
| | 00:48 | holding down the Shift key and the
numeric arrow key. One click should do it.
| | 00:52 | And let's see what that does.
| | 00:58 | This is a very extreme walk.
| | 00:59 | So we're going to raise all kind of
interesting issues. So let's see here.
| | 01:07 | Well, we need to close off
the gaps that are opened here.
| | 01:10 | Let's see his foot.
| | 01:13 | We can keep carrying up higher to here.
| | 01:17 | It'll be a much more interesting step.
| | 01:24 | Let's bring it forward a bit more than that.
| | 01:26 | It seems to be sticking there a little bit.
| | 01:31 | Now it's better.
| | 01:34 | Now we can fix some of the
elements, so let's stretch this leg out.
| | 01:40 | The beauty of the shape tweening is
that it enables us to do things to the
| | 01:44 | graphical form, like pull the leg if
you wanted to stretch the different parts.
| | 01:48 | It'll allow us to do that.
| | 01:49 | In this case I wouldn't want to over
to do it, but we can give the impression
| | 01:52 | of the muscles been pulled in and create
quite different shapes and graphical forms.
| | 01:58 | For the most part I've been working
with these selected parallelogram shapes.
| | 02:01 | Nothing is stopping you from going in
and making them curves against curves.
| | 02:07 | Or all kinds of cool things.
| | 02:08 | It is okay that's our high point on that side.
| | 02:12 | Right, so I'm going to make another
temporary guide layer here, or a guide pose.
| | 02:23 | I'm going to create the
second high point, match the first.
| | 02:26 | So I'm going to copy these, paste them in
here, Ctrl+B to break them apart, padlock that,
| | 02:33 | and then just go in and again select
everything. I think on this keyframe first
| | 02:38 | and select everything and then
just deselect the feet. There we go.
| | 02:44 | And then Shift+Arrow key,
up one, or another amount.
| | 02:51 | It doesn't have to be that, but
that's the amount I'm going for.
| | 02:55 | Hands look all right, so let's
delete that layer now. Oops!
| | 02:59 | Let's not.
| | 03:01 | So I'm going to bring that back.
| | 03:02 | That's a good idea to use his foot position.
| | 03:03 | So first, I'll turn it.
| | 03:06 | Now is the right foot position, so we'll
match the left foot to that and same with the leg.
| | 03:12 | Otherwise there is a chance that the
walk could look a little bit like a limp.
| | 03:14 | That's not what we're looking for.
| | 03:18 | So let's go in here, make a key, move that.
| | 03:26 | There we go.
| | 03:27 | We need to make a change
to stretch out this one.
| | 03:31 | We could motion scale it on the outer
timeline or we could be a little more adventurous.
| | 03:36 | And let's try shape tweening this, okay.
| | 03:44 | Let's delete that purple layer now,
so now we have a slightly more
| | 03:50 | fleshed out goofy walk.
| | 03:53 | As you can see the legs are popping, so
as the next pass we're going to tunnel
| | 03:57 | in to all of these, arm and leg
symbols, activate the internal shape tweens,
| | 04:03 | and see if it smoothes this out sufficiently
where it becomes a believable goofy walk cycle.
| | Collapse this transcript |
| Tweening the legs| 00:00 | So we have our walk and I am in the
in place with the four main key poses,
| | 00:05 | contact, recoil, passing and high point,
and it's time to smooth it out and add
| | 00:10 | some tweens to the arms and legs.
| | 00:12 | So in the Exercise Files folder,
we have got our rig_walk_05 file.
| | 00:17 | And let's see, have a look at this again.
| | 00:18 | And as you can see, we have
deliberately pushed the range of motion this time,
| | 00:24 | and he has had a very good day.
| | 00:29 | So let's click on say one of these symbols.
| | 00:32 | Go and quick and dirty and just
say right, let's shape tween you.
| | 00:39 | Play it through rough and the
shape tweening is really steady.
| | 00:42 | It's not wiggling or doing anything funny.
| | 00:45 | Now let's go into the other one.
| | 00:47 | Usually when I do this,
let's see, compare this to that.
| | 00:50 | So I am going to shape tween all of these,
the whole timeline, shape tween the whole thing.
| | 00:57 | Now let's watch the feet.
| | 00:58 | Ooh, it's a little bit of a
jittering there at some point.
| | 01:01 | Let's go into this.
| | 01:04 | Yeah, I am right in here.
| | 01:07 | So this is how we do our shape hints.
| | 01:09 | And don't forget when this happens before
you apply shape hints, save your project.
| | 01:13 | That's a cool way of
controlling the shape tweening.
| | 01:16 | But it can crash your program.
| | 01:22 | You can lose a lot of work.
| | 01:23 | It will ruin your day, so don't go there.
| | 01:26 | So I am just going to use the
shortcuts to add two or three more shape hints.
| | 01:31 | And you will see with each successive hint,
the shape should become more stable. That's nice.
| | 01:37 | And if you are in the rough phase, may
be you only want the enough hints just to
| | 01:40 | get these things stable so
that you can see what it's doing.
| | 01:44 | If you're being super picky and
working on a much finer scale, then you
| | 01:47 | might want to, oops!
| | 01:49 | Adding that fourth hint, direct it.
| | 01:51 | Just move the fourth one up there.
| | 01:54 | Okay. Let's add two more.
| | 01:58 | There is no rhyme or reason to the
method to the correct their placement I find.
| | 02:03 | They can be almost random sometimes.
| | 02:06 | I like as a form to keep them in one
direction, but there is no guarantee that
| | 02:10 | that's going to work.
| | 02:11 | And I have been playing with this for years.
| | 02:14 | So okay, here we go. And that's nice.
| | 02:17 | That's all steady.
| | 02:18 | There is one more, so let's go in and fix that.
| | 02:23 | Actually that leg position, either we should
change the foot or change the leg to match it.
| | 02:29 | I like the foot walk so let's go in
and change that leg. So that means we are
| | 02:33 | going to have to add a keyframe in here,
and that's probably going to ruin all
| | 02:36 | of our of shape tweens. So let's
put one in anyway, see what happens.
| | 02:47 | Now we find a little bend in there.
| | 02:50 | So we have all those hints. I am going
to remove that extra one and let's just
| | 02:57 | realign all of these.
| | 03:03 | Okay, we need to add them on this end as well.
| | 03:06 | Just make six of them and just drop
them over the others. This is the set going forward,;
| | 03:11 | the ones that we're covering are going
backwards, so these are hinting in this direction.
| | 03:15 | They always hint forward so it's good
to make a mental note. F, E, D, so it's going
| | 03:20 | A,B, C, D, E, F. So let's match
that or you could cause problems.
| | 03:31 | Okay, and still more problems here.
| | 03:35 | So let's just keep adding these hints.
| | 03:37 | This is why so many people
give up on shape tweening.
| | 03:39 | They just go, "Well, it is not worth it."
| | 03:43 | But they don't know that the hint feature
exists. They never found it, which is really sad.
| | 03:46 | The payoff's well worth it.
| | 03:49 | Let's see. This is a little annoying widget.
| | 03:55 | It can be very hard to find these sometimes.
| | 03:58 | Okay and then one more on this batch too.
| | 04:09 | It's really nice if we can keep the
same letters over the same general points.
| | 04:23 | Of course, this one is
misbehaving for some reason.
| | 04:45 |
Let's scrub through, make sure
that everything is still working. Great!
| | 04:49 | Now let's see how it looks
in context. That's great!
| | 04:56 | So that the legs are done, so I am
going to do the arms in a separate clip,
| | 05:00 | because this is getting on a bit.
| | 05:01 | That's still pretty nice looking.
| | 05:04 | We will save this and in the next one
we will do the same process with the arms
| | 05:09 | and let's hope they are just as well behaved.
| | Collapse this transcript |
| Tweening the arms| 00:00 | In the previous clip, we shape tweened
and fine-tuned slightly at the animation
| | 00:05 | of our legs of our character, so now the
legs are completely smooth to the entire walk.
| | 00:09 | So, now we are going to go in and do
the same to the arms so character walk_06,
| | 00:15 | open that and let's double click on
our guy on the stage, have a look.
| | 00:20 | The legs are smooth;
| | 00:21 | the arms are still doing little bit of popping.
| | 00:24 | So, let's go into one of these let's
just move through arms and see if we
| | 00:29 | can add some motion.
| | 00:31 | So the arms now have a look at them,
they are actually in a pretty simple form.
| | 00:37 | Let's take the right arm.
| | 00:38 | It begins in this crooked position and
in the backend of the walk it's in the
| | 00:42 | straight position and then it
works back into this crooked position.
| | 00:45 | That's a simple way to animate as possible.
| | 00:48 | The only thing is not doing
is actually blending into that.
| | 00:51 | So the thing to remember about an arm
in a walk and we saw that before is that
| | 00:56 | on the recoil position it's at
its most outward pose from the body.
| | 01:00 | So, I would think that on the front
recoil we should probably differentiate from
| | 01:05 | the one on the back, which is here.
| | 01:08 | So on the front recoil, I think this
guy might bend his arm a little bit more,
| | 01:13 | so let's go in and do that and
hand might bend up a little bit.
| | 01:20 | So, now if we compare key to key we get
this effect, maybe we need to fine-tune
| | 01:26 | the position of the hand on that recoil.
| | 01:30 | Okay, so then the hand is going to swing.
| | 01:33 | Let's switch this one off so we can
on just one then the hand is going to
| | 01:37 | swing down and some where around the
position to this position, the other contact pose.
| | 01:43 | It maybe, out of its straightest
position and swing it back around until it
| | 01:50 | walks right back into this.
| | 01:52 | So, then the art comes in and trying to
figure out what's the best point to bend this.
| | 01:59 | So, let's do something as simple as we can.
| | 02:01 | Let's just, I am going to insert motion
tweens here and shape tweens there just
| | 02:06 | make so we have that one working.
| | 02:08 | Then we are going to save this will bend
into that position without going crazy.
| | 02:16 | So, let's see add some hints again.
| | 02:18 | If you are going to add hints, save
your projects first. So, let's do that.
| | 02:22 | Ctrl+Shift+H to add a shape hint and
just that one hint alone is locked down
| | 02:31 | the shoulder at least.
| | 02:32 | So let's add a couple more.
| | 02:34 | Ctrl+Shift+H, second one.
| | 02:42 | Let's do one more from now.
| | 02:48 | Okay, now there is still a bit of
wiggling at the other corner but I don't let
| | 02:51 | that go for the moment.
| | 02:52 | So, I just want to test this
and see if it's doing right.
| | 02:54 | So what kinds of other things we could
do, for example as the arm moves back
| | 02:59 | into position across the body like this.
| | 03:01 | We could lead with the elbow on
this frame that will be interesting.
| | 03:04 | So let's try that, let's make a keyframe here.
| | 03:07 | When I say lead by the elbow what I
mean is we can break the joint and have the
| | 03:10 | elbow move first, do
something almost on anatomical.
| | 03:16 | That's going to be something that happens in
motion so fast you might not even notice it.
| | 03:21 | Let's see what it looks like.
| | 03:22 | I am going to have to tween this however.
| | 03:24 | Okay, it's working this way and I
need to add some shape hints here.
| | 03:32 | Again, we show your back up your file first
and let's go in a bit tighter. Here we go.
| | 03:57 | Now, you might find you will have
like a transition or a shape that
| | 04:00 | almost defies tweening.
| | 04:01 | Well, that the case you could just
pull these all out by one for such a small
| | 04:05 | number 1, 2, 3, 4 be with
your while to not worry about it.
| | 04:10 | But I like to play with
it and take as a challenge.
| | 04:13 | So, let's see we swing the empty
hair and it's leading too soon.
| | 04:17 | So let's change timing of that very easy to do.
| | 04:20 | So, what I am going to do is
duplicate this key and then drag it to here,
| | 04:24 | switch that tweening off.
| | 04:25 | So, what I've done is hold this
keyframe for this duration and then just be
| | 04:30 | going that elbow leading action to here
so that it only happens very, briefly.
| | 04:34 | So, let's try that and it's still a bit abrupt.
| | 04:43 | I might be overdoing that a bit.
| | 04:45 | Let me go in and make it a little more subtle.
| | 04:47 | Again, I check back and forth to
make sure our tweening still works.
| | 04:53 | If I pull these keys back a little bit
like I could slow down that and then we
| | 04:59 | also want to make sure
that the hand is following.
| | 05:02 | So, let's activate motion tweening on
that layer and activate motion tweening here.
| | 05:16 | As you can see that happens so quickly.
| | 05:17 | The goal is to convince the eye
consciously or unconsciously that the
| | 05:25 | character is not comprised a little flat
planes but he has dimension outside of this program.
| | 05:33 | So, the other thing that we can do
going to this hand let's drag that a little
| | 05:37 | bit and let's go in and twist
that wrist, and see if that works.
| | 05:47 | That's looking really goofy
and a good one. Okay, let's see.
| | 05:56 | So, it's looking a bit stiff from
the backend, but I think we should do
| | 06:01 | something push this out a
little more and on that key.
| | 06:06 | I am going to add a key here again, I
am going to push this back a bit and
| | 06:10 | put in motion tween and shape tweening here
and maybe just do something just to change that.
| | 06:17 | Oops! I can't adjust a moment I've add
tweening here to if I want to change that.
| | 06:21 | Okay, so for now I am going to leave that at
that and I am going to move on and hide this arm.
| | 06:38 | Going to move on to the other one, do
the same thing here, so the same process,
| | 06:45 | the click at it in place.
| | 06:48 | So, this is our contact position at
the other end and this at this end.
| | 06:52 | So I am going to push the arm out as if
we are looking at it in three dimensions
| | 06:58 | a little bit and make that a shape
tween, make these a classic motion tween.
| | 07:02 | If we go from here to here let's
imagine this is the impact, so we want that
| | 07:09 | hand to flair out just a little bit.
| | 07:15 | Then as he goes into this passing
position actually that hand should come down,
| | 07:20 | sort of swing lower and
into the contact position.
| | 07:32 | I can't change the contact position here;
| | 07:34 | I have to change it here.
| | 07:36 | So, I don't mess with that just yet so
let's go to the contact and then flair it
| | 07:41 | out a little bit and then we
are going to come back this way.
| | 07:49 | Let's see if that swings nice.
| | 07:51 | I am going to looking for
things that we are little stiff.
| | 07:54 | Now, some of that stiffness could be
because of internal reasons inside the clip.
| | 07:57 | We are moving from one and we have a
couple of states, here we have the low
| | 08:00 | hanging state and then we have the pointy elbow.
| | 08:03 | So, when we snap from one of these to
the other you are going to see that jilt.
| | 08:07 | So, let's have that and try to be
intelligent as with the other hand we have
| | 08:15 | to make the breaks.
| | 08:17 | So, the down point of which the hand
will be at its most straight should be on
| | 08:22 | this contact position.
| | 08:25 | So, from here to here I would
imagine this entire shape. Here we go.
| | 08:30 | That's nice.
| | 08:32 | So, now when we go from to here that
should be a completely smooth action which
| | 08:36 | guesses to here at the beginning and begins
to move back snapping back into this crook.
| | 08:46 | So, I think we can just simply activate
shape tweening here and motion tweening.
| | 08:50 | Let's see how that looks like.
| | 08:50 | I am going to put the body in outline
so we can see the hand and then a little
| | 09:00 | bit to the right hand.
| | 09:01 | We can do something little more
extravagant as he comes back through here.
| | 09:11 | Maybe, do another leading action or at
least break this line of the arm, which
| | 09:16 | makes it look a little more
organic, something little more extreme.
| | 09:25 | Okay, see what it looks like.
| | 09:26 | We won't really know until you see it in place.
| | 09:29 | Okay, let's put the body back on
and let's look at the other arm.
| | 09:34 | See, how the whole thing works together.
| | 09:35 | This is a pretty goofy walk
so he has had too much coffee.
| | 09:44 | Okay, so those are four keys much
more cartoony extroverted walk than the
| | 09:50 | other one and the kind of walk that
you would do if you were doing a more
| | 09:53 | realistic character.
| | 09:54 | Now, in the next step we'll be just to
go in and do so more fine-tuning, things
| | 10:00 | we can do on the head that suited in
the previous chapter, put some drag on the
| | 10:03 | hair and I also want to correct the feet.
| | 10:05 | You can see that the feet are sliding,
they should be in contacting the ground
| | 10:10 | and the big one is the foot placement.
| | 10:12 | So, we are going to move
forward and keep solving these issues.
| | 10:15 | I think, next the most important thing
it will be to correct the shoes and make
| | 10:20 | sure that they're consistently placed.
| | 10:21 | So we can begin to move this guy
across the screen without foot slippage.
| | 10:25 | So, let's move on.
| | Collapse this transcript |
| Setting the placement of the foot| 00:00 | So, the next thing we need to do with
our walk cycle is to watch the feet.
| | 00:05 | I am going to animate the shoes as we
did in the previous animation in Chapter 5.
| | 00:11 | This time we also have the
additional issue of the placement of the feet.
| | 00:15 | Because if you remember the last time
you were moving across the screen so the
| | 00:18 | feet were planted for us.
| | 00:20 | In this instance, we have to worry
about that ourselves and make it work
| | 00:24 | without causing problems.
| | 00:26 | So, let's have a look at this thing and there
is our current animation so let's go in again.
| | 00:36 | The process for here will be pretty
much the same as it the last time.
| | 00:39 | I am going to switch off the far foot so we
can really concentrate on just one at a time.
| | 00:44 | So we put it up on to the
ground, foots begins to rotate.
| | 00:50 | So, I want to remove the
rotation, straighten the foot out.
| | 00:57 | Let's bring it down so it lines up with
our guideline. And the first frame should
| | 01:12 | be the same as that.
| | 01:13 | So, I am going to grab this Alt+Option
and drag and then make shape tween again
| | 01:20 | and we are going to reset this to
frame 1 in the Properties panel here.
| | 01:24 | Okay, so now it's not doing that nice
rotation any more. So it does seem to be
| | 01:31 | opening air between the foot and
the ankle on the bottom of the leg.
| | 01:35 | So, we are going to end up changing the
show. We are going to bend that foot to
| | 01:39 | join here and we may need to
alter this transition a little bit.
| | 01:48 | By this frame here, the foot will be
actually off the ground, so I am not
| | 01:51 | worried about this one.
| | 02:00 | So, this is the critical point. Here is
the contact pose. This is where we hit
| | 02:03 | the ground for the first time.
| | 02:05 | It begins to rotate and at this point we
have to watch the position of the ankle.
| | 02:13 | The key point is that of course the front
of that foot and that move by the same increment.
| | 02:17 | There are various ways of doing this.
| | 02:21 | We can edit multiple frames and look
at it in outline mode. So let's do that.
| | 02:25 | Just look at the foot level now.
| | 02:28 | Sometimes this is hard to look at
simply because there are so many layers
| | 02:31 | overlapping as you can see.
| | 02:34 | We also need to create some keyframes in here.
| | 02:39 | I just find this impossible.
| | 02:40 | It gives us a rough idea.
| | 02:42 | I think we are okay.
| | 02:42 | These things seem pretty well spaced.
| | 02:45 | But there is a more manual way
of doing this so let's do that.
| | 02:49 | So, I am going to make a fresh layer
and just select our Line tool and an
| | 02:55 | overlay that's padlocked there beneath.
| | 02:57 | Go to the contact pose and just draw a
line. Make that line a darker color so
| | 03:02 | maybe you can see it better.
| | 03:04 | Great! So back to that contact pose
and then for each frame just go through
| | 03:10 | frame at a time on that layer.
| | 03:13 | For each position of the
heel just put down a line.
| | 03:30 | And as you can see
we've had quirks creep in.
| | 03:43 | Okay, these nicks represent the
position of the heel and because these positions,
| | 03:51 | the travel time of the foot is not even,
| | 03:54 | this means that when we play this walk
cycle next to a scrolling background it's
| | 03:59 | going to slip relative to that background.
| | 04:02 | If we move the character across the
screen, tweening him from left to right,
| | 04:06 | the feet will slip in.
| | 04:07 | It will be quite noticeable.
| | 04:08 | It doesn't look like a lot but it will.
| | 04:10 | So, let's correct that and there is
a probably easy way of doing this.
| | 04:14 | So, let's just select all this little
tick marks, we go Window > Align, and make
| | 04:21 | sure that Align to Stage is clicked off,
and then we will distribute them around
| | 04:26 | the horizontal center.
| | 04:29 | Flash does a really nice job of
giving us our ideal spacing guide.
| | 04:34 | This is what the foot
placement should have been.
| | 04:36 | So, now let's go frame by frame. So
this is the contact position and then so we
| | 04:43 | know that there are 3
in-betweens, 1, 2, 3 between each key.
| | 04:49 | So, this is our contact position and
let's pick a different color for that.
| | 04:53 | Let's make that red. So solo this.
| | 04:56 | So, these are our keys here.
| | 04:59 | Okay, so this is the contact key.
| | 05:09 | Of course I need to on padlock that level.
| | 05:12 | I am going to padlock the tick mark
level now, so this foot should be,
| | 05:16 | in a perfect world,
| | 05:17 | it will be there and next one is
a little bit over so it's there.
| | 05:23 | This one to here and that's our last.
| | 05:25 | So, now when we scrub through we have a
completely perfect transition or travel
| | 05:33 | time for every foot.
| | 05:35 | Now, don't delete this level because we
are going to use that for the other foot.
| | 05:40 | And the other thing that we have to do
is correct the right leg, because having
| | 05:46 | moved our foot, a lot of the
leg frames will be slightly out.
| | 05:51 | So, we can either correct them by
changing the outer symbol or the inner
| | 05:56 | tweening. I think the inner
tweening will be the easiest of the two.
| | 06:00 | Because we didn't move them
drastically. So I am using the frameEdit
| | 06:09 | extension to do this.
| | 06:13 | Okay, I am not going to bother with
this because we are also going to modify
| | 06:16 | the shoe to curve up.
| | 06:20 | But the one thing I might do is
just pull that leg in a little bit.
| | 06:23 | Obviously, that's going to bend this
way. The leg might bend a little too far out,
| | 06:28 | possibly too far out here too, but I am
going to leave that for now because it's
| | 06:31 | our contact position.
| | 06:36 | Okay, let's zoom out a bit.
| | 06:41 | So, that's that.
| | 06:42 | So let's repeat this process very
quickly for the left foot and it's important
| | 06:47 | that the left foot travels the same
distance as the right, even if that might at a
| | 06:53 | different size or distance. So let's
hide that foot there and go to the contact
| | 06:57 | position and have a look at this.
| | 07:01 | So, they are more or less in the same
area so the same tick marks are going to be used.
| | 07:04 | The only difference between of course
that this foot is on the upper line
| | 07:09 | whereas the other foot was on the
lower line. So I am going to fine tune those
| | 07:13 | positions and start and the stop.
| | 07:20 | Of course, we want to remove the tilt and now
we can use these tick marks as well to help.
| | 07:39 | Okay, this will be also be a lift-off
frame just after that key so I am going to
| | 07:48 | push that up so we know we are off the
ground at this point. So now we can get
| | 07:52 | rid of the tick mark guide level.
| | 07:56 | Then the other thing we would also have
to correct will be the position of the
| | 08:00 | left leg and then right leg I
think. Just make sure that we did it.
| | 08:19 | Okay, so I am going to pull in this
contact pose, repeat, copy that to here.
| | 08:25 | Of course, change that name just to be
consistent. Frame 33, a random number. Okay.
| | 08:30 | So, now our feet are correctly placed for
the-- let's just move. Little alterations here.
| | 08:44 | So, I think that's fine.
So we can save out as this.
| | 08:49 | It looks the same as the last one but
there is an amazing difference in terms of
| | 08:56 | the reusability and the stability of our walk.
| | 08:59 | So, the next step would be to start
curving the shoes and making them bend and
| | 09:03 | flex like they're actually
made of leather, not vectors.
| | 09:06 | So let's do that and we'll save this out.
| | Collapse this transcript |
| Animating the shoes| 00:00 | So we've animated our character and the
major step is to correct the shoes, so
| | 00:06 | that they twist and flex as the feet
touch and leave the ground. So let's do that.
| | 00:13 | So we open file number 8.
| | 00:18 | Click in the symbol.
| | 00:19 | And let's pick one of the two feet.
| | 00:23 | So we'll try this one first.
| | 00:25 | So hide the other, so we can concentrate
on this. We can focus a little better.
| | 00:33 | The foot contacts the ground.
| | 00:34 | We'll continue to see little matching issues.
| | 00:44 | If the pants don't quite fit the foot
placement and go ahead and correct that.
| | 00:51 | Very easy to do.
| | 00:55 | If the anamoly happens on say frame 9,
be sure you tunnel in and make your
| | 00:58 | changes on the inner frame 9.
| | 01:00 | Okay, little bit of a tweening
ledge there, but we'll fix that later.
| | 01:11 | Okay, so what you are seeing now is
that foot should begin to bend and
| | 01:15 | that'll reach to its maximum bend on
the contact frame. That's when it's going
| | 01:19 | to twist and turn up.
| | 01:20 | So let's move into that frame and set a
keyframe and let's set an out keyframe
| | 01:26 | here, back to its normal position.
| | 01:29 | So the bending begins to happen on
the passing position, so let me show you
| | 01:34 | the reference image.
| | 01:36 | So the foot to follow up the dark
shaded foot here, it's perfectly straight.
| | 01:40 | It impacts the ground, holds there flat
on the passing position, begins to bend
| | 01:45 | just slightly on the high point,
reaches its maximum bend on the contact, and
| | 01:50 | then we're off the ground on the recoil.
| | 01:52 | So what we're going to do is begin this
foot bending, the shoe twisting on the
| | 01:56 | passing pose, and it'll peak on the
contact and then it'll snap back into its
| | 02:01 | normal position on the recoil.
| | 02:03 | So let's go into this shoe symbol.
| | 02:11 | So it'll start here, maximum bend here,
and then back to normal somewhere in here.
| | 02:16 | So let's just make all this a shape tween,
and what I want to do is find the pose
| | 02:25 | that we want to work as reference is this one.
| | 02:28 | This is the contact pose of maximum twist.
| | 02:31 | So let's work on the sole level.
| | 02:37 | And then we have to change the lower
leg area to better match this and see how
| | 02:40 | far we can push the shoe and check
back and forth. The tweening is looking
| | 02:47 | really good, lock that, and let's work
with the other blue. The bulk of the
| | 02:52 | shoe area is this brown section.
| | 02:55 | So let's push that up inside the foot,
making sure Snap is on so all your
| | 03:06 | points join properly.
| | 03:07 | I don't think we can really push
the geometry too far this direction.
| | 03:12 | I think the foot will start gaining too
much volume or too much mass, so let's
| | 03:15 | just do it to here for now.
| | 03:18 | And that's now are very stable. No
reason to do shape tweens at the moment,
| | 03:23 | and then the other level is the front of
the shoe and if we're feeling fancy, we
| | 03:28 | might just squash that just a little bit.
| | 03:31 | Okay, so this is the animation that
we're looking at on the outer layer.
| | 03:36 | So let's zoom out so we
can get a better look at it.
| | 03:43 | So I think we can correct some of the
mismatches by pulling the leg back in a bit
| | 03:48 | and then may be altering the
shoe as well slightly. It's a little more
| | 03:55 | contained movement and it's tweening okay.
| | 04:01 | Okay, let's zoom out again.
| | 04:02 | Make sure that that's reasonably
stable looking. Okay, not too bad.
| | 04:16 | Now as you can see the foot has
planted and I want to make sure that it's
| | 04:23 | following along this line, that
it's not dipping below this line.
| | 04:26 | It seems to be a little bit of slippage south.
| | 04:32 | I'm not sure if it's an
illusion caused by the guidelines.
| | 04:36 | I'll go in a little closer
and let's go frame by frame.
| | 04:40 | Let's go and make sure that these
are -- the corner of the foot is
| | 04:47 | closely aligned to that.
| | 04:49 | Do not under any circumstances intend
to move the foot left or right because
| | 04:53 | that will really mess the position
of pan when we begin to move the walk
| | 04:57 | cycle across the screen.
| | 04:58 | Okay, I think that's all right.
| | 05:00 | That's pretty good.
| | 05:05 | So now we can repeat this
process for the other foot.
| | 05:10 | The next thing you want to do is copy
the frames under Edit > Timeline > Copy Frames
| | 05:16 | or Ctrl+Alt+C and
then Alt+V. So let's do that.
| | 05:25 | Go into the other foot, I have to find
that place have maximum twist on that,
| | 05:28 | which is our frame number one contact position.
| | 05:30 | So let's make a keyframe with the
other position here and I'm going to
| | 05:36 | paste those frames in.
| | 05:37 | This creates sometimes a second
dot here. Let's get rid of that.
| | 05:40 | Now let's check our contact pose.
| | 05:45 | It's good.
| | 05:48 | And don't forget we have to apply the
same thing to the final frame because this
| | 05:53 | is a cycle. Frame 1 and frame 33 have to
have the same graphic and then we need
| | 06:01 | to tween from our second
passing position, which is here.
| | 06:10 | Let's tunnel into that, keyframe these,
add a shape tween, here is our second tilt,
| | 06:18 | and that is -- the
shoe now properly animated.
| | 06:29 | So now I'm going to actually hide the guides.
| | 06:40 | We can hide the sample screen.
| | 06:45 | So that's all the
outstanding large-scale movements.
| | 06:49 | Other thing I want to test is to make sure
that the start and the stop are identical.
| | 06:53 | There are no little motions or glitches in there.
| | 06:55 | That's very important.
| | 06:56 | There are still things that we can play with.
| | 07:02 | That I think we'll buy us a
little more entertainment value.
| | 07:06 | So in the next section I am going to
show you how to push and pull some of these
| | 07:11 | shapes to just to give it a little extra.
| | 07:13 | And we also probably should add a
very quick little drag on the hair.
| | 07:20 | That will be little different from
what we did in the walk on the previous
| | 07:23 | chapter, simply because to look at the
difference in the movement with the head.
| | 07:26 | He is dipping and moving
backwards and then up and down.
| | 07:29 | We still have a couple of things to do
and also a bit more drag. I think we're
| | 07:35 | going to push some of the animation on
the hands and give it a bit more swing
| | 07:40 | and I'll show you some of the fun
things that you can do and really start squeezing
| | 07:44 | some more tricks out of this
nested animation method. So that's it.
| | 07:49 | Hope to see you in the next one.
| | Collapse this transcript |
| Animating the hair| 00:00 | So we've animated our walk in place.
| | 00:02 | So it's time to add some
secondary actions to the hair.
| | 00:06 | So let's open our file in
Exercise Files, Chapter 6.
| | 00:12 | Let's double-click on the stage.
| | 00:14 | We could also double-click in
the library on the bd walk symbol.
| | 00:17 | Let's have a little look at it again.
| | 00:20 | As you can see here it's a much broader
action than the walk that we did in Chapter 5
| | 00:23 | and that's going to create some
different requirements for the secondary
| | 00:27 | action on this forelock of hair.
| | 00:29 | So let's go in and have look at that.
| | 00:31 | So we're going to animate
keyframes for this layer here.
| | 00:36 | So, all of these positions are going
to have some sort of motion on them to
| | 00:40 | react to the broader up and
down bouncing up the walk cycles.
| | 00:44 | So let's just switch that whole thing
onto a classic tweening and now using our
| | 00:49 | Back and Forward keys we'll
move through the timeline.
| | 00:54 | So as you can see from the contact pose to the
recoil pose, I would expect the hair to drag.
| | 00:58 | Let's go in a bit and again
move to the recoil position.
| | 01:04 | We've moved in on frame 5. So when
you tunnel in, make sure that you are on
| | 01:09 | frame 5 and a reminder again, use
the frameEdit shortcut that way when you
| | 01:14 | move into any given frame, you'll be
on the correct internal number. You'll match.
| | 01:18 | Otherwise things will seem to
pop if you work on the wrong keyframe.
| | 01:23 | So again I'm going to frameEdit in
and I'm going to drag this hair. Let's
| | 01:28 | skew it and maybe rotate it.
| | 01:33 | There's an issue when you begin to animate it.
| | 01:35 | It'll expose issues or potential
problems with the rig, so I'm going to go into
| | 01:40 | this symbol here where we have a
little gap in the hairline. That's not good.
| | 01:43 | We can probably correct that here and
that's an issue that's not going to go away.
| | 01:48 | So I'm going to fix that, maybe
pull the hairline up a little bit.
| | 01:54 | That way the hair will have a
little more flexibility and motion.
| | 01:57 | Let me bring this down, again making sure
that you're on the profile version of the hair.
| | 02:02 | That's the second frame
in the head symbol, okay.
| | 02:07 | So now we can even maybe pull the hair
up a little more, whatever we think
| | 02:09 | that we can get away with.
| | 02:12 | Let's move into the next key and now
the character is moving up and backwards so
| | 02:17 | we can go with the default.
| | 02:19 | I'm going to push that a bit more.
| | 02:20 | Let's pull it out, really try
to accentuate a drag on the hair.
| | 02:26 | So let's see what that
looks like again in context.
| | 02:33 | So we want to make sure that this
point on the hair has been pulled.
| | 02:37 | It's pointing in the direction that it
still wants to be in and now we go into
| | 02:44 | the up position and again
some pretty heavy drag here.
| | 02:47 | So let's pull it down.
| | 02:48 | Let's see what that looks
like when we zoom out.
| | 03:00 | Good. So it should be noticeable.
| | 03:02 | You could flap it all over the place
if you think it's going to be a fluffy
| | 03:05 | very lightweight hair.
| | 03:06 | You could also make it stiffer.
| | 03:08 | It depends upon the kind of texture
of the character's hair or whatever the
| | 03:11 | fabric is as to how far you push it,
but in this case I think we're
| | 03:16 | somewhere in the middle.
| | 03:19 | We could go in and add a few more
little touches, just increase the squash and
| | 03:27 | stretch. Watch your volume.
| | 03:28 | You don't want to go in like that. Very, very
easy to gain volume when you start doing this.
| | 03:35 | So I'm just going to check.
| | 03:37 | It's a little too big,
so let's thin it out a bit.
| | 03:48 | And push him a little more.
| | 03:57 | Okay, so it's happening on
the first part of the step.
| | 03:59 | So let's go in and copy those frames,
the recoil, passing, and highpoint because
| | 04:04 | they're the same on both. Holding down
the Alt or Option key, let's drag to the
| | 04:08 | second part of the step.
| | 04:10 | Now we have a loose piece of hair.
| | 04:13 | And we can do other little thing.
| | 04:14 | For example, let's do the same thing
for this back area, which we did on the
| | 04:17 | previous walk cycle and select that again.
| | 04:21 | First of all I think as we did there too
we can break this symbol apart, Ctrl+B,
| | 04:27 | and now it's an object that we can shape tween.
| | 04:29 | I think we'd have to shape tween this.
| | 04:31 | It would be very difficult to do any
meaningful animation with that symbol if
| | 04:36 | it was a motion tween.
| | 04:37 | So let's look at it in context
again, with the neck and the body.
| | 04:43 | So now we can imagine the same
process here, a big flair at the back.
| | 04:50 | This is going to be a much more
subtle range of motion and I just noticed a
| | 04:53 | little issue here with the neck.
| | 04:58 | So not again, the character is pulling
a back a bit, so again on this frame,
| | 05:03 | using the frameEdit in keyboard shortcut.
| | 05:07 | That's good.
| | 05:09 | And we can use this if we had a different
design. We could help to make this wrap.
| | 05:13 | If it was a tighter haircut.
| | 05:14 | We could help to align the hair to the
back of the neck much more tightly, if we
| | 05:19 | wanted a continuous line here.
| | 05:21 | So this technique can be used in a
couple of different ways, but here I'm just
| | 05:26 | doing it to help the hair feel
like it's not a stiff symbol.
| | 05:30 | Let's go back in here and I wanted the
same thing I did in the previous one,
| | 05:33 | these three frames. I'll copy from the
recoil, passing, and highpoint pose to the
| | 05:37 | second one and let's see if that works. Great!
| | 05:50 | So we have done the hair.
| | 05:51 | It's nice and loose now and it's
reacting to the walk and now we have to do the
| | 05:55 | same thing with the hands.
| | 05:56 | You can see that the hands are a little stiff.
| | 05:59 | They should move a little more,
especially with a fast walk like this.
| | 06:02 | So we'll save this and we'll move onto
the next session where we will give the
| | 06:06 | hands a little more articulation.
| | Collapse this transcript |
| Creating secondary hand actions| 00:00 | So we've animated our body walking,
we've animated the secondary action of the hair,
| | 00:04 | and now we're going to put a
bit of flexibility into the hands.
| | 00:07 | So let's Open up our file in your
Exercise Files Chapter 6 folder and it's the
| | 00:13 | walk_10. Click in and let's just
play through and look at the hands.
| | 00:21 | So they're not horrendous or anything,
but they're not really responding in a
| | 00:25 | way that will be
appropriate to such a fast action.
| | 00:27 | Let's just focus on one of them.
| | 00:29 | We'll hide the back one and just look
at the right hand and if we go through
| | 00:34 | this a little slower, you'll see what I mean.
| | 00:36 | There is little join breaks
and things we have to fine-tune.
| | 00:42 | So for example, this is a pretty fast action.
| | 00:45 | I would expect that hand to drag a
little bit. As the arm moves down like this,
| | 00:50 | we would expect a little
bit of a break that way.
| | 00:52 | So we'll just go out
through this frame by frame.
| | 00:55 | Let's go into that symbol.
| | 00:56 | I'm going to add some keys.
| | 00:58 | This is our hand layer here.
| | 00:59 | So let's label that properly.
| | 01:01 | You remember we nested the hand inside
the arm symbol, which really simplifies
| | 01:05 | the process of the arcs.
| | 01:11 | So okay, I'm going to just
retransform and go back and always look at
| | 01:22 | your symbols in context.
| | 01:24 | This one is looking little disjointed.
| | 01:26 | You don't notice it in the full scene
because it's moving so fast, but now we
| | 01:30 | can go in and fine-tune that and don't
forget this is a cycle. So the first hand
| | 01:34 | and the final hand should be at the
same position. So one, two, three into the
| | 01:39 | next position here. frameEdit
in using our favorite extension.
| | 01:50 | More drag on there than we would expect.
| | 01:58 | Again tunnel out and see
what it looks like in context.
| | 02:03 | So from here to here, the opposite
should happen. It'd be nice if we saw the hands
| | 02:09 | moving backwards a little.
| | 02:11 | It's not floppy like a rag.
| | 02:13 | It is a living thing and it has some
strength in it, but a little bit of
| | 02:16 | reaction to these very big broad
movements would be more believable.
| | 02:20 | So we'll keep going. Looking more
that way, maybe pull the wrist out a little.
| | 02:30 | If you find the wrist is not
to your liking, it's completely okay to
| | 02:35 | alter the position a little.
| | 02:37 | You'll begin to expose issues
with the rig. You might think oh,
| | 02:41 | you know, maybe you don't need that dark
line here or maybe this should be a bit longer.
| | 02:45 | If you want to make changes to make it
suitable, just duplicate that symbol and
| | 02:50 | then do whatever business you
need to make it work inside.
| | 02:54 | Okay, so we'll keep moving through
this and this doesn't mean we slavishly
| | 03:00 | have to make the hand always drag. Obviously it
can move under its own steam, but in this case,
| | 03:07 | I'm just going to see
what this looks like first.
| | 03:09 | Then we can go back in and
tighten it up if we have to.
| | 03:13 | Okay, so at this point there is
a little bit of direction change.
| | 03:19 | The arm begins to move screen left
and then slows down and begins to move to
| | 03:25 | the right so there is a bit
of overlap on the hand here.
| | 03:29 | And I had a little alternate, strange little
timing here where I didn't line up the key.
| | 03:33 | Let's just put a slight
piece of drag on the hand.
| | 03:37 | We can change that back to here if we want.
| | 03:39 | We don't have to do that.
| | 03:40 | It's just-- it's nice sometimes while
your timing isn't slavishly aligned with
| | 03:46 | the primary keyframes. If you want
something to drag, to be in slightly
| | 03:49 | different overlap timing, you can do that.
| | 03:53 | This hand was dragging
nicely. Tiny errors in here.
| | 03:56 | These are the kind of things that take
up a lot of time as you're animating in
| | 03:59 | the studio, making sure that all
these little gaps are properly closed off.
| | 04:05 | So there's a little bit of break between
here. You can see the hands overlapping
| | 04:10 | with the wrist so that's because there
is very big internal movement here too.
| | 04:14 | So this is a good spot where
we can go in and correct that.
| | 04:20 | Be sure it's okay on the in-betweens as well.
| | 04:22 | So as you can see as I'm dragging the
hand and moving it over this motion tween
| | 04:27 | it's automatically creating
keyframes, so just beware of that.
| | 04:30 | You can create a lot of keyframes.
| | 04:32 | If you had a lot of violent action
going on here, you might end up having to
| | 04:35 | keyframe quite a bit of this. So there we go.
| | 04:39 | Let's have a look at that now in
context again on the outside, and you can see
| | 04:47 | it's got a bit more of a kick,
especially here at the back end where we really
| | 04:51 | put that overlapping.
| | 04:52 | I think that I could have
probably put a bit more too. Let's see.
| | 04:55 | On this point where the arm begins to
move from this highest position up and to
| | 04:59 | down, let's do something a little trickier.
| | 05:01 | I'm going to go into that point.
| | 05:03 | So on this frame, which would normally
be an in-between frame, let's put a big
| | 05:08 | overlap in there and just have a tween
down from there and see what happens.
| | 05:18 | That's a very strong transition.
| | 05:24 | And you're really feeling
that wrist flexing at that point.
| | 05:27 | That's making him a little more limp-
wristed, but that's keeping in character
| | 05:32 | with the rest of the walk, which is
pretty deliberately over-animated.
| | 05:40 | So we could repeat the process with
the left hand, again just make a lot of
| | 05:44 | keyframes on the cardinal positions
of the contact, recoil, passing and high point,
| | 05:48 | and let's hide the upper arm
and we'll put the body into outline.
| | 05:59 | So we're going to drag the hand a little.
| | 06:02 | Again go back and fourth so you're --
and let's see the hand is like moving down.
| | 06:06 | So let's do something different and
try get out this way. And here it's moving forward.
| | 06:14 | Let's really drag that hand back.
| | 06:16 | It's more comic little pose and same here.
| | 06:36 | Maybe now that position might be okay.
| | 06:38 | Actually let's move the hand in a bit,
since we're breaking a little
| | 06:47 | and then drag it here as well.
| | 06:48 | Okay, so here we have the same
issue as we had on the other hand.
| | 06:56 | So he's going to move down from here to here.
| | 06:59 | First of all, we will drag this hand
and fix that little joint error there.
| | 07:07 | It will gap open up at the wrist.
| | 07:10 | So from here to here it would be
nice if the hand snapped again.
| | 07:13 | So I'm going to make a keyframe
here, F6, and let's do a dramatic little
| | 07:19 | snappy overlap. So as the hand goes up,
wrist goes down and the hand is still moving up.
| | 07:28 | Let's put some drag, now moving to
his left, let's have the hand dragging
| | 07:32 | the opposite direction.
| | 07:34 | Okay, and have to make sure that our
contact poses, the start and stop are the same.
| | 07:39 | Let's see what that looks like.
| | 07:41 | And it's much nicer. So you're
feeling that nice little kick.
| | 07:46 | It's something that you really sense
that rather than see blatantly because
| | 07:51 | it's such a fast action.
| | 07:53 | It's happening in one second.
| | 07:54 | But all of these things add up and
the overall effect, secondary action on
| | 08:00 | the hair, these little overlaps on
the hands, even things like the feet
| | 08:05 | tweening like this.
| | 08:07 | All of these things work together to
help us fight the awful effect that is
| | 08:13 | the Flash-y look when it comes to animation
where we're just moving flat symbols around.
| | 08:18 | All these techniques are vital tools
in our war against the dead empty motion
| | 08:24 | tweening of just geometrical shapes.
| | 08:26 | So this is all about the illusion and
helping our little flat character look
| | 08:30 | like he isn't a little flat character.
| | 08:34 | So I think there's one more little
pass I have to make over this to add some
| | 08:38 | little squash and stretch on the torso
level and maybe a couple of other little
| | 08:43 | things here and there and then we have
to really tie this down and save our file
| | 08:46 | and move onto the next chapter.
| | Collapse this transcript |
| Animating the torso| 00:00 | So now we have our character walking and all of
his joints are moving nicely, so let's proceed.
| | 00:06 | And we will now do a little
squashing on the body, a very simple thing.
| | 00:12 | Definitely, I think, worth a little bit of time.
| | 00:15 | Let's click on our
character. Let's get in there.
| | 00:16 | So I think we can get
rid of our little reference image up at
| | 00:21 | the top now, unless you still think you need it.
| | 00:23 | I think we're well advanced at this point.
| | 00:29 | So let's look at the walk.
| | 00:32 | One thing that isn't really
doing anything drastic is the torso.
| | 00:35 | So again, we want to keep things
looking as lifelike as possible.
| | 00:39 | So I'm going to put some keys in here,
hitting F6 for all this,
| | 00:43 | this just duplicates the first.
| | 00:46 | Let's switch this entire layer to shape tween.
| | 00:50 | Let's look outside first to see
exactly where we are, where we're going to.
| | 00:53 | So here is our recoil, before our
little fellow hits the ground, so let's just
| | 00:59 | squash him out a little bit.
| | 01:03 | And we might even consider trying to
change this curve at that line, maybe move
| | 01:08 | it down a bit rather than up.
| | 01:09 | Now he is leaning through the
passing position into the high-point.
| | 01:16 | That's more or less one continuous action,
so let's delete the passing position keyframe.
| | 01:20 | I'm just going to try to
stretch him on the high-point.
| | 01:24 | And don't forget what a material is
made of. This could be like a light
| | 01:31 | fabric for a shirt, in which case it will
billow and be more prone to react into the air.
| | 01:37 | The other thing that you can do is even
more drastic, we can try to put a little
| | 01:41 | reversal on the back.
| | 01:44 | Use this to completely
change the angle of his body.
| | 01:56 | Don't forget we're in motion. Some of these
frames could look a little odd by themselves.
| | 02:00 | One of the cool things about
animation is that it's possible to have a
| | 02:04 | frame that looks weird as a static image,
but looks fantastic when you see it in motion.
| | 02:08 | I'm just going to pull the body up behind him.
| | 02:11 | So now we have a more
natural line of action on his back.
| | 02:22 | I'm just going to pull this in a
little, so we see a little bit of negative
| | 02:28 | space between the shirt and his arm.
| | 02:33 | I think we might be seeing the lower torso
through that, so let's move that back a little.
| | 02:38 | And again, anytime you like these changes,
you want to zoom out a little to make
| | 02:42 | sure that you haven't broken anything or made
anything else look strange. So that's good!
| | 02:49 | So now that I've done that. We could be
a little bolder on this down position.
| | 02:55 | Push out his chest a little bit.
| | 03:03 | See what that looks like.
| | 03:05 | Still in place, looks fine.
| | 03:06 | It's shape tweening very stable.
| | 03:10 | But that will also give us a
stronger transition into this pose here.
| | 03:15 | And the other thing we can do also
if we want to move faster into this up
| | 03:18 | position is take our Ease and do an ease
out, and that will move us much quicker
| | 03:25 | from here into here.
| | 03:26 | It's much snappier.
| | 03:29 | Let's see what that feels like.
| | 03:30 | And this is also one of those things
that it's happening pretty fast, but it's
| | 03:39 | a sensation more than anything.
You'll feel it in the walk.
| | 03:42 | So I want to copy these frames, hold down Alt+
Option, just drag the second part of the walk.
| | 03:48 | Don't forget to make sure that all of
your keys are behaving and one matches the
| | 03:54 | other side, because we want it
to be symmetrical on each step.
| | 03:56 | That's really great!
| | 04:02 | So I'm noticing the lower torso.
| | 04:04 | Always watch out for symbols that are
sliding under one another, so the torso lower area.
| | 04:10 | That's this one.
| | 04:18 | It's misbehaving slightly, so I'm just going
to padlock everything except the lower torso.
| | 04:22 | Let's go ahead a bit closer. Maybe
rotate it, position it, so that it's inside
| | 04:27 | the upper body, and let's
scrub through the timeline.
| | 04:29 | Just maybe rotate it around and over.
| | 04:44 | Same here.
| | 04:45 | You see it's peeping out and
that's going to catch the eye.
| | 04:52 | Okay. So now we're all safely inside.
| | 04:54 | You might want to, if you're really
doing this very carefully, you might want to
| | 04:57 | just switch off the arms.
| | 05:02 | Great!
So let's move out.
| | 05:11 | Much better!
| | 05:12 | Simple thing, but it's
made a hell of a difference.
| | 05:17 | I'm noticing a couple of little breaks,
as you will, right until the bitter end.
| | 05:22 | Now that we've moved the body, that's
exposed some of the shoulder area up here.
| | 05:26 | So let's just select that.
| | 05:28 | Maybe pull the arm back in.
| | 05:32 | Find any of these points that are now
misbehaving and just use your numeric
| | 05:37 | arrow key to pull them over.
| | 05:38 | Again, go through frame by frame.
| | 05:41 | I am noticing a little piece of air now
appearing on this arm, the right one, so
| | 05:49 | either we can make a change inside that symbol.
| | 05:51 | It will be on this frame.
| | 05:55 | It's shape tweening anyway, so we can do
things like that to cover those little gaps.
| | 06:00 | Beautiful! Okay.
| | 06:09 | And those little alterations don't seem
to have caused the arm to get stuck or
| | 06:14 | affect the overall flow of the scene.
| | 06:16 | So I think we are good.
| | 06:17 | The final step will be to show you
how to use our finished walk cycle to walk
| | 06:22 | across the screen, how we reposition him,
and that's a very simple process and
| | 06:25 | we'll cover that next.
| | Collapse this transcript |
| Repositioning the walk| 00:00 | Our in-place walk cycle is now
complete, looking good and it's time to
| | 00:04 | reposition that walk and show you
what it looks like, how we use it.
| | 00:08 | So let's open up our file number
12 in Exercise Files > Chapter 6.
| | 00:14 | So now we are in the outer.
| | 00:15 | We have been doing a lot of hard
work of course on the inner clip.
| | 00:18 | Now we work on the outer clip.
| | 00:20 | This is the one that we'll
be repositioning on the stage.
| | 00:24 | So let's select that and in the
Properties panel, let's hide our little color
| | 00:28 | area here. Click on this.
| | 00:30 | We want this to behave as a
graphic and we want it to loop.
| | 00:35 | Be sure your first frame is set to
frame 1 and some little housekeeping there.
| | 00:41 | Let's make him using the Free
Transform tool, holding down the Shift key, and
| | 00:45 | make him smaller and then now we need
to just add some frames to the timeline.
| | 00:50 | I'm hitting F5 to just
extend the timeline a bit.
| | 00:53 | Let's go out to about 150 frames, and now
if we hit Play, he will just loop in place.
| | 00:59 | So we want this guy to move across the screen.
| | 01:02 | So I'm going to put a second keyframe,
F6 out here, and let's just drag it across.
| | 01:10 | And let's create a classic
tween and see how that works.
| | 01:15 | So now he is moving across the stage.
| | 01:18 | Now I'm going to zoom in a little bit
so we can see the detail a bit better
| | 01:21 | than that and if you watch his feet,
you'll notice that they are sliding.
| | 01:25 | It's like he's on ice or a glass or something and
that's simply because the second key is too close.
| | 01:31 | So we need to move it further this way.
| | 01:32 | The other problem that you would
have is that you would move too far.
| | 01:38 | So for example if I am using the
numeric and Shift key now, let me zoom out.
| | 01:45 | Now he's sliding across the screen like
he is again wearing skates or something.
| | 01:49 | So the issue becomes to just
basically find the magic position.
| | 01:53 | There'll be one perfect
position at which the feet are planted.
| | 02:01 | So what I like to do, you're making
the changes to this keyframes, so let's
| | 02:04 | keep this keyframe in view and let's
zoom in closer and then we just use our
| | 02:08 | backwards and forwards keys on the
timeline and you can see we are still going
| | 02:11 | forward a little bit, so that means that
this key is a little bit too far forward.
| | 02:14 | So I am just going to bring that back.
| | 02:18 | It's getting much closer.
| | 02:19 | It's very subtle and it comes down to
how picky you are, what your demands are.
| | 02:23 | Now that's looking pretty solid, okay.
| | 02:30 | Now try to frame him a little better,
so we can seem reasonably close for the
| | 02:38 | whole duration and we watch the feet,
make sure the feet aren't sliding.
| | 02:43 | At this point you'll be able to detect,
if there are any errors in the animation,
| | 02:47 | you will see them here and we
covered this in a previous section.
| | 02:51 | If there are mistakes, it means
that you're spacing on the feet are
| | 02:55 | possibly inaccurate.
| | 02:57 | So if you find that your feet are
working for a few frames and then there's a
| | 03:02 | sudden glitch and one of the
feet slides backwards or forwards...
| | 03:06 | I'll cover this one more
time because it is important.
| | 03:11 | Take your foot, whatever foot is giving
you the problem, and we make a temporary
| | 03:16 | layer above the foot and select the
Line tool and we draw a vertical line over
| | 03:22 | the heel position and we do this over each
frame, the in-betweens as well as the keys.
| | 03:27 | I am going to go in a little tighter.
| | 03:37 | It doesn't have to be a million percent
accurate, but this will be close enough
| | 03:40 | to give you an idea and this way you
can tell that the spacing of your feet is
| | 03:44 | completely accurate and we did
this in the earlier course already.
| | 03:48 | So this should be still the same.
| | 03:49 | I don't think we changed anything,
but at this point here the heel is
| | 03:52 | peeling off the ground.
| | 03:53 | So if you are worried, you could
follow the front of the foot rather than the heel
| | 03:57 | and that's maintaining a
similar distance between these strokes.
| | 04:02 | So if you feel that there is a problem
or one of your heel points is off, then
| | 04:06 | you know what the correct position of
the heel and the other tool that I've used
| | 04:10 | that's really great for this part of the
process is to use the Align tool.
| | 04:15 | Click off Align to stage and you can make
these points mathematically precise by using
| | 04:19 | the Align Distribute horizontal
center tool and you can work to a very high
| | 04:24 | degree of accuracy in this.
| | 04:25 | So that's the process you use if
you've gotten to this stage and your feet are
| | 04:29 | doing something unpleasant.
| | 04:32 | So that would be the diagnosis.
| | 04:33 | Let me zoom out again, back to the stage.
| | 04:41 | There is one thing I am seeing
here and that's on the lift off.
| | 04:46 | If we watch the-- see that rear foot here?
| | 04:48 | There is a slide there, see that?
| | 04:51 | The reason being is that our
inner symbol has two contact poses.
| | 04:57 | Our start position and our
stop position are the same.
| | 05:00 | So what's happening is this is playing twice.
| | 05:03 | So we're seeing the same frame
happen twice and it shouldn't be doing that.
| | 05:08 | There is one way of fixing this, which
is to make another keyframe here and just
| | 05:13 | delete our contact pose.
| | 05:17 | Now we have a perfect cycle.
| | 05:18 | Each frame only appears once.
| | 05:20 | We don't have any duplicate contact.
| | 05:22 | So let's see if that works.
| | 05:25 | Sliding has not been removed.
| | 05:26 | Of course, now that there's one last
frame. It may or may not have affected the
| | 05:31 | precise positioning of our feet.
| | 05:33 | So let's have a look at that.
| | 05:42 | And also we have a little glitch happening now
| | 05:45 | because I think we are on the wrong
frame number; we removed a frame.
| | 05:50 | So let's click on this fellow.
| | 05:52 | He is in now frame 23. Oops!
| | 05:57 | Let me clear that and this one is
calling on frame 21, so that should be 24.
| | 06:04 | So again if you make these little
alterations and tweaks and you start seeing
| | 06:07 | strange things happening, the other
thing you could do is simply delete this
| | 06:11 | keyframe and make a new one, just
repeat the process, but I like to do the
| | 06:14 | mathematical solution rather than that.
| | 06:17 | It gives me more control. Now we're fine.
| | 06:20 | The feet are locked.
| | 06:21 | There is no sliding and there is another
possible solution, which I think we should discuss.
| | 06:27 | The only thing I dislike about this is
that it destroys your second contact position.
| | 06:32 | You can always create it by pulling it
back over here and then you've restored
| | 06:40 | your end pose, because this
should be the same as this.
| | 06:43 | That's that. So as long as you know to create
this keyframe before your second contact and as
| | 06:56 | long as you know how to restore that
deleted contact, should you need to change
| | 06:58 | any of the internal animation,
you should be in a great position.
| | 07:03 | So one last look before we wind up the chapter.
| | 07:06 | Our happy fellow has had lot of coffee
and I think he's perfectly jointed and
| | 07:13 | happy to move onto the next chapter.
| | 07:15 | So hope to see you there.
| | Collapse this transcript |
|
|
7. Animating DialogueUnderstanding dialogue| 00:00 | In this chapter, I'm going to show you
how to create dialogue animation in Flash.
| | 00:05 | There are different techniques for
animating dialogue, from complex to simple.
| | 00:09 | So, in this chapter I'll show you the
method in Flash that allows you to animate
| | 00:13 | fully tweened dialogue.
| | 00:15 | This system has actually got more in
common with the style of dialogue that you'll
| | 00:19 | see in a 3D animated film
than in an average TV show.
| | 00:22 | Let me show you very quickly. We use
blend shape tweening, through motion
| | 00:28 | tweening and shape tweening.
| | 00:29 | We've already covered this in Chapter 3.
| | 00:32 | But now I'm going to show you how to
apply these shapes as well as give a quick
| | 00:38 | reprise of that lesson.
| | 00:41 | I'll show you how we can take this system,
modify it, and adapt it to a line of dialogue.
| | 00:47 | So let's do that.
| | Collapse this transcript |
| Using the A-F system of six set mouth shapes| 00:00 | First, I'll like to give a quick
overview of the different styles of dialogue.
| | 00:04 | This might give you some ideas for
options that you have, depending on the
| | 00:07 | style of your project.
| | 00:08 | So, at the most basic end of the
system there is the simple open and closed
| | 00:12 | dialogue that you'll see in a
ventriloquist's dummy or a puppet.
| | 00:16 | So I've actually created a
simple little file to show this called
| | 00:20 | sample_puppet_mouth in
Exercise Files Chapter 7.
| | 00:23 | This is not the most spectacular design
you'll ever see but you'll get the idea.
| | 00:28 | This is what most puppeteers do. They
are limited to their hand; they've got a
| | 00:32 | hand in here that opens and then closes.
| | 00:33 | For years, people have watched little
ventriloquist acts and puppet shows
| | 00:38 | that cannot do by their nature anything more
than this and they are perfectly happy with that.
| | 00:44 | The trick is to keep your mouth closed
on the consonant sounds or most of them
| | 00:48 | and then open on the vowel sounds.
| | 00:51 | Meow, that would have to do for that.
| | 00:54 | And that's all down to
the skill of the puppeteer.
| | 00:56 | So it's very important to see the most
simple possible dialogue that you can get
| | 01:01 | away with and I think that
would probably be pretty close.
| | 01:04 | So, let's take a look at something a
little more advanced than that and I've
| | 01:08 | created a little image, which
is also in your reference folder.
| | 01:12 | In the 1960s, they wanted to have
something little more powerful than open and
| | 01:16 | closed for their dialogue
for their TV shows of the time.
| | 01:20 | So they invented a system that used
for the most part six basic mouth shapes.
| | 01:24 | They were called A through F, A, B, C,
D, E, and F, and these letters, I do stress,
| | 01:29 | correspond to the phonetic sounds.
| | 01:31 | So, for example the A mouth would
really be used for B sounds, P sounds or M
| | 01:37 | sounds and the closed-mouth mouth
shape would be used with the A mouth.
| | 01:40 | Though it moves through a
series of in-betweens to the D mouth.
| | 01:43 | That's the wide open one and you can
makes the D mouth even wider than this if
| | 01:46 | you wanted to, as long as the B's
and C's were correspondingly scaled.
| | 01:51 | Then we go into the F mouth, which
is the OO shape, and the E mouth
| | 01:56 | could be use sometimes for L
shapes and other little vowel sounds.
| | 02:00 | So, that is the system that was used
and these mouths would be on a separate
| | 02:04 | layer and then they would interchange
from the A mouth to the B mouth to the E
| | 02:09 | mouth, back to the D. So, what we can
do very easily in Flash is we can create
| | 02:15 | six static mouth shapes just
like this and I've done that.
| | 02:19 | It's a very usable system.
| | 02:21 | The only problem with that is it is
kind of limited. If you want something
| | 02:24 | that's between two of
these you really cannot do it.
| | 02:27 | So, what I'm going to do is give you a
quick overview of our equivalent in Flash.
| | 02:32 | Again, in Chapter 3 I've
showed you how to create this form.
| | 02:36 | So, I'm going to open our dialog_01
file in your Chapter 7 Exercise Files
| | 02:41 | folder and let's click into the
symbol and go all the way into the mouth.
| | 02:48 | So, what I've done is I've taken these
six mouth shapes that I've already shown you,
| | 02:51 | A, B, C, D, E and F. But I've gone further.
| | 02:56 | I've separated them on to layers and
masked off others to create a mouth shape
| | 03:02 | and each of these keyframes
can blend into one another.
| | 03:06 | So, this is more like blend shaping in
Maya or 3D Studio Max or a 3-D program
| | 03:12 | than it is working in the old 1960s TV format.
| | 03:16 | The real beauty of this system is that
we can play these frames in any sequence.
| | 03:21 | So I'm just going to start
rearranging them at random.
| | 03:24 | I'm not going to worry about the order.
I'm just pulling them around to give you
| | 03:31 | an idea about how stable the system is.
| | 03:33 | So, without using shape hints we've
created a series of six shapes that can
| | 03:39 | blend into one another.
| | 03:40 | We can make secondary keyframes from
these and these can also be moved around
| | 03:45 | and blended into one another.
| | 03:47 | So, you of course have access to
this rig in your Exercise Files folder.
| | 03:53 | If you follow through Chapter 3, you will
already have hopefully done this and made your own.
| | 03:58 | I would say the upper end of the level
of complexity that I would like to do for
| | 04:03 | one of these mouth shapes.
| | 04:04 | So if you can do this, I think you're
pretty much bulletproof for creating pretty
| | 04:08 | nice naturalistic dialogue animation in Flash.
| | 04:12 | So we've combined the ease-of-use of
TV animation with the versatility of 3D.
| | 04:17 | With that, let's go on and I'll show
you how we begin to create a dialogue scene.
| | Collapse this transcript |
| Animating dialogue using the mouth rig| 00:00 | So let's start to animate some dialogue.
| | 00:02 | So let's go into our Exercise Files.
| | 00:06 | Let's open up the file called dialog_01.
| | 00:12 | This is our same old rig.
| | 00:13 | This is the rig that we
worked on in the previous chapters.
| | 00:16 | I'll make sure that everything inside is
nice and clean and properly placed in their folders.
| | 00:21 | We're going to add a line of dialogueue.
| | 00:23 | Let's just get into that and start it.
| | 00:26 | So it's a good practice to get into
the habit of duplicating your symbols.
| | 00:31 | So in this case, let's just go
directly into the head symbol.
| | 00:34 | We're going to use the six shapes
that we've created here for our dialogue.
| | 00:39 | I don't want to work
inside our mt or our mouth comp.
| | 00:43 | Let's do that on a new one.
| | 00:44 | So let's just right-click
on this, and duplicate it.
| | 00:47 | We're going to call it mt dialogue.
| | 00:52 | So now when we toggle into that, you'll
see it up here. Always good to check as well.
| | 00:57 | So we need to access our line of dialogue.
| | 01:00 | I've recorded a line earlier.
| | 01:00 | It's just short and simple.
| | 01:02 | So let's umport that, Import to Library.
| | 01:06 | I've got two lines, dialogue_1 and 2.
| | 01:08 | Let's just open dialogue_1. Here it is.
| | 01:12 | Let's have a listen.
| | 01:13 | (Audio recording: What's happening now?)
| | 01:15 | So it's only a few words.
| | 01:16 | I've designed this line, so that it
uses all six of these shapes so we
| | 01:20 | don't leave anyone out.
| | 01:21 | The other thing I like to do is to
make a folder for our sound files, even
| | 01:25 | though we only have one sound file here.
| | 01:28 | Let's have a good practice from the beginning.
| | 01:29 | So we'll make a sound folder and
just drop our audio into there. Nice.
| | 01:35 | So next thing to do is make a layer for
the sound and drop that in. Let's label it.
| | 01:42 | Not picky.
| | 01:45 | So I like to color it too with white.
All my layers that aren't actual active art
| | 01:50 | layers, I like to just give
them a white outline color.
| | 01:52 | It's easy to pick them out.
| | 01:53 | The next thing to do make sure
we're on 30 frames per second.
| | 01:58 | If you prefer to work on 24, that's fine.
| | 01:59 | As long as you have a consistent and a good
frame rate that you work from all the time.
| | 02:03 | Don't mix and match, just pick one or the other.
| | 02:05 | So let's stretch out the Timeline, so
we can see the entire line of dialogue.
| | 02:08 | Don't need to go too far past that.
| | 02:12 | The other thing you need to do is when you
click on the first frame of the sound file,
| | 02:16 | go into your Properties panel
| | 02:18 | and make sure your
Sync setting is set to Stream.
| | 02:21 | If you set it to Event, it'll be
harder to synchronize with your sound file.
| | 02:26 | So, all is set to Stream for your dialogue.
| | 02:29 | Let's give it a play to make sure.
| | 02:30 | (Audio recording: What's happening now?)
| | 02:31 | So you get an idea for the
rough placement of everything.
| | 02:34 | Our next step is to position the correct
mouth shapes to correspond with the dialogue.
| | 02:39 | There is any number of people who
have their favorite ways of doing this.
| | 02:44 | I've done quite a bit.
| | 02:45 | So I'll show you mine.
| | 02:47 | So the first thing I do is
clean up the Timeline a little bit.
| | 02:50 | So let's grab all of the
dialogue and just pull it.
| | 02:54 | If you had a very long line of dialogue
that was running well off the screen,
| | 02:58 | if it was several minutes long,
I just work in chunks like this.
| | 03:01 | Sometimes I like to make the panel
a bit longer of course, by shifting
| | 03:05 | the Library pane over.
| | 03:06 | So I have a longer Timeline.
| | 03:08 | That's ideal for this.
| | 03:11 | So you get rid of these and just have
your entire screen filled with Timeline,
| | 03:15 | because you're going to be moving
quite fast through all this business here.
| | 03:17 | So let's pull this back in.
| | 03:21 | So this is where we use our
best friend, the Alt or Option key.
| | 03:25 | We hold down the entire
vertical stack of keys and drag.
| | 03:28 | We know our first month is probably
going to be either a closed mouth or just
| | 03:32 | very slightly the open mouth.
| | 03:34 | So let's see which. I think
starting with a slightly open mouth might be a
| | 03:37 | little more appealing. Let's do that.
| | 03:39 | So then let's have a little listen. Switch
off the animation of the mouth for a minute.
| | 03:44 | Let's put a new layer down here.
| | 03:45 | What I like to do is listen through
and find the most important mouth in the
| | 03:53 | mouth shape or phonetic
sound in the line of dialogue.
| | 03:56 | That's the one thing you can't cheat.
| | 03:58 | That's the closed mouth.
| | 04:00 | (Audio recording: What's happening now?)
| | 04:01 | So that's the P sound in "happening."
| | 04:05 | The mouth has to
be closed on that.
| | 04:06 | (Audio recording: What's happening now?)
| | 04:07 | So that's somewhere about here.
| | 04:09 | (Audio recording: What's happening now?)
| | 04:10 | Right there. So put down F7. Make a blank key.
| | 04:15 | (Audio recording: What's happening now?)
| | 04:17 | You can see if you're hitting it
just by looking at the blank key.
| | 04:19 | (Audio recording: What's happening now?)
| | 04:21 | (Audio recording: What's happening now?)
| | 04:22 | Excellent! So that's our closed mouth.
| | 04:26 | So let's select this vertical column
of keyframes. Alt/Option and drag a line
| | 04:32 | that with our blank.
| | 04:34 | Don't even bother looking at it.
| | 04:36 | We are a long way away from
even testing the animation now.
| | 04:40 | I find that the second most important and
striking mouth shapes are the ooh sounds.
| | 04:45 | We have a couple of them.
| | 04:47 | (Audio recording: What's happening now?)
| | 04:48 | We have one on "what's,"
the W sound.
| | 04:50 | (Audio recording: What's
happening now? What's happening now?)
| | 04:53 | So there is one here, and
roughly one here.
| | 04:56 | (Audio recording: What's?)
| | 04:56 | So I'm hearing that
"wha" around this point.
| | 05:00 | (Audio recording: What's happening now?)
< |
|
|
