PDA

View Full Version : FLA 201 - FBF animation using flash - Lesson1:Part3 - Walk Cycle (8.20.2k6)


Lancer.Evox.2k
08-17-2006, 11:34 PM
I wanted to make a Flash 101 tutorial (or about the basic boring stuff like motion tweening and the sort, which I might make later on) but I rather do a frame by frame tutorial instead. ;p
If this thing gets too long, I might convert the whole tutorial to a flash file, but that'll take sum work ><

FLASH 201 Syllabus:

Introduction: (Lesson ended)
-Basic Specs -DONE!
-Pen Specs -DONE!
-Zooming Options -DONE!
-Onion Skinning -DONE!
-Layer Properties -DONE!

Lesson 1:Movement/Walk cycles (Currently teaching)
Part1-Sketching the Movement -DONE!
Part2-Fleshing out -DONE!
Part3-Basic Walk Cycles, Front Walk Cycle -DONE!
Part3A-Leg movement -DONE!
Part3B-Arm movement -DONE!
Part3C-Hair movement -DONE!
Part3D-Profile Walk/Run Cycles -DONE!
Part4-Head Movement (planning)
Part4A-OMG, More layers!
Part4B-Cool Hair Movement
Part4C-Wink Wink! Purty Eyes :D
Part5-Lip Syncing

Lesson 2: Movement Special Effects, and Stuff! (Pending)
Part1-Distorting FBF frames
Part2-Blurring
Part3-Ahhh! Feel that Wind!
Part4-Converting to Symbols with Tweening FX

Lesson 3:Boom! Explosions and More WTFBBQ Shaiza Effects! (Pending)
Part1-Gunshots!
Part2-Explosionz!
Part3-ZOMG! NUCULAR BOMBZ!

Introduction:

Basic Specs:
-For the flash document: 24fps (I do not really draw all 24 frames frame by frame, but I kinda draw in a 12 fps pace and depending on the type of movement) and a good size of canvas, default 640x480 will be fine or w/e u feel comfortable drawing on.
-For drawing tools, a tablet will actually be a basic requirement for this course(I use a small 3x5 wacom tablet >>). BUT, I know several talented artists who can draw awesome FBF animations via the mouse, which would probably take a longer time to do compared to using a tabby.

Pen Specs
-As shown with the figure below
http://i22.photobucket.com/albums/b324/lanceasero/Tutorial/Flash%20201/0_01.jpg
The size of the brush is the 2nd smallest one (since the smallest one tend to break continuous lines when u draw), Pressure Senstivity is on, Pen Tilt Optional (I don't really know what pen tilt does, but I draw w it off anyway >< )

Zooming Options
-For zooming the canvas, I would recommend having a similar form like the one I have below. But, you'll be the judge what do you fell way comfortable to draw on :p
http://i22.photobucket.com/albums/b324/lanceasero/Tutorial/Flash%20201/0_02.jpg
You must use the same zoom placement along with the same pen size most of the time (unless you want to detail stuff way more :p ) BECAUSE if you don't, there will be a pen inconsistency, having way different line variation widths that can greatly affect how the animation will look like :/

Onion Skinning
-As shown below
http://i22.photobucket.com/albums/b324/lanceasero/Tutorial/Flash%20201/0_03.jpg
Turn on and off the onion skin options to see a slightly visible frame. Set the onion skin visibility bar at the top to set which frames do you want to see onion skinned.

Layer Properties
-As shown below
http://i22.photobucket.com/albums/b324/lanceasero/Tutorial/Flash%20201/0_04.jpg
The pencil icon shows if the layer is drawable or not.
The X icon can be ticked to remove the visibility of that layer.
The lock icon is ticked so that layer would not get affected while editing some other ones (this is really helpful if you are erasing stuff and coloring stuff for the other layers)
The outline icon is ticked to show an outline of that layer. This can be used for tracing stick figures to flesh out the FBF animations later on ;p

That concludes the introduction, now let us get cracking for some FBF action! Once I reupdate crap <<


*EDIT
ALSO i dunno when my next update will be, gonna be gone for a while and will be going to school next week:/

Lancer.Evox.2k
08-18-2006, 12:53 AM
LESSON 1: Movement/Walk cycles

Part1- Sketching the Movement

As I said earlier, I draw in a 12 fps pace in a 24 fps environment (it means having a 2 frame per drawing pace). I like having the 24 fps there especially when doing a combination of motion tweening, but that will be on another lesson :p

Ok, so let's draw someone movin and walking, yay!
Here is a stick figure I drew. He is supposed to be putting something in his toolbox, standing up, turning around, then walking front wards.
http://i22.photobucket.com/albums/b324/lanceasero/Tutorial/Flash%20201/1_01.gif
I used onion skinning to see the previous frames so I can draw the next frames much easier.
http://i22.photobucket.com/albums/b324/lanceasero/Tutorial/Flash%20201/1_01.jpg
Once you get a hold of drawing stick figure movements like these, fleshing out should be easy (NOT! :p)

Part2- Fleshing Out
Once you got the stick figure phase done, it is time to flesh out your character, yay!
To do so, I would make a new layer over the stick figure one and set the outlines for the stick figure layer as well. Try right-clicking the layer to change the outline into a fairly visible color.
http://i22.photobucket.com/albums/b324/lanceasero/Tutorial/Flash%20201/1_02.jpg
Ooooh, and yea! Do NOT forget to lock the stick figure layer, or else it will be erased if you erase from a different layer :D
Here is a quick crappy fleshing out I did using this method:
http://i22.photobucket.com/albums/b324/lanceasero/Tutorial/Flash%20201/1_02.gif
You can also notice that I made a separate layer under the 'rest of his body' layer for his first arm movements.
I will then spend 'some' time to refine it to a much cleaner lineart T_T
Now onto the basics of walk cycles!

ShimmeringSword
08-18-2006, 01:15 AM
Teh sweetness, this should help some people a lot.
I on the other hand will be lazy and wait for a professional to teach me when I go to University in a few months.

Keep it up, and good luck on the colab.

jt4470
08-18-2006, 02:32 PM
awesome. I"ve always wanted to do fbf animation in Flash. Now..if I can get off my lazy bum and do it!

Lancer.Evox.2k
08-20-2006, 02:18 PM
Teh sweetness, this should help some people a lot.
I on the other hand will be lazy and wait for a professional to teach me when I go to University in a few months.

Keep it up, and good luck on the colab.

Haha yea, don't listen to me, I'm just an amteur :p
I basically figured out everything I wrote here by myself fooling around with flash >< GL in ur animation majoring.
Now onto the next part...

Part3-Basic Walk Cycles, Front Walk Cycle (planning)

Part3A-Leg movement
From my fleshing out animation earlier, I tried to make my lines better and I get this.
http://i22.photobucket.com/albums/b324/lanceasero/Tutorial/Flash%20201/1_0311.gif
I just used the same frame again and again and just edited them a little on the legs. (same applies for the arms and the hair later, copy+paste and llasso tool ftw)
This is basically just a 8 frame cycle. It might take less or more frames depending on the movement speed that you want.
http://i22.photobucket.com/albums/b324/lanceasero/Tutorial/Flash%20201/1_0312.gif
I did not make the knee movement that obvious and the legs are kinda short and uneven, but w/e.
1-His right leg completely down, left leg is already up, left knee at the back
2-His right leg completely down, left leg is already up, left knee a lil more forward
3-His right leg completely down (kind of ready to go up), left leg is ready to go down
4-His right leg is ready to go up, left leg is completely down
5-His right leg is already up, right knee at the back, left leg is completely down
6-His right leg is already up, right knee a lil more forward, left leg is completely down
7-His right leg is ready to go down, left leg is completely down (kind of ready to go up)
8-His right leg completely down, left leg ready to go up
You can also notice that the elavation of his body changes. It gets the tallest once both legs are closing together. He tilts to the right if his right foot is down by itself and tilts to the left when his left foot is down by itself.

Part3B-Arm movement
I could have just stopped with the leg movement, but I wanted to make the walk more realistic.
http://i22.photobucket.com/albums/b324/lanceasero/Tutorial/Flash%20201/1_0321.gif
I only used 4 frames of arm movement here.
Just probably ignore the tool box, he has baggy pants i guess ;)
http://i22.photobucket.com/albums/b324/lanceasero/Tutorial/Flash%20201/1_0322.gif
As you can see, the left hand goes forward as the right leg goes forward, while the right hand goes back as the left leg goes forward, and vice-versa.
1-His left arm is way at the back, his right arm is way at the front (1)
2-Same as 1 (1)
3-His left arm is at the back, his right arm is at the front (2)
4-His left arm is at the front, his right arm is at the back (3)
5-His left arm is way at the front, his right arm is way at the back (4)
6-Same as 6 (4)
7-Same as 5 (3)
8-Same as 3 (2)
You can also notice that his chest bulges a lil depending on his arm movement.

Part3C-Hair movement
Now I added hair movement for that animation.
http://i22.photobucket.com/albums/b324/lanceasero/Tutorial/Flash%20201/1_0331.gif
As you can see, I only used 3 frames for the hair (where it can be more), one moving to the left, one moving to the right, and one stationary one.
http://i22.photobucket.com/albums/b324/lanceasero/Tutorial/Flash%20201/1_0332.gif
As the elevation and his body movement changes, the hair direction changes as well. His hair moves to the right as he goes to the left and vice-versa.
1-Hair direction to the right(1)
2-Same as 1 (1)
3-Stationary hair (2)
4-Same as 3 (2)
5-Hair direction to the left (3)
6-Same as 5 (3)
7-Same as 3 (2)
8-Same as 3 (2)

It just needs some time to know how these walk detail movements go with the walking cycle. ;)

Part3D-Profile Walk/Run Cycle

Basically the same as the front walk cycle. Check out bot at the bottom running in profile, front, and back. (It only has about 6 frames because he is running instead of walking)
http://i22.photobucket.com/albums/b324/lanceasero/Tutorial/Flash%20201/1_0341.gif
As you can see, I used the free transform (it is in the toolbox or press 'Q' ) to 'cheat' FBFing :p (MORE ABOUT DISTORTING FRAMES LIKE THESE IN LESSON 2: PART 1)
http://i22.photobucket.com/albums/b324/lanceasero/Tutorial/Flash%20201/1_0342.gif

Front and Back (6 diff frames, 2 real frames)
1-I freetranstofrmed it down because bot had just landed from a step
2-I freetransformed him back up.
3-I should have added a middle frame here having an one leg still in the air before it drops to the ground. Same as 2.
4-Like 1 but now with the other leg.
5-Free transformed 4 back up.
6-Same as 3.

Profile: (6 diff frames, 4 real frames)
1-Right leg back, right arm forward. Left leg forward, left arm back.
2-Free transformed 1, ready to go move legs and arms.
3-Middle point. Bends the right leg, ready to get it up. Bends the left leg, ready to get down.
4-Same as 1 but vice versa.
5-Free transformed 4, ready to go move legs and arms.
6-Middle point. Bends the left leg, ready to get it up. Bends the right leg, ready to get down.

The profile is basically the same with the front walk animation that we talked about earlier.

That ends the walk cycle tutorial...now onto heads! Some other time that is :D Look forward to it.

munk3yboy
09-21-2006, 11:42 AM
bleh, I never even noticed this forum before. Very good tutorial, needs more top notch FlashKit sounds though ~ it's just not the same without them :tear: hah kidding.

I also want to see your explosions. I've been trying to get the anime kind but failing miserably, even using Flash 8 blending modes and filters.

Edit: Oh, and if you still dunno what tilt does its for higher end tablets (Wacom Intuos+) - the Graphire's and stuff don't have that feature. I'm on a Graphire 3 5x4 so don't know myself how useful tilt is, but I can't imagine it'd warrant an upgrade. ><

jt4470
10-06-2006, 12:18 AM
please update! I'm making a frame by frame flash for a competition..but I'm lousy with sound and coloring (and drawing...but can't really do anything about that)

rishkid
10-10-2006, 07:58 PM
WOW! those animations look awesome...i cant even make a bouncing ball:D

D4Shadow
10-26-2006, 07:05 PM
Wow... I still don't get flash but that's awesome :D

flashcartoons
12-16-2006, 08:35 AM
this is a great tutorial thanks

Alphaf
12-17-2006, 10:59 AM
LOL! PKBot FTW!
Dude this is awesome, you've gotten so damn good with this, I guess all those funky-as-hell Bot clips have really paid off in the long run. Im gonna try to use those cycles... if only I wasnt a lazy bum and left everything halfway through ... T_T