practically instant character creation and animation in flash

31
Practically Instant Character Creation and Animation in Flash ©2011mkelly/rmu example created mostly by Tinley Park students in 40 minutes at a workshop sponsored by Robert Morris University. we'll put together simple shapes to build a body, and then add details with the paintbrush and eraser tools. but first... / / ... and then to change and to also change ... next we'll build the body from simple shapes: grab the tool from . more things to do in Tools: click and hold to choose for the so your shapes will have no stroke/outline. click and hold next to to choose a bright color to fill your rectangle shape.

Upload: michael-kelly

Post on 23-Mar-2016

220 views

Category:

Documents


2 download

DESCRIPTION

this tutorial will show Flash animators of all ages how to create a character from scratch using simple shapes along with the paintbrush and eraser tools tht can have bone added to it for quick and easy, smooth animations.

TRANSCRIPT

Page 1: Practically Instant Character Creation and Animation in Flash

Practically Instant Character Creation and Animation in Flash ©2011mkelly/rmu

example created mostly by Tinley Park students in 40 minutes at a workshop sponsored by Robert Morris University.

we'll put together simple shapes to build a body, and then add details with the paintbrush and eraser tools. but first...

/ / ...

and then

to change

and to also change ...

next we'll build the body from simple shapes:

grab the tool from .

more things to do in Tools:

click and hold to choose for the so your shapes will have no stroke/outline.

click and hold next to to choose a bright color to fill your rectangle shape.

Page 2: Practically Instant Character Creation and Animation in Flash

VERY IMPORTANT. look for ... make sure it's NOT .

if it's pushed in you will make objects instead of shapes, and they will not join together.

so click on it to deselect it so it looks like .

okay, so now we can get out of Tools for a minute and head over to the Stage to build our character.

draw a box like above. leave room for the head and the legs. you can make it wider or skinnier. it depends on the character you want to create.

a b grab the arrow tool. if you put your mouse near a corner you'll see next to your arrow. this means you can stretch the corner out or push it in. we're going to pull it out like in a unless you want your character to have narrow shoulders – b.

Page 3: Practically Instant Character Creation and Animation in Flash

so this is how mine looks now. try to get both sides even with each other.

a b c if you put your mouse near the middle edge you'll see next to your arrow. this means you can stretch the edge out as a curve or push it in.

if you pull out and up at the same time, you'll see something very similar to a. do the other shoulder the same way – b. try to get both sides even with each other – c.

so now we have a chest!

draw this box next just a little below the chest:

this will be the waist. you can make it narrow or wide.

draw this box for the hips a little below the waist:

Page 4: Practically Instant Character Creation and Animation in Flash

select the box and...

hit the up arrow on your keyboard until the two shapes become one. click outside of the box to deselect it.

curve in the waist on one side and then the other. you could also curve it out if you want your character to have "love handles."

Page 5: Practically Instant Character Creation and Animation in Flash

the result is above. select the hip box.

up arrow into the waist.

curve out the hip on both sides. tighten the top corner (like the top of a pair of pants).

if your character has grown too tall to fit the space like mine just did, grab from Tools and shrink it. hold down the Shift key and grab a corner so it doesn't get stretched or squashed:

Page 6: Practically Instant Character Creation and Animation in Flash

what mine looks like so far...

draw a new box for one of your legs.

a b c d

for the foot, we'll switch to the oval tool. to find it a) click and hold the Rectangle tool. b) a menu will pop up. c) select the Oval tool. d) now it's in Tools ready to roll.

Page 7: Practically Instant Character Creation and Animation in Flash

a b c a) draw an oval under the leg. b) curve upwards and towards the back. c) result.

curve up the bottom. result.

grab the tool and draw this and this .

a b c d a) pull corner out at the top. b) curve in the middle. c) curve out the knee. d) result.

select and up arrow the shoe into the pants.

Page 8: Practically Instant Character Creation and Animation in Flash

select the whole leg. / and then / .

and then / / :

move the flipped leg into position.

Page 9: Practically Instant Character Creation and Animation in Flash

if you want to make the shoes look more like they are facing forward, grab from Tools, and:

grab the legs and arrow key them into the body. stretch wider or taller if necessary to match the rest of the body.

you can also change the shape of the chest.

Page 10: Practically Instant Character Creation and Animation in Flash

grab the again to make an arm for your character:

palm, forearm, bicep, shoulder. draw them away from each other in case you need to squash or stretch any part.

when you are happy with the sizes, drag them on top of each other:

select the whole arm. / and then / .

and then / / ...

Page 11: Practically Instant Character Creation and Animation in Flash

result.

attach them to the body:

draw a box for the neck above the body...

Page 12: Practically Instant Character Creation and Animation in Flash

a b c d e a) grab a corner and pull it in. b) do the same for the other. c) and d) curve both middles. e) select.

arrow down into the body to attach.

draw an oval above the neck. change the size if necessary. arrow down into body.

my character so far. you can make the arms more real. guess how?

Page 13: Practically Instant Character Creation and Animation in Flash

if you said curving with the arrow tool, you are right!

we can also fix the bulges under his arms and in his shoulders.

and even his arm muscles.

from: to:

from now on we'll only deal with details – from fingers to features.we'll also add hair and small lines to show where things separate from each other.

Page 14: Practically Instant Character Creation and Animation in Flash

for these details we'll use two new tools:

the for adding things and the tool for getting rid of stuff.

first, let's add with the brush so we need to choose the shape of the lines it will make:

a b c d

a) click and hold on this. b) I chose a round brush. it's good for fingers and hair. c) and d) you can choose the right size. it may take a few tries.

thumbs up – paint upwards and then back down to add more thickness to the bottom of the thumb.

same for the fingers. middle finger is the longest unless you're making an alien.

Page 15: Practically Instant Character Creation and Animation in Flash

copy. paste and flip.

stick it on the other side.

paint an ear. and then another.

you can reshape the face if you need to.

Page 16: Practically Instant Character Creation and Animation in Flash

paint on some hair. add an ear lobe or two?

a collar?

sleeves?

cuffs and shoe details?

Page 17: Practically Instant Character Creation and Animation in Flash

wrinkles in the shirt?

pockets?

Page 18: Practically Instant Character Creation and Animation in Flash

smooth the arms even more?

copy smoothed arm. paste. flip.

select and cut off the other arm, and slide the new one into place...

Page 19: Practically Instant Character Creation and Animation in Flash

like so...

so far...

Page 20: Practically Instant Character Creation and Animation in Flash

now you can grab the Eraser tool. you can also choose its shape and size but with just one choice instead of two.

don't go too small with the Eraser lines or do too many of them. it will prevent the Bones tool from doing its job so you won't be able to animate your character after all of your hard work.

draw half of a face with the eraser. select it with the arrow tool. copy. paste. flip.

oops. I made a devil child by accident...

Page 21: Practically Instant Character Creation and Animation in Flash

first let's fix the face. erase a connection between the two halves of the lips. erase a line for the lower lip.

paint the horns away if yours has any. hopefully not.

Page 22: Practically Instant Character Creation and Animation in Flash

add more details to the shoes?

a collar, ear and hair details.

Page 23: Practically Instant Character Creation and Animation in Flash

I shortened his chest, arms and legs to make him more childlike. ready to animate?

grab the Bone tool. you might get the error above if you're unlucky like I was...

Page 24: Practically Instant Character Creation and Animation in Flash

but there's hope...with the character selected, look for the Optimize command.

slide left and right over the number to adjust. Preview lets you see the damage.

I stopped at 34%. it was plenty.

Page 25: Practically Instant Character Creation and Animation in Flash

click near the top center of the pants where the legs meet. drag to the knee at a slight outward angle. drag down to the ankle at a slight inward angle. drag out to the toe. repeat the process for the other leg.

opposite direction. click on the center bone and drag to the belt line. drag again to the level of the shoulders.

Page 26: Practically Instant Character Creation and Animation in Flash

drag to the shoulder. drag to the elbow with a slight downward angle. draw to the wrist with a slight upward angle. draw the the tip of the fingers.

repeat for the other side.

draw one from the chest bone up to the neck and one more to the top of the head.

if you need to move the bones such as to shorten one if it is too long, use the white

arrow .

Page 27: Practically Instant Character Creation and Animation in Flash

ready to be animated!

a new layer is created when you add the bones. Armature is always a part of the name. this is the Timeline. the black dot is a keyframe. a key frame is where a major change in the animation occurs. Flash fills in the movements between keyframes in a process called tweening. tweening can also be done by hand. no way for us!!!

Page 28: Practically Instant Character Creation and Animation in Flash

click on frame 30 and hold the mouse down until you see .

the timeline changes.

use the is to move the bones.

in frame 30, grab the wrist bone and move it upward. his arm goes with it.

Page 29: Practically Instant Character Creation and Animation in Flash

same for his other parts when you move the bones. watch out for tears in the fabric of your character or strange deformities.

Page 30: Practically Instant Character Creation and Animation in Flash

click on frame 1 with the Apple / command / ⌘ key held down. this allows you to select a single frame.

Page 31: Practically Instant Character Creation and Animation in Flash

hold down your mouse to copy the pose in frame 1. Apple / command / ⌘ on frame 45, hold the mouse down, and Paste Pose there.

so now his moves begin and end in the same way. you have created your first loop.

change the speed at the bottom of the Timeline to 60 frames per second to speed up the action.

here's what it looks like:

final animation.

so if you've been following along, you have created a character and animated it in the latest method offered by Flash.

CONGRATULATIONS!