Realistic Basics Character Animation: Puppet Pin Tool and Expressions
Hello everyone, I am your instructor, Choi Ji-won
In this session, we will cover character animation,
the Puppet Pin Tool,
and Expressions
Today's lesson will first explore
the concept and application of the Puppet Pin Tool in After Effects
by using it to create
detailed character movements
Secondly, we will practice applying Expressions to movements
to create repetitive motions
Understanding the Puppet Pin Tool and Expressions
First, let's take a look at the Puppet Pin Tool
For the Puppet Pin Tool
The word "Puppet" means marionette or string puppet
It represents how a marionette
is segmented and controlled with pins
to create movement
Using this tool,
you can create detailed and precise movements
You add pins to each layer
to create precise and detailed movements
making it a fundamental step in rigging animation
Some of you may have experience with 3D software like
Blender, Unity, or Unreal,
where you create rigging animations
for naturally moving 3D characters
After Effects supports both 2D and 3D
making it a great tool
for creating rigged 2D graphics
before transitioning to full 3D
The Puppet Pin Tool is particularly useful
for achieving this
In summary, the Puppet Pin Tool helps create
smooth, natural movements
in character animation
When using
the Puppet Pin Tool in After Effects,
if you click and hold the Puppet Pin icon
in the toolbar for 1-2 seconds
five different functions will appear
You can use these five functions
to create detailed movements
Let's first look at the Puppet Position Pin Tool,
which is assigned to Cmd + P
For Windows users, it would be Ctrl + P
You can use this shortcut key accordingly
This is the basic Puppet Pin function
It allows you to set points with pins
to modify positions
A yellow circle is displayed on the layer
Each one is displayed in a different color
The default tool is marked with a yellow circle
The icon itself looks just like a pin, right?
Next is the puppet starch pin tool
It looks like a pin, with a rounded tip
It fixes the distorted parts of an object with pins
It is displayed as a red circle on the layer
The color is different, right?
It functions to stabilize the distorted parts,
so please keep that in mind
It is marked with a red circle
The third is the puppet bend pin tool
The icon looks like it’s bending, right?
This tool adds a rotation value to the puppet pin
You can create twisting or bending movements for objects
It is displayed as a brown circle on the layer
Please remember the icon well
The fourth one is the puppet advanced pin tool
It allows you to control the puppet pin’s position, scale, and rotation
This is a big trait of it
It is displayed as a green circle on the layer
This advanced pin tool will likely be used frequently
Finally, we have the puppet overlap pin tool
It is used to adjust the overlapping parts of objects
by setting their front-to-back positioning
And it is displayed as a blue circle on the layer
Since each tool has a distinct color,
It will be easier to recognize and distinguish them
Placing too many puppet pins can make things really complex
So it's crucial to organize them properly
Once we’ve created movements using the puppet pin,
if we continue placing pins to create more movements,
it would require too much manual labor
By applying expressions here
we can generate repetitive movements without extra effort
After using the puppet pin tool,
hold down Alt on the position property
and click on the stopwatch
then enter the value LoopOut pingpong
which allows you to create repetitive movements easily
This is a very useful feature that you’ll use frequently,
so make sure to remember it
During our practice, we will use the puppet pin tool
along with the expression function,
but we will also add some extra effects
So I’d like to introduce one of these effects
First is the wave warp effect
For those using the English version
just type "Wave Warp" in the effects panel
For those using the Korean version, type "파도 비틀기"
in the effects panel, and you will be able to find it
This effect creates a wavy distortion on the image
It is one of the most commonly used distortion effects
So type "wave warp"
into the timeline panel’s source,
then drag and apply the wave warp effect
As soon as you apply it, the effect control panel
will display multiple settings
First, "wave type" determines the shape of the wave
Second, "wave height"
creates vertical wave motion
Next, "wave width"
adjusts the horizontal wave motion
Then, the "direction" setting
determines the wave’s direction
Next, "wave speed"
controls the speed of the wave motion
depending on the speed, the wave’s shape and feel will vary
It could feel playful, elegant, or anything in between
If you adjust the speed carefully,
you can create the desired effect
So be mindful of the speed setting
Next is "pinning"
It allows you to set a direction to prevent wave distortion
This function fixes the direction
Next is "phase"
Phase determines the starting point of the wave
so keep that in mind
Anti-aliasing
This is a technique to reduce jagged edges
It allows you to set the quality
You will primarily adjust direction, height, width, and speed
If you carefully fine-tune these settings
you can create the desired wave distortion
Next, I’ll introduce another effect
It's "turbulent displace," also known as "뒤틀기 변위"
that’s how it’s named in the Korean version
If you type "turbulent" in Korean, it won’t appear
Korean users must type "뒤틀기 변위"
to find and apply the effect
This effect creates texture on the layer
However, you need to carefully adjust the detailed settings
Character Animation Practice
Now that we understand the basic concepts,
Let’s proceed with the character animation practice
First, we will import a single PNG file and apply it
A single PNG file is sufficient,
but when using an AI file, we will need separate layers
for the arms, legs, face, and eyes
so we will discuss how to properly import separated AI files,
starting from the import process,
then using the puppet pin tool to create puppet-like movements,
and finally applying expression-based looping movements
We will practice applying these techniques
If you open the file I provided
you will find the third composition,
titled "Character Motion 1 Practice"
Inside, you’ll see a PNG file of a wizard character
This wizard character is holding a magic wand in one hand
Since it's a single file, it's not separated into parts
So we'll slightly adjust this single file
to add a small motion to the wand-holding pose,
creating a bit of movement
We'll use the puppet pin tool for this
Adjust the size and position accordingly,
make sure the indicator is at zero,
and confirm that the PNG file is selected
Now go to the toolbar— not the pen tool,
where's the puppet pin tool? it's at the very end—select it
If you hold down the puppet pin tool for 1-2 seconds,
the five functions we covered earlier
will be displayed
We will use the first, basic tool
Set "mesh" to "show"
so that you can clearly see the applied effect
Set "expansion" to 3,
and "density" to around 12
This is a standard setting that
makes the mesh clearly visible
Place your cursor over the composition characte
I'll describe the positions from my viewpoint
The right arm is holding the magic wand
So click on the shoulder
As soon as you click, the mesh appears
When the mesh appears, check the timeline,
where you’ll see "mesh 1" created under the puppet effect
Make sure to check this Let's do it again
I placed a pin on the left shoulder from my viewpoint
Then, on the leg—though it's not clearly visible, let’s call it the thigh
place puppet pins on both the right and left thighs
Once you've placed the pins, let's check
Press shortcut key "U" to view them,
and you will see all the puppet pins you've placed
So you can confirm that you've selected four pins so far
The position values are active at zero
This means it's ready to move
Now, with the wizard PNG file still selected,
hold down the puppet pin tool in the toolbar again for 1-2 seconds
select the "puppet advanced pin tool"
Let’s try using this advanced tool
Where should we place it?
Place one on the neck
Where else should we place a center point?
Place another pin in the center of the torso
Then, place one on the knee
To ensure they are properly placed, press "U"
and keep checking them for accuracy
double-check everything
Now, place one more pin on the elbow of the wand-holding arm
Check again to make sure it's placed correctly
How many pins do we have in total?
Make sure you've applied a total of nine puppet pins
Because if you lose track of how many you’ve placed,
later on, it will be difficult to manage them
and may cause confusion when adding expressions
Now, let’s add some movement
Switch from the puppet pin tool
to the selection tool ("V") and adjust the rotation slightly
First, place the indicator at zero
Adjust the default pose slightly
and observe how it responds
Check how it changes in the composition panel
When I placed a pin on the neck, Puppet Pin 5 was activated
Adjusting the value slightly to the negative made the head tilt
Try placing a pin on the knee as well
Check how many pins you have placed
You can adjust the numerical values in the timeline,
but you can also move them directly in the composition panel,
and the changes will be applied instantly
Try moving the shoulder as well
to understand how the pinned areas change with movement
This helps you determine how to apply motion properly
Once you get a sense of it,
move the indicator to 10 frames like I did
Now, let’s make immediate adjustments in the composition panel
The current display shows the default pose
We’ll make the head tilt slightly while moving the wand-holding arm
Let's animate it accordingly
Make sure the indicator is set at 10 frames, not zero
Move each joint slightly
By doing so, create a subtle distortion in the body
I realized that adding pins to the wand and hand
would make the motion appear much more natural,
so I added two more pins
But be careful when placing these pins
If you place them at 10 frames, the starting position will change
That’s why, at 0 frames,
you must set a keyframe (diamond)
Only then will the motion be properly created
Since we're animating only from 0 to 10 frames
having just one keyframe won’t generate motion
You must set two keyframes
for the motion to occur
If you placed a puppet pin but
it doesn’t move,
check if you have two keyframes in the timeline
Ensure that none are missing
How does it look, everyone?
The body tilts slightly as the hand holding the wand shakes, right?
Even with 2D graphic animation characters,
just small body movements like this
combined with background, weather, and other motions
can create an adorable animation
Even without separately divided arms, legs, or faces
you can still create a puppet-like animation
Actively use the puppet pin tool
to create character animations
Now, let's open the "Character Motion 2" practice
This is the fourth composition
Unlike before, this one includes a background
The character is an AI file
This character has a lot of layers
The layers include the mouth, right eye, left eye
right leg, left leg, head, and so on
This was imported as separate AI file footage
If you look at the project panel,
you can see the names of the separated AI files,
and they have been placed in the timeline panel as they are
Right-click in the project panel,
select "Import - File," and you'll see "avocado.ai"
This avocado AI file contains all the separated layers
If you import these separated layers directly
they will all be imported at once
So, do not import it as a composition
Instead, import it as footage first
If you want to import it as a composition, select "Create Composition"
This allows you to bring them in all at once
But since we need them separated,
import them as "Footage" and click "Import"
The moment you click Import, it asks how you want to bring in the file
Here, you have the options: Merged Layers and Choose Layer
We will select Choose Layer
So we will choose a specific layer
You can see options like eye R, eye L, mouth, and head
We will select "head" to make it visible
There are also options like "circle" and "background"
Let's choose "Head"
After clicking OK, you will see in the project panel
that only the "head.ai" file has appeared
Double-clicking it will show the footage in the composition panel
Now, close it again
This way, you can import separated layers one by one
and work on them individually
Let's try it one more time
Right-click - Import - File, then select "avocado"
Next, under "Import As,"
choose "Footage" for importing
This time, we will select "Merged Layer"
Now, the "avocado.ai" file appears as a whole
It is displayed as footage
If you want to import everything at once,
just use "Merged Layer"
If you want to import it as a composition,
you can bring it in as a composition
It will be automatically converted, and the icon will no longer be an AI file
Instead, it will have a composition icon
This will appear instantly
So when importing AI files,
you can either separate them, merge them,
or bring them in as a composition
Make sure to use this knowledge frequently
Now, let's check these multiple layers in the project panel
We can also see them in the timeline panel
The order of layers is crucial in such cases
What is the topmost layer?
Most likely, it's the eyes and mouth
If the star,
which is the background,
gets moved to the top layer,
it will cover the character's appearance
What does this tell us?
The topmost layer in the timeline
is also the top layer in the composition
That’s why repeated practice is important
Since repetition is key,
let's place pins on these separated layers again
We will add pins once more
Let's start with the basic pin
What should we do before placing the pins?
You need to decide where to place the pins in the timeline panel
Once you’ve decided where to place them,
you can proceed with pinning
From my perspective, let’s start with the left leg
Place a pin on "leg L"
Let’s place five pins—one, two, three, four, five
After placing the pins, the mesh will appear
What was the shortcut? Press "U" like I did to open it
When you press "U," you can see that five puppet pins have been placed
Likewise, the position is now activated
You can confirm that the position is active
Shall we apply it right away?
Move the indicator to 10 frames and adjust the motion directly in the composition panel
Let’s move the pins to create motion
Try moving it in the direction you want
I aimed to create a slight jumping motion
To check the results, move the indicator
and observe how it changes
Now, let's do the same for "leg R"
Let’s apply the same adjustments to the right leg
Select it and place five puppet pins
Why isn’t it moving?
This is a very important point
If you move the indicator back and forth,
you won’t know exactly when the pin was placed
That’s why you must check carefully before proceeding
So, reset the indicator to 0 frames and place five pins again
And if you press "U," you can see the pins are placed
Next, you just need to move them
Move it to 10 frames so that it jumps along with the left foot
Adjust it this way
Check it using the indicator
Now, you can see the playful foot movement
Just moving the feet alone might be boring, so let's animate the arms too
Since the legs have more bending points, we placed five pins
For the arms, we will place only three pins on the left side
Three pins have been placed
Make sure to place them at 0 frames; don’t get confused
Then, move the indicator to 10 frames
Now, adjust the hand position
Make it look as natural as possible
Adjust it carefully, and if it looks good,
place three pins on the right arm as well
Don’t place them at 10 frames, go back to 0 frames first
Then, apply subtle movement at 10 frames
Make sure it doesn’t look awkward
Tweak it carefully to maintain smooth movement
Since this is a character animation, it doesn’t have to look hyper-realistic
You can approach it in a more exaggerated or humorous way
Now, the motion has been applied like this
So far, we've animated the arms and legs quite a bit
But it still looks a bit plain
Where else can we add movement?
Adding small movements to various elements
makes the animation feel more realistic
Let’s animate the eyeballs a bit
We’ll only adjust the position of the eyes Let’s start with the left eye
Under "Transform," set the current position at 0 frames
Move to 10 frames and rotate the eyeball
The Y-axis doesn’t need much movement
Just move it along the X-axis
A small arrow will appear over the numbers when you move them
Make sure to watch for that
Drag to move the position
Dragging lets you adjust it quickly
You don’t have to manually input numbers
It applies automatically
Once done, move the indicator back to 0 frames
Now, set the default position for the right eye
Move it sideways along the X-axis
Now, the eyeball movement is complete
It looks much cuter with the eyes moving
Now, here’s what we’ll do next
If we only use puppet pins, it might look too stiff
So, we’ll apply one of the effects I introduced earlier
In the right effects panel, search for "Wave Warp"
For those using Korean, search for "파도 비틀기"
Drag and apply it to the mouth
Then, in the upper left effect control panel,
you’ll see adjustment options
You can check the various attributes of the Wave Warp effect
First, move the indicator back to 0 frames
Set the wave height to 3
Adjust the width accordingly, around 65
Set the direction to about 60
Now, you can see it moving in a wavy motion
Now, the lips have animation too
We’re almost done. While it would be great to animate everything,
the head is the only part that remains static
Let’s add slight movement to the head as well
Under "Transform," go to "Position"
Since the arms and legs are moving, set the head’s position at 0 frames too
Move it slightly along the X-axis by dragging
A little rotation would also be nice
Set the rotation keyframe at 0 frames
Rotate it slightly
Don’t rotate too much—just a subtle twist
The eyes look a bit too hollow now
Let’s move the eyes slightly to fix that
Although the hollow eyes give a fun effect
adjusting them a bit
will make the character look more polished
Where are the eyes?
In the "R" section
When modifying, always make sure to click the diamond keyframe
That ensures the existing keyframe is edited
If you don’t, a new keyframe will be created instead
So, to avoid confusion,
just like I did, make sure to select the diamond you want to edit
before making any modifications
Now, the movement looks really cute
Now, we want this movement
to be applied repeatedly
So, we’ll add an expression
First, we will apply it to "leg L"
We will apply it to the left leg
There should be a knee section in "leg L."
If you expand Puppet Pins 1 to 5,
find Puppet Pin 2’s position value
Hold "Alt" and click the position stopwatch
and then type in loopOut(“pingpong”)
Make sure to type it exactly as shown
The "O" in "loopOut" must be capitalized,
and "pingpong" must be enclosed in double quotes
for the motion to loop correctly
Now, the left foot moves repeatedly
With this movement set,
select both diamond keyframes in position
and apply "Easy Ease"
So, select the two diamond keyframes
and press "F9" to create a smooth transition
Now, let’s do the same for the right leg
We will apply it to Puppet Pin 2 again
Hold "Alt" and click the position stopwatch
You can simply copy and paste it
Type "loopOut" with a capital "O"
and place "pingpong" inside double quotes
Enter "loopOut(“pingpong”)"
Then, apply "Easy Ease" in the same way
Now, both the left and right feet should move the same way
Since we did the legs, let’s also animate the arms
Find the arm section and apply the same process
You will see that three Puppet Pins have been applied
Hold "Alt," click the position stopwatch, and copy-paste the expression
Type "loopOut(“pingpong”)” and apply it to both keyframes
Make sure it transitions smoothly
We will apply it to just one arm first
Apply "Easy Ease"
Copy and paste it onto the other arm as well
Apply "Easy Ease" again by pressing F9
It’s done! Everything is now moving
In this session, we explored the Puppet Pin tool
and used it to create detailed character movements
We also learned about expressions
and used them to generate looping animations
By utilizing the Puppet Pin tool
you can animate various elements
from illustrations or drawings
and turn them into motion graphics
Now, let’s summarize what we’ve learned today
Thank you
Understanding Puppet Pin Tool and Expressions
Puppet Pin Tool: Adds pins to each layer to create detailed and localized movements
A fundamental step in creating rigged animations
Used for character animation to generate smooth motion
Puppet Pin Tool Attributes Puppet Position Pin Tool, Puppet Starch Pin Tool
Puppet Bend Pin Tool, Puppet Advanced Pin Tool, Puppet Overlap Pin Tool
Expressions A function to create repetitive movements easily
Wave Warp (파도 비틀기) Turbulent Displace (뒤틀기 변위)
Character Animation Practice Applying the Puppet Pin Tool to a single PNG file
Placing the Puppet Pin at desired points in the composition
Press "U" to check the created Puppet Pins
Move the indicator and adjust the Puppet Pins by dragging them in the composition panel
Applying the Puppet Pin Tool to separated AI files
Placing Puppet Pins at the desired points on the separated layers
Applying small movements to all elements using the same method
Applying Expressions
After using the Puppet Pin Tool, hold "Alt" - activate "Position," then type loopOut(“pingpong”)
Make sure to use the correct capitalization and symbols Apply "Easy Ease"