Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Cleaning Up Your Sketches

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.

Figure 21 shows an example of a sketch, and then the finished product after redrawing it in Flash. 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.

From sketch to Flash -- my trademark character

Figure 21. From sketch to Flash—my trademark character

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. As you can see in Figure 22, 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.

Character's head defined by an oval shape

Figure 22. Character’s head defined by an oval shape

When you finish drawing an object 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 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.

The next step is the coolest part. Select all again and then right-click over your character and select Distribute to Layers (see Figure 23).

Selecting all symbols, then right-clicking the character and selecting Distribute to Layers

Figure 23. Selecting all symbols, then right-clicking the character and selecting 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

Figure 24 is an example of what my Timeline may look like once my character has been designed and converted to symbols and ready for animating. 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.

Body parts and symbols for my trademark character in the Timeline

Figure 24. Body parts and symbols for my trademark character in the Timeline

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 all layers inside these folders, giving you the option to collapse them all except for the character you are working on (see Figure 25). This prevents endlessly scrolling through the Timeline and is a huge timesaver.

Saving time with layer folders

Figure 25. Saving time with layer folders

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 (see Figure 26) 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.

Library of my trademark character

Figure 26. Library of my trademark character

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 (see Figure 27). 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.

Your library management options

Figure 27. Your library management options