Macromedia Flash File Format (SWF)

recompiled with RAW HTWL

Gradients

Introduction	Basic Types	Display List	Control Tags
Shapes	(Examples Shapes)	Gradients	Buttons
Sprites	Fonts and Text	Shape Morphing	Bitmap
Sounds	Actions	ActionScripts	Reference

Gradients Contents

Gradients
Gradient Transformations
Gradient Control Points
Gradient Structures

Gradients

Here is an overview of the Macromedia Flash (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 Macromedia Flash gradients. From left to right, there is:

A simple white-to-black linear gradient.
A simple yellow-to-orange radial gradient.
A “rainbow” gradient consisting of seven control points; red, yellow, green, cyan, blue, purple, and red.
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 structure.

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

Gradient Transformation

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.

     GRADIENT

     Field           Type           Comment

     NumGradients           nGrads = UI8           1 to 8

     GradientRecords           GRADRECORD [nGradients]           Gradient records - see below

SwfJava v0.0: how to create a Gradient object

{not yet implemented}

The GRADRECORD defines a gradient control point:

     GRADRECORD

     Field           Type           Comment

     Ratio           UI8           Ratio value

     Color           RGB (Shape1 or Shape2)
RGBA (Shape3)           Color of gradient

SwfJava v0.0: how to create a GradRecord object

{not yet implemented}

Introduction	Basic Types	Display List	Control Tags
Shapes	(Examples Shapes)	Gradients	Buttons
Sprites	Fonts and Text	Shape Morphing	Bitmap
Sounds	Actions	ActionScripts	Reference