Adding Color to the Stage

As you saw in Chapter 17, you can change the color of your stage by using the Properties panel. There are many web-safe RGB colors that you can choose from. Refer to Figure 18-1.

You can choose a transparency or alpha setting, set to none (red slash on a white icon), or select the Color Picker icon in the upper right to open the dialog box. Refer to Figure 18-2.

The Color Picker dialog box should be familiar to you by now because you saw it in Photoshop and Illustrator. Note that in Animate, however, it offers fewer options, but you can still view color by HSB, RGB, and web hexadecimal color. After choosing a color, click OK. This will be the new color for the stage.

The Tools Panel Stroke and Fill

In the Tools panel, as in Illustrator, you can set the stroke and a fill color for your shape before you draw it on the stage, as seen in Figure 18-3.

In this area, you have access to alpha (transparency), no fill, the color picker, and gradients and any imported bitmap patterned image that you want to use as a fill or stroke.

Properties Panel

When you select the entire shape with the Selection (V) or Subselection tool (A), you have the option to change the stoke or fill color in the Properties panel in the Fill and Stroke tab, as seen in Figure 18-5.

Here you can also adjust the width and style of the stroke and alter the cap and join of a shape. You look at shapes and their properties in more detail throughout Part 4. For now, you will focus on color.

Animate has two other panels for working with color. Open the canvas_color.fla file.

Color Panel

The Color panel offers none (no color) solid color, gradient (linear and radial), and bitmap fill. Refer to Figure 18-6.

You can also use it to add new colors to your pallet and reverse or change the colors of the stroke and fill within the panel. Refer to Figure 18-7.

Gradient Fills

As you saw in Chapter 11, when you want to work with gradients, you need to use the Gradient panel and the Gradient tool in the Tools panel. In Animate, you first select whether you want to alter the stroke or the fill of an object, and then select a linear or radial gradient from the drop-down menu. Using the Gradient Transform tool (F), you can alter the gradient of the shape by dragging or rotating the gradient, as you did in Illustrator. Refer to Figure 18-8.

Linear gradients produce a blend of colors that move on a linear path. Radial gradients are a blend of colors moving outward from the center point of a shape in a circular path.

Note

You must work in an ActionScript3.0 FLA file to have access to certain gradient options, like reflect color, repeat color, and linear RGB, which creates an SVG-compliant gradient. With HTML5 Canvas, you can reflect or repeat a gradient, but you have to do that by hand—adding, adjusting, or dragging away color stops in the gradient area. Refer to Figure 18-9.

You can also set the alpha transparency for each stop when you select it, and then change the (A:) setting of the color stop.

Bitmap Fills

A bitmap fill is a bitmap file used as a patterned background that tiles or repeats. A bitmap file opens the Import to Library dialog box and allows you to use such file formats as PSD, JPEG, GIF, PNG, bitmap, and DIB (device-independent bitmap).

To add a bitmap to your Color panel, you must first choose Bitmap fill from the drop-down menu. Using the Import to Library dialog box, locate a low-res pattern and then click Open. This adds the fill to your Library panel and Color panel. Then, you can use either the fill or stroke to add it to your shape. Refer to Figure 18-10.

If you want to add any new swatches (solid color or gradient) to the Swatches panel, from the Color panel, click the Add to Swatches button, as seen in Figure 18-8.

Note

You only see the bitmap fill with the other swatches when you directly access it from the Fill or Stroke tools while in the Colors panel; if you go directly to the Swatch panel, it is not available to apply. Also, if your shape lacks a fill or stroke, first apply a solid color using either the Paint Bucket tool or the Ink Bottle tool, and then use the Color panel to apply the bitmap fill.

Swatches Panel

The Swatches panel is often docked with the Color panel. It is similar to the Swatches panels in Photoshop and Illustrator. When a panel opens for new file, it comes with default swatches, but you can also tag swatches, create your own set using the Empty Folder icon, and then add colors swatches (Create a New Swatch icon) or a new pallet within an empty folder. You can also delete swatches (Trash icon). Then you can save your new set using the panel’s menu for another project, or add (load) more colors. These colors can be reused for other projects. Refer to Figure 18-11.

You can acquire colors from an Animate color set (.clr), a color table (.act), or even a GIF file (.gif).

You cannot set the alpha transparency for a swatch to do that; use the Color panel when applying an alpha setting to a shape.

Info Panel

If you are unsure of which color is on the stage, use the Info panel. Using the Eyedropper (I) tool from the Tools panel, you can hover over a shape on the stage to determine the current color. Refer to Figure 18-12.

Summary

In this chapter, you looked at the color options in Animate CC, as well as tools and panels for working with solid colors, gradients and bitmap fills. In the next chapter, you discover how to import artwork from Adobe programs, such as Photoshop and Illustrator, into the Animate canvas.