In this lecture, we will be doing hands-on practice with animation production
We will practice basic animation together
and we will have time to learn and apply the 12 principles of animation
that I mentioned earlier
We will be using a program called Animate
I will give you a brief explanation of the program
And for the practical exercise, we will practice animating a bouncing ball together
Bouncing ball
Let's choose FHD
Now, this is the screen that will appear
On this screen, you'll see a white canvas
Here you can determine the screen size
And if you right-click here on the right
you'll see "Fit in window"
which adjusts the screen size to fit the window perfectly
You can decide on various screen sizes right here
And if you look at the top part here
Here it says "Timeline" right here
In the timeline, there are layers like this
Here
the frames are listed in a sequence like this
Above that
it shows 1 second, 2 seconds, 3 seconds, like this
Now, as you can see
it says 30 frames per second here
If you look up here, you'll see FPS. Remember that?
Frames per second
so it's 30 frames per second
Right now, it's set to 30 frames per second
If you want to change this
you'll find
"Modify" at the top here
Select Document under Modify
If you click on "Document"
you can now adjust the settings for the current project here
Here, you can see this is about the units
At the very bottom, you can see "Frame rate"
So, it's currently set to 30 frames per second
Let's change it
to 12
Alright
now the overall setting has been changed to 12 frames per second
And down below, you'll see "Tool"
This is where you'll find drawing tools
and below that, various other tools needed for animation
There are also selection tools available here
Then there are drawing tools
erasers, various brushes
drawing aids
pens, and tools for adding text
And this is the coloring tool
And this tool is for moving the canvas screen
These are color picker tools
The ones below are for strokes
And the ones above are
for filling in lines
or areas with color
Then, it would
look like this
And below on the right
it shows the properties of these tools here
Alright, let's go ahead and try animating the bouncing ball
First
when we typically work
we often use the pencil tool or the brush tool
Let's start by
using the brush tool first
Either one is fine
But let's try using the brush tool first
The brush size is currently set to 6 here
The smoothing is set to 100 here
Smoothing helps
to refine shapes
when drawing rounded lines
This helps to smooth out slight tremors in the lines
Having smoothing at this level should help to keep the lines more stable
Let's try setting the size to about 5
Alright, so first
to animate the bouncing ball
we need a ground surface to make it easier to animate
So, let's double-click on Layer 1 here
and rename it to "floor" for the ground
So, while holding down Shift
I've quickly sketched out
the ground like this
Alright, here on the side
you can see it's extending beyond the edge of the screen
this line represents the boundary
even though it extends beyond the edge of the screen like this
This phenomenon is due to
the "Click to Content Outside Stage" feature here
If you click it
it hides the boundary lines outside the stage area
This feature toggles
the visibility of the boundary lines outside the stage area
I'll hide it for now
to make it less distracting
And to center the screen again
just press the spacebar
If you right-click and select "Fit in window"
it will fit the screen perfectly
Alright, since we won't be moving the floor anymore
let's lock this layer. Now, let's create another layer
To create a new layer, you can see the "New Layer" icon at the top left here, the plus sign
Click on it and name this layer "ball"
Okay, typically for a basic flow
we'll use about 2 seconds, roughly 48 frames
Press F5 here to insert frames
so when you press F5
what happens is that in Animate
each frame
where the drawing is present
is marked with a solid black dot
If you click and drag to the right here
each click creates a keyframe
It becomes a keyframe
and when you click on it, a black dot like this appears
These black dots represent individual frames
where drawings or changes are recorded separately
So each frame is independent and represents a separate instance of the drawing or change
When you use
"Insert Frame" (F5)
it means adding another frame
with the same drawing
Because inserting a frame (F5) adds
another instance of the same drawing
the black dot representing the drawing is consolidated
into one box to avoid clutter
So, for example
if you click here and press F5
it means you're adding frames
where the same drawing repeats: one, two, three, four, five frames all showing the same image
Let's open up
the timeline generously for the flow
allowing plenty of space for both the ground and the ball
Let's make sure the ground is visible
Next, let's go to the ball position and draw the first frame
Since we need to draw a picture here, of course, we could draw it directly right now
but we need an empty frame, so I will press F6
Now, from this point, the ball will actually appear
Now, the ball will appear
For someone like me
experienced people would just draw it right away, like this
If the motion is still unfamiliar to you
and you're not well-acquainted with it in your mind
nor have you analyzed it thoroughly, and for beginners, the motion won't be as smooth as you'd like it to be
So, it will be very helpful to develop the habit of first creating a guide animation
and then drawing over it
So, I will create a new layer in between here
and temporarily lock this ball layer
so it doesn't go onto the new layer
I will create a layer here
and name it "Guide"
First
let's delete the frames we don't need
For this empty frame
since this is purely a guide
let's use something different for the guide
I'll use a black pencil like this to demonstrate
So first
the drawing will show
the ball like this
The ball has appeared
and then in the next frame, the ball is falling at this interval
The size of the ball should be drawn
relatively consistent
And next, here and here, now in the next frame
when it gets here
Then, in the next frame
it will come about this far with a similar interval
If
the ball is
falling from top
to bottom
will it gradually speed up
or slow down?
Or will its speed remain the same?
At first
when the ball starts falling from here
it will gradually pick up speed like this for a while
Then, after a certain point, it will continue falling at a constant speed like this
Right?
Therefore
when you throw the ball here
you need to decide whether the ball will gradually accelerate
or if it's already fast and maintains a constant speed from this point
That decision will guide how you animate the drawing
So, looking at it now
if you throw the ball from here
it seems like the ball will gradually accelerate from this point onward
I'll try widening the spacing
between the positions a bit more
Like this
And then, when it hits here
it will make a "thud" sound
and bounce like this
Next, when it bounces off here
it will have a rebound force
pushing it outwards
So, this rebound force
originally from here to here
in terms of spacing
the spacing from here to here
gradually widened
and when it bounced off, it will bounce quite a lot
Let's think about it like this
and try bouncing with this spacing
Since this is just a guide
it might be uncomfortable
if the guide lines are too dark
If you right-click here
click on "Profiles"
and go to "Properties"
you'll find an option for "Opacity"
Opacity controls how transparent
or opaque something appears
So, you set it to 35%
You adjusted
the opacity to 35% in the properties
allowing you to
overlay drawings
on top of it like this
Next, I'll lock the guide again and start drawing the ball
I'll unlock it later to continue drawing
First
in the very first frame
there will be an empty screen
Since the ball hasn't entered the screen yet
let's proceed to draw the next frame
It's good to know shortcut keys
for navigating between frames like this one
There might be different keyboard layouts
with two keyboards
like this
On my keyboard, right above the spacebar
there's the Korean/English key
Right above here
there's a keyboard with this seagull-shaped key (Greater than, less than symbols)
So, leave the first frame empty, and from the next frame onwards, the ball
here we're creating keyframes
so now we need to make another blank keyframe here
If you press F7 here
you'll see there's an option for a blank keyframe
Alright, this blank keyframe is
the same as this one here
"Insert blank keyframe" means
it's a separate frame from the previous one
and when you want to create a new empty frame
you just need to select
"Insert blank keyframe"
So now you've inserted another blank frame like this
Okay, like this, you've drawn one
and then you've created another blank frame where you can draw a new picture again
As mentioned earlier, you need to press the shortcut key F7 to create this
and there's a very useful feature
that comes in handy when doing animations like this
That's when, like now
the spacing gradually decreases
Then, since the images between intervals aren't visible
you can't check the pictures before and after
In such cases
there's a feature that allows you to
check the positions before and after
That's called
the Onion Skin tool, represented by two circles at the top here
It makes the previous and next frames transparent
so you can see them
like this
It's a feature that makes the previous and next frames transparent like this
allowing you to confirm the current frame's position
So, by toggling this on and off appropriately
you can check
and adjust the intervals of the animation smoothly
Next, because the speed gradually decreases
the frames will overlap more
Alright, I'll try turning off the guide for now
I've turned it off
and I'll press play button
You can see play button here
Got it?
This way of animating gives
a bouncing ball feeling
This would be
a relatively straightforward bouncing ball
wouldn't it?
If we analyze
how the 12 principles of animation
apply
in this movement
during the process
where the ball is falling and then bounces
gaining speed and rising
Let me illustrate
how this process of the ball
rising up to here looks
So
in this process of rising up to here
as the ball bounces and ascends
it gradually
as it ascends to this point
the speed
and spacing
gradually decrease like this
Then
the spacing
widens again
The variation in spacing before and after
where it changes
isn't governed by a specific principle
but rather
mimics natural phenomena
However
applying these movements within the 12 principles
helps establish more accurate and natural motion
It's important to keep this in mind
for creating smoother animations
In the motion of a freely bouncing ball, as it rebounds upwards
at its highest point
gravity's influence diminishes its speed
until it eventually stops
So
when we depict this natural phenomenon through animation
you can see that the spacing gradually decreases like this
We call this principle
as
"ease in"
Yes, ease in
And this is gradually accelerating again
Let's call this kind of acceleration
"ease out"
So, among our 12 principles, we have 'ease in / out'
We can say that
this represents acceleration and deceleration motion
So here
the interval between the previous position
and the next position of this movement
is called
"Spacing" in technical terms
It's the space
The distance from here to here, the distance moved in one frame, is what we call Spacing
If this Spacing
gets wider
it means the speed is faster
If the spacing is narrow, like here
it means the speed is getting slower
Since it only moved this much in one frame
it means the speed is slow, and here, the speed is a bit faster
Here, since it moved this much
the spacing has widened
Widening means that
the speed has increased accordingly
So here, you can see that the spacing is very wide
Because the spacing is quite wide here, we can consider the speed to be high
And here, compared to here, the spacing has become even wider
So, we can see that the speed has increased further, indicating acceleration
In other words
we could also say that it's easing out
transitioning outward like this
Remember
the term "ease in/out"
"Slow in"
or "slow out"
are also ways to describe this
So far
we've seen a lot of animations
that intentionally exaggerate these expressions
when watching animations
So
to make animations more lively
dynamic
and visually impactful
to convey a sense of strength and elasticity to our eye
I've mentioned before that
by exaggerating movements a bit, animations can appear more lively and dynamic
If we think about it in that sense
to make bouncing objects
like a bouncing rod
or ball move more dynamically
and lively
Here, like I mentioned earlier
the ball accelerates from here to here
As the movement speeds up
visually, we might perceive the round ball elongating
almost like an optical illusion
where it appears egg-shaped
Utilizing such effects can be quite effective
Using that approach
you stretched the circular shape of the ball
a bit into
an egg shape
Alright, if we follow this guide for a moment
the endpoints of this elongated ball
should be symmetrical
and the direction needs to be correct as well
So, either it ends up like this
or the current flow direction of the ball is like this
If it goes this way, or perhaps like this
then the ball's movement isn't quite accurate
So, if you briefly turn on the guide and draw it accurately
let's try to refine the drawing more precisely
By
accurately capturing
the trajectory like this
and adding acceleration
the ball elongates slightly
Let's think about it that way
And then, bang!
At the moment it hits here
bang!
it receives a strong force
causing it to deform
In reality, the ball wouldn't deform that much
but intentionally
exaggerating the deformation like this
can be effective
If
it drops from this height
and goes bang!
how much would it deform?
This ball wouldn't appear to deform so drastically
as to become
floppy
or severely damaged
But it's about intentionally exaggerating
the expression in that way
Okay, now turn off the guide
and let's see
how the feel of the movement has changed
How does it look?
It gives
a much bouncier feel now
doesn't it?
Alright, here, as I mentioned earlier
there's a slight sense of it compressing, so I'll make some adjustments
Shall we play it again to see how it looks?
The movement feels much better now
doesn't it?
By adding this kind of deformation
the sense of speed has definitely improved
compared to before
Now, using these changes in shape
to exaggerate the movement
enhancing the effect, we call this technique "Squash & Stretch"
The principle
being applied to the bouncing ball right now is
the Squash & Stretch technique
By visualizing acceleration
through squashing and stretching
we've effectively enhanced the sense of speed and physical expression
By applying
the effects of Ease In
and Ease Out
we've managed to convey
the feeling of acceleration through changes in spacing
This captures the sense of speed slowing down
as it reaches a higher altitude
and gaining momentum again as it falls
effectively expressing
the movement in a natural and lively manner
That summarizes
the application of these principles in the outcome
Surprise expression and walking motion
Let's take a look at this case
Alright, this is a movement
where the boy is startled in surprise
When the boy
tilts his head like this
When we stoop
the proportion of our body to our face changes like this
Currently
because of the hair
it looks like this
but in reality, it's about this far
Here, the body is stooped down to here
When we stoop down
like this
we refer to it
as "Squash"
And then
when the body stretches out
it becomes significantly longer
Since he's startled, he stretches out in surprise
In this case
as the upper body stretches out while he extends
both his body and face elongate
When it stretches out like this
we call it "stretching"
Here
this stooping motion
can be a preparatory action
before the surprise expression
Do you understand?
This would be considered Anticipation
So, this Anticipation leads into the main action
which is the main movement or main action
followed by the aftermath or follow-through motion here
This follow-through motion here
also applies another animation principle
That's called Secondary Action
In the returning motion
you can see the hair
follows
and then quickly rises like this
That's what we call Secondary Action. Here, when he's startled
after being startled like this
and then returning
you've depicted the action of blinking like this
at the end
This action isn't necessary, actually
Removing this action doesn't mean
the startled motion won't work
So, by adding the eye blinking
as a secondary
or incidental movement to the startled action, it actually enhances the emotion more effectively
In this case
we can say we added Secondary Action to the eye blinking
So
what you're saying is that squash & stretch movements were incorporated into these surprising actions
anticipation movements were included
and then secondary action movements were added afterwards
It's not the end here
Before performing this surprising action
let's take a look at the movement of our hair
This time, let's focus on the movement of the hair
As you lower your head
the hair
follows a beat later
So
originally neat hair slightly separates
and seems to
float upwards with movement
Then, at the moment it springs up
It's continuing to fall down, right?
It's continuing to go down
And then, how about the body?
Here
it moves up
to here
The face is
also moving upwards
The face is rising
but
the body is starting to rise too
The hair is still coming down
a beat later, right?
And during the sudden jump
take a look at the hair again
It keeps going down, right?
The hair is probably light and doesn't have much strength
so it's being pulled down
as the person's face moves up
It's being pulled up, right?
It was pulled up
and now the face has stopped
The movement of the face has stopped
While it stopped momentarily
the hair continued to rise
right?
It continues to rise like this
Then from here
it continued to rise like this
and now the movement of the face is going down again
It's going down
It's going down like this
It's going down, right?
At that time
the hair continued to rise belatedly
the hair follows the movement of the face
coming down afterwards
Then
when the face suddenly stops
the hair starts to rise slowly again
Because of its lightness
the movement of the hair naturally follows
the movement of the person's face and body
creating a smooth
and natural motion
The movement of the hair
in this surprising action corresponds to
the principle of "Follow Through"
In this surprising action, a wide variety of movements are all applied
Animation principles need to be applied appropriately
even in seemingly simple movements
to achieve smooth and natural motion that looks effortless to the viewer
Walking animations are typically animated
at around 24 frames per second as a standard
The poses
where both legs are furthest apart
and touching the ground
are spaced apart by 24 frames
as a standard in walking animations
That's how we typically perceive
the timing of
a normal person's walking stride
So, we establish this pose
where the legs are spread the widest as the first key pose
Below is the floor, the ground
and above that, you've drawn the person in this key walking pose
So this is now the first key pose
Next, let's duplicate this pose
Let's continue duplicating this pose like this, considering the stride length
This should be about right
Later on, you can always adjust it as needed
Let's start by roughly setting it up like this for now
The positions can be adjusted later
Next, let's draw the next key pose here again
Here, you can now turn on onion skinning
Right now, this pose shows the right foot extended forward
The next key pose would be where the left foot is moved forward
as the new pose
So
let's take a look at this key pose
one more time
You're setting the position firmly with the toes like this
and then
you'll adjust the arms next
Since the shoulders are slightly forward
rather than drawing the arms exactly in the middle
Around here, the shoulders naturally moved forward a bit, so
the position of the hand will be almost the same
but you need to consider
the length
and width of the joints as you draw
So now
since the left foot will move forward
the right leg
will move backward this time
So
the pelvis will tilt slightly backward, causing the body to twist a bit
So
here
we have the 13th key pose set up like this
Here
this would actually be the 25th key pose
not the first
Let's go back for a moment
So, this would be the 25th pose, this one would be the 1st pose
and this one would then be the 13th key pose
Alright, so now we've already completed
about half of drawing these key poses
So here we've now changed the positions of the hands and feet
Since this is the left arm here
let's add a bit of shading
for shadow effects and rendering
Let's depict the inner side of the left arm and left hand
Next, let's also consider this
as the left hand here
Then, there's another key pose
between these two
Let's now move
this one to the center
Moving it to the center
but the difference here is that
one leg
supports the weight
while the height
increases
This time
and this time
There's a difference in height
between this time and this time
Remember that
there's a significant height difference
like this
as it forms
Keep this in mind
So naturally, the legs will cross like this
because of the movement
And the arms
won't stretch out like this here
Alright, let's try turning on onion skinning here
It's quite complicated
In this segment
where the arms are passing like this
the arms shouldn't bend like this
Of course, the arms naturally bend when they become more natural
but they shouldn't bend excessively at such angles like this
Because the arms are in the process
of passing like this
they naturally straighten out slightly
You copy this pose
this pose
exactly as it is
then
leave it empty
and paste it
for the next step
And then
you need to position it here
at the point
where the foot touches
like this
So
you turn on this skin
and place the position at the foot location
Now
the key pose is completed like this
This is based on 24 frames
but I'll play it at 12 frames per second
Did you see?
Yes, it looks like it's walking
Now
the key pose is completed here
Also, when considering not only the arms
but also the face and the head
this part might need to rise a bit more
Alright, if the arms physically rise a bit more with the body
I'll lift this part up The knees seem a bit shorter
so I'll raise this part like this
If I raise it, but I didn't raise the head, why is that happening?
If you slightly
tuck
in this head part
instead
If you tuck it in slightly like this
due to the upper body rising, the head naturally tilts down a bit
This is related to the overlapping part
You intentionally give
some movement to the head
to make it look like
the joint of the head
moves well
That is the world of overlapping
Let's try drawing another picture in between
Here, we're now in the process of going down
If we went up here
now we're going down. Like this
Now, between here and here, we're going down like this
So, in this upward motion
as one step is supported by this leg, you stand up straight like this
your height increases
and then it decreases again
as your leg extends forward
Let's insert another illustration
depicting the process
where the left leg now crosses over to the right leg
Then, one thing to note here is that
while we come down to here
the body comes down first
and the head moves slightly later
If you grasp it with a slight feeling like this, you can express the sense of overlapping
Like this
so now the upper body movement and arms have slightly settled down overall
So, we'll lift this up a bit
If you look, check the overlapping of the wrists
and whether the contact of both feet is well executed
Also, pay attention to whether the bounce is well represented
Now, you should focus on
detailing certain parts more
and confirm what parts are working well
Alright, so here
think of this as your guide
Label this as cleanup
From here onwards, you can proceed with the actual animation
If you go into properties, you can adjust the opacity here
Reduce the opacity to around 40%
or 35%
Now that it's more transparent
let's try to express it
a bit more cleanly
Afterward, we can turn off this guide later, right?
For the cleanup
areas that need fixing can be colored later like this
Afterward
you can designate colors
and fill them
in accordingly
to the figure
So, it's not filling in properly because there's a gap in this flow here
You need to fill that in
and once it's filled
the coloring should load correctly again
Like this, now color it
then set the guide first
then set the guide
like this first
During this cleanup process
refine the slightly inaccurate poses
shapes, or proportions in the guide with more detail
After that, you can complete it by coloring like this
We've practiced various motion expressions together up to now. How was it for you?
Have you truly fallen for the charm of animation?
If you apply the 12 principles of animation like we did just now
and strive to create smooth movements, you will definitely be able to produce great animations
I hope you experience the excitement of seeing your drawings come to life and move
You've worked hard up to now. Thank you
1. Bouncing ball Bouncing ball 2D animation Recommend to create a guide animation before proceeding with the actual animation
A bouncing ball that slows down and then speeds up A ball that gradually speeds up while widening gaps in between the frames After bouncing off the ground, it widens the gaps due to the rebound force
As the motion speeds up, the spherical ball may appear flattened due to an optical illusion, so intentionally elongate it into an egg shape during the acceleration phase Exaggerate its deformation as it hits the ground
The 12 principles of animation observable in a bouncing ball Ease in/ Ease out Squash & Stretch
2. Surprised expression and walking movement Surprised expression 2D animation Preparing for a surprised movement with a crouching action
The proportion of the face and body shortens when crouching The proportion of the face and body lengthens when surprised Expressing heightened emotions through secondary movements
The 12 principles of animation observable in a surprised expression Squash & Stretch Anticipation
Secondary Action Follow Through
2D animation of walking movement First key pose: The legs are spread apart as wide as possible, touching the ground pose Second key pose: The left foot comes forward and touches the ground pose
Passing pose: Supporting the weight on one leg, creating height difference, and naturally extending the arms during the passing process
Movement check points: Overlapping of the wrists, the contact status of both feet, and the expression of bounce