Colors ( 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.
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 PanelThe 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].
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
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
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:
Go 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.
- Click on the color chip for the selected control and pick a color
from the predefined palette.
- Choose a color by grabbing the color registration mark (looks like a
cross) in the Color Space area with your mouse and drag it to a
- With any color selected, drag the small black arrow on the right of
the Brightness Control up and down to make the selected color
brighter (add white) or darker (add black).
- Type a specific Hex Value in the Hex Edit box.
- Use the RGB or HSB Values to define a color by either typing
in the appropriate fields or using the slider bars next to each field
(click on the small arrow to open and then drag the slider up or down).
- Adjust the transparency of a color by typing in a new Alpha
Value or using the slider bar next to this field (click on the small
arrow to open and drag the slider up or down).
Now 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).
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.
As 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:
Now let's adjust this new gradient by
adding some additional Gradient Pointers:
- 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).
- 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).
- Adjust the Brightness as desired.
Your Gradient Definition
Bar now shows a linear gradient with your selected color fading to
- 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.
- 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.
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.
- 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.
- Drag these new pointers left and right on the Definition Bar -
notice how their position changes the look of your gradient?
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
Color Swatches PanelNow 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
Unless... you save your custom colors to a Color
Definition File so that you can call them back at any time you need
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
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.
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.