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 It is also possible to select a gradient fill before drawing objects.


Detail Steps

Clicking on the gradient sliders is weird Things that took a while to discover Things I would change


Linear Gradients

Handles are small icons that you click and drag to perform some action.

With a linear gradient, there are 3 handles

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 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
URL: http:// cpcug.org / user / clemenzi / technical / Languages / Flash / Gradients.html