Designing and animating characters in Flash Part 1: Drawing tools and symbols Adobe Developer Connection

Transcription

1 Designing and animating characters in Flash Part 1: Drawing tools and symbols Chris Georgenes Adobe Certified Expert mudbubble.com ( keyframer.com ( To showcase the many helpful, timesaving features in Adobe Flash CS4 Professional that allow you to achieve sophisticated visual results, this article series covers the entire process of creating a digital animated character, from its conception (either using the drawing and shape tools in Flash or scanning a hand-drawn character) all the way through building a complex animation with many different moving parts. In Part 1, I discuss the process of creating and converting objects to symbols and how to set them up to create motion tween spans and simulate realistic movements. I describe the different types of symbols and the unique behaviors associated with each type, and outline the step-by-step procedure that I follow to develop and define unique and believable characters. Along the way, I discuss some tips and tricks to help you save time, as well as some best practices to organize and manage your project assets. In Part 2 ( I describe some of my personal workflow techniques and explain how to use the new Motion Editor to create custom easing effects, how to apply filters to objects to create what I like to call a "2.5D" look, and how to use the Transform tool to skew and scale objects realistically. This article series uses the example of the boy character I created as a logo for my website, mudbubble.com ( If you'd like to follow along with the steps that are outlined here, be sure to download the sample files that are provided below. Requirements In order to make the most of this article, you'll need the following software and files: Flash CS4 Professional Try ( Buy ( Sample files: design_characters_flcs4.zip ( (ZIP, 383K) Prerequisite knowledge A basic understanding of the Adobe Flash CS4 Professional authoring environment and prior experience drawing and developing animated characters is recommended. Note: If you are still using Macromedia Flash Professional 8, you can refer to the previous version ( of this article. Learning the drawing tools Adobe Flash CS4 offers several drawing tools for creating cool characters and designs. Each tool differs from the others and yields different stylistic results. Some tools create larger file sizes while other tools result in smaller files. Page 1 of 22

2 As you become more familiar with these tools, you'll learn to choose the best tool to achieve the artistic style you want while adhereing to any file size requirements you may have. It's a tradeoff to balance between file size and download times and playback performance. In this section, I take a look at each of the drawing tools in Flash and discuss the pros and cons of each. Using the Brush tool The Brush tool is probably the most versatile of all the tools, especially when combined with a pressure-sensitive tablet. Drawing with the Brush tool is the same as drawing with shapes. It's the tool that feels the most natural when used due to the support of pressure sensitivity and tilt features. Wacom ( makes a series of popular tablets that differ in size, include a cordless, battery-free pen called a stylus, and work great with Flash. Since a Wacom tablet can work in conjunction with your existing mouse, or replace your mouse completely, its use goes far beyond that of Flash alone. Many digital designers use a tablet with any number of image editing and animation programs, including Adobe Photoshop and Adobe Illustrator. But fear not: If you do not currently own a tablet, you can still use the Brush tool (see Figure 1) with one exception both the tilt and pressure sensitivity features will not be available. Figure 1. Select the Brush tool icon in the Tools panel to start drawing. If you do have a pressure-sensitive tablet, however, you can choose from some subselection options for the Brush tool that will affect the line quality. At the very bottom of the Tools panel, you will notice the pressure sensitivity and tilt options. With one or both of these options selected, you can achieve various results when you use the Brush tool to draw in Flash (see Figure 2). Figure 2. Use the icons in the Tools panel to choose the pressure sensitivity and tilt settings. This next example shows what happens when you draw with the Brush tool. The result on the left is a shape, which means it has vector points on all sides. The more points an object contains, the bigger the file size of the project. I drew this particular shape using a pressure-sensitive tablet (see Figure 3). Notice the tapered ends and inconsistent line weight that result with varied amounts of pressure applied to the stroke. I also drew the shape on the right with the Brush tool; in this case, however, I turned off the pressure sensitivity setting. Page 2 of 22

3 Figure 3. Compare the shape drawn using the pressure-sensitivity setting turned on (left) and turned off (right). At first glance, the Brush tool may seem like a very basic tool to draw shapes, and it is very easy to use. However, there are many settings you can use to create unique and interesting designs. The Brush tool offers several tool effects to help you draw in different ways (see Figure 4). Here's a description of each of these effects: Paint Normal: Paints over lines and fills on the same layer Paint Fills: Paints inside a fill color and outside a shape (on the Stage) Paint Behind: Paints behind existing fills and strokes Paint Selection: Paints inside a selected fill only Paint Inside: Prevents you from painting outside the lines when you begin painting inside a fill Figure 4. Examples of different types of Brush tool effects. Object Drawing Object Drawing enables you to draw shapes as individual objects that remain independent of one another. Gone are the days when you had to draw each shape on a separate layer to avoid one shape "cutting" into the other. With Flash CS4 you can simply turn Object Drawing on or off as a subselection of any of the drawing tools (Brush, Pencil, Pen, Oval, and Rectangle) by choosing the desired option. For those of you familiar with Adobe Illustrator, this feature will be familiar territory (see Figure 5). Page 3 of 22

4 Figure 5. Object Drawing subselection button. When Object Drawing is turned off, drawing a shape on top of another causes the second shape to cut into the first. This is called Merge Drawing mode. This mode can be useful for cutting into shapes to create other complex shapes (see Figure 6). Figure 6. In Merge Drawing mode, shapes drawn on top of other shapes will "merge," which means if you select one of the shapes and move it, the underneath shape is cut away. By contrast, when you draw a shape in Object Drawing mode, it automatically becomes an Object Drawing and cannot be merged with other shapes. You can overlay Object Drawings without fear of cutting into them (see Figure 7). This is useful in situations where you may want to reposition objects or simply need to keep them independent. Page 4 of 22

5 Figure 7. Shapes drawn in Object Drawing mode do not merge. I created my trademark boy character entirely with the mouse and the rectangle and oval tools. I never had to use my Wacom tablet in combination with the Brush tool. I could have easily chosen the Brush tool, but using the shape tools resulted in the ultra-clean line quality I was trying to achieve. Often times the Brush tool can create several unnecessary points that bloat file sizes and create headaches when trying to edit the shapes later on. As I was creating the boy graphic (see Figure 8), my goal was to use simple shapes and generate a character with as small a file size as possible. Figure 8. Boy character created using the shape tools. Pencil tool The Pencil tool is the perfect tool if you want a consistent line weight throughout your image. It allows you to keep the file size of the project as small as possible (see Figure 9). Figure 9. Select the Pencil tool from the Tools panel. Lines drawn with the Pencil tool consist of fewer vector points. A perfectly straight line has only two points, one on either end. A curved line has three points or more depending on the number of curves (see Figure 10). Page 5 of 22

6 Figure 10. Lines drawn with the Pencil tool. The Pencil tool also offers several line quality modes (see Figure 11): Straighten: This is a great option if you want to draw very straight lines by freehand. Even with a shaky hand, your lines will "snap" straight after you finish drawing your stroke. Smooth: If you use this option, your lines will automatically be smoothed while retaining the basic shape you intended to create. Ink: This option leaves your line quality unaffected. This is great for freehand or loose-style drawings. Figure 11. Quality modes of the Pencil tool. Shape tools The shape tools (Oval and Rectangle) create primitive fills and strokes. Adobe Flash CS4 also provides the Rectangle Primitive, Oval Primitive, and Polystar tools (see Figure 12). Holding down the Shift key while drawing with a shape tool creates a perfect circle or square. Figure 12. Shape tools accessed from the Tools panel. Page 6 of 22

7 The Rectangle Primitive tool, when selected, is easily customizable by adjusting the settings in the Property inspector. Use the slider to create rounded or inverted corners with ease (see Figure 13). Figure 13. Set the Rectangle Primitive options in the Property inspector. The Oval Primitive options make it possible to achieve some interesting shape manipulations. While the primitive is selected, the Property inspector provides you with three different sliders to adjust the start and end angles of your oval, as well as an inner radius slider (see Figure 14). Page 7 of 22

8 Figure 14. Update the properties of the Oval Primitive tool to achieve different effects. The Polystar tool makes quick work of creating polygon and star shapes with any number of sides and points (see Figure 15). You can even specify the weight of the stroke if a stroke color was previously defined in the stroke color swatch of the Property inspector. Page 8 of 22

9 Figure 15. Use the Tool settings to adjust the shapes drawn with the Polystar tool. You can select the fill and stroke color through the Property inspector. Clicking either swatch opens the color panel and enables you to edit the stroke or fill color (see Figure 16). Figure 16. Change the color of a selected shape in the Property inspector. You can even specify no color for the stroke or fill by selecting the square with the red diagonal line through it (see Figure 17). Page 9 of 22

10 Figure 17. Select the square in the upper right corner to draw without color. Pen tool To draw precise paths as straight lines or smooth, flowing curves, you can use the Pen tool. Create straight or curved line segments and adjust the angle and length of straight segments and slope of curved segments (see Figure 18). Figure 18. Select the Pen tool from the Tools panel. With the Pen tool, you click to create points between straight line segments, and click and drag to create points between curved line segments. You can adjust straight and curved line segments by adjusting points on the line. You can also convert curves to straight lines and the reverse. When creating curved lines, you'll notice that Flash creates tangent handles for each anchor point. The lines can be edited later with the Subselection tool (white arrow) by selecting an anchor point and dragging the tangent handles. Moving the Page 10 of 22

11 later with the Subselection tool (white arrow) by selecting an anchor point and dragging the tangent handles. Moving the handles in relation to the anchor point reshapes the curve (see Figure 19). Figure 19. Line segment drawn with the Pen tool that is in the process of being edited with the Subselection tool. Onion Skin tool The Onion Skin tool is located at the bottom of the Timeline panel (see Figure 20). Figure 20. Click the icon below the Timeline to access the Onion Skin tool. When you select the Onion Skin tool, the application adds Onion Skin markers to the playhead indicator of the Timeline. You can drag these markers to expand the number of frames before and after the current frame (see Figure 21). Figure 21. Markers in the frames of the Timeline allow you to define which frames will be shown in the Onion skinning effect. Flash provides two flavors of onion skinning: Normal onion skinning: The current frame is shown in full color while the previous and future frames are dimmed progressively. This gives an impression of a series of drawings created on semi-transparent paper and then stacked on top of each other (see Figure 22). Page 11 of 22

12 Figure 22. The object in the current frame is prominent while the other frames shown in the Onion skinning effect help you decide how to adjust the objects. Onion skinning in outline mode: The current frame is shown in full color while previous and future frames are shown as outlines (see Figure 22). This may be easier on the eyes when working with several different keyframes before and after the current frame (see Figure 23). Figure 23. Onion skinning in outline mode. Now that you have a good understanding of the drawing tools and working with onion skinning, let's move on to another important concept converting the artwork you've created into symbols. The next section describes how to create and edit symbols, and discusses how they are used to create animations in Flash. Working with symbols Symbols are the very essence of what makes Flash..., well, Flash. You can convert anything you draw or import into a symbol. And in almost all cases you should. Here's why: When an object is converted into a symbol, it automatically becomes an item in the Flash document's Library. Every Flash document has its own Library from which you can drag a symbol to the Stage. When you do, the object on the Stage is referred to as an instance. No matter how many instances of a symbol reside on the Stage, Flash needs to load it only once. This is how Flash delivers streaming animations while maintaining small file sizes. It's extremely efficient to reuse symbols as many times as possible. You can also apply effects to instances such as Scale, Tint, Alpha, and Brightness, and apply motion tweens in combination with one or more effects. However, before I get too far ahead of myself, I should introduce you to symbols and describe the different types. Page 12 of 22

13 Create an object, such as a simple shape. Select it and then convert it to a symbol by choosing Modify > Convert to Symbol or by pressing the F8 key. This opens the Convert to Symbol dialog box (see Figure 24). Figure 24. Enter the name of the symbol in the Convert to Symbol dialog box. In the Convert to Symbol dialog box you can type a name for your symbol, select from one of three behaviors and determine the registration point of your object: Movie clip: Movie clips are dynamic, which means they can be targeted with ActionScript, the programming language of Flash. They can have any number of layers and frames, but their timelines are independent of all other timelines. Page 13 of 22

14 of Flash. They can have any number of layers and frames, but their timelines are independent of all other timelines. Think of a solar system: each planet is a movie clip, looping endlessly and independently around a sun, which is the main Timeline. Button: Buttons have four states: Over, Up, Down, and Hit. These are represented as keyframes in a button symbol's timeline. You can place graphics in any of these states and then apply ActionScript to the instance of a button to add interactivity to your Flash movie. Graphic: Graphic symbols are very similar to movie clips with the exception that they are not dynamic and cannot be targeted with ActionScript. However, you can place a graphic symbol inside a movie clip symbol if the object needs to be dynamically controlled. Like movie clips, graphic symbols can have any number of frames and layers. Animators prefer to place entire animations inside a graphic symbol's timeline, allowing it to be controlled via the Property inspector in the parent timeline. The most important feature is that they will always be in sync with the main Timeline and all other graphic symbol's timelines. This is very important when trying to create frame-based animations which is why most animators prefer working with graphic symbols for fixed-frame output formats (such as video). In this animation tutorial, I recommend using graphic symbols. This enables you to scrub the Timeline to see your animation play while inside the Flash authoring environment. The term scrubbing refers to the practice of moving the playhead back and forth manually to play the contents of the Timeline. The content in movie clip symbols do not play beyond Frame 1 unless you test your movie or publish it as a SWF file. Cleaning up your sketches Every good design usually starts with the time-tested pencil and paper. I've had some of my most creative moments during long and boring management seminars and sometimes a doodle on a cocktail napkin can be the inspiration for a great character. The fact is, you never know when or where you'll be inspired, so keep a pencil in your back pocket or behind your ear at all times. You can sketch in Flash using any of the tools I've previously discussed. If you have drawings on paper that you'd like to use as the basis for a Flash character, you'll need to scan and save them as graphics files. Most scanners come with software that makes this process easy. Some of the more widely used graphic formats that Flash can import are PNG, GIF, JPEG, TGA, and TIFF. (For details, check out the TechNote, Supported File Formats for Flash CS4 Professional ( After you import your sketch into Flash, think about how to break it apart into individual pieces. This is the hard part. It's a conceptual process that depends ultimately on your style of animation and the style of your character. Form follows function, if I may borrow a phrase from Volkswagen's marketing campaign, and this is crucial to your character's design. You must visualize how you think your character might move, which ultimately dictates its overall design. The next example shows both the original sketch and the finished product after redrawing it in Flash (see Figure 25). This character was made entirely with the Oval and Rectangle tools. Notice how I used the original sketch as a reference, making subtle changes and adjustments as I fine-tuned the image, tracing it with the drawing tools in Flash. Page 14 of 22

15 Figure 25. From sketch to Flash my trademark character. After inserting a blank keyframe (F7) next to your sketch, you can turn on the Onion Skin feature to see a ghost of your sketch. Use any of the drawing tools to do your work, using the onion-skinned sketch as your guide. As you can see in Figure 26, I used the Oval tool to create the head of the boy character. When you create body parts and various accessories for your character, try to imagine and then draw the entire shape. You must visualize your character as if it were truly a 3D object existing in space. Even though this is a two-dimensional format, thinking like a 3D artist can help you visualize how certain parts will be "attached" to others. Page 15 of 22

16 Figure 26. Character's head defined by an oval shape. When you finish drawing a specific part of your character, copy and paste it to a new layer. I like to select it and convert it to a symbol at this time. You can also start naming your layers, but I recommending waiting until after you've created all of the symbols. Check out the unique Flash trick described in the next step for more details. Placing symbols on layers to save production time I always convert my objects to symbols and name them, following a simple, yet descriptive naming convention. For example, I name the symbols to correspond with the graphics used for each part of the digital puppet: head1, eye1, mouth_wide, and so on. However, I do not take the time to name all of my layers because there's a much easier and faster way. After I create and namedall of my symbols, I simply select them all and copy them. Then I create a new layer and select the option to paste them in place by choosing Edit > Paste in Place (or pressing Ctrl+Shift+V on Windows or Command+Shift+V on Mac). This operation places all of the symbols on one layer, yet they remain separate symbols. Before completing the next step, delete all of the other layers so that you have only the single layer that contains all of your character symbols. The next step is the coolest part. Select all again and then right-click (or Command-click on Mac) your character and select the option to Distribute to Layers from the context menu (see Figure 27). Page 16 of 22

17 Figure 27. Select all of the symbols, then right-click and select the option to Distribute to Layers. Voilà! Flash not only placed each symbol on its own layer but named each layer (see Figure 28) based on its symbol name! Nice trick, huh? Page 17 of 22

18 Figure 28. Body parts and symbols for my trademark character in the Timeline. Document management best practices The following example shows how my Timeline looks once my character is designed, converted to symbols, and ready to be animated: Name your layers descriptively. If you want to edit the name of a layer, double-click the layer name and type in a new name. Naming layers with a descriptive name (based on the kind of object it contains) is good practice in terms of Timeline and file management. This is especially important when you are working with more than one artist and even more so when working within team environments. Layer your folders. The option to create layer folders has been available since Macromedia Flash MX. A layer folder is simply a new layer that acts like a folder to hold other layers (see Figure 29). You can expand and collapse them. This is extremely useful when dealing with multiple layers for several characters. You can create a layer folder for each character and place all layers inside these folders, giving you the option to collapse them all except for the character you are working on. This prevents endlessly scrolling through the Timeline and is a huge timesaver. Page 18 of 22

19 Figure 29. Organize the different parts of your project with layer folders. Organize your Library. Another way to manage your Flash document is to build an organized Library. As I mentioned earlier, when you create or convert an item to a symbol, it automatically becomes an object in the Library of your movie. To open the Library, select Window > Library (or press Ctrl+L for Windows and Command+L for Mac). The Library provides you with an interface to access a variety of information and options for each symbol contained in it. You can select each symbol by clicking a symbol's name. When a symbol is selected, you'll see a thumbnail in the Library preview window (see Figure 30). Page 19 of 22

20 Figure 30. Library containing all of the elements of my trademark character. If the symbol contains an animation within it, you'll also see a Stop and Play button in the upper right corner of the preview window. These buttons allow you to preview the animation within the preview window. The upper right corner of the Library also contains a pop-up menu with several options for creating a new symbol, folder, font, or video. You can also rename a symbol, move symbols to folders, duplicate or delete a symbol, or edit and obtain the properties of a symbol (see Figure 31). Page 20 of 22

21 Figure 31. Select the various Library management tasks in the Options menu. There are many different ways that you can choose to organize your assets in the Library. The important thing is to pick a strategy and use descriptive names that make sense to you, and then stick to using those naming conventions. You'll notice that the items in the Library are sorted alphabetically if you select the Name header immediately above the symbol names. Each of the headers allows you to sort the list, to help you locate items by type, date modified, and so on. Where to go from here It's always the little details that make a project so intriguing and enjoyable. Since we are creating animated characters, they don't have to be photorealistic but they should be believable. Page 21 of 22

22 Part 2 ( describes a way you can finesse your characters to polish them and prepare them for a starring role in the animation. I also discuss some tips to set up the Timeline and get ready to yell "Action!" If you wish, you can also visit the Animation Learning Guide for Flash ( which explains how to use all of these animation types in Flash CS4 Professional, including the improved way of creating and editing motion tweens using the timeline and Motion Editor. About the author Chris Georgenes, an Adobe Certified Expert, is Art and Animation Director for Acclaim Games ( Prior to that, he spent eight years as a freelance Flash designer and animator for clients such as Adobe, Microsoft, Ogilvy, Digitas, Yahoo!, and AOL, to name a few. His work has appeared on broadcast networks such as ABC, HBO, and Cartoon Network. Chris maintains mudbubble.com ( as his online portfolio and keyframer.com ( as his blog, animation resource, and discussion forum. Chris is the author of How to Cheat in Adobe Flash CS4 ( (Focal Press, 2009) and is soon publishing Flash Studio Techniques (Adobe Press). When Chris isn't designing, animating, or writing, he teaches the Flash animation course for Sessions.edu ( plays drums in a professional band, and somehow balances the rest of his time with his supportive wife and three kids. Copyright 2009 Adobe Systems Incorporated. All rights reserved ( ( Page 22 of 22