Creating a solid color fill on an Ellipse object in Flex Gumbo

The following example shows how you can create a solid color fill on an Flex Gumbo Ellipse object by setting the fill property to a SolidColor object.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/26/creating-a-solid-color-fill-on-an-ellipse-object-in-flex-gumbo/ -->
<FxApplication name="Ellipse_fill_solidColor_test"
        xmlns="http://ns.adobe.com/mxml/2009">
    <layout>
        <BasicLayout />
    </layout>

    <Form>
        <FormItem label="color:">
            <ColorPicker id="colorPicker"
                    selectedColor="black" />
        </FormItem>
        <FormItem label="alpha:">
            <HSlider id="slider"
                    minimum="0.0"
                    maximum="1.0"
                    value="1.0"
                    snapInterval="0.1"
                    tickInterval="0.1"
                    liveDragging="true" />
        </FormItem>
    </Form>

    <Ellipse id="ellipse"
            width="300"
            height="200"
            horizontalCenter="0"
            verticalCenter="0">
        <fill>
            <SolidColor color="{colorPicker.selectedColor}"
                    alpha="{slider.value}" />
        </fill>
    </Ellipse>

</FxApplication>

View source is enabled in the following example.

You can also set the SolidColor object’s color and alpha properties using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/26/creating-a-solid-color-fill-on-an-ellipse-object-in-flex-gumbo/ -->
<FxApplication name="Ellipse_fill_solidColor_test"
        xmlns="http://ns.adobe.com/mxml/2009">
    <layout>
        <BasicLayout />
    </layout>

    <Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
            import mx.events.SliderEvent;

            private function colorPicker_change(evt:ColorPickerEvent):void {
                solidColor.color = evt.color;
            }

            private function slider_change(evt:SliderEvent):void {
                solidColor.alpha = evt.value;
            }
        ]]>
    </Script>

    <Form>
        <FormItem label="color:">
            <ColorPicker id="colorPicker"
                    selectedColor="black"
                    change="colorPicker_change(event);" />
        </FormItem>
        <FormItem label="alpha:">
            <HSlider id="slider"
                    minimum="0.0"
                    maximum="1.0"
                    value="1.0"
                    snapInterval="0.1"
                    tickInterval="0.1"
                    liveDragging="true"
                    change="slider_change(event);" />
        </FormItem>
    </Form>

    <Ellipse id="ellipse"
            width="300"
            height="200"
            horizontalCenter="0"
            verticalCenter="0">
        <fill>
            <SolidColor id="solidColor" />
        </fill>
    </Ellipse>

</FxApplication>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/26/creating-a-solid-color-fill-on-an-ellipse-object-in-flex-gumbo/ -->
<FxApplication name="Ellipse_fill_solidColor_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        initialize="init();">
    <layout>
        <BasicLayout />
    </layout>

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

            private var colorPicker:ColorPicker;
            private var slider:HSlider;
            private var ellipse:Ellipse;
            private var solidColor:SolidColor;

            private function init():void {
                colorPicker = new ColorPicker();
                colorPicker.selectedColor = 0x000000; // black
                colorPicker.addEventListener(ColorPickerEvent.CHANGE, colorPicker_change);

                slider = new HSlider();
                slider.minimum = 0.0; // 0%
                slider.maximum = 1.0; // 100%
                slider.value = 1.0;
                slider.snapInterval = 0.1;
                slider.tickInterval = 0.1;
                slider.liveDragging = true;
                slider.addEventListener(SliderEvent.CHANGE, slider_change);

                var formItem1:FormItem = new FormItem();
                formItem1.label = "color:";
                formItem1.addChild(colorPicker);

                var formItem2:FormItem = new FormItem();
                formItem2.label = "alpha:";
                formItem2.addChild(slider);

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

                solidColor = new SolidColor();

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

            private function colorPicker_change(evt:ColorPickerEvent):void {
                solidColor.color = evt.color;
            }

            private function slider_change(evt:SliderEvent):void {
                solidColor.alpha = evt.value;
            }
        ]]>
    </Script>

</FxApplication>

Tagged as: fill, Gumbo