Flash - Gradients
It seemed simple - draw a box with a vertical gradient,
then rotate it 90° as part of an animation.
I wanted this to represent the atmosphere -
thicker (more blue) at the bottom thinning to black at the top.
After a few days, I actually got it to work.
Gradients
| Detail Steps
| Linear Gradients
| Radial Gradients
| Problem with turning off the border
Gradients
Gradients are created via a 3-step process
- Draw an object
- Change the fill color to a gradient
- Use the gradient transform tool to rotate the gradient
and to control how fast the color changes
It is also possible to select a gradient fill before drawing objects.
Detail Steps
- Select the Rectangle tool
- Depress the Object Drawing button - circle inside a square
near the bottom of the Toolbar.
This causes the fill and the bordering outline to be treated
as a single object instead of 5 separate objects.
- Optionally, turn off the border by changing the color to
the red slash. This can also be done after the object is drawn.
- Draw a rectangle - click on the canvas and drag.
- The object you just drew is "selected" and the next operation
will apply to it.
- In the Color window (to the right of the Stage)
- Select the paint can (Fill color icon)
- Change the Type to Linear
- Set Overflow to the first option
- There is a gradient bar with 2 (or more) sliders under it.
Double click the first slider to open the color selector.
- At this point, you can single click each of the sliders and
select colors from the palette above the gradient bar.
This palette is not active until after you have double clicked
one of the sliders - I assume that this is a program bug.
At this point, you can also click and drag on the palette to dynamically change
the color.
- On the stage, the rectangle currently shows a horizontal gradient.
- On the Toolbar, click and hold the Free Transform Tool icon
(an arrow head and square box icon)
until the menu opens - select the Gradient Transform Tool
- Select (click on) the rectangle on the stage (the one showing the gradient)
- Gradient Transform handles will be displayed
- The mouse cursor shows a gradient when it is over an
object with a gradient fill
- The 3 Linear Gradient handles are
- A rotation center
- Rate of change - a square box
- Rotation handle - a circle on the upper edge of the rectangle
- Using the rotation handle, rotate the gradient from
horizontal to vertical
- Finally, select the Free Transform Tool and resize the
rectangle
Clicking on the gradient sliders is weird
- Normally, they are not "active" until they have been double clicked and
opened a color selection window. I assume that this is a design problem
since it is not logical (to me).
- Once they are "active", when you click and hold the mouse button down,
the color window will open when you release the button ... just like double clicking.
- Sometimes, nonfunctional gradient manipulation handles
are displayed on the rectangle -
this appears to be a program bug. Clicking on them does nothing.
Things that took a while to discover
- The Gradient Transform Tool
is hidden under the Free Transform Tool
(on the Toolbar).
- In the Color window, extra sliders are removed by dragging them
off the bottom of the gradient bar. This does not always work.
Keep trying ... double clicking first sometimes helps.
- When changing the Type, be sure Fill color (the paint can icon)
is selected ... not Stroke color (the pen). Apparently, gradients
can be applied to both ... I had assumed that it would apply to ONLY the fill.
That actually took quite a while to figure out.
- You have to double click the sliders to activate them ...
after that, the operation is fairly logical.
- After resizing a rectangle with a vertical gradient,
the gradient handles will be way off the stage. I had to change the zoom
to 50% to find them.
Things I would change
- When you right click an object with a gradient fill,
there would be an option to enter Gradient Transform mode.
(There is an option to enter Free Transform mode.)
- When an object with a gradient is selected, the Properties panel should
have an option to enter Gradient Transform mode.
The rotation would also be settable.
- With vertical gradients, the handles should be closer to the object ...
the spacing is ok for horizontal gradients.
- Help on gradients would actually be useful.
Linear Gradients
Handles are small icons that you click and drag
to perform some action.
With a linear gradient, there are 3 handles
Icon
| Mouse cursor
| Function
|
---|
The small circle in the middle of the object
| Vertical and horizontal double arrow
| Sets the rotation center
|
The square box Initially, on the right side of the gradient
| Horizontal double arrow
| Changes how fast the gradient changes - drag the box left and right
This handle is associated with 2 lines - the gradient occurs between
these lines. Outside these lines, the color does not change.
If either line is left inside the object, there is an obvious color change
at that point.
|
The circle near the upper right hand corner of the object
| Four arrows in a circle
| Controls the angle of the gradient
|
After resizing a rectangle with a vertical gradient,
the gradient handles may be way off the stage.
To locate them, try changing the zoom to 50% or less.
The Adobe help suggests that you select View / Pasteboard,
but that is the default ... and it really does not help.
Note: |
|
Sometimes, while setting the gradient, Flash just crashes and disappears.
Of course, I loose all my unsaved work.
Actually, this happens fairly often ... be sure to save frequently.
According to the help,
Press Shift to constrain the direction of a linear gradient fill to multiples of 45°.
It does not work. So I tried the other keys - Every time I use Ctrl while
setting the gradient, the program crashes. Every time. However, in these cases,
there is a dialog box to report the error to Microsoft.
In the other cases (when NOT using Ctrl), there is no dialog box and the program simply disappears.
|
Alternate Method to Rotate a Gradient
To set the linear gradient direction, select the
Paint Bucket Tool and drag it to produce a linear gradient in a given direction.
After releasing the mouse button, click inside the object a second time
to see the gradient.
In order to produce a
vertical, horizontal, or 45 degree angle gradient,
hold the Shift key down while dragging the Paint Bucket Tool.
Radial Gradients
With a radial gradient, there are 5 handles
Icon
| Mouse cursor
| Function
|
---|
The small circle in the middle of the handles
| Vertical and horizontal double arrow
| Sets the rotation center
|
The triangle - initially in the middle of the handles
next to the rotation center (circle)
| Upside down triangle
| Used to move the center of the gradient
so that it can be separate from the rotation center.
(So far, I have found no reason for this. Perhaps it can be used
to set the light direction for several objects at the same time.)
|
The square box
| Horizontal double arrow
| Changes the aspect ratio - circle to ellipse
|
The circle closest to the box
| Not sure, too small to see
| Controls the gradient's rate of change
(diameter of the circle)
|
The circle farthest from the box
| Four arrows in a circle
| Controls the
angle of the ellipse (no visible effect if the aspect ratio is one -
if the gradient is a circle)
|
The built-in F1 help actually has some of this
(if you can find it - look for Transform gradient and bitmap fills) ...
but it is wrong - it totally mislabels the drawing.
There is an image showing the 5 handles ... but only the first is correctly labeled.
The same errors are on
the web version.
Note: |
|
Under the Color window is the Transform window
which controls the rotation of the object ...
not the gradient. If you make the mistake of clicking the Reset button,
the gradient control is resized in such a way that it is basically useless.
(It becomes a straight line - the only available handle moves the center of the gradient.
None of the other handles are available.)
The History list shows this action as Undefined.
In the History window, there is a slider - you can slide this to
remove the change and make gradient control functional again.
|
Problem with turning off the border
For the initial image, I wanted a rectangle without a black border.
Before drawing the rectangle, I selected the Stroke color
(the color selection box under the pencil) and set it to no border
- a red slash.
When I drew the rectangle, it was displayed with a black border.
I guess I'm a little dense, but it took more than an hour
before I realized that the black border goes away after I draw
another object. With the other drawing applications I use,
resize handles are automatically displayed on an object
as soon as it is drawn.
With Flash, the black border is a selection indication
without the usual resize handles (8 square box icons)
... instead you have to
first select Free Transform Tool and then
click on the object to display the handles.
Author: Robert Clemenzi -
clemenzi@cpcug.org