Gradients

Gradients

Gradients................................................................................................................................................................. 1

Gradients................................................................................................................................................................. 1

Gradient Transformations...................................................................................................................................... 2

Gradient Control Points......................................................................................................................................... 2

Gradient Structures................................................................................................................................................ 2

Gradients

Here is an overview of the SWF gradient model:

· There are two styles of gradient – Linear and Radial.

· Each gradient has its own transformation matrix, and can be transformed independently of its parent shape.

· A gradient can have up to eight control points. Colors are interpolated between the control points to create the color ramp.

· Each control point is defined by a ratio and an RGBA color. The ratio determines the position of the control point in the gradient, the RGBA value determines its color.

Below are some examples of Flash gradients. From left to right, there is:

1. A simple white-to-black linear gradient.

2. A simple white-to-black radial gradient.

3. A “rainbow” gradient consisting of seven control points; red, yellow, green, cyan, blue, purple, and red.

4. A three-point gradient, where the end points are opaque and the center point is transparent. The result is a gradient in the alpha-channel that allows the diamond shape in the background to show through.

Gradient Transformations

All gradients are defined in a standard space called the gradient square. The gradient square is centered at (0,0), and extends from (-16384,-16384) to (16384,16384).

Each gradient is mapped from the gradient square to the display surface using a standard transformation matrix. This matrix is stored in the FILLSTYLE structure.

Example: In the diagram below a linear gradient is mapped onto a circle 4096 units in diameter, and centered at (2048,2048).

The 2x3 MATRIX required for this mapping is:

| 0.125 0.000 |

| 0.000 0.125 |

| 2048.000 2048.000 |

That is, the gradient is scaled to one-eight of its original size (32768 / 4096 = 8), and translated to (2048, 2048).

Gradient Control Points

The position of a control point in the gradient is determined by a ‘ratio’ value between 0 and 255. For a linear gradient, a ratio of zero maps to the left side of the gradient square, and a ratio of 255 maps to the right side. For a radial gradient, a ratio of zero maps to the center point of the gradient square, and a ratio of 255 maps to the largest circle that fits inside the gradient square.

The color of a control point is determined by an RGBA value. An alpha value of zero means the gradient is completely transparent at this point. An alpha value of 255 means the gradient is completely opaque at this point.

Controls points are sorted by ratio, with the smallest ratio first.

Gradient Structures

The gradient structures are part of the FILLSTYLE structure.

(See class FGradient in the Flash File Format SDK)

GRADIENT
Field	Type	Comment
NumGradients	nGrads = UI8	1 to 8
GradientRecords	GRADRECORD[nGrads]	Gradient records - see below

The GRADRECORD defines a gradient control point:

(See class FGradRecord in the Flash File Format SDK)

GRADRECORD
Field	Type	Comment
Ratio	UI8	Ratio value
Color	RGB (Shape1 or Shape2) RGBA (Shape3)	Color of gradient