Flash Tips and Best Practices for Designers: Drawing

The first time I used Flash was around 13 years ago. It was version 3 and Flash was hailed as the fancy new vector based animation tool that would soon take the web design world by storm. Over the years, Flash has grown into a fully-fledged rich application development tool, packed to the brim with ActionScript goodness.

What a lot of people seem to be forgetting though, is how much Flash is still a designer's tool, letting us create artwork and animations the old-fashioned draw-and-move-around way.

Let's start with what pretty much anyone would start with in Flash (or any design application for that matter) – drawing. Be it drawing regular shapes or tracing lines, drawing is one of the most fundamental actions in Flash. What makes Flash unique though, is the way it handles shapes. It behaves quite unlike any other vector drawing tool out there, and is either loved or hated by many for it. Of course, there are advantages and disadvantages to segregating each part of an object for independent editing. Let's take a look at some quirky little things that Flash does and how to use them to our best advantage.

Although this post was written for Flash Professional CS5, most of the tips should work just fine in older versions. I will try and make it a point to highlight wherever something is very specific to the latest version of Flash.

Regular vs. Primitive Shapes

Typically, when you draw a regular shape (a rectangle or an ellipse) in Flash, it creates a patch with the selected fill and stroke properties. You can then select the fill and/or the stroke indidually and edit their properties. In Flash CS3, Adobe introduced what they call 'primitive' shape tools. Unlike the default shape tools, which separate the stroke from the fill, these create a shape that is selectable and editable as a whole.

Although for veteran Flash designers this can be an irritating change, it brings with it a level of control that was unseen in Flash before this version. You can suddenly change properties of the object numerically through the properties panel, add rounded corners, and convert circles to pies with decimal point accuracy. There is very little reason to go back to the traditional shape tools once you have used the primitives, yet many designers I know continue to work the old-fashioned way. Part of the problem could be Adobe's dumbfounding decision to retain the simple shapes as the default tools, burying the primitives inside a dropdown in the toolbar.

Case study: Create an accurate pie chart using primitive shapes

Let's try using the primitive shapes in a real-life scenario where using the traditional shape tools would have proven to be an exercise in hair-pulling. Say you want to create an accurate pie chart using real numbers - market shares for mobile operating systems in 2010, for example.

Once we have the percentages (that add up to 100), we will multiply each with 3.6 to equate them with the total 360 degrees in a circle. Then, it's a simple matter of pasting six circles on top of each other and assigning the appropriate starting and ending angles for each one based on our calculations. See the math in the table below, as well as the properties for one of the pies, for a better idea.

Freely Transform Shapes With the Mouse

By their very nature, objects in Flash are freely editable in all kinds of ways. You can select a shape's fill or outline, drag it around and it will affect all other shapes in that area as long as they are on the same plane. What happens when you select and/or drag an element though, depends on what you click and where. Let's look at the various possibilities:

• Clicking and dragging a shape that is already selected will simply move it to wherever you let the mouse go.
• Clicking and dragging inside a shape's fill - even if it is not selected - will select and move it. Note that this will only move the fill and not the stroke. If you drop the fill on top of the stroke, any part of the stroke that comes under the fill will be deleted.
• Clicking and dragging on a straight line will make it a curve. How long away you drag the line defines how steep the curve is.
• Clicking and dragging on an existing curved line will alter its curvature.
• Clicking and dragging a corner point will only move that point. If snapping is on, the point will snap to any other corner nearby.

Case Study: Make waves the easy way

Let's try and apply this knowledge to make complex wavy lines the simple way - using straight zigzag lines. Start by simply drawing straight lines to define the approximate size and shape of the wave. Make sure the line is not selected. Then, click and drag each line segment to make a curve for the wave. Lastly, select the corner points and move them up or down till they snap to make the curve seamless on both sides.

Smooth Rounded Corners

For some reason best known to Adobe, they have never addressed an inherent problem with rendering rounded corners in Flash. If the outline of a rounded rectangle is an odd number (1, 3, 5, etc.), the corners tend to have these ugly artifacts that make the image look blurred. A typical hack I've used and have seen being used is to make sure the outlines on rounded rectangles are always 2, 4, 6 or any even number. It still doesn't work if your shape is on a sub-pixel co-ordinate - either x or y co-ordinate is in decimals (2.6, 4.12, 98.57, etc.) - but that's an easier problem to solve.

But what if I need the outline to be a single pixel? One workaround I recently found and have been extensively using since is this:

1. Draw your rectangle using the primitive rectangle tool and set it to whatever size you need. Make sure the X and Y co-ordinates of the rectangle are each whole numbers without decimal points in them.
2. Change the roundness to your preference.
3. Fill this object with the color you need for your rectangle's outline.
4. Copy and paste the rectangle in place, then nudge it one pixel to the right and down.
5. Reduce the height and width of the new rectangle to 2 pixels less than the original one, and change the fill to whatever color you need for the shape.
6. We're not done yet. Reduce the roundness of the new rectangle to one less than the outline. Because Flash assigns roundness by pixels and not by percentage, having the same roundness value for both rectangles causes minor inconsistencies towards the center of each curvature.

Although this technique should work in most cases, it is not without its pitfalls. It's of no use, for example, in situations where you need an object to be translucent. Reducing the alpha of the fill rectangle will only show more of the outline color from the rectangle behind. A hack to get around it would be to break both rectangles (convert them to regular shapes).

You might also consider using stroke hinting to guide you when drawing strokes on the stage.

Distribute Gradients Across Objects

Who doesn't like gradients? Designs these days are pretty incomplete without at least a subtle hint of a gradient to give it a realistic and often contemporary feel. The problem with how Flash handles shapes though, is that each self-contained piece is a shape and has its own properties. You cannot apply gradient fills to groups of objects and there is no way to 'connect' two disparate shapes. What happens, then, when you need a gradient to span across multiple objects - say all words in a custom-made logotype?

Well, 'Lock Fill' to the rescue. When using the 'Paint Bucket' tool, you will see an icon at the bottom of the tool palette with a gradient and a lock on it. Select the shapes you need to fill, toggle the 'Lock Fill' icon, select a gradient from the fill color palette on and click inside any of the selected shapes. Don't worry if you don't see the entire gradient applied. More often than not the locked fill spans way beyond the selected shapes and you need to use the 'Gradient Transform Tool' to resize the gradient the way you need it.

This technique is not without its issues though. Here are some things to remember when using locked fills:

• Locked fills only work with regular shapes. If you used primitive shapes, you will need to break them apart to be able to apply a gradient across multiple objects.
• If you select one of a group of shapes with a locked fill, and then change its properties, that shape will be de-linked from the group.
• Like I mentioned before, the bounds of a gradient in a locked fill tend to be way bigger than the area of the shapes. Just use the 'Gradient Transform Tool', select any one of the shapes and adjust the bounds of the gradient. You may need to zoom out a bit to be able to see the gradient controls.

Play Around With Custom Strokes

Flash comes with a set of stroke styles by default – Solid, Dashed, Dotted, Ragged, Stipples and Hatched – which work fine for the most part. For situations where you need more control over the stroke though, there is a pretty darn powerful stroke editor that comes with Flash. To really start playing around with your strokes, click the edit icon next to the 'Style' list in the 'Properties' panel of a selected stroke.

Let's say you needed a dashed line, but the dashes are currently way too close in the default 'Dashed' style. In the 'Edit Stroke' panel, simply increment the number in the second input field next to 'Dash' till you get the effect you need. And while you are it, check the ''Sharp corners' box. If you've ever been bugged by the weird corners you get with the default dashed line in Flash, this fixes it.

Helpful Hints

Here are some more helpful hints to help optimize your workflow when working with shapes in Flash.

• Because of the way Flash handles shapes, clicking an outline only selects a section of the line, not the whole thing. Double-click a section of the stroke to select all connected sections at once.
• Double-clicking a fill selects the fill and all line sections around it.
• If you would like to divide a shape with some space in between the two divisions:

  1. Draw a line where you need the division.
  2. Adjust the thickness of the line depending on how much space you need between the divisions.
  3. Make sure the line is selected; then go to 'Modify > Shapes' in the menu bar and select 'Convert Lines to Fills'.
  4. Delete the line.

• By default, lines have rounded ends and corners in Flash, but if you need the edges to be hard for some reason you can set them by changing the 'Cap' and 'Join' properties in the 'Properties' panel for a selected line.

Conclusion

And that's a wrap for the first part of this series on Flash best practices for designers. I hope these tips will help you improve & optimize your workflow in Flash over the long term. Please feel free to share your own tips & best practices in the comments section. I will be back with the next part of this series with tips on how to manage your text and symbols in Flash.