<?xml version="1.0" encoding="utf-8"?>
<!---
IInterpolator Sample.
build : Flex SDK 4.1.0.14570
-->
<s:Application
    xmlns:fx = "http://ns.adobe.com/mxml/2009"
    xmlns:s  = "library://ns.adobe.com/flex/spark"
    width    = "100%"
    height   = "100%"
 viewSourceURL="srcview/index.html">

    <fx:Script>
        <![CDATA[
            import spark.effects.interpolation.HSBInterpolator;
            import spark.effects.interpolation.NumberInterpolator;
            import spark.effects.interpolation.RGBInterpolator;
        ]]>
    </fx:Script>

    <s:layout>
        <s:VerticalLayout horizontalAlign="left" gap="10" paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" />
    </s:layout>

    <s:states>
        <s:State name="default" />
        <s:State name="aState" />
    </s:states>

    <s:transitions>
        <s:Transition>
            <s:Parallel duration="5000">
                <s:AnimateColor
                    targets      = "{[targetRGB_B1, targetRGB_B2, targetRGB_B3, targetRGB_W1, targetRGB_W2, targetRGB_W3]}"
                    interpolator = "{RGBInterpolator.getInstance()}"
                 />
                <s:AnimateColor
                    targets      = "{[targetHSB_B1, targetHSB_B2, targetHSB_B3, targetHSB_W1, targetHSB_W2, targetHSB_W3]}"
                    interpolator = "{HSBInterpolator.getInstance()}"
                 />
                <s:AnimateColor
                    targets      = "{[targetNumber_B1, targetNumber_B2, targetNumber_B3, targetNumber_W1, targetNumber_W2, targetNumber_W3]}"
                    interpolator = "{NumberInterpolator.getInstance()}"
                 />
            </s:Parallel>
        </s:Transition>
    </s:transitions>

    <s:Button width="200" height="40" fontSize="20" label="test" click="currentState=currentState=='default'?'aState':'default'" />

    <s:Line width="100%" height="1">
        <s:stroke>
            <s:SolidColorStroke color="0xcccccc" />
        </s:stroke>
    </s:Line>

    <s:HGroup width="100%" height="100%" gap="0">
        <s:VGroup width="200" height="100%" gap="20">
            <s:Label height="100%" fontSize="20" text="RGBInterpolator" />
            <s:Label height="100%" fontSize="20" text="HSBInterpolator" />
            <s:Label height="100%" fontSize="20" text="NumberInterpolator" />
        </s:VGroup>
        <s:VGroup width="100%" height="100%">
            <s:Rect width="100%" height="100%">
                <s:fill>
                    <s:LinearGradient rotation="0">
                        <s:GradientEntry id="targetRGB_B1" color="0xff0000" color.aState="0x000000" />
                        <s:GradientEntry id="targetRGB_B2" color="0x00ff00" color.aState="0x000000" />
                        <s:GradientEntry id="targetRGB_B3" color="0x0000ff" color.aState="0x000000" />
                    </s:LinearGradient>
                </s:fill>
            </s:Rect>
            <s:Rect width="100%" height="100%">
                <s:fill>
                    <s:LinearGradient rotation="0">
                        <s:GradientEntry id="targetHSB_B1" color="0xff0000" color.aState="0x000000" />
                        <s:GradientEntry id="targetHSB_B2" color="0x00ff00" color.aState="0x000000" />
                        <s:GradientEntry id="targetHSB_B3" color="0x0000ff" color.aState="0x000000" />
                    </s:LinearGradient>
                </s:fill>
            </s:Rect>
            <s:Rect width="100%" height="100%">
                <s:fill>
                    <s:LinearGradient rotation="0">
                        <s:GradientEntry id="targetNumber_B1" color="0xff0000" color.aState="0x000000" />
                        <s:GradientEntry id="targetNumber_B2" color="0x00ff00" color.aState="0x000000" />
                        <s:GradientEntry id="targetNumber_B3" color="0x0000ff" color.aState="0x000000" />
                    </s:LinearGradient>
                </s:fill>
            </s:Rect>
        </s:VGroup>
        <s:VGroup width="100%" height="100%">
            <s:Rect width="100%" height="100%">
                <s:fill>
                    <s:LinearGradient rotation="180">
                        <s:GradientEntry id="targetRGB_W1" color="0xff0000" color.aState="0xffffff" />
                        <s:GradientEntry id="targetRGB_W2" color="0x00ff00" color.aState="0xffffff" />
                        <s:GradientEntry id="targetRGB_W3" color="0x0000ff" color.aState="0xffffff" />
                    </s:LinearGradient>
                </s:fill>
            </s:Rect>
            <s:Rect width="100%" height="100%">
                <s:fill>
                    <s:LinearGradient rotation="180">
                        <s:GradientEntry id="targetHSB_W1" color="0xff0000" color.aState="0xffffff" />
                        <s:GradientEntry id="targetHSB_W2" color="0x00ff00" color.aState="0xffffff" />
                        <s:GradientEntry id="targetHSB_W3" color="0x0000ff" color.aState="0xffffff" />
                    </s:LinearGradient>
                </s:fill>
            </s:Rect>
            <s:Rect width="100%" height="100%">
                <s:fill>
                    <s:LinearGradient rotation="180">
                        <s:GradientEntry id="targetNumber_W1" color="0xff0000" color.aState="0xffffff" />
                        <s:GradientEntry id="targetNumber_W2" color="0x00ff00" color.aState="0xffffff" />
                        <s:GradientEntry id="targetNumber_W3" color="0x0000ff" color.aState="0xffffff" />
                    </s:LinearGradient>
                </s:fill>
            </s:Rect>
        </s:VGroup>
    </s:HGroup>

</s:Application>