<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/06/animating-colors-using-the-fxanimatecolor-effect-in-flex-gumbo/ -->
<FxApplication name="FxAnimateColor_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        initialize="init();">

    <Script>
        <![CDATA[
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.Button;
            import mx.controls.ColorPicker;
            import mx.effects.FxAnimateColor;
            import mx.events.ColorPickerEvent;
            import mx.graphics.Ellipse;
            import mx.graphics.SolidColor;

            private var btn:Button;
            private var color1:ColorPicker;
            private var color2:ColorPicker;
            private var ellipse:Ellipse;
            private var fxAnimateColor:FxAnimateColor;

            private function init():void {
                color1 = new ColorPicker();
                color1.selectedColor = 0xFF0000; // red;
                color1.addEventListener(ColorPickerEvent.CHANGE, color1_change);

                color2 = new ColorPicker();
                color2.selectedColor = 0x0000FF; // blue
                color2.addEventListener(ColorPickerEvent.CHANGE, color2_change);

                btn = new Button();
                btn.label = "Play";
                btn.addEventListener(MouseEvent.CLICK, btn_click);

                var formItem1:FormItem = new FormItem();
                formItem1.label = "colorFrom:";
                formItem1.addChild(color1);

                var formItem2:FormItem = new FormItem();
                formItem2.label = "colorTo:";
                formItem2.addChild(color2);

                var formItem3:FormItem = new FormItem();
                formItem2.addChild(btn);

                var form:Form = new Form();
                form.addChild(formItem1);
                form.addChild(formItem2);
                form.addChild(formItem3);
                addItem(form);

                ellipse = new Ellipse();
                ellipse.fill = new SolidColor();
                ellipse.width = 300;
                ellipse.height = 200;
                ellipse.horizontalCenter = 0;
                ellipse.verticalCenter = 0;
                addItem(ellipse);

                fxAnimateColor = new FxAnimateColor();
                fxAnimateColor.colorFrom = color1.selectedColor;
                fxAnimateColor.colorTo = color2.selectedColor;
                fxAnimateColor.target = ellipse.fill;
            }

            private function color1_change(evt:ColorPickerEvent):void {
                fxAnimateColor.colorFrom = evt.color;
            }

            private function color2_change(evt:ColorPickerEvent):void {
                fxAnimateColor.colorTo = evt.color;
            }

            private function btn_click(evt:MouseEvent):void {
                fxAnimateColor.play();
            }
        ]]>
    </Script>

</FxApplication>