mini panelColors ( for people who already know the basics!)

With either Stroke or Fill selected, click on the Color Chip to open this mini panel:

The default Color Palette in Flash is Web 216. The small color boxes from left to right are solid colors, with the vertical strip of boxes on the far left offering a quick method of selection from the primary and secondary RGB colors; the larger color boxes across the bottom are gradient fills - those that look round are radial gradients and those that are square are linear gradients. Gradients are only available as a color choice when the Fill Color Control is selected.

Run your cursor over the colored boxes. Notice that the cursor changes to an eyedropper tool and that each color your eyedropper is over is displayed in the rectangle in the upper left corner. Right next to that is the Hex Edit box with the Hex value of that color. Next run your cursor outside of the swatch area and across the stage. The eyedropper stays active and the color underneath it is displayed in the swatch area. This is handy if you used an "unsaved" custom color in one object and want to "get it back" to use in an object you are creating later on in the same movie. To select a color with the eyedropper simply click on a color swatch or click on a color elsewhere on the Flash Stage or Work Area.

On the upper right are 2 more buttons - the No Color button and the Color Picker button, which opens a new window that gives you access to the full color spectrum. Again, the No Color button will not appear if a drawing tool is not selected or if it is not an option for that drawing tool. If none of the default color swatches are right for your plans, click on the Color Picker button and make a choice from the full spectrum.

color spectrum
 

Once you have selected a color or used the No Color button this panel will close and your choice will be displayed in the appropriate section of the Colors Area of the Toolbox. To close this panel without modifying the Stroke or Fill color, press the [Esc] key on your keyboard.

Color Mixer Panel

The Color Mixer Panel is used to add custom colors (solid or transparent) and gradients to the Color Swatches Panels. Let's start with adding a custom solid color.

Open the Color Mixer Panel by clicking once on it's title bar in your Panel Set on the right side of the Flash Editor, or clicking Window > Color Mixer. If you prefer to use keyboard shortcuts, press [Alt] + [F9].

color palette

If you do not see the full color palette as shown above, click on the small white arrow in the lower right corner of this panel to expand it.

In the upper left corner is a duplicate of the Stroke and Fill Color Control section of the Toolbox, with the current color selection displayed. Click on the Fill Color Control if it is not already selected. Next to the Fill Color is a pulldown menu with Fill Types - None, Solid, Linear, Radial and Bitmap. Make sure that Solid is displayed as the current choice.

On the upper right are the Color Values, displayed by default in RGB (Red, Green, Blue). If you want to work with these values as HSB (Hue, Saturation, Brightness) open the Options Menu in the upper right corner of the title bar and click on HSB. The Alpha Value of the color is also displayed in this panel. The Alpha Value controls the transparency of the color.

The lower half of the Color Mixer contains (from left to right) a large Color Sample, the Hex Edit box, the Color Space displaying the full spectrum and the Brightness Control bar.

There are several different ways to select a new, custom color: define a colorGo ahead and define a color, any color!, for your palette. Play with the Brightness Control and the Alpha Value SLIDERS -- while doing so, keep an eye on the Color Sample box. Notice that the lower half is the original solid color selection and the upper half is what the color will be after your adjustment! When you stop dragging the slider, your new color fills the entire box here as well as the color chip for the selected Color Control.

add swatchNow that we have a custom color we want to work with, it's time to save it to our color swatches. Open the Options Menu in the upper right corner of the title bar and click on "Add Swatch". To see your new swatch added to the color swatches, click on the color chip for the selected Color Control (if you stayed with the lesson, it should be the Fill Control color chip - Fig. 25).

fill control color chip
Fig 25

Your custom color has now been added to a new row across the bottom of the Color Swatch Panels. If you adjusted the transparency of the color, as was done with the color show in Fig. 25 above, you will see a grid through the color - a visual clue that the color is transparent instead of opaque.

That wasn't too bad, right? So let's move on and create a Gradient Color! This will be much easier, because you are now familiar with the Color Mixer and how it works.

clor mixerAs stated earlier in this part of the lesson, Gradients can only be used with the Fill Color Control. Click on the Fill Color Control in the Color Mixer, if necessary, to select it. Open the Fill Type menu and click on Linear. The Color Mixer Panel changes to reflect your options when working with a gradient.

The Stroke and Fill Controls are replaced by a single color chip with a Gradient Pointer beneath it. A Gradient Definition Bar has been added that shows you how your linear gradient looks as it is currently defined. The default gradient displayed is Black to White (moving left to right). Beneath this bar are 2 pointers, one at either end, representing the beginning and ending points of the gradient.

Let's create a 2 color gradient first:
  1. Make sure that the Black Gradient Pointer is selected (the pointer beneath the Color Chip should be black - if it's not, click on the black pointer beneath the Gradient Definition Bar to select it).
  2. Click on the Color Chip and select a color from the swatches (for this example, please do not select a custom transparent color if you created one above).
  3. Adjust the Brightness as desired.

    Your Gradient Definition Bar now shows a linear gradient with your selected color fading to white.

  4. Now click on the white pointer at the far right of your Gradient Definition Bar to select it - notice that the Color Chip and the pointer beneath it now reflect this color.
  5. Click on the Color Chip and select a color from the swatches (again, please do not select a custom transparent color).

    Voila! An all new 2 color linear gradient! Save this gradient as you did the custom solid color swatch above.
Now let's adjust this new gradient by adding some additional Gradient Pointers:
  1. Click anywhere on the Gradient Definition Bar to add another pointer at that spot - the pointer will reflect the color of the gradient at that position. Give yourself a couple of new pointers, if you like.
  2. Drag these new pointers left and right on the Definition Bar - notice how their position changes the look of your gradient?
Play around with the pointers, adding as many as you like. Oops - added too many? To remove pointers, simply drag them off the bottom of the Definition Bar and they will disappear. If you want to keep this newly modified gradient, be sure to save it to your swatches.

To see your Gradients in the swatch panels, at any time you can either click on the Fill Type and change back to Solid, then open the color chip or you can simply open the color chip for the Fill Color Control on the Toolbox. Don't forget to press [Esc] to exit the Color Control's swatch panel without making any selection.

Tip: Gradients can greatly increase the file size of published movies and extend the amount of time it takes for your movie to download before it can be viewed, so use them sparingly.

Color Swatches Panel

Now that you've put all that effort into creating your custom colors and gradients, and adding them to the palette, it's time to tell you that they are only added to the color palette for the current movie. If you close a movie without saving it, you lose the changes you made to the swatch palettes. If you save a movie with custom colors and gradients, they will always be available in that movie if/when you work on it in the future. If you want to use your custom colors/gradients in another movie, you'll have to recreate them in the new movie.

Unless... you save your custom colors to a Color Definition File so that you can call them back at any time you need them!

options


That's just one of the options available in the Color Swatches Panel. Let's explore them all...

Duplicate Swatch   This option creates a duplicate swatch of the color selected in the Color Swatches Panel.

Delete Swatch   This option deletes the selected swatch. Don't worry if you delete a swatch by accident - as long as you haven't re-saved the palette the deletion only affects the palette in the movie you have open, so you can always call the original palette back.

Add Colors   This option adds saved color palettes to the palette displayed. This feature is used to add the custom colors and gradients you have saved to a new movie.

Replace Colors   This options replaces the custom colors/gradients in your palette with colors in a saved Color Definition File. It does not ask if you want to save the custom colors being replaced, so use this with care.

Load Default Colors   If you have totally customized your palette you can call back the Default Color palette with this option. Again, this option does not ask you to save any custom colors in the displayed palette before replacing it/them, so use this with care.

Save Colors   This is how you save your custom colors to reuse in other movies. It is important to always store your custom color files together so they are easy to find.

Save as Default   Use this option to replace the default Color Swatches palette Flash displays when you create a new movie. Don't worry if at some later time you want the Flash Default palette back - it's the Web 216 palette offered on this menu.

Clear Colors   This removes ALL colors from the displayed palette except Black and White.

Web 216   As mentioned before, this is the default palette displayed in the Color Swatches panels by Flash. These colors are considered "web-safe", though as technology advances web-safe colors become less of an issue. 

Sort by Color   If you want to sort your palette by Hue to make it easier to find colors, use this option. This option merges your custom colors into the overall palette.