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 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.
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.
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.
In this animation tutorial, I recommend using the Graphic behavior. This enables you to scrub the Timeline to see your animation play while inside the Flash authoring environment. Scrubbing refers to moving the playhead back and forth manually to play back the contents of the Timeline. Movie clip symbols do not play beyond Frame 1 of their contents unless you test your Flash movie (Ctrl+Enter) or export your movie 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. 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 already discussed. If you have drawings on paper you'd like to use as the basis for a Flash character, you'll need a scanner to scan and save them as graphics files. Most scanners come with software that will make this process easy. Some of the more widely used graphic formats that Flash can import are PNG, GIF, JPEG, TGA, and TIFF.
After you import your sketch into Flash, think about how to break it apart into individual pieces. This is the hard part. This is a very 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, and this is crucial to your characters' design. You must visualize how you think your character might move, which ultimately dictates its overall design.
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 Flash drawing tools.
After creating a blank keyframe (F7) next to your sketch, you can turn on the Onion Skin feature to see a ghost of your sketch. You can use any of the drawing tools to draw, using the onion-skinned sketch as your guide. I used the Oval tool to create the head of the boy 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.
When you finish drawing an object of your character, copy and paste it to a new layer (Figure 3). I like to select it and convert it to a symbol at this time. You can also name your layers.
Saving Time Placing Symbols on Layers
I always
convert my objects to symbols and name them with a simple yet
descriptive naming convention. For example, head1, eye1, mouth_wide,
and so on. However, I do not create names for my layers at this time
because there's a much easier and faster way. After all my symbols are
created and named appropriately, I simply select them all (Ctrl+A) and
copy (Ctrl+C) them. I now create a new layer and paste them in place
(Ctrl+Shift+V). This places them all on one layer, yet still as
separate symbols. Delete all your other layers so you end up with just
the one layer containing all of your character symbols (Figure 4).
The next step is the coolest part. Select all again and then right-click over your character and select Distribute to Layers.
Voilá! Flash has not only placed each symbol on its own layer but has named each layer based on their symbol names! Nice, huh?
Saving Time Through Good Document Management
If
you want to edit the name of a layer, double-click the layer name and
type in a new one. Giving layers 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 working with more than
one artist - and even more so when working within team environments.
Since Flash MX (version 6), you've had the option to create layer folders. A layer folder is simply a new layer that acts like a folder to hold other layers. They can be expanded and collapsed. This is extremely useful when dealing with multiple layers for several characters. You can create a layer folder for each character and place ll 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.
Another way to manage your Flash document is building an organized library. As I mentioned earlier, when you create or convert something 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. The library gives you a variety of information and options for each symbol contained in it. You can select each one by clicking a symbol name and view a thumbnail in the library preview window.
If the symbol contains an animation within it, you also see a Stop and Play button in the upper right corner of the preview window. These buttons enable you to preview the animation within this preview window.
The upper right corner of the library contains a pop-up menu with several options. You can create 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.
Introducing "2.5D"
Just because tweening in Flash
is easy does not mean you can always rely on it for creating convincing
animations. Don't get me
wrong: Tweening can be a great timesaver and can get the job done, as
long as the job doesn't require anything more than simple objects
moving around the Stage.
But what if you could push the tweening method to give more realism to your character? What if you could harness its simplicity and make it work in ways not too many other Flash users have thought of? What if you have learned everything there is to know about tweening, go back to the first 10% of that knowledge, and take a left turn? Where would that take you?
In this lesson, I'm going to reveal a truly killer Flash animation technique that will actually create what some consider a convincing 3D effect. The cool thing is you never leave the Flash environment; you remain in the 2D realm. You are now in a dimensional limbo. If it's still 2D but looks like 3D, then what exactly is it?
Welcome to the world of 2.5D animation.
Yup, 2.5D animation. I made that name up. I don't claim to have invented this technique but so far the name, two-and-a-half D, may be mine.
I have turned on the outlines feature so you can see how each part of the character's body has been separated (Figure 5). This is very important because motion tweens require only one symbol per layer during the tween. If you try to have two different symbols on the same layer within the same motion tween, the tween will break.
I have even taken the time to name each layer. Although this is not necessary, it does help to have layer names because, as your Timeline grows, you eventually start to scroll the Timeline more and more. It is also important when working in team environments where file sharing is common. You can never be too organized.
After your Timeline is set up, you can begin to apply motion tweens to your character. For this example, I animated only the symbols that make up the character's head, so I made sure all other layers were locked to avoid making changes to the wrong layer or layers.
Turning Heads - Part 1
First I created my
keyframes where I wanted the head to start and stop turning. Click and
drag vertically from the top to the bottom layer and convert to
keyframes (F6). Do this twice, keeping about 15 to 20 frames in between
keyframes. In my example, I made keyframes on frames 15 and 30.
Keeping the playhead on the frame at which I wanted the character's head turn to stop, I edited each of the symbols on the Stage using the Free Transform tool.
Follow my lead. I started with one of the eyes. You need to imagine the eyes wrapping around a sphere (the head). If this were truly a 3D object, one eye would get bigger as it comes closer towards you. It also wouldn't be as egg-shaped, so making it wider is also a good idea. Because my character's eye consists of three different symbols, I scaled them all at once by holding down the Shift key and selecting all three symbols. Then I used the Free Transform tool to scale them at the same time. Don't worry about being perfect at this point. You can always fine-tune your animation later. This is almost blind work, as you won't know exactly how it will look until you apply the motion tweens (Figure 6).
Let's move on to the nose. Because the character is turning towards us, everything closest to us should move from right to left. If it were truly a 3D object, the nose would be sticking straight out from the head. To make this a little more convincing, I turned it slightly downwards as I moved the nose from right to left. Don't forget to scale it up a bit as it is also coming closer towards the viewer.
Next I moved the other eye over while scaling it larger and making it less of an oval shape and more circular. I also moved over both eyebrows and rotated them slightly while scaling them up.
At this point I applied motion tweens to each of the layers where I made these edits. It's time to reveal what I have actually done and determine whether it needs further adjustments.
Don't worry, there's almost always a lot of tweaking to get this effect just right.
View the file mudbubble_boy.swf to see the final animated effect.
Not a bad start, is it? With a few simple edits with the Free Transform tool, you can start to see the effect come to life. It's not perfect but at this point it doesn't have to be. You can continue to tweak the amount of scaling, positioning, and skewing of your elements until you achieve the desired effect.
Turning Heads - Part 2
Next I address the remaining assets of the character's head to further emphasize his head turning.
The most important part of this illusion is convincing the viewer that this flat, 2D object has volume and mass. You also need to trick the user's eye into perceiving depth in the animation. You need to imagine this character as being built from a variety of 3D objects in space. If the character were truly turning his head in a 3D space, what is in the foreground would travel in the opposite direction from what is in the background. To help you imagine this, picture the earth spinning on its axis in space. The earth essentially spins counter-clockwise. This means the surface closest to us travels from right to left. The surface farthest from us travels from left to right. Let me apply this to my character's head.
Because the head symbol itself is simply a flat oval shape, all I really needed to do is skew it a little bit. I also chose to nudge it a little to the right. I did this because when someone turns to face you, you see more flesh to the right of the left eye. Also, because this head shape is farther back from the facial features, it should move slightly to the right a few pixels. Don't over-exaggerate some of these movements. This is an effect best executed with many subtle movements rather than a few major changes. It's the sum of its parts that make up the whole because several subtle animations complete the overall dramatic effect.
Next I rotated the brim towards the right side of the character's head. Remember, objects farther back move in the opposite direction to objects in the foreground.
I also used the arrow keys to nudge the brim over to the right so it appears to be behind the character's neck even more.
The same principle applies to his hat. I skewed the hat to make it thinner while moving it over to the right a few pixels.
The ear got skewed a bit as well as it moved upward and to the left.
Don't forget the hair. I designed the hair as three individual symbols so they could be edited independently. As the head turns towards the viewer, I skewed them down towards the character's eyes and made them shorter as if they were pointing towards the viewer a little more. This is cheating the perspective a bit and can be difficult to achieve. There is a limit to how far you can skew and scale a symbol. Remember, this effect is better when used sparingly and in a subtle way. You can only push the envelope so far. Less is more.
Next I added some motion tweens to the rest of the layers to which I made edits. If you followed my lead so far, play back the results.
Not too shabby, is it? You clearly can see his head turn as if it were a 3D object. Remember that most characters, if human, have two ears. To have the character's second ear coming around the right side of his head, create a new layer below all other layers. Copy the existing ear and paste it to this new layer in a blank keyframe midway between the motion tweens (around Frame 22). Then select Modify > Transform > Flip Horizontal to flip it. Position the ear on the right side behind the head so it's sticking out about half way. This is about as much of the ear you need to see.
Add a second keyframe on Frame 30 (where all the other keyframes reside).
Go back to the ear's first keyframe and reposition the ear almost completely behind the head. I have converted some of the other layers to outlines so you can see the ear's new position.
Now just apply a motion tween. Play back your animation to see the ear reveal itself as the head "turns" towards you. This small detail adds an enormous amount of realism to the head turn as it helps create the illusion of the head being a rounded sphere (this requires Flash Player 8).
Feel free to scrub the Timeline and make adjustments to your symbols if something doesn't feel quite right. This depends on how much of a perfectionist you are as well as on the complexity of your character. The boy character in this example is fairly complex, given the amount of objects I used in his design.
Custom Ease In/Ease Out Panel (Flash Professional 8 Only)
I'd like to add one more finishing touch to the head turn. As you know, motion tweens can look pretty static due to their constant rate of speed. They can look pretty jerky in their initial state. Thanks to a new feature in Flash Professional 8, however, you can add some "easing in and easing out" to make the transition softer. The trick is how to ease in and out inside of a single tween.
The first step is to apply the motion tween. You can do this in one of two ways:
- Right-click the frames in between the two keyframes. From the pop-up menu, select Create Motion Tween.
- Select all layers with the selection tool by clicking and dragging, highlighting them all in black. From the Tween drop-down menu in the Property inspector, select Motion.
Clicking this button opens the new Custom Ease In/Ease Out panel.
With the new Custom Ease In/Ease Out panel you have a lot more control over easing than you did with previous versions. The Custom Ease In/Ease Out panel displays a graph that represents the degree of motion over time. The horizontal axis represents the frames, while the vertical axis represents the percentage of change to the object.
The graph's curve dictates the rate of change of the object. When the curve is horizontal (no slope), the velocity is zero; when the curve is vertical, you don't have any easing or delay to the objects' movement.
If you select the Use One Setting for All Properties check box, the current curve is applied to all properties (Position, Rotation, Scale, Color, Filters). If you deselect this check box, you can apply a separate curve to each of the properties, as follows:
- Position: Specifies custom ease settings for the position of an animated object on the Stage.
- Rotation: Specifies custom ease settings for the rotation of an animated object. For example, you can fine-tune how quickly or slowly an animated character turns around to face the user on the Stage.
- Scale: Specifies custom ease settings for the scale of an animated object. For example, you can customize the scale of an object more easily so it appears to be moving away from the viewer, then coming closer, and then moving away again.
- Color: Specifies custom ease settings for color transitions applied to an animated object.
- Filters: Specifies custom ease settings for filters applied to an animated object. For example, you can control the ease setting of a drop shadow that simulates a change in the direction of a light source.
- Play and Stop buttons: Lets you preview an animation on the Stage using all the current velocity curves defined in the Custom Ease In/Ease Out dialog box.
- Reset button: Lets you reset the velocity curve to the default, linear state.
Using frame indicators (represented by square handles), you click where you want an object to ease in or ease out (accelerate or decelerate). Clicking the handle of a control point (the square handles) selects that control point, and displays the tangent points (hollow circles) on either side of it. You can use the mouse or the keyboard's keys to drag the control or tangent points to new positions.
Tip: By default, the control points snap to a grid. You can temporarily turn this off by holding down the X key while dragging the control point.
Clicking on the curve away from any control points creates a new control point to the curve. Clicking anywhere away from the curve and control points deselects the control point that is currently selected.
To make an animation start gradually and end gradually (Figure 7). I highly recommend experimenting by creating and editing control points and tangents and playing back your animation using the Stop and Play buttons in the lower left corner of the panel. It won't be long before you have a good feel for the relationship between the curve and its effect on the animation.
Now play back your animation. Notice how the head-turn eases in and then out as it approaches its end (Figure 8). To animate the head turning back again to its original position, you only need to copy frames from Frame 1 and paste them after the tween you just created. Repeat the same procedure by adding a motion tween, and for easing in and out and you have a character that can turn its head back and forth in a cool way.
Applying Filters
Yes, the impossible is now
possible in Flash. Flash 8 introduces graphic filters and blend modes,
which the Flash community has accepted with open arms. You can now
apply effects such as Drop Shadow, Blur, Glow, Bevel, Gradient Glow,
Gradient Bevel, and Adjust Color to any movie clip instance. So have
fun with your character by applying a drop shadow.
The first thing to do is place your character in a movie clip symbol. In the Timeline, click and drag to select all frames across all layers. (Hint: start on Frame 1 in the upper left corner and drag diagonally to the last frame on the bottom layer.) This highlights your frames and layers in black. Select Edit > Timeline > Copy Frames (or press Ctrl+At+C) to copy the entire Timeline to the Clipboard. (You could also right-click anywhere on your highlighted frames and select Copy Frames from the context menu.) Now hold that thought until the next step.
Open your Library (Ctrl+L) and from the upper right drop-down menu, select New Symbol > and then select Movie Clip behavior and click OK. You are now in Edit mode for this new symbol. Select the first frame of the Timeline and select to Edit > Timeline > Paste Frames (or press Ctrl+Alt+V) to paste your selection. (You could also right-click over Ctrl+Alt+Frame 1 and select Paste Frames from the context menu.)
Return to the main Stage and create a new layer. Locate the movie clip symbol you just created in the Library and drag it to the Stage on this new layer.
Delete all other layers that contain your original character. At this point your Timeline should have one layer and one movie clip symbol containing your character animation.
There are two kinds of shadows you can create. A standard drop shadow creates a shadow below the instance that is slightly offset from the original. This type of effect is often very flat and similar to a shadow cast against a wall or any other flat surface. It is not very convincing if you are trying to achieve a shadow cast on the ground. For a more realistic shadow effect, you need to add a few simple steps.
Duplicate the movie clip instance and place it behind the original instance. (You can keep the duplicate on the same layer and arrange it behind the original instance, or paste it to a new layer below the original.)
Select the duplicate instance and, in the Filters tab of the Property inspector, select Drop Shadow from the Plus (+) menu. Next, adjust the strength level to around 45% and select Hide Object. This hides the movie clip object but reveals the Drop Shadow Filter properties. You can make further adjustments by setting Quality to Low, Medium, or High, or modifying the amount of blur, color, angle, or distance of the blur effect from the original graphic.
To prevent this effect from looking too much like a drop shadow against a flat wall behind the original object, use the Free Transform tool to skew the filtered movie clip instance. This technique requires some trial and error before you can apply it successfully. Squash and skew the instance until it looks as if the shadow is cast on a floor. You may need to reposition the instance to make this look right.
Test the movie and see the effect come to life.
When combining looping animations with several other looping animations, you can achieve some sophisticated visual results, (this requires Flash Player 8).
In this sample you can see how the drop shadow effect adds an exciting dimension to the animation. This animation is a series of movie clips containing looping animations of the boy and dog characters. In a future article I will explain how small animated loops can yield a lot of mileage to your movies.
I hope this article has helped you sharpen your Flash design and animation skills. There are several more animation techniques that you can achieve with Flash, such as full animation (often referred to as frame-by-frame), shape tweens, and image sequences from video or 3D animation programs. There are also a number of cool plug-ins available from other designers and animators that can help speed up your Flash workflow. Look for future articles that explore these techniques and tools.