Shape Morphing Contents............................................................................................................................. 1
Shape Morphing.................................................................................................................................................... 1
DefineMorphShape............................................................................................................................................... 2
Morph Fill Styles.................................................................................................................................................. 3
Morph Gradient Values......................................................................................................................................... 4
Morph Line Styles................................................................................................................................................. 4
SDK Examples......................................................................................................................................................... 5
Shape ‘morphing’ is the metamorphosis of one shape into another over time. Flash supports a flexible morphing model, which allows a number of shape attributes to vary during the morph. SWF defines only the start and end states of the morph. The 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 five 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:
2.
PlaceObject2
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;
(See class FDTDefineMorphShape in the Flash File Format SDK)
|
DefineMorphShape |
||
|
Field |
Type |
Comment |
|
Header |
RECORDHEADER |
Tag ID = 46 |
|
Character ID |
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 |
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 accommodate
morphing. |
|
|
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 accommodate
morphing. |
|
|
StartEdges |
Contains the set of edges
and the style bits that indicate style changes (for example, MoveTo,
FillStyle, and LineStyle.) Number of edges must equal the number of edges in
EndEdges. |
|
|
EndEdges |
Contains only the set of
edges, with no style information. Number of edges must equal the number of
edges in StartEdges. |
|
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 |
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:
(See class FMorphFillStyle in the Flash File Format SDK)
|
MORPHFILLSTYLE |
||
|
Field |
Type |
Comment |
|
FillStyleType |
type = UI8 |
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 |
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 |
The gradient record format is:
(See class FMorphGradRecord in the Flash File Format SDK)
|
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 |
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 |
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:
(See class FMorphLineStyle in the Flash File Format SDK)
|
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 |
The SDK contains C++ examples that demonstrate how to define shape morphs in SWF:
· FExampleMorph.cpp uses the low-level manager to create a triangle with a thin black outline, that morphs into a triangle with a thick white outline (and curved egdes). The AddShapeRec_1 method of the FDTDefineMorphShape class adds the edges of the start shape. AddShapeRec_2 adds the edges of the end shape. The FMorphLineStyle class is used to define the start line style (thin black) and end line style (thick white). A series of 66 FCTPlaceObject2 objects are created to display the morph object at different stages of the morph.