Walk Cycle/Animation Tutorial

A place for tutorials on how to get the most out of Flash

Walk Cycle/Animation Tutorial

Postby KaTsuO_O » Sun Jul 22, 2012 5:51 pm

In my boredom I put together a simple walk cycle, which I thought didn't turn out like shit. So, maybe I can use it to put together a walk cycle tutorial. I know it's something that most beginners find useful so why not.

I can think of three rules that you should follow to make at least a decent walk cycle.

1. Don't stretch the legs, move the body
2. Feet moves with the ground
3. Same walk and ground speed
4. Similar motion for both legs

(Check the end of post two to see the actual result)

1. Don't stretch the legs, move the body

I Just need to point out that I don't use a model for these ones but it will still demonstrate the problems well enough. This is how it looks if you don't move the body (up and down).

Click to Play
(Javascript Required)

Floating Walk Cycle.swf [ 3.91 KiB | Viewed 3199 times ]



A way to get the feet on the ground would be to stretch the legs but It would look odd. What you want to do is move the body with the legs.

Click to Play
(Javascript Required)

Going Down.swf [ 7.16 KiB | Viewed 3199 times ]



The first wrong one is stretching legs and the other one is floating body which you can see in the previous walk cycle. The one that is right shows how the body is at it's highest point when the legs is in (under the body), and lowest when the legs is out.

This is how the walk cycle looks when the body is moving with the legs.

Click to Play
(Javascript Required)

Proper Walk Cycle 12 FPS.swf [ 3.67 KiB | Viewed 3199 times ]



2. Feet moves with the ground

This is how it looks if the feet doesn't move with the ground.

Click to Play
(Javascript Required)

Walk Cycle Moving Feet.swf [ 3.8 KiB | Viewed 3199 times ]



The problem is not that he moves faster or slowed than the ground, it is that his feet doesn't move the same distance each frame.

(The gray one is the leg from the previous frame). As you can see, the leg moves further on the third frame than it does on the fourth frame. The feet need to move the same distance each time when they're on the ground.

Leg.png
Leg.png (15.17 KiB) Viewed 3199 times


Now I just need to show you how it looks if you combine 1 and 2. You don't want it to look like that.

Click to Play
(Javascript Required)

Walk Cycle Shit.swf [ 3.95 KiB | Viewed 3199 times ]



3. Same walk and ground speed

You may have a good animated walk cycle but if it doesn't move with the ground then it will look odd. You can see how the feet is sliding on the ground like it is slippery.

Click to Play
(Javascript Required)

Walk Cycle Too Flow.swf [ 4 KiB | Viewed 3199 times ]



Instead you want the foot to stay in the same spot until it goes up again (that's why I added the spots on the ground).

Click to Play
(Javascript Required)

Proper Walk Cycle 12 FPS.swf [ 3.67 KiB | Viewed 3199 times ]



Just to show how bad it can look if you don't follow these three rules... Please, don't, you don't want it to look like that!

Click to Play
(Javascript Required)

Walk Cycle Uber Shit 2.swf [ 4.22 KiB | Viewed 3199 times ]



4. Similar motion for both legs

I can't really show this one (since it's a stick man and not a model) but I can explain it. You don't want the two legs to move differently, such as one leg kicks further up or goes further back than the other. You want both legs to have as similar motions as possible.
Don't create a porn game if you're only interested in porn.
Wise words regarding criticism http://www.youtube.com/watch?v=-98ZFl1sKt4
User avatar
KaTsuO_O
 
Joined: Tue Nov 02, 2010 6:03 pm

Re: Walk Cycle/Animation Tutorial

Postby KaTsuO_O » Mon Jul 23, 2012 4:00 pm

Now when you know what not to do, let's proceed with how to start off.

Even if you got a model ready, it's recommended that you start with a stick man walk cycle (like the one I've been using). However, you only need to draw four frames. The stick man should be the same dimensions as the model you want to animate.

Proper Walk Cycle Four Frames.png
Proper Walk Cycle Four Frames.png (15.89 KiB) Viewed 3148 times


And when it is animated it will look like this.

Click to Play
(Javascript Required)

Proper Walk Cycle Four Frames.swf [ 1.88 KiB | Viewed 3148 times ]



After that you just have to pose the model after the stick men. It is recommended that you make the stick men is transparent so it's easier to see what you're doing. You might notice that there is eight frames instead of four and that's because you animate both legs.

Working.png


Once you're done with all that you have to space out the frames and add tweens (classic) between them. You add a tween by right-clicking on a frame and create classic tween and to do it faster you can just highlight all the frames and add tween. However, you need to add the first frames in the end, otherwise it won't completely loop.

Frames.png
Frames.png (10.23 KiB) Viewed 3148 times


The result should look something like this.

Click to Play
(Javascript Required)

Model Walk Cycle 2.swf [ 4.35 KiB | Viewed 3148 times ]



I hope this tutorial is helpful and also, Happy Animating!

If there is something I have forgot to mention, please let me know.
Don't create a porn game if you're only interested in porn.
Wise words regarding criticism http://www.youtube.com/watch?v=-98ZFl1sKt4
User avatar
KaTsuO_O
 
Joined: Tue Nov 02, 2010 6:03 pm

Re: Walk Cycle/Animation Tutorial

Postby hat973 » Mon Jul 23, 2012 7:32 pm

what if mine dosnt have the ankle joint
Red light panda

:ugeek: Tumbler: Tumbler
:geek: I have a Blog: Red Light Blog
;) I stream to Give me a Watch over at: Picarto
:mrgreen: Donate: Patreon
:roll: Discord:Discord
User avatar
hat973
 
Joined: Tue Apr 24, 2012 12:44 am

Re: Walk Cycle/Animation Tutorial

Postby KaTsuO_O » Mon Jul 23, 2012 8:12 pm

Having the feet separated is recommended because the feet can stay straight on the ground while the rest of the leg is moving, it is also good for many other situations if you see the possibilities. However, you can do it with out it, it's even easier for beginners to not have those two extra layers. Another way of doing it if you don't have separated feet is to tilt the lower leg (with Free Transform Tool (Q)).
Don't create a porn game if you're only interested in porn.
Wise words regarding criticism http://www.youtube.com/watch?v=-98ZFl1sKt4
User avatar
KaTsuO_O
 
Joined: Tue Nov 02, 2010 6:03 pm

Re: Walk Cycle/Animation Tutorial

Postby hat973 » Mon Jul 23, 2012 11:42 pm

okay ill see what i can do
Red light panda

:ugeek: Tumbler: Tumbler
:geek: I have a Blog: Red Light Blog
;) I stream to Give me a Watch over at: Picarto
:mrgreen: Donate: Patreon
:roll: Discord:Discord
User avatar
hat973
 
Joined: Tue Apr 24, 2012 12:44 am

Re: Walk Cycle/Animation Tutorial

Postby OwnerOfSuccuby » Wed Jul 25, 2012 1:38 pm

Thank you for tutorial :)
OwnerOfSuccuby
 
Joined: Fri Jun 11, 2010 9:33 pm

Re: Walk Cycle/Animation Tutorial

Postby SteelSaurus » Sat Oct 13, 2012 4:14 pm

Alright, I've saved nearly everything on this page. I'm going to get a character animated to do at least something.
I'll get right on it! Eventually...
SteelSaurus
 
Joined: Sun Jun 20, 2010 3:49 am


Return to Tutorials



Who is online

Users browsing this forum: No registered users