Coloring Fills and Strokes






Coloring Fills and Strokes

When you're drawing or editing a shape, Flash independently colors fills and strokes. You can change the colors via the Tools panel or the Properties panel when a shape or shape tool is active. In both locations, a small pencil icon indicates the stroke color, and a small paint bucket icon indicates the fill color.

There are two simple ways to change a shape's fill or stroke color. First, you can change the fill color of a selected shape using the pop-up color swatch utility:

  1. Choose the Selection tool from the Tools panel, and click once inside the box on the Stage. The fill area will appear as if seen through a screen, indicating that it is selected.

  2. In the Properties or Tools panel, click on the Fill Color swatch. A palette of colors will pop up, and you'll be allowed to select from the default web-safe swatches. A white box with a red line through it at the top of the pop-up indicates that no fill will be used, allowing underlying assets to be visible within the borders of the shape.

  3. Deselect the box to view the results. You can deselect by using Edit Deselect All, or by clicking in any unoccupied area of the Stage or Work Area (the area surrounding the Stage). Deselecting is often required to avoid editing an active element, and it will soon become second nature.

Fills and Strokes

Unlike in many other drawing programs, Flash elements are drawn using separate fills and strokes. Although this can take some getting used to, it can also be very helpful. The best way to understand how fills and strokes work is to do a little experimenting. You may want to open a new document so that you can tinker while reading without affecting your ongoing exercises.

A fill is the area of color that fills the inside of a stroked shape or constitutes the body of a borderless shape. For example, if you draw a free-form blob on the Stage, the colored area inside its border is its fill. The colored area is called a fill even if no border surrounds it.

A stroke is the border or line surrounding a shape. Strokes can have six styles, the most common of which are solid, dotted, and dashed. Each stroke type can be customized with a variety of settings, all of which can be found within the Properties panel when a line or line-making tool is active.

Flash allows you to select individual fills and strokes separately, if you desire. You can select only a fill, or even only one side of a multi-sided stroke. Selecting a contiguous fill, or a single part of a multi-part stroke, requires one click. To select an entire contiguous stroke, double-click on the stroke only. To select both a fill and its stroke, double-click on the fill. See Figure for a comparison of single-clicking and double-clicking a multi-part stroke.

Stroke selection by single-click (left) and double-click (right)


If you want to work with an entire shape (fill and stroke) but accidentally only select one, the remainder of the shape will not be edited. This can happen when draggingfor example, you may drag a fill and leave the stroke behind.

If this happens, undo your change and double-click, or press the Shift key while selecting multiple objects, to include all the desired elements in your efforts.


You selected just the fill to practice, and to show that the colors of selected shapes can be changed directly with the color swatches. Next, you'll use the Ink Bottle tool to exclusively change the color of a stroke, regardless of whether or not it has been selected. The Ink Bottle tool is adjacent to the Paint Bucket tool in the Tools palette.

You may be familiar with the Paint Bucket from experience with other graphics tools. You can use it to change a fill color by single-clicking within the fill area. Think of the Ink Bottle tool as a Paint Bucket for lines. It will apply your preferred stroke attributes to any shape stroke you click on:

  1. Choose the Ink Bottle tool, click on the Stroke Color chip (indicated by the pencil icon), and pick a color for your stroke.

  2. If you wish, experiment with some of the other stroke attributes in the Properties panel, such as thickness, cap, and join settings. Editing strokes will be discussed further in a few minutes.

  3. To view the results, with the Ink Bottle tool active, click on a shape stroke. The stroke should change to reflect your chosen attributes while the fill remains unaffected.

Solid Fills and Gradients

Now that you know how to add colors to shapes, you're probably asking yourself, "What if I don't want to use one of the default colors available in these tool swatches?" No problem. There are a few ways to create your own custom colors.

If you just need a quick color, which you may not use often, you can create a color on the fly, you can take advantage of two options in the color swatches pop-up palette that appears when you select a stroke or fill color. The first option is to use the hexadecimal entry field in the top left of the swatches pop-up. This field allows you to enter hex color values to specify any color numerically. If you are familiar with HTML, you will likely be comfortable with this method.

The second option is to use the color picker icon in the upper right of the swatches pop-up. This will bring up your operating system's color picker, which will allow you to select colors using a variety of methods used by your system. If you work with color in other applications, you may be familiar with this utility already.

Another handy feature in Flash 8's swatches pop-up (Figure) is the ability to control your color's opacity via the Alpha setting. Colors with an alpha value of less than 100% have some transparency, allowing your colors to mix on the Stage.

The color swatches pop-up, accessible via the Tools and Properties panels


The swatch pop-up utility is great for quick access, but what if you need more control? Enter the Color Mixer.

The Color Mixer

The Color Mixer panel, shown in Figure, gives you some great options for changing strokes and fills, and even enables you to change the fill completely by converting it to a gradient.

The Color Mixer panel


Here is a breakdown of the options for the Color Mixer:


Stroke color

Changes the color of the stroke. You can access your operating system's native color picker using the icon in the upper right of the pop-up palette. This allows you to specify colors from spaces other than RGB, such as hue, saturation, and brightness (HSB).


Fill color

Changes the color of the fill. See Stroke Color for additional information.


Swatch utilities

Sets the stroke and fill colors to black and white, respectively; removes the selected stroke or fill; switches the stroke and fill colors.


Fill Type (menu)

Changes the fill style. Options include None (which deletes the fill), Solid (for a solid, one-color fill), Linear (for a gradient that blends on a linear path), Radial (for a gradient that blends outward, in a circular path, from a focal point), and Bitmap (for a fill made of tiled bitmap images). Additional gradient options are discussed in the main text.


Gradient Overflow (menu)

Visible only when a gradient fill type is selected; determines how the gradient is mapped when exceeding the range of the Gradient Transform tool. Options include Extend, Reflect, and Repeat.


RGB input (three separate entry fields, pop-up sliders)

Changes the density of the red, green, and blue (RGB) colors in a fill.


Alpha

Sets the percentage of opacity for a solid fill (or the currently selected Color Proxy slider for a gradient fill). Zero percent alpha makes it invisible, while 100% alpha makes it opaque.


Color chooser

Provides a quick, visual way to choose any color. Simply click on the color chooser and drag the cursor around to locate the color you want.


Brightness slider

Changes the brightness of the current color.


Hexadecimal input

Changes the color by accepting hexadecimal values. Commonly used in HTML, hex values are six-digit number and/or letter (AF) combinations that represent colors, such as #000000, which represents black, or #FFFFFF, which represents white.


Gradient color swatches

Changes the colors used in gradients. Between 2 and 15 colors can be used for each gradient.


Current color

Displays the currently selected color.


When creating solid colors, like the colors you've been using so far, in some ways the Color Mixer is not unlike the color swatches pop-up. However, instead of limiting custom color creation to hexadecimal value entry and the system color picker, it has its own color chooser. A small box presents a graduated tone of hues from left to right, and decreasing brightness from top to bottom. You can pick a color value with your mouse and then use the vertical slider to increase or decrease brightness. As you'll see in a moment, you can also save your color choice for later reuse. See the sidebar "The Color Mixer" for a look at its interface and a little more detail on its functionality.

Gradient Psychedelia

When creating gradients, the Color Mixer is required. Next, you'll use it to create a gradient that will be the basis for a psychedelic look in a 1960s-style Jimi Hendrix poster illustration:

  1. If you've been experimenting, undo your changes or use the File Revert menu option. As long as you haven't saved since last instructed to do so, this will revert your file back to where you left offa 300 x 300 pixel square with fill and stroke.

  2. Select the fill and choose Window Color Mixer to open the panel shown in Figure, in the sidebar "The Color Mixer."

  3. In the Color Mixer panel, select Linear from the Type drop-down menu. The solid color automatically changes to a linear gradient. A thin bar, showing the gradient in progress, allows you to edit the gradient via the mini-swatches below it. (A new menu, called Overflow, also appears; you'll learn about that later.)

The small color chips beneath the gradient color bar have arrows pointing to the focus point of each color. These swatches define the colors used in the gradient and slide left and right to define the position of each color.

To change the gradient, change the color of these swatches in one of two ways. Double-clicking a chip enables you to choose a color from the familiar swatch pop-up utility. For more flexibility, you can select a chip with a single click and enter RGB or hexadecimal values in the input fields, or use your mouse with the color picker and brightness slider. Both techniques allow you to add an alpha value to a color to achieve transparencies of 0 to 100%.

You can use from 2 to 15 swatches, and you can remove swatches by dragging them down and away from the gradient preview bar. Change the gradient hues now, and add two more for big splashes of color:

  1. Double-click on the leftmost gradient color swatch, and pick a bright yellow color from the color palette. If you want to try to match the sample files (although there's no reason you must), the yellow is HEX #FFFF00, or RGB 255, 255, 0.


    Note: Be sure to hit Enter/Return to update the color each time you put in a value.
  2. Next, double-click on the rightmost gradient color swatch to change the end color for the gradient. Choose a vibrant purple. The sample file uses HEX #660099, or RGB 102, 0, 153.

  3. Now add a new chip by clicking directly beneath the gradient color bar, approximately one third of the way along the span of the gradient, from the left. It will assume the color immediately above it. Change its color to HEX #FF0000, or RGB 255, 0, 0, for bright red.

  4. Add another color halfway between chips two and four, or approximately one third of the way along the span of the gradient, from the right. This time enter a HEX value of #3399FF. You now have a colorful linear gradient.

  5. Experiment by dragging the chips left and right to give each color more or less prominence. When you're done, place the first chip at the far left, chips two and three at one-third and two-thirds from the left, and the last chip slightly short of far right. This will give purple a bit more weight and will help demonstrate another feature in a minute or so.

  6. To create a background more like the psychedelic posters from the 1960s, change the Type drop-down menu choice to Radial. This changes the gradient so it blends outward from a central point instead of along a linear path.

  7. If you're satisfied with your gradient, save it for later use. If it's not already visible, choose Window Color Swatches to view the Color Swatches panel. When you move your mouse over the empty white area, the pointer will change into a paint bucket. Click the mouse and, since the currently active new color is a gradient, the gradient will appear in the bottommost row of swatches. Now you can use the gradient anytime later in this file, even if you create a new gradient in the meantime.

  8. Save your work and leave this file open.


Note: Flash 8 now supports gradients as stroke colors. If you want your image to be really colorful, you can try to make a new gradient for the border. Don't worry too much if your file differs from the sample. Think outside the box!

Custom Stroke Styles

The stroke for this image could be improved to better fit with the illustration style, so change it from a solid line to something funkier:

  1. Deselect the fill of the box, and double-click the stroke to select the entire stroke.

  2. In the Properties panel, give the stroke a dark maroon color.

  3. Click on the Stroke Style drop-down list, shown in Figure, and choose the next-to-last style. (The styles aren't named in the menu, but it looks a bit like splattered paint.)

  4. Using the Stroke Height text field or slider in the Properties panel, set the stroke weight to 10.

  5. Deselect the stroke to see what it looks like. Your stroke should be 10 pixels wide and appear as an array of spots that resemble paint splatters. Things are looking good now, but the stroke doesn't seal off the border as well as it could, so modify it to fix the problem.

  6. Select the entire stroke again. In the Properties panel, click the Custom button to open the Stroke Style dialog box. The Type drop-down should already be set to Stipple (unless you chose a different type of stroke earlier).

  7. Set Dot Size to Medium, Dot Variation to Varied Sizes, and Density to Very Dense. This tightens up the stroke to seal up the edges of the fill it surrounds. Click OK and deselect the stroke to see your work by clicking somewhere outside of the box. Nice, huh?

  8. Save the file, but leave it open.

Scaling Shapes

Often, you can't tell when starting a drawing how big or small it needs to be, and sometimes creative tangents bring about change. Here, you need to make your illustration more impressive by filling up the Stage.

Quick, inexact scaling is very simple in Flash. All you need to do is activate the Free Transform tool (Q) and use your mouse to drag one or more of the active drag locations. You can resize by dragging any of the handles; the cursor will temporarily change to a double-headed arrow to indicate that scaling is possible. (You can also skew by dragging the sides, or rotate by dragging outside one of the corner handles. Temporary cursor changes will also indicate that these features are possible.)

Here, however, you need exact resizing and positioning capabilities, so you'll use the Properties panel. The Stage is rectangular, but the image is square, so you have to make one change first. If you resize the background box as is, changing its shape from a square to a rectangle, the radial gradient fill will distort. You'll learn later how to position and scale gradients directly, but in this exercise you'll delete the fill and replace it after resizing the box. Here's how:

  1. First, make sure your background gradient has been saved in the Color Swatches panel, as described earlier. If not, use the Eyedropper tool to pick up the gradient from the background and then click anywhere in the empty white area of the Color Swatches panel.

  2. Now you can safely select the gradient fill and delete it using the Backspace or Delete key on your keyboard.

  3. Select the box's stroke and, using the Properties panel, set the width (W) to 550 and the height (H) to 400. Remember, you may need to unlock the padlock icon to change the box's width and height independently. The stroke now matches the dimensions of the Stage.

  4. Also in the Properties panel, change the box's X (horizontal) and Y (vertical) coordinates to 0. After pressing Tab or Return to register the values, this aligns the stroke to the upper-left corner of the Stage.

  5. Activate the Paint Bucket tool and switch the fill color using the pop-up swatches. You should now see your gradient in the bottom row with the default gradients. Select it.

  6. Look in the Paint Bucket tool's Options area, located in the lower portion of the Tools panel, and make sure the Lock Fill option is disabled. Use the Paint Bucket tool to apply the gradient to the background box. Notice that the radial gradient's center point is determined by the position of your click. Click several times inside the box to change the center point for the gradient until you are happy with the look.

  7. Next, activate the Lock Fill option and try to apply the fill again. The Lock Fill option prevents the fill from being changed. Now that you've seen the effect of this option in both states, disable it once again, so you can edit the fill later. If the scale or position of the gradient isn't exactly the way you want it, don't worry. You'll soon learn how to change that.

  8. Save your work. If you want to compare your work with the sample files, your file should look like box_03.fla in the 01 folder in your working directory.

Drawing Strokes Freehand

Adding a silhouette of Jimi Hendrix in the foreground of this gradient will finish off the design nicely. If your drawing skills aren't great, don't sweat it. The silhouette of Jimi, just like the rest of this image, can be as psychedelic as you want. The objective is to see how the Pencil tool can be used to draw shapes freehand:

  1. Choose the Pencil tool from the Tools panel. In the lower portion of the panel, the context-sensitive Options area includes two options. You'll use the Object Drawing option in a moment. For now, this should be disabled. The Pencil Mode option offers you a choice of Straighten, Smooth, and Ink. These options will help you draw straighter lines, create smoother curves, or work freehand, respectively. Set the option to Smooth. In the Properties panel, set the stroke weight to 5, set the stroke color to black, and change the stroke style back to a solid line.

  2. Click and drag inside the box to draw a silhouette of Jimi, like the one in Figure. Don't let the ends of the stroke touch the border of the box. (You'll learn why in a moment.)

A silhouette of Jimi Hendrix drawn with the Pencil tool



Note: If you prefer not to draw the silhouette yourself, open hendrix_silhouette.fla, located in the 01 folder in your working directory. Double-click to select the entire stroke, choose Edit Copy to copy it to your clipboard, and then return to box.fla and choose Edit Paste in Center to paste it into box.fla. Close hendrix_silhouette.fla by choosing File Close when you're done.

You can stop and start as much as you want using the Pencil tool, so feel free to use as many lines or curves as you need. If you make a mistake, either undo it or just go with it. In creative situations like these, mistakes can sometimes be as inspirational as the lines you draw intentionally.

If you're not satisfied with your drawing, try smoothing the stroke with the Selection tool's Smooth option in the Options section of the Tools panel. This is similar to the Pencil tool's Smooth option, but it allows you to smooth strokes after they've been created. Try this:

  1. Select the stroke you wish to smooth. If the lines are all connected, double-clicking will select them all. If not, press Shift and select each line individually until you have selected all of them.

  2. Click once on the Smooth option at the bottom of the Tools panel. This makes the stroke smoother. If you're happy with the new look, leave it alone. If not, click Smooth one or two more times until you're satisfied. The trick is knowing when to stop smoothing it. Making it too smooth will diminish the hand-drawn quality. Deselect the stroke when you're done.

  3. Choose the Paint Bucket tool, and change the fill color to black using the Properties panel. With the Paint Bucket tool active, click once inside the outline to fill in the silhouette of Jimi.

Did the entire image turn black? If it didn't, that's fine. In fact, this is the desired result, as it shows that when you drew your line you fully enclosed the area within it (either by connecting the stroke's end point with its starting point, or by connecting both ends of your stroke with the border of the box).

If the entire image did turn black, don't worry. What this means is that when you drew the silhouette, you didn't fully complete the Hendrix outlinea gap remained that allowed the fill color to "spill out" and fill any connected area with the black color. You can fix this by closing the stroke and sealing off the fill area:

  1. Undo the last step to remove the black fill from the image.

  2. Using the Pencil tool, make sure the entire outline is complete, including a line across the bottom of the silhouette.

  3. Activate the Paint Bucket tool again, and display the Gap Size menu from the Options section of the Tools panel. The Gap Size option dictates how large a gap Flash will bridge for you when applying a fill with the Paint Bucket tool. Choose Close Small Gaps from the menu and click inside the shape to see if the fill is applied properly. If not, choose Close Medium Gaps and try again. If that doesn't work, choose Close Large Gaps, and the fill should be applied.

  4. Save your work.

If you connected your silhouette border to the box stroke, your results may differ slightly from the descriptions in some upcoming exercises. Feel free to continue with that in mind, or open box_05.fla to continue.



 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows