Animate II | Character Design

Course Developer: Chris Georgenes
Instructor: Bill Drastal
Designer: Chris Georgenes
Editors: Gordon Drummond, Tara MacKay

Character Design

In this lecture, you'll learn why Yogi Bear wears a necktie. It's not just a fashion statement. Character © Hanna-Barbera Productions

What's the matter, Mr. Ranger? You don't have to be a kid to love animation. Ever since Felix the Cat made his screen debut in 1919, animated characters have delighted children and adults alike.

The history of character animation took an important turn in the mid-1990s with the development of Flash. Originally conceived as a pure animation tool, Flash was also used for online ads, Web sites, and application front-ends.

In February, 2016, Adobe transformed Flash Professional into Animate so that it could create projects for the new Internet that included mobile devices.

Few animators seem to have studied the art of character animation. In the hands of a skilled artist or designer, character animation can add an impressive element to any Web site or corporate identity, particularly in education and entertainment media. A recognizable character that represents a business or product can be a strong marketing tool. Bringing a character to life in a viral format such as an animated story or interactive game can give a business a unique advantage over the competition.

In this lecture, we will start building fundamental skills for animating characters in Animate. We'll begin by looking at some contemporary applications for animation and get a refesher with Animate's drawing tools, symbols, and timeline and how they work together to create an animation. These are building blocks you can rely on whenever you use Animate, whether it is for character animation, motion graphics, games, Web design, or simply just the pleasure of drawing.

 

Before we dig into the nuts and bolts of Animate, let's take a few moments to consider the bigger picture: In addition to character animation, which is most of the context of this course, what have been the capabilities of Animate's predecessor, Flash?

So let's look at a few examples that show the extent of projects that were created using Flash on the Web. In each case, I'll talk about the purpose of the project, and also comment on some cool features to look for.

George and John Duke It Out

Political satire meets Flash character design in the "This Land" movie on jibjab.com

In 2004, JibJab Media produced and animated a political parody featuring President George Bush and Presidential candidate Senator John Kerry. The cartoon quickly became one of the most popular animations on the Web, and put JibJab on the map. Millions of Web surfers flocked to jibjab.com to download and watch the "This Land" political satire, with predictable results—jammed servers and a bandwidth bottleneck. This cartoon is a perfect example of the right animation at the right time. While JibJab still features their parodies on their Web site, they have shifted their focus to electronic greeting cards.

The Bush/Kerry parody immediately became extremely viral, as fans of the cartoon sent the link to their contacts, creating an exponentially spontaneous marketing and advertising campaign that was virtually out of control.

The characters, rather than cartoon drawings of Bush and Kerry, are manipulated photos. The proportions were changed and the movements made more rigid and blocky for a fun, comic effect, and to make the characters look more puppet-like. Each body part was derived from actual photos that were edited in Photoshop to remove any unwanted background color and perform color correction. Then the backgrounds were made transparent in Photoshop and exported as PNG files (PNG files support transparency). Each of these files were imported into Flash where the characters were assembled as if they were puppets. It's a very unique-looking design style, similar to the South Park style of using flat, cut-out shapes. The style here dictates the method of animation. Very simple and crude, and since the style of the characters matches the style of the animation, the piece as a whole works very well.

Bear 71

Canadian wildlife comes to your computer in this documentary created in Flash.

In 2012, Leanne Allison and Jeremy Mendes created a Flash-based interactive project called Bear 71 about a female grizzly bear living in the Banff National Park in Canada. It was a dramatic documentary produced by the National Film Board of Canada showing the conflict between existing wildlife and the encroaching human population and their technologies.

At the age of three this bear was tagged and collared with an electronic tracking device. The bear is then tracked by park officials throughout the rest of her life.

Users viewing this project online can explore the bear's natural habitat captured by the park's trail cameras. The audience can also traverse through a digital grid created in Flash. To give the bear a sense of compassion and character, Canadian actress, Mia Kirshner, provides a voice for the bear.

monoface

Create your own funny face with the use of various photos of eyes, noses, mouths, and heads.

On the lighter side, mono, an advertising agency with ofiices in Minneapolis and San Francisco created this fun application built in Flash that allows users to create unique facial expressions using different images of their employee's faces.

Click on the eyes, nose, mouth, and head to cycle through the various images available. You can also shuffle and have a face automatically created for you. There are 759,375 different possibilities of your perfect face.

You might even want to use this as a tool to create the characters of your animation. You can find the Web site here.

Drawing in Animate

Animate offers several tools for you to choose from. You're sure to have used them before in your projects, so this will be a refresher before we get to the big guns, but with a focus on using the tools for character animation.

Each tool will yield different stylistic results. Some tools will create larger file sizes while other tools will result in smaller files. As you become more familiar with these tools, you will learn to choose the ones that best suits the artistic style you desire and any file size requirements you may have to abide by. It's the usual trade-off between file size and download times and playback performance. Let's take a look at each of Animate's drawing tools and discuss their pros and cons.

Brush Tool

The Brush tool is probably the most versatile of all the tools—especially when combined with a pressure-sensitive drawing tablet (but still very useful with a mouse as well). Drawing with the Brush tool is much like painting with a real brush, and is the most natural feeling tool when used with a tablet due to the support of pressure sensitivity and tilt features.

Some popular tablets used with Animate are made by Wacom. Wacom features several different sized tablets that include a cordless pen called a stylus. A Wacom tablet has become the industry-standard for digital artists over the years. Since a Wacom tablet can work in conjunction with your existing mouse, or replace your mouse completely, it use goes far beyond what you can do with Animate alone. Many digital designers use a tablet with any number of graphics editors and animation programs including Photoshop, Illustrator, and so on. But fear not, if you do not currently own a tablet, you can still use the Brush tool with one exception—both the tilt and pressure sensitivity features will not be available.

If you do have a tablet installed, selecting the Brush tool will provide you with two sub-selections that will affect your line quality. At the very bottom of the toolbox you will notice the Pressure modifier and Tilt modifier options. With one or both of these options selected, varied results will occur when drawing in Animate.

Here's what happens when drawing with the Brush tool (below left). The end result is actually a shape, meaning, it has vector points on all sides. The more points an object has, the bigger the file size. This particular shape was drawn with a pressure sensitive tablet. Notice the tapered ends and inconsistent line weight that results with varied amounts of pressure applied to the stroke.

Selecting the Pressure modifier gives a line that tapers or expands depending on the amount of pressure used on the tablet.	Without the Pressure modifier selected, the stroke is formed independent of pressure put on the stylus and tablet.

The shape above on the right was also made with the Brush tool but the difference is that the pressure sensitivity setting was turned off.

It is not necessary to use a tablet to draw with Animate, although a tablet can, in some cases, make life easier depending on the tools you want to use.

For example, the boy character I designed for my own business/identity was created entirely with the mouse and the Rectangle and Oval tools. I never had to use my Wacom tablet with the Brush tool. I could have easily chosen the Brush tool, but using the shape tools (which we'll discuss shortly) resulted in the ultra-clean line quality I was trying to achieve. Oftentimes the Brush tool can create several unnecessary points that bloat file sizes and can create headaches when trying to edit the shapes later on. For the boy, I was simply looking for very simple shapes and as small a file size as possible.

The Brush tool offers several sub-selections to help you draw certain effects (look for them near the bottom of the toolbox ):

(left to right) Paint Normal, Paint Fills, Paint Behind, Paint Selection, and Paint Inside.

	Paint Normal: Paints over lines and fills on the same layer. Paint Fills: Paints inside a fill color and outside of a shape (stage). Paint Behind: Paints behind existing fills and strokes. Paint Selection: Allows you to paint inside a selected fill only. Paint Inside: Start painting inside a fill and you'll never have to worry about going outside the lines again!

Pencil Tool

The Pencil tool is the perfect tool if you want a consistent line weight throughout your character and if you need to keep file size as small as possible. Lines made with the Pencil tool consist of fewer vector points than the Brush. A perfectly straight line will only have two points, one on either end. A curved line will have as few as three points or more depending on the number of curves.

Try it yourself! Create a curve with the Brush and a similar curve with the Pencil. Select them with the Subselection (white arrow) tool, and notice the difference in the number of points.

The Pencil tool also offers several line quality modes:

Straighten, Smooth, Ink (left to right).

	Straighten: A great option if you want to freehand draw very straight lines. Even with a shaky hand, your lines will snap straight once you finish drawing your stroke. Smooth: Your lines will automatically be smoothed while retaining the basic shape you intended to create. Ink: Line quality is unaffected. Great for very freehand/loose style drawings.

Shape Tools

The shape tools—Rectangle and Oval, as well as primitives and the PolyStar—create basic fills and strokes. Holding down the Shift key while using a shape tool will create a perfect circle or square.

You can select the fill and stroke color for your shape via the Properties Inspector (Window > Properties). Clicking on either swatch will open a color palette and allow you to edit the stroke or color choice. You can even specify no color for the stroke or fill by selecting the square with the red diagonal line through it .

The weight and style of the stroke can be adjusted in the Properties Inspector.

Onion Skin

The Onion Skin feature is located at the bottom of the Timeline panel, and it will come in very handy as you begin to animate your character designs in later lectures.

In traditional animation, or cel animation, characters "moved" through a series of acetate or celluloid sheets. To create the next frame of a character animation, the artist had to flip back to the previous frame as a reference. When sketching a character's movements, "onion skin" or semi-transparent paper was often used so artists could see through to the frames below. In Animate, Onion Skin mode works in the same way, allowing you to get a ghosted view of the previous frames to use as reference. With character design, this enables you to create precise motion from frame to frame.

Try out the two types of onion skinning as I explain them below. Start a new Animate document, draw a shape, and make several keyframes (five to ten). Vary the shape's placement on each keyframe slightly so you can see the effects of onion skinning as we try them out.

Select Onion Skin in the timeline to turn on this feature and add Onion Skin Markers to the timeline's playhead indicator. These markers can be clicked and dragged to expand the number of frames before and after the current frame.

Normal Onion Skin Mode

In normal Onion Skin mode, the selected 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.

My third frame is selected, and the markers are stretched from the first frame to the fifth so I can see transparent views of the previous and future frames.

Onion Skin Outlines Mode

If you click the button to the right of the normal Onion Skin button, you'll be in Onion Skin Outlines mode. The current frame is shown in full color while previous and future frames are shown as outlines. This is visually easier when working with complex animations.

Outlines mode makes my working monster frame easier to see, and still gives me plenty of information about the previous and future frames.

Symbols

Symbols are the very essence of what makes Animate ... well, Animate. You can make anything you draw or import into a symbol. And in almost all cases you should. Here's why...

Once an object is converted to a symbol, it automatically becomes an item in the Library. Every Animate document has its own Library which you can open (Ctrl+L on a PC, Command+L on a Mac) and drag a symbol onto the stage. Once you do, the object on the stage is referred to as an instance. No matter how many instances of a symbol reside on stage, Animate only needs to load it once. This is how Animate delivers streaming animations while maintaining small file sizes. You can also apply effects to instances such as scale, tint, alpha, and brightness, and apply tweens in combination with one or more effects. As you'll see throughout the course, we'll build our characters from lots of symbols, then move or modify the instances to give them motion—saving us lots of bandwidth!

But before we get too far ahead of ourselves, let's refresh our memory on symbols and their behaviors.

Symbol Behaviors

Create an object on the stage—anything at all. Select it (Selection tool or Ctrl/Command+A) and convert it to a symbol by going to Modify > Convert to Symbol or simply pressing the F8 key on your keyboard (Fn+F8 for some Mac users). The Convert to Symbol dialog will appear. In this dialog you can enter a name for your symbol, select one of three behaviors, and determine the registration point of your object. For now we are going to discuss what each behavior is and what it means.

This familiar window is where all symbols are born.

	Movie Clip: Movie clips are dynamic, meaning they can be targeted with JavaScript, Animate's programming language. 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 our main timeline. Button: Buttons have four states: Over, Up, Down, and Hit. These are represented as keyframes in a button symbol. You can place graphics in any of these states and then apply JavaScript to the instance of a button to add interactivity to your movie. Graphic: Graphic symbols are very similar to Movie Clips except that they are not dynamic and cannot be targeted with coding. You can, however, place a graphic symbol inside a movie clip symbol. Graphic symbols can have any number of frames and layers, and the most important feature is they will always be in sync with the main timeline and each other. This is very important when trying to create time-based animations like the ones in this course.

In this animation course, it is recommended to use Graphic behavior. Doing so will allow you to "scrub" the timeline to see your animation play while inside the Flash authoring environment. "Scrubbing" refers to manually moving the playhead back and forth to play back the contents of the timeline. Movie clip symbols do not play beyond frame one of their contents unless you test your movie (Ctrl+Enter on a PC, Command+Enter on a Mac) or export your movie as a SWF file.

Now that we've reviewed the basic drawing tools in Animate, let's take a look at how to sketch a character and prepare it for animation.

Developing Your Style

In the next chapter, we're going to start creating your character. It is at this point in the lecture that you need to consider the artistic style that you will apply to your character. Perhaps you already have a style that you are comfortable with. If not, look at other cartoons and animations and study the characteristics of the subjects that appeal to you. Be observant of the body shapes, hair styles, and wardrobes.

Australian animator, Josiah Brooks, says, "Style is something that we're constantly seeking to have the best thing of and yet is so readily admirable in other people."

To provide some inspiration, check out this exercise that cartoonist and animator, Kevin McShane, did over the course of two years. He created a self-portrait of himself and recreated it 100 times in the style of 100 different animators, from Walt Disney to Matt Groening.

Can you identify any of the animators by their styles? Need help? Go to Cartoon Kevin to reveal the styles that belong to which animator.

Creating a Character
Cleaning Up Your Sketches

Most good character designs start with a time-proven technology: 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. 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 Animate using any of the tools already discussed here. If you have drawings on paper you'd like to use as your character, then you'll need a scanner to scan and save them as a graphic file. Most scanners come with software that will make this process easy. Some of the more widely used graphic formats that Animate can import are PNG, GIF, JPEG, TGA, and TIFF.

You may also prefer to use a different program for drawing such as Adobe Illustrator. This works well since getting your illustrations from there into Animate is quite easy. Illustrator can export to the SWF format, which can then be imported into Animate, and the latest versions of each make going back and forth even easier. Illustrator offers advanced tools for drawing, though Animate users should note that more Illustrator-like drawing features are built in to recent versions. In most instances, Animate's drawing engine suits me for most my needs. But in the event you need more tools, external vector-based illustration programs are always an option.

Breaking Up Is Hard to Do

Once you have your sketch imported into Animate, it's time to think about how to break it apart into individual pieces that will make the process of animation easier. This is the hard part. This is a very conceptual process that depends ultimately on the style of animation that's going to be used and the style of your character.

Form follows function and it's crucial to your character's design. You must visualize how you think your character might move because this will ultimately dictate its overall design.

The character Dee Dee from Cartoon Network's classic Dexter's Laboratory is a good example of a well thought-out character design. We can visualize the different elements that make up her character and see how they could be placed on different layers in Animate.

Dee Dee is a well-planned character. Each of her body parts, and even her pigtails, are segmented. Each segment of her whole form (smile, ears, torso, and arms) can live on a separate layer for easy animating.

Look closely at lots of your favorite cartoon characters, and you'll begin to notice that many of their parts are drawn as separate parts to make animating easier, whether it's by hand or digitally.

More importantly, with all these elements as separate objects, we still want the character to appear to the viewer as a whole. Think back to our Yogi Bear example from the beginning of the course—Yogi's necktie isn't just a fun decoration to make him appear more like a human (though this is one reason he has it), but it connects separate elements that move independently to make him appear whole.

The character shown below (Marvel Comics' Flash) is an example of a difficult character to animate using separate symbols on different layers. Most of his body parts are connected as one flowing line. There's no distinct graphical separation from one limb to the other, making for either limited movement of each limb and/or frame-by-frame animation where a new limb is drawn each time to help maintain the fluidity of the character.

There are no clean separations in this character design, making him very fluid and whole, but also very painstaking to manipulate.

While the technique of animating frame-by-frame with a new drawing each time is certainly valid, it will create a much larger file size in Animate than if you were to reuse symbols. Before using this method, think about the time involved for you, the designer, as well as the wait time for the user.

Preparing Your Character for Movement

Here is an example of a sketch of the boy you met earlier, and then the finished product after redrawing him in Animate. This character was made entirely with the Oval and Rectangle tools. You can see how I used the original sketch as a reference, making subtle changes and adjustments as I fine-tuned the image and traced it with Animate's drawing tools.

Like Cartoon Network's Dee Dee, my boy has clear separations that make him easier to break apart and move around.

Here's how this boy was born. I brought my scanned pencil sketch into Animate. By creating a blank keyframe (F7) next to my working keyframe, I turned on the Onion Skin feature to see a ghost of my sketch. Finally I was ready to use any of the tools to draw the character in Animate, using the onion-skinned sketch as my guide.

As you can see below, I used the Oval tool to create the head of the character. When creating 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 is 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.

I was able to vary the weight of the black outline by nudging the inner shape with the arrow keys to offset it from the center point.

When you finish drawing an object or part of your character (for example, head) you can cut and paste it to a new layer. I like to select it and convert it to a symbol at this time as well—remember, Graphic symbols are the way to go here. You can also name your layers as well.

You'll have a lot of layers when you build your character. Name them all to keep things organized.

You can see above how I have created all new layers for each symbol/body part named them appropriately. To give a layer a new name, double-click the default layer name and type in your new name.

Giving a layer a descriptive name based on what kind of object it contains is good practice in terms of timeline and file management. It is especially important when working with more than one artist and even more so when working within larger team environments.

We also have the option to create layer folders. A layer folder is simply a new layer that acts like a folder to hold other layers, and it can be expanded and collapsed. This is extremely useful when dealing with multiple layers for several characters in the same document. 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 endless scrolling of the timeline and is a huge time saver.

Use layer folders for each character, or for large groups of similar body parts, like all of the facial features, and so on.

Another way to manage your document is building an organized Library. As you know, when you create and/or convert something to a symbol, it automatically becomes an object in the Library of your movie. To open the Library go to Window > Library or press Ctrl+L (Command+L on a Mac) on your keyboard. The Library will open and look something like mine below, and will give you a variety of information and options for each symbol contained in it. You can select each one by clicking a symbol name once and viewing a thumbnail in the Library's preview window.

The Library is also handy for storing symbols you don't want on stage at the moment. Just drag from the Library to the stage when you need them.

If the symbol contains an animation within it, there will be a "stop" and "play" button in the upper-right corner of the Preview window. These buttons will allow you to preview the animation right in the Library.

In the upper-right corner of the Library you'll also find a flyout menu with several options:

The menu button in the Library reveals lots of handy options (and some not so handy).

Of the many choices, the most commonly used are creating a new symbol or folder, renaming a symbol, and moving symbols to folders. You can also duplicate a symbol, delete one, edit one, or obtain its properties.

Character Design Tips

If you've never created your own character before, it can be a bit of a daunting process. In a client situation, you'll get some direction on what the character needs to do, say, and symbolize, but if you're working on your own, you might need some ideas and inspiration.

The biggest tip I can give you is to design your character in a 3/4 view. This is mid-way between profile and front view. Do it this way because it is easier to animate them in this view. A character in 3/4 view can look to either the left or the right and walk forward or at a slight angle towards the camera.

There are exceptions to this rule of course, such as the characters from the popular animated series, South Park. They are always in front view due to their very flat, paper cut-out style. But if you want to have more perspective and versatility for your character, 3/4 view will provide more options.

Here are some questions to ask yourself as you think up your own characters and put pencil to paper:

	Should the character be male, female, or neutral? Should it be a person, animal, or inanimate object brought to life? Will it be serious or lighthearted? Realistic or exaggerated? What features should have focus, based on the character's personality (for example, a talkative character might have a large, expressive mouth like Dee Dee or Yogi)? What features are less important? Keep in mind, one of the single most expressive parts of a character is its eyes. You can suggest a lot of emotion through a character's eyes, and for me, the bigger and simpler they are, the more expressive they can be.

So now that you're refreshed on symbols and drawing, and have some new insight into the process of creating a character for animation, let's get to the exercise!

Discussion Share your thoughts and opinions on animating with Animate with other students. Exercise Design your own character, sketching it first, then using onion skinning and drawing tools to trace it. Finally, break individual parts into symbols on separate layers.