From Layers to Life: Creating Animated Characters in Adobe Flash | Katie Henderson | Skillshare

From Layers to Life: Creating Animated Characters in Adobe Flash

Katie Henderson, Character animator on the loose!

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (26m)
    • 1. Trailer

    • 2. Intro and Class Materials

    • 3. A brief look at the Flash interface

    • 4. Helpful hints for drawing

    • 5. Drawing in Flash

    • 6. Creating assets

    • 7. Make your character turn

    • 8. All the little steps to animating

    • 9. My complete class demo

    • 10. Alternative animation tricks


About This Class

Flash is one of two industry standard programs (The other being Toon Boom) for creating cartoons online and on television. You will already be familiar with several of these cartoons: Axe Cop, Archer, China, IL, Happy Tree Friends, and many MANY more.

This class is for anyone who has an idea for a web series, or wants to expand their Flash and animation knowledge. A certain level of meticulousness and patience is required, as building a character is the most time consuming part to animating. Some familiarity with the program such as the use of layers, keyframes, and most importantly, symbols is a plus, though each will be quickly explained at the start of class. Due to intensive information, this class may be better suited to students who have some familiarity with Flash.

In this class, students will learn how to design a character, build and move its various assets in Flash, and use it to produce a very short demo. Students in the class will need to have access to Flash CS4 or higher. 

The lesson will discuss what goes into creating a character for Flash animation and provide some tips for handling certain design issues before the set-up stage. At this point the student is encouraged to design and share a 3-point turn-around (front, 3/4, and side view) for a character of their own creation.


The next, and by far, most intensive step is to build the character from the bottom up in Flash. Techniques for naming and organizing parts of the character and building poses for things like hands and mouths will be discussed. At this stage we will also be animating the 3 point turns created in the previous lesson, to give them a smooth, '2.5D' appearance when in motion. Tweens (as in inbetweens, not adolescents) are crucial to this step and students will get a crash-course on using Flash's built-in tweening abilities, and tweening by hand.

Last but not least, it's time for a little fun. Students will be asked to complete a few seconds of animation to show now that the character has been created, they also understand how to use and move it. The animation should demonstrate movement from one view to another, examples of different gestures/poses for things like eyes, hands, and lip sync.


2. Intro and Class Materials: Hi, everyone. Welcome to your first video lesson of From layers toe life creating animated characters in Adobe Flash. In this quick lesson, I'll be explaining the project materials you will need first, a little about myself. My name is Katie Henderson. I'm an animator and graphic designer. I'm originally from the East Coast, but in 2011 moved to Los Angeles to work in two D animation. Since then, I have worked on several projects not just as an animator but in roles such as storyboard artists, project manager and technical director. But this class, I hope to be able to teach you how to bring your own characters to life. Some materials you may find useful pencil and paper. If you're like me, you want to start working on your character with these first and then scan or photograph it to be imported. In traced later tablets, many studios used tablets for producing both two and three D animation. I myself would be using a bamboo pen for this class. Some of you will be using tablets, and if not, that's OK. If you're comfortable, you can draw entirely on the computer in your preferred program. But For those of you using a mouse or a touch pad, I strongly encourage you to use a pencil and paper to draw your character's first the next and by far, most important thing you will need is Theo Flashes. We know it was initially used as a platform for creating vector multimedia in animated elements and websites and Games has since become a platform for television and entertainment animation. It will help to have a basic working knowledge of flash for this class that I will touch on a couple things in the following lessons. Animation, though not a tool in this case. But the machine you will build with these tools has been around to entertain us since the late 18 hundreds. Originally, it required a crew and many cumbersome pieces of equipment to create. But when programmes like Flash, anyone can work from home to make a cartoon. In this class, I will be teaching using Flash CS six, and I'd like for you to be working in at least CS four or better. Thanks for watching in the next video. We'll be taking a look at the flash interface. See you then 3. A brief look at the Flash interface: - Welcome back. - Let's start by opening up Flash and getting acquainted with it when you open, - Flashy will be presented with the screen that looks like this well, - pretty much. - Always want to start by going to the create new column and clicking action script. - Three. - You know have a blank stage and menus are adjustable. - The tools and timelines should also be visible. - I've modified my workspace to better fit my needs, - so feel free to model yours in the same way. - To remove a menu, - you can click on it, - then click the icon that looks like an arrow and some lines and choose clothes. - If you close one by accident, - you can find it again by going to the window menu at the top and choosing from the drop - down. - I have Info Properties Library transformed a line in color in my group. - Over here, - it's the timeline and layer list. - Below the layer window, - you'll see three icons to make a new layer. - Ah folder to group your layers in a trash bin to delete them next to the layer name. - There are options to hide, - lock and show only outline for that particular layer in The timeline portion is where you - find frames and key frames. - The frame with a circle is a key frame. - If there's nothing in that key frame, - the circle will be empty. - Any time you want to make movement change to the character, - make sure there's a new key frame for it. - You can add or remove frames by going to the insert menu at the top. - Right clicking on the layer were using the shortcuts at five F six F seven. - At the bottom are the preview controls and the onions Get options, - which can come in handy when animating frame by frame. - The numbers tell you what frame you're on, - the frames played per second and the length of time. - This cup discovers that on this side of the tools panel, - if you use Photoshopped, - you might be familiar with some of these. - Some of the tools are doubled up, - and the options can be accessed by clicking the little triangles next to them or by cycling - through their keyboard shortcuts. - For example, - the paintbrush is just the Letter B. - If I wanted this brake and I hit, - be again careful when you use the rectangle and oval tools and don't accidentally use the - primitive versions of them. - These shapes can't really be edited, - but you can change its type by breaking it using control be or the Mac equipment. - A sign from the color picker at the bottom of the tool panel. - When some tools air chosen, - several options appear like smoothing brush size, - fill behavior and object drawing another option you don't want to use. - You should be familiar with some of these things, - and if not, - play around before you bring your character into flash. - Thanks for watching. 4. Helpful hints for drawing: this lesson will give you some things to think about when creating your character. The method I will be showing you lends itself well to a somewhat cartoony style. So don't get bogged down with too many details, as you might become overwhelmed when you go to build them in flash. If the character is cartoony, it allows for some fudging between views without losing the sense of waiting death. If you have the time to sink into the rigid features of a more realistic or geometric character, then you're welcome to do so. Only you know your own level of skill and determination. For this lesson, I ask that you not make any flat neo retro cartoons like Dexter's Lab or Total Drama Island . There's nothing wrong with these, but they're really only designed to be seen from 3/4 and Front at best. What we want is to make our character appear to have physical death, something we call 2.5 T in digital animation. Some things to consider. How will you draw your character? If you're using a tablet, you can use most of the drawing tools pretty easily, but mouse users will want to stick with line and shapes tools. Flash allows you to modify them, and it's easy to lay down a bunch of lines and curve them out is needed with the black cursor for general editing or the white cursor for modifying anchor points. Fine tuning. How will their limbs move? If you're starting out, I recommend making a character that will have jointed limbs. Another option would be to make noodle limbs like the kind you see an adventure time. The arms and legs don't have a defined joint, and when they bend, they usually do so in a curve. Characters can also have a combination of limb styles. How will their job function? Usually, you'll want a job that moves when the character speaks. To an extent, characters like Children or robots can get away with a fixed job except during wide mouth poses. But moving a job gives your character more life. When you get your design on paper, use a ruler or other straight edge to make guidelines across your page to help keep proportions similar in all the other views. Overall height, distance between shoulders and waist line the space between eyes and mounts. Anything can benefit from these guidelines. Making turnarounds can also help workout design flaws, which you can work around and learn from. If you're struggling, though, you'll have to alter certain features in order to keep them consistent and to make it a lot easier to assemble them Later, I will be building a little boy character for this project. As you can see, some of the guidelines still remain. Your drawings don't have to be cleaned up, and you can always make more changes in a flash, even though the class Onley covers three views. If you want, you can go ahead and make the remaining three quarterback and fullback views to complete later. Also, you'll want to make a few extra poses for the hands in the mouth and eyes in the additional resource is section. I have included a couple basic mouth charts that you can follow, or you can practice in front of the mirror and make your on. When it comes to Hans Mounts and things like that, I will say this building a character is like an investment. The more you put in at first, the better your return and the less work you need to put in later. If you plan on doing a lot with your character, you want to build as much of what you won't be animating as much as what you will be animating. For example, if you want your character to say hi, how are you? Not only should you draw the mouth closes for that particular phrase, but you should also draw amounts that allow them to say, Let's eat zombie fish. So go ahead, get your draw on and be sure to share in the student project section of this class. 5. Drawing in Flash: - Hi. - This video will help you get started in building your character in flash that you could see - I already have my sketch imported, - and I've started drawing the character elements on separate layers. - Right now, - I will show you how to draw the shoulder. - You can see this one is labeled with it to to let me know that this arm will eventually be - passing behind the character when it turns. - So we'll start by taking the line tool, - making sure the shoulder layer is selected and draw a couple lines for his shirt sleeve. - When you draw all the body parts will want to draw the whole part, - not just what you see in the drawing. - Well, - next, - take the black cursor and curve out the lines. - If a line doesn't bend the way you want it to, - you may have to use the white cursor. - Next, - I'll add the upper arm, - which I usually group with the shoulder itself. - I'll use a rectangle tool, - a little re sizing and curve out the ends where the forearm goes, - or I will make my own with a line tool. - That way, - the curve is more gentle and less conspicuous. - if it gets exposed while animating No, - the lower arm. - He's a cake and finally the hand. - For now, - I'll just make the one in the drawing and in another video, - actually what to do with all the other hand positions we made. - I only draw one of each limb part for now, - as I could duplicate them to their own layers once I complete the next step. - So go ahead and trace all the character parts. - And when you get to the head, - draw only its shape down to the cheeks as you will be building the jaw later. - You can also include the hair on the head as well. - Once you have everything traced and colored, - go back through, - select each layer and make each part into a symbol by using either the F eight key for - choosing new symbol or create new symbol from the modify menu, - you want to give the simple clear name and identify it with the character's name. - This is in case you start animating multiple characters so politics don't save over each - other at any time. - Double clicking on a symbol on stage or in the library will open it to be edited. - All instances of the symbol will change to reflect any edits. - You make no to finish drawing the head. - All that practice you got building the body of the character can be put to use again. - Double click on the head to open that symbol. - Build up all the facial features and accessories, - just like you did before, - arranging the layers as needed. - Keep the eyes the eye. - Whites browse pupils and leads separate. - Make only one side, - and when you turn them into symbols, - duplicate them to their own layers. - Having everything as self contained as possible makes it easier to edit an animated. - You're ready now to build complex symbol assets, - so go ahead and check out the next video to get started. 6. Creating assets: Welcome to part two of Building Your Character. You're now ready to work with all those extra hands and mouths that you drew earlier, so let's start off with the mouth. Double click on your mouth symbol. If you need to go ahead and import the drawings of your mouth into a new guide layer, let's say you have 10 mouths that you'd like to create. Extend the timeline with blankie frames in the mouth layer to 10. The guide layer can have just regular frames. You can use the onion skin tool, help line up the mouths and draw each of them in their own key. For him, it's up to you if you want to. You single or multiple layers for the mouth now. Layers for the jaw, the lips, Tom back of the mouth and teeth. One thing to keep in mind, though, make sure that the upper teeth are always stationary. If you want to talk to someone who's lower and upper team moved as they spoke, you'd find it's a real wouldn't you? Same with your characters. When you're finished, you can exit the mouth layer. Extend the head timeline by selecting a frame across all layers and using F five. And now you can scrub across the timeline to test your newly built mouth. When you're done, go to the looping panel and select single frame. Next, you can move to the browse and then eyelids. Either trace them or make them up as you go. You'll want a couple identifiable emotions for both, plus a 3 to 4 frame. Blink for the eyes. Having the parts of the eyes separate allows your character to express complex emotion with only a few poses. Don't forget to set the looping on these two. You will now do the same as you've done before with hand hands. Themselves can stay on one layer, and you can add any props you need onto their own layer later. And now you have a fully functional character, sort of. In the following steps, we up the ante and redefined the character. Turn around 7. Make your character turn: - This is it, - guys. - We're almost done building our characters. - Start by lining up the 3/4 pose in the guide layer with the pose that you've just finished - tracing. - It's finally time to extend the time line across all layers and putting key frames on frame - 30 and 22 on frame 30. - Reposition and resize any parts that may look the same in both front and 3/4 view for parts - that change shape in different views, - such as the shape of the head or the torso. - Open symbol and put key frames on 30 and 22 as well and edit frame 30 to match the next - view. - Now you'll want to put a shape Tween between those frames. - Scrub over it to make sure that the shape doesn't work too much. - If so, - add your own hand drawn key frames. - Do this for any other part that won't change shape from one view to the other. - Move and resize as needed. - To fit the new view. - Use classic Tweens removing symbols such as the parts of the face. - If you need to go ahead and make extra layers and be sure to label them so that you know - what? - Therefore, - once the first turn is completed, - put a key frame on 52 60. - Repeat the process with the 3/4 to side view, - Turn in this side view. - You may need to use masking for things like the I that disappears or for the mouth check - out. - The additional resource is section in this unit for a quick video tutorial on masks. - Speaking amounts. - If you haven't already, - you may need to remake all of your mouths to fit the side view. - Once you've done all that, - select all frames in the main timeline and choose copy frames. - Be patient while the program copies all of its information, - then quick in the library tab and select new symbol. - Give it your character's name right. - Click the blankie frame and select paste frames. - When all of the frames reappear, - you can pat yourself on the back because you've just completed your character and made them - ready to put into any animation. - And in the next video, - I'll show you how to do just that 8. All the little steps to animating: - in this tutorial, - I will be going over lip sinking and moving your character to lip sing. - You'll want to go into the head symbol. - Make sure you have a layer for the audio inside, - then drag all the turn keys out of the way. - You can copy and paste if you need a particular head position to start next, - scrub over your audio layer to find the first vocal sound. - Place a key frame on the mouth layer, - then opened the mouth symbol and look for a mouth position that seems to fit that - particular sound and make note of what key frame it's on. - Go back into the head and in the looping section in the properties tab. - Type in the frame number and the mouth will change. - Continues scrubbing and keep framing. - You want to put enough mouths to convey speech, - but you don't want to put so many that the mouth appears spasmodic or that it slows down - the rest of the dialogue. - And don't cop out and do that lazy, - open and close enemy mouth, - either you're better than that. - When you finished animating the mouth, - you can do the same thing with the eyes and the browse have the pupils move, - the eyes blink and any other expressions you want using the same basic principle of the lip - sinking. - To make a blink, - put two key frames close to each other on the I layer, - maybe 34 frames apart, - and in the 1st 1 changed the looping to play once. - Now you're ready to animate the whole body. - Start by dragging all those keys and Tweens out of the way and move your character to its - starting pose. - Any time in the time layer your character changes. - Oppose maki frames across all layers and reposition them with the free transform tool for - the black cursor. - Use classic Tweens, - key frames and looping changes as needed. - Cause frequently to scrub across the timeline to see how your character is moving. - Copy and paste turn frames where you need them. - When you need to copy and paste turns, - make sure you copy to key frames. - Even if you're only using part of the turn. - Make sure that all layers playing in sync If something seems to jump a few frames, - check the frame number in the looping section. - If you need to go inside the body symbols make changes to individual timelines or include - more positions. - When you're finished or need feedback, - make sure the main timeline is extended far enough so you can play the whole audio and seen - Go to file export, - choose export movie and export. - Whichever wild type you like, - provided you have the right codex. - You can always export in flashes proprietary format. - The SWF or Swift and I have collected a lot of goodies for you to check out in. - The additional resource is section to help out, - despite all the different things you have to keep track of. - And do I believe that this is the easier portion of the project, - but it is subject to a lot of trial and error, - so please take advantage of the student project section. - If you get stuck or need feedback in the next unit, - I will briefly cover some advanced techniques. - So keep up the hard work and I'll see you then 9. My complete class demo: - Hey, - check. - Hell, - Uh, - all right. - You know what your can 10. Alternative animation tricks: If you want to make noodle limbs, start with a rectangular shaped symbol for that limb. When you need emotion, rotate the limbs of the part that attaches to the body is at a general angle for that particular pose plays a key frame where the extreme is within the symbol and using the black and white arrows. Bend the lines of the limb accordingly, but another key. Frame several frames ahead of the new pose and put a shape between on it. Edit your own frames in where necessary. You can also make separate limbs symbols for repeated actions like wiggly crazy arms or walk cycles. Here is another way to build the eyes. As you can see, this little kitty cat has a project color that is overlapped by its I, making our normal method of assembling the part TV ists and even impossible. This work around is a little more labour intensive in the long run, but the result is a clean looking I that can be used any time in the head symbol. You'll see three I related layers. The bottom is the eye itself, which is what the audience will see when the file is exported and what you will see when all the layers are locked. The next is the pupil in a master layer, and the uppermost layer is the mask, which allows us to see the pupil when the I is open. Within the eye symbol, there are three more layers. The top is the lines of the I. Only in the second layer is a mask you'll notice that is identical to the one in the head symbol. Finally, there's the masked I white. It's best to start with the eye symbol when building. As you draw the outline, fill it with color than cut and copy the fill into a key frame below it to make the mask. Even if the eyes closed, you need to include a tiny mask. You can then copy those frames into a new symbol and place it in the head layer. Do not use that simple inside the eye because it won't work. Now when you change the appearance of the I, you have to edit the looping frame for the I and the mask on the head Player. Smearing is a technique that has been used in two D animation for a long time it best illustrates lightning fast movement in this example of the kiddies arm is swatting at something. If the character has jointed limbs, you'll want to put a key frame at the start and end of the motion, usually no more than 3 to 5 frames, and delete the parts in the first key on a special layer. Quickly hand. Draw all those missing parts already in the middle of the action can draw every frame the messier, the better. You'll need to include motion lines or streaks that match the color of the object in motion to give it an overall frenetic appearance. When the parts resume their normal appearance, it's a good idea to continue the motion lines for 2 to 3 more frames, shrinking them into thin air. Thank you for enrolling. I know it might have been a challenge, but I hope you had fun participating in from layers to life, creating animated characters in Adobe Flash. If you haven't already check out the student gallery section to share your own work and to see what your fellow classmates have come up with. Thanks for watching good bye