Spark transform effects

The Spark property effects work by modifying one or more properties of the target over the duration of the effect. Using the property effects, you can define two effects that play in parallel but modify the same property of the target. In this situation, the two effects conflict with each other and the results of the effects are undefined.

The Spark transform effects are designed to work together. You can define multiple effects that, while playing in parallel, do not interfere with each other. When executing multiple transform effects in parallel, the effects are combined into a single transformation, rather than playing independently. By combining the transform effects, Flex eliminates the chance that one effect could interfere with another.

The Spark transform effects include the Move, Rotate, and Scale effects.

Applying transform effects

The following example applies the Rotate and Move effects in parallel to an Image control:

<?xml version="1.0"?>
<!-- behaviors\SparkXFormRotateMove.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Declarations>
        <s:Parallel id="parallelRMForward"
            target="{myImage}">
            <s:Rotate
                angleBy="180"/>
            <s:Move
                xBy="100" 
                yBy="100"/> 
        </s:Parallel>
        <s:Parallel id="parallelRMBack"
            target="{myImage}">
            <s:Rotate
                angleBy="180"/>
            <s:Move
                xBy="-100"
                yBy="-100"/>
        </s:Parallel>
    </fx:Declarations>

    <s:Button label="Play Effect Forward" 
        x="10" y="10"
        click="parallelRMForward.end();parallelRMForward.play();"/>
    <s:Button label="Play Effect Backward" 
        x="150" y="10"
        click="parallelRMBack.end();parallelRMBack.play();" />
    <s:Image id="myImage" 
        x="10" y="50"
        source="@Embed(source='assets/logo.jpg')"/>
</s:Application>
The executing SWF file for the previous example is shown below:

Transform effects operate relative to the transform center of the target. By default, the transform center of the target is the upper-left corner of the target, corresponding to coordinates (0,0) in the target coordinate system.

For the Move effect, the change in position is measured by a change of the location of the transform center of the target. The Rotate effect rotates the target around the transform center, and the Scale effect scales the target while the transform center of the target stays stationary.

You do not have to use the upper-left corner of the target as the transform center. For example, instead of rotating the target around the upper-left corner, you rotate the target around its center point.

You can set the coordinates of the transform center either on the target itself, or on the effect class. If you set the transform center on the target, all transform effects use that transform center. Use the UIComponent properties transformX, transformY, and transformZ to define the transform center of the target.

If you set the transform center on the effect, the effect uses that transform center for the duration of the effect. Use the transformX, transformY, and transformZ properties on the transform effect classes to set the transform center for all effect targets. Setting these properties on the effect class overrides the corresponding setting on the target.

You do not have to specify all three properties. For example, if you only want to specify the x location of the transform center, set only the transformX property on the target or on the effect class.

You can also set the effect’s autoCenterTransform property to true to configure the effect to play the transform around the center point of the target. If you apply the effect to multiple targets, Flex calculates the transform center independently for each target.

If you apply multiple transform effects in parallel to the same target, set the transform center to the same value for all the effects. For example, set the autoCenterTransform property to true for one transform effect, set it to the same value for all effects.

The next example modifies the previous example set the autoCenterTransform property to true. The effects now operate on the center of the target:

<?xml version="1.0"?>
<!-- behaviors\SparkXFormRotateMoveAutoCenter.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Declarations>
        <s:Parallel id="parallelRMForward"
            target="{myImage}">
            <s:Rotate
                angleBy="180"
                autoCenterTransform="true"/>
            <s:Move
                xBy="100"
                yBy="100"
                autoCenterTransform="true"/>
        </s:Parallel>
        <s:Parallel id="parallelRMBack"
            target="{myImage}">
            <s:Rotate
                angleBy="180"
                autoCenterTransform="true"/>
            <s:Move
                xBy="-100"
                yBy="-100"
                autoCenterTransform="true"/>
        </s:Parallel>
    </fx:Declarations>

    <s:Button label="Play Effect Forward" 
        x="10" y="10"
        click="parallelRMForward.end();parallelRMForward.play();"/>
    <s:Button label="Play Effect Backward" 
        x="150" y="10"
        click="parallelRMBack.end();parallelRMBack.play();" />
    <s:Image id="myImage" 
        x="10" y="50"
        source="@Embed(source='assets/logo.jpg')"/>
</s:Application>
The executing SWF file for the previous example is shown below:

Limitations with transform effects

The only limitation of transform effects is that they cannot be played multiple times. Therefore, you cannot use the repeatCount, repeatDelay, and repeatBehavior properties with transform effects.