00:00:00
in this video I'm gonna show you how to
00:00:02
animate a cartoon just like this one on
00:00:04
your phone 100% for free and yes in case
00:00:07
you're wondering I animated this intro
00:00:09
only using my phone the free an amazing
00:00:12
app flip a clip and my finger the
00:00:14
example I will be showing you how to
00:00:15
animate in this video is a simple
00:00:17
animation of my character weaving and
00:00:19
saying hi there hi there hi there feel
00:00:22
free to follow along step by step to
00:00:24
create your own version of this
00:00:25
animation and now into the tutorial the
00:00:28
first step to creating an animation on
00:00:30
your phone is installing the free
00:00:32
animation I'll flip a clip you can get
00:00:34
flip the clip by going to the app store
00:00:35
searching flip the clip and installing
00:00:37
it after installing flip a clip it's
00:00:40
time to create your first animation
00:00:42
project open up the flow Club app and
00:00:44
make sure to watch the official flip a
00:00:46
clip tutorial to get an idea of what the
00:00:48
tools are now let's create our first
00:00:51
animation select the red plus button to
00:00:54
create a project before you can start
00:00:56
working on your animation you must
00:00:58
customize your project settings give
00:01:00
your project a name and choose a
00:01:01
background you can choose a pre-made
00:01:03
background a solid color background or a
00:01:07
background from your device or camera
00:01:08
you can also pick the canvas size if
00:01:10
you're making an animation for YouTube I
00:01:13
would recommend you use YouTube 720
00:01:16
pixels and finally you can choose your
00:01:18
frames per second I would recommend you
00:01:21
use 12 frames per second because it's
00:01:22
enough to create smooth animations
00:01:24
without having to draw too many frames
00:01:26
once you are satisfied with the settings
00:01:28
click create project to start working on
00:01:31
your animation now that you can actually
00:01:33
start working on your animation I'm
00:01:35
switching from screen recording to
00:01:37
filming my phone so you can see how I
00:01:39
use my fingers to draw on the phone in
00:01:40
anime before we can animate anything
00:01:42
we're gonna need some audio to animate
00:01:45
too to access flipple clips audio
00:01:46
features select the music icon in the
00:01:49
bottom left corner and press the red
00:01:50
plus button to add on you if you're
00:01:53
planning on recording audio like me then
00:01:55
select the mic icon and now you can
00:01:57
record audio so for the animation
00:01:59
example I'm doing today I'm gonna
00:02:00
animate my character waving and saying
00:02:02
hi there so I'm gonna go ahead and
00:02:04
record myself saying hi there hi there
00:02:07
let's play it back to hear how it sounds
00:02:10
hi once you're satisfied with the
00:02:12
recording and press the
00:02:13
mark and drag the clip to a track if you
00:02:17
want to trim off the salmon pile right
00:02:18
here
00:02:19
then select the clip and drag the ends
00:02:21
to the point where you want to cut it
00:02:22
off then drag the clip back to the
00:02:25
beginning ones are satisfied with the
00:02:28
audio click the down arrow there turn
00:02:30
back to your canvas now we can actually
00:02:32
begin to animate starting with sketching
00:02:34
out the keyframes or main poses in the
00:02:36
animation cliff tip if it's helpful for
00:02:39
you you can sketch out the keyframes on
00:02:40
paper before sketching them and flip the
00:02:42
clip I'm animating my character waving
00:02:44
so here are the three keyframes in the
00:02:46
animation now let's begin sketching the
00:02:47
keyframes and flip the clip first press
00:02:49
the layers icon in the bottom right
00:02:51
corner to see the different layers and
00:02:53
name this layer sketch because it's the
00:02:55
sketch layer then click this pen icon
00:02:59
click it again and down here are the
00:03:01
brushes that you can use to draw since
00:03:03
for sketching I'm gonna choose the
00:03:05
pencil now let's start to sketch our
00:03:07
character in the first pose the first
00:03:09
pose is basically just a simple standing
00:03:11
pose which looks like this to begin
00:03:13
drawing your character select the ruler
00:03:15
icon up here and then click the circle
00:03:17
this circle will be the base for the
00:03:19
head because the head is very circular
00:03:21
drag the circle to where you want the
00:03:22
head to be and trace it like this let's
00:03:25
work on the head a bit more draw the
00:03:27
chin the ear and I draw these facial
00:03:31
proportion lines to map out where the
00:03:33
features of the face will be along with
00:03:35
what direction the head is facing
00:03:36
towards now let's draw the neck the body
00:03:39
and the arms now we have a very basic
00:03:42
sketch of our character but this isn't
00:03:44
the finished sketch this sketch is
00:03:46
simply mapped out the proportions infos
00:03:47
now I'm going to lower the opacity of
00:03:49
the sketch and add on details to make
00:03:51
the finished detail sketch to lower the
00:03:53
opacity of the sketch go to your tools
00:03:55
and select the eraser then set the
00:03:57
opacity of the eraser to about 80% and
00:04:00
then erase the whole drawing leaving a
00:04:03
light version of the sketch now let's go
00:04:05
back in with the pencil tool to add
00:04:07
details
00:04:17
so here is the finished detailed sketch
00:04:20
of the first key frame of the animation
00:04:21
now it's time to draw the next keyframe
00:04:24
so I'm going to scrub through the audio
00:04:26
and listen to figure out where I want
00:04:28
the Ness keyframe to be and I'm decided
00:04:32
to draw the next keyframe on frame three
00:04:35
which is near the end of the high part
00:04:37
in the audio the second keyframe is
00:04:39
basically the same pose as the first
00:04:40
keyframe except my character has lifted
00:04:42
her right hand up together each wave
00:04:44
since this pose is so similar to the
00:04:46
first post we can actually copy the
00:04:48
first keyframe into frame three and then
00:04:50
just add a few tweaks to it to do that
00:04:52
go to your first keyframe and select
00:04:54
this copy button right up here then go
00:04:57
to the frame where your second keyframe
00:04:59
is which for me is frame three and click
00:05:01
the paste button right here now let's
00:05:03
make some tweaks I'm going to erase this
00:05:05
general area where the right arm is and
00:05:07
then add in a new arm and this is what
00:05:10
it looks like or the third key frame
00:05:12
we're going to follow the same process
00:05:13
scrub through the audio and listen to it
00:05:16
to figure out where the third keyframe
00:05:17
should go and I decided to place the
00:05:19
third keyframe on frame six near the end
00:05:21
of the ver part and the audio the third
00:05:24
keyframe is the end of the wave where my
00:05:26
character's hand is in the waving
00:05:27
position and she's also smiling and
00:05:30
tilting her head to her right so we're
00:05:31
going to copy the second pose into frame
00:05:33
six and then add a changes erased the
00:05:36
general right arm area and draw the arm
00:05:38
in the waving position grab the lasso
00:05:40
tool and select around the head then use
00:05:43
the top circle here to turn the head in
00:05:45
this direction and finally for the smile
00:05:48
I'm gonna have the character's eyes
00:05:49
crinkled up like this in a smile which
00:05:52
looks like this and here or what the
00:05:54
three key frames look like key frame one
00:05:56
key frame two and key frame three the
00:05:59
next step in making an animation on your
00:06:01
phone is sketching the in-betweens and
00:06:03
betweens are essentially the transition
00:06:05
frames between the keyframes that help
00:06:07
make your animation look more smooth and
00:06:08
lifelike so let's begin sketching the
00:06:10
in-betweens for our hi there animation
00:06:13
the first in between is on frame two
00:06:15
between the first keyframe and a second
00:06:17
keyframe the first keyframe is this
00:06:19
standing pose and a second keyframe is
00:06:22
the same post but with the right arm up
00:06:23
in preparation for the wave so since the
00:06:26
only thing that changes is the arm we
00:06:28
can copy the first
00:06:29
frame into the second frame then erase
00:06:32
the arm and draw the arm that would be
00:06:34
halfway between the first and second
00:06:35
keyframe which looks like this and as
00:06:38
you can see when I spread through the
00:06:39
animation it looks like the arm is
00:06:41
moving now I'm going to use a little
00:06:43
trick to make this animation look even
00:06:45
smoother we're gonna add a slow out in
00:06:47
the transition basically that means the
00:06:50
arm will slow down as it reaches the
00:06:51
second keyframe easing into that
00:06:53
position to animate this effect I'm
00:06:55
gonna copy the second keyframe into the
00:06:58
frame after the second keyframe which
00:07:00
for me is frame four and then I'm going
00:07:03
to select this arm and drag it ever so
00:07:06
slightly in the direction it's moving
00:07:07
which is up so that it doesn't stop
00:07:10
abruptly at the second keyframe but
00:07:11
rather slows down and eases into that
00:07:13
position and when I scrub through the
00:07:15
audio it looks like the arm are slowing
00:07:17
down as it reaches the second position
00:07:19
giving it a smooth look for the
00:07:21
transition between the second and third
00:07:22
keyframe we can follow a similar process
00:07:25
the in-between for this transition is on
00:07:27
frame five and it's transitioning from
00:07:30
the hand being up here in preparation
00:07:32
for the wave to the hand in the wave
00:07:33
position along with the head turn this
00:07:35
way and the I sprinkled so for the in
00:07:38
between the hand will be in the middle
00:07:40
of the wave the head will only be
00:07:41
slightly turned and the eyes will only
00:07:43
be slightly crinkled so copy frame four
00:07:45
into frame five and make the changes and
00:07:48
this is what it looks like as you can
00:07:50
see I drew the hand really stretched out
00:07:53
here to give it a smear effect showing
00:07:55
that it's moving really fast now I'm
00:07:57
going to show you one last effect since
00:07:59
the hand is waving so fast it will
00:08:00
actually go past the waving position and
00:08:02
some they called over shock it will go a
00:08:04
little too far and then bounce back
00:08:06
slightly to the position it was aiming
00:08:08
for in this case frame six is where it
00:08:10
over shot and then in frame seven is
00:08:13
where it will bounce back slightly
00:08:14
so copy frame six into frame seven and
00:08:17
then turn the arms slightly back in the
00:08:19
opposite direction and this is what it
00:08:21
looks like as you can see it looks
00:08:23
pretty similar to the last frame the
00:08:25
last thing I'm going to do is I'm going
00:08:26
to repeat this drawing for a few frames
00:08:27
at the end of the animation just so that
00:08:29
there's a little bit of a pause at the
00:08:30
end so click on the frame here then
00:08:33
click the copy button and click the
00:08:35
paste button with the right arrow which
00:08:36
looks like a clipboard here and I'm
00:08:40
gonna do that until frame ten so now
00:08:42
let's play back the entire
00:08:43
animation see how it looks hi there now
00:08:48
it's time to clean up the animation by
00:08:50
drawing a liner for the animation to do
00:08:52
this we're going to need a new layer so
00:08:53
go to the layers icon down here and add
00:08:56
a new layer by pressing the plus we're
00:08:58
going to call this layer liner and color
00:09:00
because we're also going to color the
00:09:02
animation on the same layer but that's a
00:09:04
later step so once you have created a
00:09:08
new layer switch from the pencil brush
00:09:09
to the pen so that you can line your
00:09:11
animation making the line up for the
00:09:13
animation is pretty simple you just
00:09:14
trace the sketch and try to make it as
00:09:16
clean as possible so I'm gonna go ahead
00:09:18
and line the first frame and this is
00:09:29
what it looks like by the way you may
00:09:31
have noticed I didn't draw the mouth
00:09:33
this is because I will actually draw the
00:09:35
mouths on a separate layer when I do the
00:09:37
lip syncing which is a later step
00:09:39
now you can line the rest of the frames
00:09:40
okay so now that you finished lining all
00:09:43
the frames we no longer need the sketch
00:09:44
so go to the layers and press the 100%
00:09:49
on the sketch layer and this will
00:09:51
basically hide the sketch layer so now
00:09:54
let's play the animation with the line
00:09:55
art to see how it looks on to step seven
00:10:01
of making an animation on your phone
00:10:02
which is coloring your animation to
00:10:04
color your animation click the paint by
00:10:06
the tool right here click it again and
00:10:08
then click this colored square to choose
00:10:10
a color since I'm coloring in my
00:10:12
character I'm gonna create a new palette
00:10:14
for my character so to do that click
00:10:16
this button right here so now let's
00:10:18
start picking some colors first I'm
00:10:20
gonna choose a skin color then press the
00:10:22
plus button to add it to the palette
00:10:24
let's choose a hair color and the color
00:10:27
of my hoodie and since the background is
00:10:29
already white I don't have to color the
00:10:30
eyes in now that we've finished picking
00:10:32
our colors let's start the color our
00:10:34
animation in I'm gonna select the skin
00:10:35
color or return to the canvas and then
00:10:38
color in all areas of the skin now go
00:10:42
back to your palette by clicking on the
00:10:43
florid square select the hair color
00:10:46
return to your canvas and then color in
00:10:48
all areas of the hair and I'm gonna do
00:10:50
the same thing for the hoodie so I have
00:10:52
a finished coloring in the first frame
00:10:53
and I think it looks pretty good so now
00:10:56
I'm going to go ahead and call
00:10:57
on all the other frames okay so I
00:10:59
finished coloring in all the frames so
00:11:01
now let's play the animation again to
00:11:03
see how it looks with color now that
00:11:08
we've finished coloring the animation
00:11:09
there's only one thing left to add to it
00:11:11
lip-sync to act lip-sync to your
00:11:13
animation you're gonna need a new layer
00:11:15
so make a new layer and we're gonna call
00:11:17
this one mouth now to lip-sync basically
00:11:21
what you have to do is scrub through the
00:11:22
audio and then listen to the sound that
00:11:24
the audio mix and then draw the
00:11:25
corresponding mouth so on the first
00:11:28
frame here there's no sound so I'm gonna
00:11:30
draw a simple closed mouth in the second
00:11:34
frame I hear the hoof sound in high
00:11:36
which corresponds to a slightly open
00:11:38
mouth which looks like this by the way
00:11:43
I'm gonna color these mouths as I go so
00:11:45
I would recommend you make another color
00:11:47
palette for the mouths for the teeth and
00:11:48
tongue color in frame three I can hear
00:11:52
the I sound in High which corresponds to
00:11:55
a wide open mouth which looks like this
00:11:57
on frame four I can hear the sound in
00:12:01
there which corresponds to this tongue
00:12:03
through teeth mouth and on frame five I
00:12:07
can hear the air sound in there which is
00:12:10
another wide open mouth since it's the
00:12:12
same position as the eye in high you can
00:12:14
actually copy the mouth from the eye
00:12:16
part to frame five so go to the frame
00:12:19
with the eye part click the copy button
00:12:21
go back to frame five and click the
00:12:23
paste button as you can see it overlaps
00:12:24
the finger a little bit so I'm just
00:12:26
going to erase top part on frame six I
00:12:30
can hear the sound and there which is
00:12:33
this small Oh sheep Smouse I can still
00:12:35
kind of hear the earth sound on frame
00:12:37
seven so I'm going to copy the mouth
00:12:39
from frame six into frame 7 and then on
00:12:42
frames eight three eleven there is no
00:12:44
sound
00:12:45
so I can switch back to the closed mouth
00:12:46
from the first frame and this is what
00:12:48
the animation looks like with lip-sync
00:12:52
so now that we're finished with the
00:12:54
animation it's time to export your
00:12:56
animation and share it to do that click
00:12:58
the three dots icon here and then select
00:13:00
make movie so to export this you can go
00:13:04
ahead and click make movie and now you
00:13:07
can click share to share your animation
00:13:09
and you can share to YouTube among other
00:13:11
places so here is what the finished
00:13:14
animation looks like hi there hi there
00:13:16
hi there so yeah that was the tutorial
00:13:20
and I hope it was helpful and teaching
00:13:22
you how to make a cartoon animation for
00:13:23
free if all you have is a smartphone and
00:13:26
your finger if it was feel free to give
00:13:28
it a thumbs up and if you have any
00:13:30
questions about animation or clip clip
00:13:32
feel free to comment down below I will
00:13:34
try to answer all of the comments and if
00:13:37
you decide to follow along with this
00:13:38
tutorial please feel free to share your
00:13:40
finished animation to youtube and link
00:13:42
it to me via Instagram to youngs or disk
00:13:45
or I have the link to my Instagram and
00:13:47
discord server in the description so
00:13:49
yeah I hope you enjoyed this video and
00:13:51
found it helpful and thanks for watching
00:13:54
bye
00:13:56
[Music]
