What is Software? | What is Education? | What is Technology? | What is Research? | What is Wi-Fi? | What is Communication? | What is Customer Service?

Free SEO Tutorials & Help

Tutorials:   Adobe Flash   Adobe Photoshop   CorelDRAW   SEO  

Site Map

Website Development | Cable & Broadband Magazine | Solutions for Higher Education | Auction Anything Online

Adobe Flash Help & Tutorials

 Back to Topics

 

How To Work With Color Strokes and Fills in Flash

About the Color Mixer

About creating gradients

About controlling instances and symbols with ActionScript

Using the Stroke Color and Fill Color controls in the Property inspector

Working with solid colors and gradient fills in the Color Mixer

Modifying strokes with the Ink Bottle tool

Applying solid, gradient, and bitmap fills with the Paint Bucket tool

Transforming gradient and bitmap fills

Copying strokes and fills with the Eyedropper tool

Locking a gradient or bitmap to fill the Stage

Modifying color palettes

Duplicating and removing colors

Using the default palette and the web-safe palette

Sorting the palette

Importing and exporting color palettes

Drawing

About the Color Mixer

TOP


The Color Mixer provides options for changing the color of strokes and fills, as well as creating multicolor gradients. You can use gradients to produce a wide range of effects, such as giving an illusion of depth to a two-dimensional object. For example, you can use a gradient to transform a simple, two-dimensional circle into a sphere, with the illusion of light illuminating the surface at one angle and casting a shadow to the opposite side of the sphere.

The Color Mixer with the gradient controls displayed.

The Color Mixer has the following options:

Stroke color changes the color of the stroke, or the border, of a graphic object.

Fill Color changes the color of the fill. The fill is the area of color that fills up the shape.

Type pop-up menu changes the fill style:

None removes the fill.

Solid provides a solid, single fill color.

Linear produces a gradient that blends on a linear path.

Radial produces a gradient that blends outward in a circular path from a central focal point.

Bitmap lets you tile the selected fill area with a bitmap image that you can select. When you choose Bitmap, a dialog box lets you select a bitmap image on your local computer, and add it to the library. You can apply this bitmap as a fill; the appearance is something similar to a mosaic tile pattern with the image repeated within the shape.

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

Alpha sets the opacity for a solid fill, or the currently selected slider for a gradient fill. An alpha value of 0% creates an invisible (or transparent) fill; an alpha value of 100% creates an opaque fill.

Current Color Swatch displays the currently selected color. If you select a gradient fill type (Linear or Radial) from the fill Type pop-up menu, the Current Color Swatch displays the color transitions within the gradient you create.

Color Picker lets you select a color visually. Click the Color Picker and drag the cross-hair pointer around until you find the color you want.

Hexadecimal value displays the current color's hexadecimal value. To change the color using the hexadecimal value, type in a new value. Hexadecimal color values (also called hex values) are 6-digit alphanumeric combinations that represent a color.

Overflow lets you control colors applied past the limits of a linear or radial gradient. The overflow modes are extend (the default mode), reflect, and repeat.

Extend applies the colors you specify past the end of the gradient.

Reflect causes the gradient colors to fill the shape using a reflective mirroring effect. The gradients you specify are repeated in a pattern of from the beginning of the gradient to the end, and then repeated in the opposite sequence from the end of the gradient to the beginning, and then back to the beginning of the gradient to the end until the selected shape is filled.

Repeat repeats the gradient from the beginning of the gradient to the end until the selected shape is filled.

NOTE : Overflow modes are supported only in Flash Player 8.

Linear RGB creates an SVG-compliant (Scalable Vector Graphics) linear or radial gradient.
 

About creating gradients

TOP

A gradient is a multicolor fill in which one color gradually changes into another color. Flash lets you apply up to 15 color transitions to a gradient, letting you create some striking effects. Flash can create two types of gradients:

Linear gradients change color along a single axis (horizontal or vertical).

Radial gradients change color in an outward direction starting from a central focal point. You can adjust the direction of a gradient, its colors, the location of the focal point, and many other properties of the gradient.

Flash Basic 8 and Flash Professional 8 provide additional control over linear and radial gradients for use with Flash Player 8. These controls, called overflow modes, let you specify how colors are applied beyond the gradient.

 

About controlling instances and symbols with ActionScript

TOP

Using the Stroke Color and Fill Color controls in the Tools panel

The Stroke Color and Fill Color controls in the Tools panel let you select a solid stroke color or a solid or gradient fill color, switch the stroke and fill colors, or select the default stroke and fill colors (black stroke and white fill). Oval and rectangle objects (shapes) can have both stroke and fill colors. Text objects and brush strokes can have only fill colors. Lines drawn with the Line, Pen, and Pencil tools can have only stroke colors.

The Tools panel Stroke Color and Fill Color controls set the painting attributes of new objects you create with the drawing and painting tools. To use these controls to change the painting attributes of existing objects, you must first select the objects on the Stage.

NOTE : Gradient swatches appear only in the Fill Color control.

To apply stroke and fill colors using the Tools panel controls, do one of the following:

  • Click the triangle next to the Stroke or Fill color box and select a color swatch from the pop-up window. Gradients can be selected for the fill color only.

  • Click the Color Picker button in the color pop-up window and select a color from the Color Picker.

  • Type a color's hexadecimal value in the text box in the color pop-up window.

  • Click the Default Fill and Stroke button in the Tools panel to return to the default color settings (white fill and black stroke).

  • Click the No Color button in the color pop-up window to remove any stroke or fill.

    NOTE : The No Color button appears only when you are creating a new oval or rectangle. You can create a new object without a stroke or fill, but you cannot use the No Color button with an existing object. Instead, select the existing stroke or fill and delete it.

  • Click the Swap Fill and Stroke button in the Tools panel to swap colors between the fill and the stroke.

 

Using the Stroke Color and Fill Color controls in the Property inspector

TOP

To change the stroke color, style, and weight for a selected object, you can use the Stroke Color controls in the Property inspector. For stroke style, you can choose from styles that are preloaded with Flash, or you can create a custom style.

To select a solid color fill, you can use the Fill Color control in the Property inspector.

To select a stroke color, style, and weight using the Property inspector:

  1. Select an object or objects on the Stage (for symbols, first double-click to enter symbol-editing mode).

  2. If the Property inspector is not visible, select Window > Properties.

  3. To select a stroke style, click the triangle next to the Style pop-up menu and select an option from the menu. To create a custom style, select Custom from the Property inspector, and then select options in the Stroke Style dialog box and click OK.

    NOTE : Selecting a stroke style other than Solid can increase file size.

  4. To select a stroke weight, click the triangle next to the Weight pop-up menu and set the slider at the weight you want.

  5. Specify a stroke height by doing one of the following:

    • Select one of the preset values from the height pop-up menu. Preset values appear in points.

    • Type a value from 0 to 200 in the height text box, and press Enter.

  6. Select the Stroke Hinting check box to enable stroke hinting. Stroke hinting adjusts line and curve anchors on full pixels, preventing blurry vertical or horizontal lines.

  7. Select a Cap option to set the style for a path end:

    None is flush with the path's end

    Round

    Square extends beyond the path by half the stroke width

  8. (Optional) If you are drawing lines using the Pencil or Brush tools with the drawing mode set to Smooth, you can specify the degree to which Flash smooths the lines you draw using the Smoothing pop-up slider.

    By default, the Smoothing value is set to 50, but you can specify a value from 0 to 100. The greater the smoothing value, the smoother the resulting line.

    NOTE When the drawing mode is set to Straighten or Ink, the Smoothing pop-up slider is disabled.

  9. Select a Join option to define how two path segments meet: Miter, Round, or Bevel. To change the corners in an open or closed path, select a path and select another join option.

  10. To avoid beveling a Miter join, enter a Miter limit.

    Line lengths exceeding this value are squared off instead of pointed. For example, a Miter limit of 2 for a 3-point stroke means that when the length of the point is twice the stroke weight, Flash removes the limit point.

To apply a solid color fill using the Property inspector:

  1. Select an object or objects on the Stage.

  2. Select Window > Properties.

  3. To select a color, click the triangle next to the Fill color box and do one of the following:

    • Select a color swatch from the palette.

    • Type a color's hexadecimal value in the text box.

Working with solid colors and gradient fills in the Color Mixer

TOP

To create and edit solid colors and gradient fills, you can use the Color Mixer. If an object is selected on the Stage, the color modifications you make in the Color Mixer are applied to the selection.

You can create any color using the Color Mixer. You can select colors in RGB or HSB, or you can expand the panel to use hexadecimal mode. You can also specify an alpha value to define the degree of transparency for a color. In addition, you can select a color from the existing color palette.

You can expand the Color Mixer to display a larger color space in place of the color bar, a split color swatch showing the current and previous colors, and a Brightness control to modify color brightness in all color modes.

To create or edit a solid color with the Color Mixer:

  1. To apply the color to existing artwork, select an object or objects on the Stage.

  2. Select Window > Color Mixer.

  3. To select a color mode display, select RGB (the default setting) or HSB from the pop-up menu in the upper right corner of the Color Mixer.

  4. Click the Stroke or Fill icon to specify which attribute is to be modified.

  5. NOTE : Be sure to click the icon, not the color box, or the color pop-up window will open.

  6. If you selected the Fill icon in step 4, verify that Solid is selected in the Type pop-up menu of the Color Mixer.

  7. Click the arrow in the lower right corner to expand the Color Mixer.

    • Do one of the following:

    • Click in the color space in the Color Mixer to select a color. Drag the Brightness control to adjust the brightness of the color.

    • NOTE : To create colors other than black or white, make sure the Brightness control is not set to either extreme.

    • Enter values in the color value boxes: Red, Green, and Blue values for RGB display; Hue, Saturation, and Brightness values for HSB display; or hexadecimal values for hexadecimal display.

    • Enter an Alpha value to specify the degree of transparency, from 0 for complete transparency to 100 for complete opacity.

    • Click the Default Stroke and Fill button to return to the default color settings, black and white (white fill and black stroke).

    • Click the Swap Stroke and Fill button to swap colors between the fill and the stroke.

    • Click the No Color button to apply no color to the fill or stroke.

    • NOTE : You cannot apply a stroke or fill of No Color to an existing object. Instead, select the existing stroke or fill and delete it.

    • Click the Stroke or Fill color box and select a color from the pop-up window.

  8. To add the color defined in step 7 to the color swatch list for the current document, select Add Swatch from the pop-up menu in the upper right corner of the Color Mixer.

To create or edit a gradient fill with the Color Mixer:

  1. To apply a gradient fill to existing artwork, select an object or objects on the Stage.

  2. If the Color Mixer is not visible, select Window > Color Mixer.

  3. To select a color mode display, select RGB (the default setting) or HSB.

  4. Select a gradient type from the Type pop-up menu:

    Linear creates a gradient that shades from the starting point to the end point in a straight line.

    Radial produces a gradient that blends outward in a circular path from a central focal point.

    When you select a linear or radial gradient, the Color Mixer also includes the following options if you are publishing for Flash Player 8:

    • The Overflow pop-up menu appears below the Type pop-up menu. Use the Overflow pop-up menu to control the colors applied past the limits of the gradient.

    • The gradient definition bar appears, with pointers below the bar indicating the colors in the gradient.

  5. (Optional) Select an overflow mode to apply to the gradient: extend (the default mode), reflect, and repeat.

  6. (Optional) Select the linear RGB check box to create an SVG-compliant (Scalable Vector Graphics) linear or radial gradient.

  7. To change a color in the gradient, select one of the color pointers below the gradient definition bar and double-click the color space that appears directly below the gradient bar to display the Color Picker. Drag the Brightness control to adjust the lightness of the color.

  8. To add a pointer to the gradient, click on or below the gradient definition bar. Select a color for the new pointer as described in step 7.

    You can add up to 15 color pointers, letting you create a gradient with up to 15 color transitions.

  9. To reposition a pointer on the gradient, drag the pointer along the gradient definition bar. Drag a pointer down and off of the gradient definition bar to remove it.

  10. To save the gradient, click the triangle in the upper right corner of the Color Mixer and select Add Swatch from the pop-up menu.

    The gradient is added to the Color Swatches panel for the current document.


 

Modifying strokes with the Ink Bottle tool

TOP

To change the stroke color, width, and style of lines or shape outlines, you can use the Ink Bottle tool. You can apply only solid colors, not gradients or bitmaps, to lines or shape outlines.

Using the Ink Bottle tool, rather than selecting individual lines, makes it easier to change the stroke attributes of multiple objects at one time.

To use the Ink Bottle tool:

  1. Select the Ink Bottle tool from the Tools panel.

  2. Select a stroke color as described in Using the Stroke Color and Fill Color controls in the Tools panel.

  3. Select a stroke style and stroke width from the Property inspector as described in Using the Stroke Color and Fill Color controls in the Property inspector.

  4. Click an object on the Stage to apply the stroke modifications.
     

Applying solid, gradient, and bitmap fills with the Paint Bucket tool

TOP

The Paint Bucket tool fills enclosed areas with color. This tool lets you fill empty areas and change the color of already painted areas. You can paint with solid colors, gradient fills, and bitmap fills. You can use the Paint Bucket tool to fill areas that are not entirely enclosed, and you can have Flash close gaps in shape outlines as you use the Paint Bucket tool.

To use the Paint Bucket tool to fill an area:

  1. Select the Paint Bucket tool from the Tools panel.

  2. Select a fill color and style, as described in Using the Stroke Color and Fill Color controls in the Property inspector.

  3. Click the Gap Size modifier and select a gap size option:

  4. Select Don't Close Gaps if you want to close gaps manually before filling the shape. Closing gaps manually can be faster for complex drawings.

  5. Select a Close option to have Flash fill a shape that has gaps.

  6. NOTE : If gaps are too large, you might have to close them manually.

  7. Click the shape or enclosed area that you want to fill.

 

Transforming gradient and bitmap fills

TOP

You can transform a gradient or bitmap fill by adjusting the size, direction, or center of the fill. To transform a gradient or bitmap fill, you use the Gradient Transform tool.
To adjust a gradient or bitmap fill with the Gradient Transform tool:

Select the Gradient Transform tool.

  1. Click an area filled with a gradient or bitmap fill.

  2. A bounding box with editing handles is displayed. When the pointer is over any one of these handles, it changes to indicate the function of the handle.

    Center point Select and move the center point handle to change the center point of the gradient. The rollover icon for the center point handle is a four-way arrow.

    Focal point Select the focal point handle to change the focal point of a radial gradient. The focal point handle is displayed only when you select a radial gradient; the rollover icon for the focal point handle is an inverted triangle.

    Size Click and move the middle handle icon on the edge of the bounding box to adjust the size of the gradient. The rollover icon for the size handle is a circle with an arrow inside of it.

    Rotation Click and move the bottom handle on the edge of the bounding box to adjust the rotation of the gradient. The rollover icon for the rotation handle is four arrows in the shape of a circle.

    Width Click and move the square handle to adjust the width of the gradient. The rollover icon for the width handle is a double-ended arrow.

    Press Shift to constrain the direction of a linear gradient fill to multiples of 45.

  3. Reshape the gradient or fill in any of the following ways:

    • To reposition the center point of the gradient or bitmap fill, drag the center point.

    • To change the width of the gradient or bitmap fill, drag the square handle on the side of the bounding box. (This option resizes only the fill, not the object containing the fill.)

    • To change the height of the gradient or bitmap fill, drag the square handle at the bottom of the bounding box.

    • To rotate the gradient or bitmap fill, drag the circular rotation handle at the corner. You can also drag the lowest handle on the bounding circle of a circular gradient or fill.

    • To scale a linear gradient or a fill, drag the square handle at the center of the bounding box.

    • To change the focal point of a circular gradient, drag the middle circular handle on the bounding circle.

    • To skew or slant a fill within a shape, drag one of the circular handles on the top or right side of the bounding box.

    • To tile a bitmap inside a shape, scale the fill.

    NOTE : To see all the handles when working with large fills or fills close to the edge of the Stage, select View > Work Area.

Copying strokes and fills with the Eyedropper tool

TOP

You can use the Eyedropper tool to copy fill and stroke attributes from one object and immediately apply them to another object. The Eyedropper tool also lets you sample the image in a bitmap to use as a fill. See Breaking apart groups and objects.

To use the Eyedropper tool to copy and apply stroke or fill attributes:

  1. Select the Eyedropper tool and click the stroke or filled area whose attributes you want to apply to another stroke or filled area.

    When you click a stroke, the tool automatically changes to the Ink Bottle tool. When you click a filled area, the tool automatically changes to the Paint Bucket tool with the Lock Fill modifier turned on.

  2. Click another stroke or filled area to apply the new attributes.

 

Locking a gradient or bitmap to fill the Stage

TOP

You can lock a gradient or bitmap fill to make it appear that the fill extends over the entire Stage and that the objects painted with the fill are masks revealing the underlying gradient or bitmap. For information on applying a bitmap fill

When you select the Lock Fill modifier with the Brush or Paint Bucket tool and paint with the tool, the bitmap or gradient fill extends across the objects you paint on the Stage.

Using the Lock Fill modifier creates the appearance of a single gradient or bitmap fill being applied to separate objects on the Stage.

To use a locked gradient fill:

  1. Select the Brush or Paint Bucket tool and select a gradient or bitmap as a fill.

  2. Select Linear or Radial from the Type pop-up menu in the Color Mixer and then select the Brush or Paint Bucket tool.

  3. Click the Lock Fill modifier.

  4. First paint the areas where you want to place the center of the fill, and then move to other areas.

To use a locked bitmap fill:

  1. Select the bitmap you want to use.

  2. Select Bitmap from the Type pop-up menu in the Color Mixer before selecting the Brush or Paint Bucket tool.

  3. Select the Brush or Paint Bucket tool.

  4. Click the Lock Fill modifier.

  5. First paint the areas where you want to place the center of the fill, and then move to other areas.

Modifying color palettes

TOP

Each Flash file contains its own color palette, stored in the Flash document. Flash displays a file's palette as swatches in the Fill Color and Stroke Color controls and in the Color Swatches panel. The default color palette is the web-safe palette of 216 colors. You can add colors to the current color palette using the Color Mixer.

To import, export, and modify a file's color palette, you use the Color Swatches panel. You can duplicate colors, remove colors from the palette, change the default palette, reload the web-safe palette if you have replaced it, or sort the palette according to hue.

You can import and export both solid and gradient color palettes between Flash files, as well as between Flash and other applications, such as Macromedia Fireworks and Adobe Photoshop.

 

Duplicating and removing colors

TOP

You can duplicate colors in the palette, delete individual colors, or clear all colors from the palette.

To duplicate a color or delete a color:

  1. If the Color Swatches panel is not visible, select Window > Color Swatches.

  2. Click the color that you want to duplicate or delete.

  3. Select Duplicate Swatch or Delete Swatch from the pop-up menu in the upper right corner.

To clear all colors from the color palette:

  • In the Color Swatches panel, select Clear Colors from the pop-up menu in the upper right corner.

All colors are removed from the palette except black and white.

Using the default palette and the web-safe palette

TOP

You can save the current palette as the default palette, replace the current palette with the default palette defined for the file, or load the web-safe palette to replace the current palette.

To load or save the default palette:

  • In the Color Swatches panel, select one of the following commands from the pop-up menu in the upper right corner:

Load Default Colors replaces the current palette with the default palette.

Save as Default saves the current color palette as the default palette. The new default palette is used when you create new files.

To load the web-safe 216-color palette:

  • In the Color Swatches panel, select Web 216 from the pop-up menu in the upper right corner.

 

Sorting the palette

TOP

To make it easier to locate a color, you can sort colors in the palette by hue.

To sort colors in the palette:

  • In the Color Swatches panel, select Sort by Color from the pop-up menu in the upper right corner.

 

Importing and exporting color palettes

TOP

To import and export both RGB colors and gradients between Flash files, you use Flash Color Set files (CLR files). You can import and export RGB color palettes using Color Table files (ACT files) that can be used with Macromedia Fireworks and Adobe Photoshop. You can also import color palettes, but not gradients, from GIF files. You cannot import or export gradients from ACT files.

To import a color palette:

  1. In the Color Swatches panel, select one of the following commands from the pop-up menu in the upper right corner:

    • To append the imported colors to the current palette, select Add Colors.

    • To replace the current palette with the imported colors, select Replace Colors.

  2. Navigate to the desired file and select it.

  3. Click OK.

To export a color palette :

  1. In the Color Swatches panel, select Save Colors from the pop-up menu in the upper right corner.

  2. In the dialog box that appears, enter a name for the color palette.

  3. For Save As Type (Windows) or Format (Macintosh), select Flash Color Set or Color Table. Click Save.

 

Drawing

TOP

The drawing tools in Macromedia Flash Basic 8 and Flash Professional 8 let you create and modify shapes for the artwork in your documents. For an interactive introduction to drawing in Flash, see Creating Graphics: Draw in Flash in Flash Tutorials.

Before you draw and paint in Flash, it is important to understand how Flash creates artwork, how drawing tools work, and how drawing, painting, and modifying shapes can affect other shapes on the same layer.

 

Copyright ADOBE - All Rights Reserved Worldwide

 

 

More Topics:

Working with Flash Documents

How to work in Flash WorkSpace

Working with Projects in Flash

Process to Build your First Application in Flash

Using Symbols, Instances and Library Assets in Flash

How to Build Video Player in Flash

How to Work with Color, Strokes and Fills in Flash

How to Create Document in Flash

What is Vector and Bitmap Graphics in Flash

How to Create a Banner in Flash, Part 1

How to Work with Text in Flash

How to Create a Banner in Flash, Part 2

How to Use Imported Artwork in Flash

How to Create a Banner in Flash, Part 3

How to Work with Graphic Objects in Flash

How to Work with Layers in Flash

How to Use Filters and Blends

Working with Graphics in Flash

What is Accessibility Features in Flash

How to Create Motion (Shape Tween & Motion Tween) in Flash

How to Create an Application in Flash

What is Masking in Flash

How to Work with Video in Flash

How to Use Layout Tools in Flash

What are Behaviors in Flash

How to Work with Sound in Flash

How to Create Symbols and Instances in Flash

What is ActionScript in Flash

How to Write ActionScript With Script Assist in Flash

How to Add Button Animation and Navigation in Flash

What is Data Integration in Flash

How to Work with Screens

How to Create a Presentation with Screens

What is Extending Flash

How to Create Multilanguage Text in Flash

How to Create Graphics: Draw in Flash

What is Flash Lite

Ways of Data Integration

How to Create Graphics: Create a Timeline Animation in Flash

Getting Started with Flash Lite in Flash

How to Publish Flash Documents

How to Create Graphics: Making Animations with Easing

Learning Flash Lite 1.X ActionScript in Flash

How to Export Flash Content and Images from Flash

How to Create Graphics: Applying Gradients in Flash

Process of Writing and Editing ActionScript 2.0 in Flash

How to Create Accessible Content in Flash

How to Create Graphics: Apply Graphic Filters and Blends

What is Data and Data Types in Flash

Process of Printing from SWF Files in Flash

Using ActionScript: How to Use Script Assist mode in Flash

Learn Syntax and Language Fundamentals in Flash

How to Create E-learning Content in Flash

Using ActionScript: How to Write Scripts in Flash

Working with Functions and Methods in Flash

Process of Using Templates in Flash

Using ActionScript: Process of Adding Interactivity in Flash

What are Classes in Flash

Control Tag Summary of XML to UI in Flash

Using ActionScript: How to Create a Form with Conditional Logic and Send Data in Flash

What is Inheritance in Flash

What is Data Integration: Overview

Using ActionScript: How to Work with Objects and Classes in Flash

Overview on Interfaces in Flash

What is Data Integration: Using XML for a Timesheet

How to Work with Text and Strings in Flash

How to use Handling Events in Flash

What is Data Integration: Using XUpdate to Update the Timesheet

Learning Animation, Filters and Drawings in Flash

How to Work with Movie Clips in Flash

How to Create Interaction with ActionScript in Flash

How to Work with Images, Sound, and Video in Flash

How to Work with External Data in Flash

What is Security in Flash

How to Debug Applications in Flash

List of Error Messages in Flash

Using Object-Oriented Programming with ActionScript 1.0 in Flash

How to Write Scripts for Earlier Versions of Flash Player in Flash

List of all Keyboard Keys and Key Code Values for using in Flash

Terminology

Introduction to Components in Flash

What are Components in Flash

How to Create an Application with Components

How to Work with Components in Flash

How to Handle Component Events in Flash

How to Customize Components in Flash

How to Create Components in Flash

What is Collection Properties in Flash