Flash

Many animators use Macromedia Flash for detailed vector-based animation. One of the strengths of Flash is its versatile workflow and production process. I have developed some custom techniques that can help you create and manage the various moving parts of a complex animated character. In this article I reveal some of my best-kept Flash secrets while taking a single character from pencil sketch to fully animated Flash cartoon.

Drawing in Flash
Macromedia Flash offers several drawing tools for creating cool characters and more. Each tool differs from the others and yields different stylistic results. Some tools create larger file sizes while other tools result in smaller files. As you become more familiar with these tools, you will learn to choose the tool that best suits the artistic style you want and any file size requirements you may have to abide by. It's simply a trade-off between file size and download times and playback performance. In this section, I'll take a look at each of the Flash drawing tools and discuss its pros and cons.

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 and 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 graphics editors and animation programs, including Adobe Photoshop, Adobe Illustrator, and Macromedia FreeHand. 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 pressure-sensitive tablet installed, selecting the Brush tool will provide you with two subselections that affect your line quality. At the very bottom of the toolbox you will notice the pressure sensitivity and tilt options. With one or both of these options selected, varied results occur when you use the Brush tool in Flash.

The result on the left is a shape - meaning, it has vector points on all sides. The more points an object has, the bigger the file size. I drew this particular shape using a pressure-sensitive tablet. 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.

The Brush tool offers several subselections to help you draw certain effects:

• Paint Normal: Paints over lines and fills on the same layer
• Paint Fills: Paints inside a fill color and outside of a shape (on the Stage)
• Paint Behind: Paints behind existing fills and strokes
• Paint Selection: Enables you to paint inside a selected fill only
• Paint Inside: Keeps you from going outside the lines after you start painting inside a fill

Object Drawing
Object Drawing is a new feature in Flash 8. It enables you to draw shapes as individual objects that remain independent of each other. Gone are the days when you had to draw each shape on a separate layer to avoid one shape "cutting" into another. With Flash 8 you can simply turn Object Drawing on or off as a subselection of any of the drawing tools (Brush, Pencil, Pen, Oval, and Rectangle) under Options. For those of you familiar with Macromedia FreeHand or Adobe Illustrator, this is a familiar and welcome addition to Flash.

Drawing a shape over an existing shape without Object Drawing merges the shapes together, causing one to cut into the other. This is called Merge Drawing mode. This mode can be useful for cutting into shapes to create new shapes.

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. This is useful in situations where you may want to reposition objects or simply need to keep them independent.

I created my trademark boy character entirely with the mouse and the rectangle and oval tools (Figure 1). 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. For the boy graphic, I was looking for simple shapes and as small a file size as possible.

Pencil Tool
The Pencil tool is the perfect tool if you want a consistent line weight throughout your image and if you need to keep the file size as small as possible.

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.

The Pencil tool also offers several line quality modes:

• 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.

Shape Tools
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 color choice.

You can even specify no color for the stroke or fill by selecting the square with the red diagonal line through it.

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.

With the Pen tool, you click to create points on straight line segments, and click and drag to create points on curved line segments. You adjust straight and curved line segments by adjusting points on the line. You can convert curves to straight lines and the reverse. When creating curved lines you will 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 and dragging the tangent handles. Moving the handles in relation to the anchor point reshapes the curve.

Onion Skin Tool
The Onion Skin tool is located at the bottom of the Timeline panel.

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.

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.
• Onion skinning in outline mode: The current frame is shown in full color while previous and future frames are shown as outlines. This is easier on the eyes when working with several different keyframes before and after the current frame.

Working with Symbols
Symbols are the very essence of what makes Flash ... well, Flash. You can make 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 now referred to as an instance. No matter how many instances of a symbol reside on the Stage, Flash only needs to load it 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'll introduce you to symbols and their behaviors.

Create an object - anything, a simple shape will do. Select it (Ctrl+A) and then convert it to a symbol by choosing Modify > Convert to Symbol or pressing the F8 key. This opens the Convert to Symbol dialog box.

In the Convert to Symbol dialog box you can type a name for your symbol, select one of three behaviors, and determine the registration point of your object. The following list explains what each behavior is and what it means:

• Movie clip: Movie clips are dynamic, which means they can be targeted with ActionScript, the Flash 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 your main Timeline (Figure 2).
• 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 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. Graphic symbols can have any number of frames and layers. The most important feature is that they will always be in sync with the main Timeline and each other. This is very important when trying to create time-based animations.