Gradients are made up of two or more colors that gradually fade into each other, creating an interesting color effect.
In this tutorial you can learn how to create and edit gradient colors, and how to use the "Gradient Transform Tool"

Using and editing Gradient

Gradients are located at the bottom of the "Color Palette", as shown in the image below.
There are two types of gradients:

Colors gradient

Colors gradient
Gradients can be used to create the illusion of depth and perspective.
- To use a gradient effect, select the object to which you want to add a gradient, click on the "Fill Color" icon, then, from the Color palete select a gradient. Flash automatically displays your object using the gradient you chose.
That gradient remains selected in the Fill Color button, so if you draw other shapes, they will use that gradient as a fill color.

Editing gradients

Once you have selected a gradient you can edit it, adding up to 16 colors to it, creating new color combinations and changing the position of the colors.
  1. Click the Window menu -> Color, Flash will open the "Color Panel" (see the image below).
    Gradient edit
  2. In the Color panel, click the Fill Style Type list arrow, and then click Linear Gradient or Radial Gradient.
  3. Click in the Gradient bar to add a new color pointer, which you can edit and move (by dragging it with the mouse cursor) to adjust the color placement.
  4. Each color added in the Gradient bar can be edited with the options: HSB, RGB and A (alpha)
  5. Once you have defined a gradient, to add it in the Color Palette, click Add Swatches (in the Options menu, top-right corner)
- To remove a color pointer added in the "Gradient bar", click and drag it out of the "Color panel".
In the presentation below you can see how to use and edit gradient.

Using and editing gradient

The FLA file with this presentation can be downloaded from -> FLA - Ex-Gradient.

Gradient Transform Tool

The Gradient Transform Tool can be selected from the Tools panel, it shares the same button with the "Free Transform tool".
After you create a gradient fill, you can use this tool to transform it by adjusting the size, rotation, width, or center of the fill, to create interesting effects.

Using Gradient Transform

  1. Click the Gradient Transform tool on the Tools panel.
  2. Click the shape with gradient fill to select it. Specific points appear, which can be used to rotate and modify the gradient shape.
  3. Click and trag each point to see their effects (see the image below to identify their functions).
    Gradient Transform
- See also the next Flash presentation, with Gradient Transform example:
The FLA file with this presentation can be downloaded from -> FLA - Ex-Gradient Transform.

Gradient Transform tool can also be used to transform color in shapes which use Bitmap fill.

Daily Test with Code Example

Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
 <li><a href="" title="CSS Course">CSS Course</a></li>
 <li><a href="" title="Flash Games">Flash Games</a></li>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
Creating Gradients

Last accessed pages

  1. JavaScript Course - Free lessons (17194)
  2. Multiple Select Dropdown List with AJAX (16654)
  3. Read Excel file data in PHP - PhpExcelReader (72735)
  4. Create simple Website with PHP (25547)
  5. MSLA2 - Filter Content with Multiple Select Lists with Ajax (1812)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1484)
  2. Contact page - CoursesWeb (1455)
  3. Tabs effect with CSS (1448)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (567)
  5. PHP getElementById and getElementsByTagName (429)