Macromedia Flash File Format (SWF)

recompiled with RAW HTWL

Shape Morphing

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

Shape Morphing Contents

Shape Morphing
DefineMorphShape
Morph Fill Styles
Morph Gradient Values
Morph Line Styles

Shape Morphing

Shape ‘morphing’ is the metamorphosis of one shape into another over time. Macromedia Flash supports a flexible morphing model, which allows a number of shape attributes to vary during the morph. Macromedia Flash (SWF) defines only the start and end states of the morph. The Macromedia Flash Player is responsible for interpolating between the end-points and generating the ‘in-between’ states.

The shape attributes that can be varied during the morph are:

The position of each edge in the shape.
The color and thickness of the outline.
The fill color of the shape (if filled with a color)
The bitmap transform (if filled with a bitmap)
The gradient transform (if filled with a gradient)
The color and position of each point in the gradient.

A number of restrictions apply to morphing. These restrictions are:

The start and end shapes must have the same number of edges
The start and end shapes must have the same type of fill (i.e. solid, gradient or bitmap)
The style change records must be the same for the start and end shapes
If filled with a bitmap, both shapes must be filled with the same bitmap.
If filled with a gradient, both gradients must have the same number of color points.

Below is an illustration of a morph from a blue rectangle to a red quadrilateral over six frames. The green outlines represent the ‘in-between’ shapes of the morph sequence. Note that both shapes have the same number of points, and the same type of fill, namely a solid fill. As well as changing shape, the shape also gradually changes color from blue to red.

There are two tags involved in defining and playing a morph sequence:

DefineMorphShape defines the start and end states of the morph. A morph object does not use previously defined shapes, it is considered a special type of shape with only one character ID.
DefineMorphShape contains a list of edges for both the start and end shapes. It also defines the fill and line styles, as they are at the start and end of the morph sequence.

The PlaceObject2 tag displays the morph object at some point in time during the morph sequence. The ratio field controls how far the morph has progressed. A ratio of zero produces a shape identical to the start condition. A ratio of 65535 produces a shape is identical to the end condition.

For example, to calculate the x-coordinate of an edge in an ‘in-between’ shape, the equation is:

inbetween.x = start.x + (end.x - start.x) * ratio / 65535;

DefineMorphShape

The DefineMorphShape tag defines the start and end states of a morph sequence. A morph object does not use previously defined shapes, it is considered a special type of shape with only one character ID. A morph object should be displayed with the PlaceObject2 tag, where the ratio field specifies how far the morph has progressed.

StartBounds defines the bounding-box of the shape at the start of the morph, and EndBounds defines the bounding-box at the end of the morph

MorphFillStyles contains an array interleaved fill styles for the start and end shapes. The fill style for the start shape is followed the corresponding fill style for the end shape. Similarly,
MorphLineStyles contains an array of interleaved line styles.

The StartEdges array specifies the edges for the start shape, and the style change records for both shapes. Because the StyleChangeRecords must be the same for the start and end shapes, they are defined only in the StartEdges array. The EndEdges array specifies the edges for the end shape, and contains no style change records. The number of edges specified in StartEdges must equal the number of edges in EndEdges.

Note: Strictly speaking MoveTo records fall into the category of StyleChangeRecords, however they should be included in both the StartEdges and EndEdges arrays.

It is possible for an edge to change type over the course of a morph sequence. A straight edge can become a curved edge and vice versa. In this case, think of both edges as curved. A straight edge can be easily represented as a curve, by placing the off-curve (control) point at the mid-point of the straight edge, and the on-curve (anchor) point at the end of the straight edge. The calculation is as follows:

CurveControlDelta.x = StraightDelta.x / 2; CurveControlDelta.y = StraightDelta.y / 2; CurveAnchorDelta.x = StraightDelta.x / 2; CurveAnchorDelta.y = StraightDelta.y / 2;

     DefineMorphShape

     Field           Type           Comment

     Header           RECORDHEADER           Tag ID = 46

     CharacterID           UI16           ID for this character

     StartBounds           RECT           Bounds of the start shape

     EndBounds           RECT           Bounds of the end shape

     Offset           UI32           Indicates offset to EndEdges

     MorphFillStyles           MorphFillStyles           Fill style information is stored in the same manner as for a standard shape, however each fill consists of interleaved information based on a single style type to accomadate morphing.

     MorphLineStyles           MorphLineStyles           Line style information is stored in the same manner as for a standard shape, however each line consists of interleaved information based on a single style type to accomadate morphing.

     StartEdges           SHAPE           Contains the set of edges and the style bits that indicate style changes (for example, MoveTo, FillStyle, and LineStyle.) Numer of edges must equal the number of edges in EndEdges.

     EndEdges           SHAPE           Contains only the set of edges, with no style information. Number of edges must equal the number of edges in StartEdges.

SwfJava v0.0: how to create a DefineMorphShape object

{not yet implemented}

Morph Fill Styles

A morph fill style array enumerates a number of fill styles. The format of a fill style array is described in the following table:

     MorphFillStyles

     Field           Type           Comment

     FillStyleCount           Count = UI8           Count of fill styles

     FillStyleCountExtended           If count = 0xFF count = UI16           Extended count of fill styles.

     FillStyles           MORPHFILLSTYLE[count]           Array of fill styles

SwfJava v0.0: how to create a MorphFillStyles object

{not yet implemented}

A fill style represents how a close shape is filled in. The format of a fill style value within the file is described in the following table:

     MorphFillStyle

     Field           Type           Comment

     FillStyleType           type = UI8
0x00 = solid fill
0x10 = linear gradient fill
0x12 = radial gradient fill
0x41 = clipped bitmap fill           Type of fill style

     StartColor           If type = 0x00 RGBA           Solid fill color with transparency information for start shape

     EndColor           If type = 0x00 RGBA           Solid fill color with transparency information for end shape

     StartGradientMatrix           If type = 0x10 or 0x12 MATRIX           Matrix for gradient fill for start shape

     EndGradientMatrix           If type = 0x10 or 0x12 MATRIX           Matrix for gradient fill for end shape

     Gradient           If type = 0x10 or 0x12 MORPHGRADIENT           Gradient fill

     BitmapId           If type = 0x40 or 0x41 UI16           ID of bitmap character for fill

     StartBitmapMatrix           If type = 0x40 or 0x41 MATRIX           Matrix for bitmap fill for start shape

     EndBitmapMatrix           If type = 0x40 or 0x41 MATRIX           Matrix for bitmap fill for end shape

SwfJava v0.0: how to create a MorphFillStyle object

{not yet implemented}

Morph Gradient Values

Gradient information for a fill style. The format of gradient information is described in the following table:

     MorphGradient

     Field           Type           Comment

     NumGradients           nGrads = UI8           1 to 8

     GradientRecords           MORPHGRADRECORD[nGrads]           Gradient records — see below

SwfJava v0.0: how to create a MorphGradient object

{not yet implemented}

The gradient record format is:

     MorphGradRecord

     Field           Type           Comment

     StartRatio           UI8           Ratio value for start shape

     StartColor           RGBA           Color of gradient for start shape

     EndRatio           UI8           Ratio value for end shape

     EndColor           RGBA           Color of gradient for end shape

SwfJava v0.0: how to create a MorphGradRecord object

{not yet implemented}

Morph Line Styles

A morph line style array enumerates a number of fill styles. The format of a line style array is described in the following table:

     MorphLineStyles

     Field           Type           Comment

     LineStyleCount           count = UI8           Count of line styles

     LineStyleCountExtended           If count = 0xFF count = UI16           Extended count of line styles

     LineStyles           MORPHLINESTYLE[count]           Array of line styles

SwfJava v0.0: how to create a MorphLineStyles object

{not yet implemented}

A line style represents a width and color of a line. DefineMorphShape supports only solid line styles. The format of a line style value within the file is described in the following table:

     MorphLineStyle

     Field           Type           Comment

     StartWidth           UI16           Width of line in start shape in twips

     EndWidth           UI16           Width of line in end shape in twips

     StartColor           RGBA           Color value including alpha channel information for start shape

     EndColor           RGBA           Color value including alpha channel information for end shape

SwfJava v0.0: how to create a MorphLineStyle 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